CommunityApp/pagesM/pages/order_pay.vue

<template>
  <view class="pageBg" v-if="waitShow">
    <block v-if="emptyType==0">
      <view class="order_pay_info">
        <view class="item_info_box">
          <text class="type_name">订单编号</text>
          <text class="type_value">{{orderSns}}</text>
        </view>
        <view class="item_info_box">
          <text class="type_name">有效时间</text>
          <text class="type_value">{{prePayOrder.expireDate}} 后自动取消</text>
        </view>
        <view class="item_info_box">
          <text class="type_name">支付金额</text>
          <text class="type_value">￥{{prePayOrder.amount}}</text>
        </view>
      </view>

      <view class="order_pay_methods">
        <view class="item_info_box" v-for="(item,index) in prePayOrder.payWays" :key="index">
          <view class="type_name">
            <image :src="item.logo" class="wx_pay_icon" mode="aspectFit"></image>
            <text>{{item.name}}</text>
          </view>
          <image class="operation_icon" src="http://139.9.103.171:1888/img/image/selected_icon.png"></image>
        </view>
      </view>

      <view class="bottomHeight" :style="footSafe"></view>
      <view class="bottom" :style="footSafe">
        <view class="bottomLeft">
          <text class="money_text">合计： <text class="money"><text class="unit">￥</text>{{prePayOrder.amount}}</text></text>
        </view>
        <view class="bottomRight">
          <view class="orderConfirm" @tap="payOrder">立即支付</view>
        </view>
      </view>
    </block>
    <DtEmpty :type="emptyType"/>
  </view>
</template>
<script>
import DtEmpty from '../comps/dt_empty.vue'
export default {
  components:{
    DtEmpty
  },
  data() {
    return {
      orderSns: [],
      prePayOrder: {},
      waitShow: false,
      payFlag:'',
    }
  },
  computed: {
    footSafe() {
      return `padding-bottom:${this.safeAreaBottom}px`;
    }
  },
  methods: {
    async wxappGo() {
      try{
        let data = {}
        data._isShowLoading = true
        data._isReject = true
        data.orderSns = this.orderSns;
        data.memberId = this.$auth.getMemberId();
        let resp = await this.$api.wxappGo(data)
        this.emptyType=0
        this.prePayOrder = resp;
        this.waitShow = true;
      }catch(err){
        this.emptyType=0
        this.$dialog.alert({
          content:err.errmsg||'暂无数据~'
        })
      }
    },

    async payOrder() {
      if (this.prePayOrder.expireDate) {
        let time = (this.$util.createDate(this.prePayOrder.expireDate)).getTime();
        let now = new Date().getTime();
        if (now >= time) {
          this.$dialog.alert({
            content: '支付已经过期,请重新购买',
            confirmText: '我知道了',
            success: (res) => {
              console.log(res);
              if (res.confirm) {
                uni.navigateBack({ delta: 1 })
              }
            }
          });
          return
        }
      }
      let data = {};
      data.orderSns = this.prePayOrder.orderSns;

      let res = await this.$api.wxappUnifiedOrder(data);
      let tradeNo = res.tradeNo;
      let wxPayRes = await this.$api.wxPay(res.payData);
      console.log(wxPayRes);
      let params = {
        amount: this.prePayOrder.amount,
        tradeNo: tradeNo,
        orderSns: this.prePayOrder.orderSns[0],
        payFlag: this.payFlag
      }
      if (wxPayRes.errMsg == "requestPayment:ok") {
        this.$util.refreshPage(['pages/mine','pages/mine_order_list'])
        //支付成功
        params.state = 1;
        uni.redirectTo({
          url: "/pagesM/pages/pay_success?" + this.$util.serialize(params)
        });
      } else {
        params.state = 0;
        uni.redirectTo({
          url: "/pagesM/pages/pay_success?" + this.$util.serialize(params)
        });
      }
    },

    onLoadPage(options) {
	  wx.hideShareMenu();
      this.orderSns = options.orderSns ? JSON.parse(options.orderSns) : [];
      this.payFlag=options.payFlag;
      this.wxappGo();
    },

  },
}
</script>

<style lang="scss" scoped>
.item_info_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30upx;
  align-items: center;
  box-sizing: border-box;
  border-top: 1upx solid #e5e5e5;
  .type_name {
    color: #666666;
    font-size: 28upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .wx_pay_icon {
      width: 50upx;
      height: 50upx;
      margin-right: 20upx;
    }
  }
  .type_value {
    color: #333;
    font-size: 28upx;
    flex: 1;
    text-align: right;
    margin-left: 40upx;
  }
  .operation_icon {
    width: 40upx;
    height: 40upx;
  }
}

.order_pay_info {
  background: #fff;
  .item_info_box:first-child {
    border-top: none;
  }
}
.order_pay_methods {
  background: #fff;
  margin-top: 20upx;
  .item_info_box:first-child {
    border-top: none;
  }
}

.bottomHeight {
  height: 120upx;
}
.bottom {
  height: 98upx;
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 30upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 2upx solid rgb(238, 238, 238);
  .bottomLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 26upx;
    .money_text {
      color: #333333;
      padding-left: 30upx;
    }
    .money {
      color: #d32222;
      font-size: 40upx;
      .unit {
        font-size: 26upx;
      }
    }
  }
  .bottomRight {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    .orderConfirm {
      background: $dt-color-primary;
      width: 210upx;
      text-align: center;
      height: 98upx;
      line-height: 98upx;
      color: white;
      box-sizing: border-box;
      font-size: 30upx;
    }
  }
}
</style>