Kirin_mp/pages/orders/confirm.vue

<template>
  <view class="whole">
    <view class="pay">
      <view class="header">
        <div>
          <view class="pay">支付金额</view>
          <view class="payNum">
            <span style="font-size: 34rpx;">￥</span>{{price}}
          </view>
        </div>
      </view>
      <view class="listPay">
        <uni-icons type="weixin" size="60rpx" color="#00aa00"></uni-icons>
        <view class="text">
          <view class="wx">微信支付</view>
          <view class="subWx">推荐使用微信支付</view>
        </view>
        <view class="btn">
          <label class="radio">
            <radio value="1" :checked="boolWx"
                   color="#FFCC33" style="transform:scale(0.7)"
                   @click="changePayType(1)" />
          </label>
        </view>
      </view>
<!--      <view class="listPay">
        <uni-icons type="weibo" size="60rpx" color="#ff5500"></uni-icons>
        <view class="text">
          <view class="wx">线下支付(到付)</view>
        </view>
        <view class="btn">
          <label class="radio">
            <radio value="2" :checked="boolWb"
                   color="#FFCC33" style="transform:scale(0.7)"
                   @click="changePayType(3)" />
          </label>
        </view>
      </view>-->
      <view class="bootom">
        <button type="warn" style="color: #fff;" @click="confirm">确认支付</button>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      boolWx: true,
      boolWb: false,
      payType: 1, //支付类型
      price: 0, //支付金额
      orderNo: "", //订单号
      parentOrderNo: "", //父订单号
      submiting: false//控制再次确认支付的弹出框
    }
  },
  onLoad(options) {
    //接受参数
    let orderInfo =  options.params;
    if( orderInfo ){
      //解密参数
      orderInfo = decodeURIComponent(orderInfo);
      //转成js数组对象
      orderInfo	=  JSON.parse(orderInfo);
    }
    this.price = orderInfo.pay_total
    if (orderInfo.order_id) {
      this.orderNo = orderInfo.order_id
    } else {
      this.parentOrderNo = orderInfo.snowflake_id
    }
  },
  methods: {
    // 选择支付方式
    changePayType(type) {
      if(1==type){
        this.boolWx=true;
        this.boolWb=false;
      }else{
        this.boolWx=false;
        this.boolWb=true;
      }
      this.payType = type
      console.log(this.payType,"this.payType");
    },
    // 确认支付
    confirm() {
      const that = this;
      //微信支付
      if(1===that.payType){
        that.submiting = true;
        this.pay();
      }
    },
    //调起微信支付
    pay(){
      uni.login({
        provider: 'weixin',
        success: (loginRes) => {
          // 登录成功，获取用户code
          const { code } = loginRes;
          // 微信支付下单
          this.$http.request('api/wechat_pay/pay',{code:code,order_id:this.orderNo},'post').then((e)=>{
            const price = this.price
            // 成功的话
            if( e.code == 'success'){
              //获取openid
              // 授权成功以后，调用登录
              //调用微信官方支付接口弹出付款界面,输入密码扣款
              wx.requestPayment({
                timeStamp: e.data.timeStamp,  //时间戳
                nonceStr:  e.data.nonceStr,   //随机字符串
                package:   e.data.package,    //prepay_id
                signType:  e.data.signType,   //签名算法MD5
                paySign:   e.data.paySign,    //签名
                success:function (res) {
                  if (res.errMsg == "requestPayment:ok"){
                    console.log('支付成功3', price)
                    uni.navigateTo({url:`/pages/orders/completion?price=${price}`});
                  }else{
                    console.log('支付失败')
                    uni.showToast({
                      title: '支付失败',
                      icon: 'none'
                    });
                  }
                },
                fail:function (res) {
                  console.log('支付失败', res)
                  uni.showToast({
                    title: '支付失败',
                    icon: 'none'
                  });
                }
              })

            }else{
              console.log('支付失败2', e)
              uni.showToast({
                title: '支付失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.log('uni.login 接口调用失败，无法获取openid', err);
          uni.showToast({
            title: '支付失败',
            icon: 'none'
          });
        }
      });
    },
  }
}
</script>

<style lang="scss">
.whole {
  display: flex;
  justify-content: center;

  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    height: 300rpx;

    .pay {
      width: 100%;
      color: #717171;
    }

    .payNum {
      width: 100%;
      font-size: 44rpx;
      margin: 10rpx 0px 20rpx;
    }
  }

  .pay {
    width: 100%;

    .listPay {
      height: 130rpx;
      display: flex;
      align-items: center;

      .uni-icons {
        margin-left: 20rpx;
      }

      .text {
        width: 40%;
        margin: 0px 20rpx 0px;
      }

      .btn {
        width: 40%;
        text-align: right;
      }
    }

    .bootom {
      width: 90%;
      margin: auto;
      margin-top: 20rpx;
    }
  }

}
</style>