orderPayment.vue

<template>
	<view>
		<view class="middle" v-show="orderList.length>0">
			<view class="middle-wrap">
				<view  v-for="item of orderList" :key="item.id" class="product">
					<view>
						<text> {{ item.merchantName }}（{{ item.productName }}） </text>

						<text>
							<text style="font-size:24rpx;">¥</text>{{ item.unitPrice }} <text>x</text> {{ item.orderNum }}
							<text style="margin-top:10rpx;font-size:22rpx;display:block;color:#f45803;" v-if="item.depositReceived"> 押金：{{ item.depositReceived }} </text>
						</text>
					</view>
					<view class="coupon" v-if="item.pdDiscountMoney">
						<text> 券 </text> <text> <text style="font-size:24rpx;">-¥</text>{{ item.pdDiscountMoney }} </text>
					</view>
				</view>
				<view class="middle-money">
					<view> 实际支付 </view>
					<view>
						<text style="font-size:28rpx;">¥</text>
						{{ pdOrderMoney }} 
					</view>
				</view>
				<view class="middle-image">
					<!-- #ifdef MP-WEIXIN -->
					<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<image src="@/static/img/orderPayment/alipayLogo.png" style="width:70rpx;height:62rpx;" /> <view> 支付宝支付 </view>
					<!-- #endif -->
					<image src="@/static/img/orderPayment/input.png" style="width:32rpx;height: 32rpx;" />
				</view>
			</view>
		</view>
		<view v-show="errorMessage1||errorMessage2">
			错误1：{{errorMessage1}}
			错误2：{{errorMessage2}}
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<text>实付款 </text>
				<text v-show="pdOrderMoney"> 
					<text style="font-size: 28rpx;">¥</text>
					{{pdOrderMoney}}
				</text>
			</view>
			<view class="bottom-right">
				<u-icon name="chat" size="40" @click="makePhone()"></u-icon>
				<text @click="goPay()" :style="{ background: background }">去支付</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      orderList:[], //订单列表
      pdOrderMoney: '', //实际总价
      totalMoney: '', //原价总价
      errorMessage1: '', //错误信息1，接口成功返回的错误信息
      errorMessage2: '', //错误信息2，接口失败返回的错误信息
      payType: '', //支付类型
      timeStamp: '', //微信支付参数
      nonceStr: '',//微信支付参数
      package: '',//微信支付参数
      signType: '',//微信支付参数
      paySign: '',//微信支付参数
      orderInfo: '', //支付宝订单号
      background: '', //去支付的背景颜色
      orderId: '', //订单Id
      openid: '', //用户Id
      afterBuyUrl:'/pages/my/order/electronicTicket/electronicTicket', //支付成功后地址跳转,默认单票跳详情
      ifyukuaiCode: '' ,//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
      albumOrderdetail:'',//是否跳影集订单详情
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    this.payType = 33
    //#endif
    this.orderId=this.$commonjs.getKey(option,'orderId')
    this.ifyukuaiCode = option.ifyukuaiCode||''
    this.albumOrderdetail=option.albumOrderdetail||''
    this.openid = uni.getStorageSync('openid') || ''
    if (this.openid) {
      this.initDetail()
    } else {
      this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
    }
  },
  methods: {
    login() {
      //---登录
      uni.getProvider({
        service: 'oauth',
        success:proRes=>{
          uni.login({
            provider: proRes.provider[0],
            success: 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+uni.getStorageSync('appid'),
                      icon: 'none'
                    })
                  }
                }).catch(err => {
                  uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                  })
                })
              }
            }
          })
        }
      })
    },
    //---拨打电话
    makePhone() {
		  uni.makePhoneCall({
		    phoneNumber:'400-072-0368'
		  })
    },
    //---初始化产品信息，以及获取支付需要的参数
    initDetail() {
      let data = {
        orderId: this.orderId, //订单Id
        userId: this.openid, //用户Id
        payType: this.payType //支付类型
      }
      uni.showLoading({
        mask:true
      })
      this.$request('orderc/order/findOrderInfo', data).then(res => {
        if (res.code == '00') {
          if(this.albumOrderdetail==1){
            //主要跳转影集订单详情，暂时是前端写死
            this.afterBuyUrl='/pages/album/albumOrderdetail/albumOrderdetail'
          }else{
            if(res.data.orderType=='10'){
						  //组合票和联票跳订单列表
						  this.afterBuyUrl='/pages/my/order/orderList/orderList'
            }
          }
          //支付参数开始
          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){
            uni.navigateTo({
              url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
            })
          }
          this.errorMessage1 = 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'
          })
          this.errorMessage2=res.message
        }
      })
    },
    //----去支付
    goPay() {
      if (this.errorMessage1) {
        uni.showToast({
          title: this.errorMessage1,
          icon: 'none'
        })
        return
      }
      this.background = '#E6E6E6'
      setTimeout(() => {
        this.background = '#3688FF'
      }, 1000)
      // #ifdef MP-WEIXIN
      if(!this.timeStamp||!this.nonceStr||!this.package||!this.signType||!this.paySign){
        uni.showToast({
				  title: '缺少支付参数',
				  icon: 'none'
        })
        return
      }
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: this.timeStamp,
        nonceStr: this.nonceStr,
        package: this.package,
        signType: this.signType,
        paySign: this.paySign,
        success:res=>{
          uni.navigateTo({
            url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      //#endif

      // #ifdef MP-ALIPAY
      if(!this.orderInfo){
			  uni.showToast({
				  title: '缺少支付参数',
				  icon: 'none'
			  })
			  return
      }
      uni.requestPayment({
        provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
        orderInfo: this.orderInfo, // 支付宝订单号
        success: res=> {
          uni.navigateTo({
            url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      // #endif
    }
  }
}
</script>

<style>
.bigBox {
	height: 100%;
	background: #fafafc;
}
.middle {
	padding: 30rpx 24rpx 0 24rpx;
}
.middle-wrap {
	padding: 10rpx 24rpx 20rpx 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 0 15rpx #e6e6e8;
}
.product {
	border-bottom: 1px solid #e5e5e5;
	padding: 25rpx 0;
}
.product view {
	color: #000000;
	padding-left: 10rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.product view text:first-child {
	flex: 1;
}
.product view text:nth-child(2) {
	color: #666666;
	font-size: 28rpx;
	text-align: right;
}
.product view.coupon {
	color: #f9690e;
	margin-top: 10rpx;
}
.product view.coupon text {
	font-size: 30rpx;
}
.middle-money {
	height: 120rpx;
	color: #000000;
	border-bottom: 1px solid #e5e5e5;
	padding: 25rpx 0 25rpx 10rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: space-between;
}
.middle-money view:nth-child(2) {
	font-size: 24rpx;
	color: #666666;
}
.middle-money view:nth-child(2) {
	font-size: 36rpx;
	color: #f9690e;
	font-weight: bold;
}
.middle-image {
	margin-top: 50rpx;
	display: flex;
	align-items: center;
}
.middle-image > image:first-child {
	margin: 0 20rpx 0 10rpx;
}
.middle-image > view {
	flex: 1;
}
.bottom {
	position: fixed;
	bottom: 0;
	height: 100rpx;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
	width: 100%;
	display: flex;
	align-items: center;
}
.bottom-left {
	border-right: 1px solid #cccccc;
	padding-left: 40rpx;
	width: 40%;
}
.bottom-left text:nth-child(2) {
	font-size: 40rpx;
	color: #f9690e;
	margin-left: 10rpx;
	font-weight: bold;
}
.bottom-right {
	padding-left:30rpx;
	display: flex;
	width: 60%;
	padding-right:30rpx;
	align-items: center;
}
.bottom-right text:nth-child(2) {
	flex: 1;
	height: 70rpx;
	display: inline-block;
	text-align: center;
	line-height: 70rpx;
	background: #3688FF;
	color: #ffffff;
	margin-left: 30rpx;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>