rt_fhyx_user_miniapp/pages/shopping/paymentOrder.vue

<template>
  <view class="content">
    <view class="inner">
      <!-- 时间、价格 -->
      <view class="time-price">
        <text class="time">请在{{payLimitTime}}前完成支付</text>
        <view class="price-box">
          <text class="unit">¥</text>
          <text class="num" >{{payMoney.toFixed(2)}}</text>
        </view>
        <text class="desc" v-if="payType==2">代收金额{{payDelivery.toFixed(2)}}，请您在收到快递后支付尾款给快递人员。</text>
        <text class="desc" v-if="payType==3">货到付款金额{{payDelivery.toFixed(2)}}，请您在收到快递后支付给快递人员。</text>
      </view>
      <!-- 支付方式 -->
      <view class="pay-type">
        <view class="title">支付方式</view>
        <!-- 改价订单只能选择微信支付和物流代收 -->
        <radio-group  @change="payTypeChange" v-if="order.isEditMoney!=null&&order.isEditMoney==1">
          <view class="item"  >
            <view class="left"  >
              <image src="/static/images/wecha_pay.png" mode=""></image>
              <text class="text">微信支付</text>
            </view>
            <label>
              <radio :value="1" :checked="order.payType=='1'" />
            </label>
          </view>
          <view class="item"  >
            <view class="left">
              <image src="/static/images/pay_de.png" mode=""></image>
              <text class="text">物流代收</text>
            </view>
            <label>
              <radio  :value="2" :checked="order.payType=='2'" />
            </label>
          </view>
        </radio-group>

        <radio-group @change="payTypeChange" v-else-if="order.orderCreateType!=null&& order.orderCreateType==3">
          <view class="item"  >
            <view class="left" >
              <image src="/static/images/wecha_pay.png" mode=""></image>
              <text class="text">微信支付</text>
            </view>
            <label>
              <radio :value="1" :checked="order.payType=='1'" />
            </label>
          </view>
          <view class="item" >
            <view class="left">
              <image src="../../static/images/pay_de.png" mode=""></image>
              <text class="text">物流代收</text>
            </view>
            <label>
              <radio  :value="2" :checked="order.payType=='2'" />
            </label>
          </view>
          <view class="item" v-if="user!=null&&user.level==1 ">
            <view class="left">
              <image src="../../static/images/pay_1.png" mode=""></image>
              <text class="text">货到付款</text>
            </view>
            <label>
              <radio  :value="3" :checked="order.payType=='3'" />
            </label>
          </view>
        </radio-group>
        <radio-group @change="payTypeChange" v-else-if="order.orderCreateType!=null&& order.orderCreateType==2">
          <view class="item" v-if="payType==1||payType==4" >
            <view class="left" >
              <image src="/static/images/wecha_pay.png" mode=""></image>
              <text class="text">微信支付</text>
            </view>
            <label>
              <radio :value="1" :checked="order.payType=='1'" />
            </label>
          </view>
          <view class="item" v-if="payType==2||payType==4">
            <view class="left" >
              <image src="../../static/images/pay_de.png" mode=""></image>
              <text class="text">物流代收</text>
            </view>
            <label>
              <radio  :value="2" :checked="order.payType=='2'" />
            </label>
          </view>
          <view class="item" v-if="user!=null&&user.level==1 ">
            <view class="left">
              <image src="../../static/images/pay_1.png" mode=""></image>
              <text class="text">货到付款</text>
            </view>
            <label>
              <radio  :value="3" :checked="order.payType=='3'" />
            </label>
          </view>
        </radio-group>
        <radio-group @change="payTypeChange" v-else-if="order.orderCreateType!=null&&(order.orderCreateType==1)">
          <view class="item"  >
            <view class="left" >
              <image src="/static/images/wecha_pay.png" mode=""></image>
              <text class="text">微信支付</text>
            </view>
            <label>
              <radio :value="1" checked />
            </label>
          </view>
        </radio-group>
      </view>
      <!-- 订单详情查看 -->
      <view class="order-info">
        <view class="title">订单信息</view>
        <view class="item">
          <text class="label">订单编号</text>
          <view class="sn-box">
            <text class="text">{{order.orderCode}}</text>
            <view class="copy-btn" @click="copyOrderSn(order.orderCode)">复制</view>
          </view>
        </view>
        <view class="item">
          <text class="label">下单时间</text>
          <text class="text">{{order.createTime}}</text>
        </view>
        <view class="item">
          <text class="label">订单金额</text>
          <text class="text" v-if="order!=null">{{order.payPrice.toFixed(2)}}</text>
        </view>

        <!-- <view class="item">
          <text class="label">支付方式</text>
          <text class="text">微信支付</text>
        </view> -->

      </view>

    </view>
    <view class="btn-box">
      <view class="btn" @click="payOrder()">去支付</view>
      <view class="other-btn" >
        亲友代付
        <button  class="share" data-name="shareBtn" open-type="share">分享</button>
      </view>
    </view>
  </view>
</template>

<script>
import {getUserInfo} from '@/api/user'

import {getStoreConfig} from '@/api/common'
import {editPayType,pay,getStoreOrderById} from '@/api/storeOrder'
export default {
  data() {
    return {
      orderId:null,
      payDelivery:0,
      payMoney:0,
      config:null,
      payType:1,
      payLimitTime:null,
      order:null,
      user:null,
    }
  },
  onLoad(option) {
    this.orderId=JSON.parse(option.orderId);
    this.getStoreOrderById();
    this.getStoreConfig();
    this.getUserInfo();
    uni.showShareMenu({
      withShareTicket:true,
      //小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
      menus:["shareAppMessage"] //不设置默认发送给朋友
    })
  },
  //发送给朋友
  onShareAppMessage(res) {
    return {
      title: "帮TA支付",
      path: '/pages_user/user/otherPaymentOrder?orderId='+this.orderId,
      imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
    }

  },
  methods: {
    getUserInfo(){
      getUserInfo().then(
          res => {
            if(res.code==200){
              if(res.user!=null){
                this.user=res.user;
              }
            }else{
              uni.showToast({
                icon:'none',
                title: "请求失败",
              });
            }
          },
          rej => {}
      );
    },
    getStoreConfig(){
      getStoreConfig().then(
          res => {
            if(res.code==200){
              this.config=res.data
              console.log(this.config);
            }
          },
          rej => {}
      );

    },
    payTypeChange(e){
      this.editPayType(e.detail.value)
    },
    copyOrderSn(text) {
      // 复制方法
      uni.setClipboardData({
        data:text,
        success:()=>{
          uni.showToast({
            title:'内容已成功复制到剪切板',
            icon:'none'
          })
        }
      });
    },
    getStoreOrderById(){
      var data = {orderId:this.orderId};
      var that=this;
      uni.showLoading();
      getStoreOrderById(data).then(
          res => {
            if(res.code==200){
              console.log(res);
              uni.hideLoading();
              that.order=res.order;
              that.payLimitTime=res.payLimitTime;
              //套餐订单处理
              if(res.productPackage!=null){
                this.payType=res.productPackage.payType;
                console.log(this.payType)
                if(this.order.payType==4){
                  this.order.payType=1;
                }
              }
              this.editPayType(this.order.payType)

            }else{
              uni.showToast({
                icon:'none',
                title: res.msg,
              });
            }
          },
          rej => {}
      );

    },
    editPayType(payType){
      var data = {orderId:this.orderId,payType:payType};
      var that=this;
      uni.showLoading();
      editPayType(data).then(
          res => {
            if(res.code==200){
              console.log(res);
              uni.hideLoading();
              that.order=res.order;
              //this.payType=this.order.payType
              this.payMoney=this.order.payMoney;
              this.payDelivery=this.order.payDelivery;
            }else{
              uni.showToast({
                icon:'none',
                title: res.msg,
              });
            }
          },
          rej => {}
      );

    },
    otherPayOrder(){
      uni.navigateTo({
        url: '/pages_user/user/otherPaymentOrder?orderId='+this.orderId
      })
    },
    payOrder(){
      var data = {orderId:this.order.id,payType:this.order.payType};
      var that=this;
      uni.showLoading();
      pay(data).then(
          res => {
            if(res.code==200){
              console.log(res);
              if(res.payType==1||res.payType==2){
                var result=JSON.parse(res.result);
                uni.requestPayment({
                  provider: 'wxpay',
                  timeStamp: result.timeStamp,
                  nonceStr: result.nonceStr,
                  package: result.package,
                  signType: result.signType,
                  paySign: result.paySign,
                  success: function(res) {
                    uni.hideLoading();
                    uni.redirectTo({
                      url:"success?order="+JSON.stringify(that.order)
                    })
                  },
                  fail: function(err) {
                    uni.showToast({
                      icon:'none',
                      title:'fail:' + JSON.stringify(err),
                    });
                    // console.log('fail:' + JSON.stringify(err));
                    uni.hideLoading();
                  }
                });

                // uni.requestPayment({
                // 	provider: 'wxpay',
                // 	timeStamp: res.result.timeStamp,
                // 	nonceStr: res.result.nonceStr,
                // 	package: res.result.packageValue,
                // 	signType: res.result.signType,
                // 	paySign: res.result.paySign,
                // 	success: function(res) {
                // 		 uni.hideLoading();
                // 	  uni.redirectTo({
                // 	  	url:"success?order="+JSON.stringify(that.order)
                // 	  })
                // 	},
                // 	fail: function(err) {
                // 	uni.showToast({
                // 		icon:'none',
                // 		title:'fail:' + JSON.stringify(err),
                // 	});
                // 		console.log('fail:' + JSON.stringify(err));
                // 		uni.hideLoading();
                // 	}
                // });
              }
              else if(res.payType==3){
                uni.hideLoading();
                if(that.order.isPrescribe){
                  //如果是处方订单开处方
                  uni.redirectTo({
                    url:"prescribe?orderId="+that.order.id
                  })
                }
                else{
                  //如果是普通订单
                  uni.redirectTo({
                    url:"success?order="+JSON.stringify(that.order)
                  })
                }
              }

            }else{
              uni.showToast({
                icon:'none',
                title: res.msg,
              });
            }
          },
          rej => {}
      );

    }
  }
}
</script>

<style lang="scss">
page{
  height: 100%;
}
.content{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .inner{
    padding: 20upx;
    .time-price{
      box-sizing: border-box;
      padding: 50upx 0upx;
      background: #FFFFFF;
      border-radius: 16upx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .time{
        font-size: 32upx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 1;
        text-align: center;
      }
      .desc{
        margin: 30upx 0upx 15upx;
        font-size: 26upx;
        font-family: PingFang SC;
        color: #999999;
        line-height: 1;
        text-align: center;
      }
      .price-box{
        display: flex;
        align-items: flex-end;
        margin-top: 28upx;
        .unit{
          font-size: 32upx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FF6633;
          line-height: 1.3;
          margin-right: 10upx;
        }
        .num{
          font-size: 56upx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FF6633;
          line-height: 1;
        }
      }
    }
    .pay-type{
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 16upx;
      margin-top: 20upx;
      padding: 40upx 30upx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 28upx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 1;
        margin-bottom: 10upx;
      }
      .item{
        padding: 15upx 0upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          display: flex;
          align-items: center;
          image{
            width: 44upx;
            height: 44upx;
            margin-right: 20upx;
          }
          .text{
            font-size: 30upx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
            line-height: 1;
          }
        }
      }
    }
    .order-info{
      margin-top: 20upx;
      background: #FFFFFF;
      border-radius: 16upx;
      padding: 40upx 30upx;
      .title{
        font-size: 30upx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 1;
      }
      .item{
        margin-top: 40upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label{
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 1;
        }
        .text{
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #222222;
          line-height: 32upx;
        }
        .cont-text{
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
          .bold{
            color: #111111;
          }
        }
        .sn-box{
          display: flex;
          align-items: center;
          .copy-btn{
            width: 58upx;
            height: 32upx;
            line-height: 32upx;
            text-align: center;
            font-size: 22upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #222222;
            background: #F5F5F5;
            border-radius: 4upx;
            margin-left: 24upx;
          }
        }

      }
      .line{
        width: 100%;
        height: 1px;
        background: #F0F0F0;
        margin-top: 30upx;
      }
    }
  }
  .btn-box{
    height: 242upx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .btn{
      width: 91.73%;
      height: 88upx;
      line-height: 88upx;
      font-size: 30upx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      background: #2BC7B9;
      border-radius: 44upx;
      margin-bottom: 10rpx;
    }
    .other-btn{
      width: 91.73%;
      height: 88upx;
      line-height: 88upx;
      font-size: 30upx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #2BC7B9;
      border: 1rpx solid #2BC7B9;
      text-align: center;
      background: #FFFFFF;
      border-radius: 44upx;
      margin-bottom: 10rpx;
      position: relative;
      .share{
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
}

</style>