分销客户端支付页面开发

pages/payment/distributionPayment/distributionPayment.vue

 <template>
-	<view>
+	<view class="wrap">
 		<!-- 分销客户端扫码支付页面 -->
-		<view class="list">
-			<view>
-				<text>长江索道</text>
-				<text>单程票</text>
+		<view class="list" v-for="(item,index) in orderList" :key="index">
+			<view class="content">
+				<text>{{item.merchantName}}</text>
+				<text>{{item.productName}}</text>
 			</view>
 			
-			<view>
+			<view class="content">
 				<text>日期</text>
-				<text>2023-06-14</text>
+				<text>{{item.endPlayDate}}</text>
 			</view>
 			
-			<view>
+			<view class="content">
 				<text>数量</text>
-				<text>3</text>
+				<text>{{item.orderNum}}</text>
 			</view>
 			
 		</view>
 		
 		<view class="bottom">
-			<text>
-				
+			<text class="bottom-left" @click="makePhone()">
+				客服
+				<image src="@/static/img/orderPayment/customer.png" style="width: 96rpx;height: 96rpx;"></image>
 			</text>
 			
-			<text>
-				¥245
+			<view class="bottom-right">
+				<text class="money">
+				<text style="font-size: 32rpx;">¥</text>{{pdOrderMoney}}
 				</text>
 				
 				<text class="btn">
 					去支付
 				</text>
 			</view>
+			
+		</view>
 	</view>
 </template>
 
 <script>
 export default {
+  onLoad(option){
+    //#ifdef MP-WEIXIN
+    this.enterUrl = option.q
+    this.payType = 42
+    //#endif
+    
+    //#ifdef MP-ALIPAY
+    this.enterUrl = uni.getStorageSync('alipayQrCode')
+    this.payType = 33
+    //#endif
+    if (this.enterUrl) {
+      this.orderId = this.getUrlKey('orderId')
+    } else {
+      this.orderId = option.orderId||''
+    }
+    this.openid = uni.getStorageSync('openid') || ''
+    if (this.openid) {
+      this.initDetail()
+    } else {
+      this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
+    }
+  },
   data() {
     return {
-				
+      enterUrl: '', //进入页面路由
+      orderList: [], //订单列表
+      pdOrderMoney: '', //实际总价
+      errorMessage: '', //错误信息
+      bodyShow: false, //控制初始化数据成功显示
+      payType: '', //支付类型
+      timeStamp: '', //支付参数
+      nonceStr: '',
+      package: '',
+      signType: '',
+      paySign: '',
+      orderInfo: '', //支付宝订单号
+      background: '', //去支付的背景颜色
+      orderId: '', //订单Id
+      openid: '', //用户Id
+      afterBuyUrl: '', //支付成功后地址跳转
     }
   },
   methods: {
+    //---拨打电话
+    makePhone(){
+      uni.makePhoneCall({
+        phoneNumber: '4000720368' 
+      })
+    },
+    login() {
+		  //---登录
+		  let _this = this
+		  uni.getProvider({
+		    service: 'oauth',
+		    success(proRes) {
+		      uni.login({
+		        provider: proRes.provider[0],
+		        success: function(res) {
+		          if (res.code) {
+		            let source = ''
+		            if (proRes.provider[0] == 'weixin') {
+		              source = 3
+		            } else if (proRes.provider[0] == 'alipay') {
+		              source = 4
+		            }
+		            let data = {
+		              code: res.code,
+		              source, //微信小程序3，支付宝小程序4
+		              appid:uni.getStorageSync('appid')||''
+		            }
+		            if(uni.getStorageSync('enterOptions').query){
+								  data.companyId=uni.getStorageSync('enterOptions').query.companyId||''
+		            }
+		            _this.$request('wechat/wx/getUserInfoByCode', data)
+		              .then(res => {
+		                if (res.code == '00') {
+		                  _this.openid = res.data.openid
+		                  uni.setStorageSync('openid', _this.openid)
+		                  _this.initDetail()
+		                } else {
+		                  uni.showToast({
+		                    title: res.message,
+		                    icon: 'none'
+		                  })
+		                }
+		              })
+		              .catch(err => {
+		                uni.showToast({
+		                  title: '登录失败',
+		                  icon: 'none'
+		                })
+		              })
+		          }
+		        }
+		      })
+		    }
+		  })
+    },
+    initDetail() {
+		  //---初始化产品信息，以及获取支付需要的参数
+		  let data = {
+		    orderId: this.orderId, //订单Id
+		    userId: this.openid, //用户Id
+		    payType: this.payType //支付类型
+		  }
+		  this.$request('orderc/order/findOrderInfo', data).then(res => {
+		    if (res.code == '00') {
+		      if(res.data.orderType=='10'){
+		        //组合票和联票跳订单列表
+		        this.afterBuyUrl='/pages/my/order/orderList/orderList'
+		      }else{
+		        //单票跳详情
+		        this.afterBuyUrl='/pages/my/order/electronicTicket/electronicTicket'
+		      }
+		      this.bodyShow = true
+		      //支付参数开始
+		      this.timeStamp = res.data.timestamp
+		      this.nonceStr = res.data.noncestr
+		      this.package = res.data.package
+		      this.signType = res.data.signType
+		      this.paySign = res.data.sign
+		      //支付宝入参
+		      this.orderInfo = res.data.payInfo || ''
+		      //支付参数结束
+		      this.pdOrderMoney = res.data.pdOrderMoney
+		      if (this.pdOrderMoney == 0 && res.data.subOrderType == -1) {
+		        this.afterBuyUrl='/pages/my/order/electronicTicket/electronicTicket'
+		        uni.navigateTo({
+		          url: '/pages/payment/paySuccess/paySuccess?orderId=' + _this.orderId+'&afterBuyUrl=' + _this.afterBuyUrl
+		        })
+		      }
+		      this.errorMessage = res.data.errorMessage
+		      this.totalMoney = res.data.totalMoney
+		      this.orderList = res.data.orderList||[]
+          if(this.orderList.length==0){
+            //单票
+            this.orderList.push({
+              merchantName:res.data.merchantName,
+              productName:res.data.productName,
+              unitPrice:res.data.unitPrice,
+              orderNum:res.data.orderNum,
+              depositReceived:res.data.depositReceived,
+              pdDiscountMoney:res.data.pdDiscountMoney,
+              endPlayDate:res.data.endPlayDate
+            })
+          }
+		    } else {
+		      uni.showToast({
+		        title: res.message,
+		        icon: 'none'
+		      })
+		    }
+		  })
+    },
+    goPay() {
+		  //-------------------------------------------------------去支付
+		  let _this = this
+		  if (this.errorMessage) {
+		    uni.showToast({
+		      title: this.errorMessage,
+		      icon: 'none'
+		    })
+		    return
+		  }
+		  this.background = '#E6E6E6'
+		  setTimeout(() => {
+		    this.background = 'f9690e'
+		  }, 1000)
 		
+		  // #ifdef MP-WEIXIN
+		  uni.requestPayment({
+		    provider: 'wxpay',
+		    timeStamp: this.timeStamp,
+		    nonceStr: this.nonceStr,
+		    package: this.package,
+		    signType: this.signType,
+		    paySign: this.paySign,
+		    success: function(res) {
+		      uni.navigateTo({
+		        url: '/pages/payment/paySuccess/paySuccess?orderId=' + _this.orderId+'&afterBuyUrl=' + _this.afterBuyUrl
+		      })
+		    },
+		    fail: function(err) {
+		      uni.showToast({
+		        title: err.errMsg,
+		        icon: 'none'
+		      })
+		    }
+		  })
+		  //#endif
+		
+		  // #ifdef MP-ALIPAY
+		  uni.requestPayment({
+		    provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
+		    orderInfo: this.orderInfo, // 支付宝订单号
+		    success: function(res) {
+		      uni.navigateTo({
+		        url: '/pages/payment/paySuccess/paySuccess?orderId=' + _this.orderId+'&afterBuyUrl=' + _this.afterBuyUrl
+		      })
+		    },
+		    fail: function(err) {
+		      uni.showToast({
+		        title: err.errMsg,
+		        icon: 'none'
+		      })
+		    }
+		  })
+		  // #endif
+    },
+    getUrlKey(name) {
+		  //---------------------------------------------------------------获取url
+		  return (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
+    }
   }
 }
 </script>
 
 <style scoped>
-
+.wrap{
+	padding: 0 24rpx 160rpx 24rpx;
+}
+.list{
+	background: #fff;
+	padding: 24rpx;
+	border-radius: 5rpx;
+	margin-top: 30rpx;
+}
+.list>view:not(:first-child){
+	margin-top: 30rpx;
+}
+.content{
+	display: flex;
+	align-items: center;
+}
+.content text:first-child{
+	width: 50%;
+	font-size: 28rpx;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.bottom{
+	position: fixed;
+	bottom: 0;
+	background: #fff;
+	display: flex;
+	align-items: center;
+	height: 120rpx;
+	width: 100%;
+	padding: 0 24rpx;
+	justify-content:space-between;
+	left: 0;
+}
+.bottom-left{
+	width: 30%;
+}
+.bottom-right{
+	flex: 1;
+	text-align: right;
+}
+.money{
+	color: #FE7C00;
+	font-weight: bold;
+	font-size: 40rpx;
+}
+.btn{
+	width: 320rpx;
+	height: 80rpx;
+	line-height: 68rpx;
+	font-size: 32rpx;
+	border-radius:24rpx;
+	font-weight: bold;
+	margin-left: 40rpx;
+}
 </style>