heating-pay/pages/heatingPage/pay.vue

<template>
  <view class="content">
    <view class="supplyInfo">
	  <view class="tel flex">
	    <label>缴费名称：</label>
	    <input type="text" class="card input" v-model="payInfo.name" disabled/>
	  </view>
	  <view class="tel flex">
	    <label>订单编号：</label>
	    <input type="text" class="card input" v-model="payInfo.code" disabled/>
	  </view>
	  <view class="tel flex">
	    <label>住宅地址：</label>
	    <input type="text" class="card input" v-model="payInfo.address" disabled/>
	  </view>
	  <view class="tel flex">
	    <label>户主姓名：</label>
	    <input type="text" class="card input" v-model="payInfo.owner_name" disabled/>
	  </view>
	  <view class="tel flex">
	    <label>住宅面积：</label>
	    <input type="text" class="card input" v-model="payInfo.area" disabled/>
	  </view>
	  <view class="tel flex">
	    <label>缴费类型：</label>
		<radio-group  @change="payChange">
		  <radio value="1" :checked="payInfo.type!=2" style="margin-right: 30rpx;transform: scale(0.85);" >金额</radio>
		  <radio value="2" :checked="payInfo.type==2" style="transform: scale(0.85);" :disabled="payInfo.status==1 || payInfo.status==3">空置</radio>
		</radio-group>
	  </view>
	  <view class="tel flex">
	    <label>缴费金额：</label>
	    <input type="text" class="card input" id="real_fee" v-model="payInfo.real_fee" disabled/>
	  </view>
	   <view class="tel flex">
	     <label>订单状态：</label>
	     <input type="text" class="card input" id="status" :style="{color:statusColor[payInfo.status]}" v-model="statusObj[payInfo.status]"  disabled/>
	   </view>
	   <view class="tel flex" v-if="payInfo.invoice_status > 0">
	     <label>发票抬头：</label>
	     <input type="text" class="card input" id="real_fee" v-model="payInfo.invoice" disabled/>
	   </view>
	   <view class="tel flex" v-if="payInfo.invoice_status > 0">
	     <label>发票备注：</label>
	     <input type="text" class="card input" id="real_fee" v-model="payInfo.invoice_remark" disabled/>
	   </view>
	   <view class="tel flex" v-if="payInfo.invoice_status > 0">
	     <label>发票状态：</label>
	     <input type="text" class="card input" id="real_fee" v-model="invoiceStatusStr" disabled/>
	   </view>
			
    </view>
    <button class="submit" style="margin-bottom:20rpx" @tap="paySubmit" v-if="needPay">{{payStatusStr}}</button>
	<button class="submit" style="margin-top:20rpx" @tap="openPopup" v-if="needInvoice">申请开票</button>
	<uni-popup ref="popup" :mask-click="false">
		  <view class="popup-box">
			  <view>
				  <view class="popup-title">申请开票</view>
				  <view class="popup-content-box">
				  		  <view class="popup-content">
				  			  <view class="popup-type">
				  			  	  <view>开票抬头：</view><input type="text" v-model="invoiceName" />
				  			  </view>
				  			  <view class="popup-type">
				  			  	  <view>备注：</view><input type="text" v-model="invoiceRemark" />
				  			  </view>
				  		  </view>
				  </view>
			  </view>
			  <view class="popup-footer">
			  	<button class="popup-submit" @click="submitInvocie">提交</button>
			  </view>
		  </view>
		</uni-popup>
  </view>
</template>
<script>
import md5 from "@/common/md5.js";
export default {
  data() {
    return {
      payInfo: {
      },
	  payStatus:0,
	  payStatusStr : '缴费',
	  needPay : 1,
	  needInvoice : 0,
	  invoiceStatusStr : "待开票",
	  pay_code : '',
	  statusObj:getApp().globalData.statusObj,
	  statusColor:getApp().globalData.statusColor,
	  invoiceName : '',
	  invoiceRemark : '',
    };
  },
  onLoad(option) {
	this.getPayDetail(option.id);
	this.pay_code = option.id;
  },
  methods: {
	reload(){
		this.getPayDetail(this.pay_code);
	},
    getPayDetail(payId) {
     
	  let url = getApp().makeApiUrl("user",'user','get_order_info');
      let postData = {
        code:payId,
        openId: getApp().globalData.open_id,
      };
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: postData,
        success: (res) => {
          if (res.data.code === 200) {
               this.payInfo = res.data.data;
			   this.payInfo.address = this.payInfo.estate_name  + this.payInfo.building_name + this.payInfo.unit + this.payInfo.room;
			   if (this.payInfo.status > 0 && this.payInfo.invoice_status == 0){
				   this.needInvoice = 1;
			   }
			   else{
				   this.needInvoice = 0;
			   }
			   if (this.payInfo.status == 2){
				   this.payStatusStr = '补充缴费';
			   }
			   if (this.payInfo.status == 1 || this.payInfo.status == 3){
				   this.needPay = 0;
			   }
			   if (this.payInfo.invoice_status == 2){
				   this.invoiceStatusStr = "已开票";
			   }
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2500,
            });
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    payChange(e){
		let v = e.detail.value;
		if (v == 2)
		{
			let value = this.payInfo.part_fee - this.payInfo.reduction;
			this.payInfo.real_fee = value;
		}
		else
		{
			let value = this.payInfo.total_fee - this.payInfo.reduction;
			this.payInfo.real_fee = value;
		}
		this.payInfo.type = e.detail.value;
	},
	paySubmit(){
		let that = this;
		let type = this.payInfo.type;
		if (this.payInfo.status == 2)
		{
			type = 3;
		}
		let url = getApp().makeApiUrl("user",'user','prepay');
		let postData = {
		  code:this.pay_code,
		  type : type,
		  openId: getApp().globalData.open_id,
		};
		uni.request({
		  url: url,
		  method: "POST",
		  header: {
		    "content-type": "application/x-www-form-urlencoded",
		  },
		  data: postData,
		  success: (res) => {
		    if (res.data.code === 200) {
				let r = res.data.data;
				let timeStamp = Date.now().toString();
				let nonceStr = getApp().randomStr(32);
				let p = 'prepay_id=' + r.prepay_id;
				let appId = "wx3cf5d0fd376116e2";
				let key = 'd2452k56khlk987HJ456uy7856HKJsd3';    //支付的key
				
				let origin = "appId="+appId+"&nonceStr="+nonceStr+"&package="+p+"&signType=MD5&timeStamp="+timeStamp+"&key="+key;
				let md5Sign = getApp().MD5(origin);
//		        console.log('md5Sign_origin:' + origin);
//				console.log('md5Sign:' + md5Sign);
				 uni.requestPayment({
				 	appId: appId,
				 	timeStamp: timeStamp,
				 	nonceStr: nonceStr,
				 	package: p,
				 	signType: 'MD5',
				 	paySign: md5Sign,
				 	success: function (res) {
				 		console.log('success:' + JSON.stringify(res));
				 		setTimeout(function() {
				 			that.reload();
				 		}, 500);
				 	},
				 	fail: function (err) {
				 		console.log('fail:' + JSON.stringify(err));
				 	}
				 });
				 
				 
		    } else {
		      uni.showToast({
		        title: res.data.msg,
		        icon: "none",
		        duration: 2500,
		      });
		    }
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});
		
			
	  //支付这里缺少签名参数 还需要后台配合调用微信那边的接口
	 //参考https://github.com/dcloudio/H5P.Server/tree/master/payment
			
	},
	submitInvocie(){
		
		this.closePopup();
		
	},
	openPopup() {
		  this.$refs.popup.open('center');
	  },
	closePopup() {
		  this.$refs.popup.close();
		  let that = this;
		  let url = getApp().makeApiUrl("user",'user','invoice');
		  let postData = {
		    code:this.pay_code,
			invoice : this.invoiceName,
			remark : this.invoiceRemark,
		    openId: getApp().globalData.open_id,
		  };
		  uni.request({
		    url: url,
		    method: "POST",
		    header: {
		      "content-type": "application/x-www-form-urlencoded",
		    },
		    data: postData,
		    success: (res) => {
		      if (res.data.code === 200) {
				  
		           uni.showToast({
		             title: res.data.msg,
		             icon: "none",
		             duration: 2500,
		           });
				  
				   setTimeout(function() {
				   	 that.reload();
				   }, 500);
				   
		      } else {
		        uni.showToast({
		          title: res.data.msg,
		          icon: "none",
		          duration: 2500,
		        });
		      }
		    },
		    fail: () => {
		      console.log("连接失败");
		    },
		  });
	  },	
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 28rpx;
  font-weight: 200;
  padding: 1% 2%;
  .title {
    font-size: 30rpx;
    margin: 4% 0;
  }
  label {
    display: inline-block;
    width: 25%;
    vertical-align: middle;
  }
  .card {
    background-color: rgb(248, 247, 247);
    border-radius: 10rpx;
  }
  .flex {
    display: flex;
    align-items: center;
    margin-bottom: 2%;
  }
  .input {
    padding: 0 2%;
    margin: 2% 0;
    display: inline-block;
    width: 80%;
    height: 70rpx;
  }
  .supplyInfo {
    border-radius: 40rpx;
    padding: 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
	margin: 30rpx 0 30rpx 0;

  }
  .info {
    margin-top: 2%;
    border-radius: 40rpx;
    padding: 2% 4%;
    box-shadow: rgba(100, 100, 111, 0.2) 14rpx 14rpx 40rpx 14rpx;
  }
  .submit {
    color: white;
    font-weight: normal;
    width: 55%;
    border-radius: 20rpx;
    background-color: #02a7f0;
    margin: 120rpx auto;
  }
}
 .popup-box {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
  }
  .popup-title {
	  text-align: center;
	  font-weight: bold;
	  height: 30px;
	  border-bottom: 1px solid #d8d8d8;
  }
  .popup-content {
	  font-size: 28rpx;
	  padding: 10rpx 0 10rpx 0;
  }
  .popup-type {
	  display: flex;
	  height: 80rpx;
	  align-items: center;
	  margin-top: 60rpx;
		view {
			width: 30%; 
		}
		input {
			border: 1px solid #d7d7d7;
			width: 60%;
			border-radius: 5rpx;
			padding-left: 10rpx;
			height: 56rpx;
		}
  }
  .popup-footer {
	  display: flex;
	  button{
		  font-size: 26rpx;
		  height: 60rpx;
		  width: 150rpx;
		  line-height: 60rpx;
		  color: #FFFFFF;
	  }
  }
  .popup-cancel {
	  background-color: #AAAAAA;
  }
  .popup-submit {
	  background-color: #249CD3;
  }
</style>