WECHAT-UNIAPP/pages/succeed1/succeed1.vue

<template>
  <view class="succeed">
    <view class="bg">
      支付成功
    </view>
    <view class="container">

      <view class="voucher">
        <view class="title">支付凭证</view>
        <view class="tip">请主动提供给加油员查看</view>
        <view class="dashed">
        </view>
        <view class="arch">
          <text></text>
          <text></text>
        </view>
        <view class="content">
          <view class="oil">
            <text>油品</text>
            <text>92#</text>
          </view>
          <view class="origin">
            <text>应付</text>
            <text>￥10.00</text>
          </view>
          <view class="amt">
            <text>实付</text>
            <text>￥11.20</text>
          </view>
          <view class="time">
            <text>时间</text>
            <text>11:20:00</text>
          </view>
        </view>

      </view>

      <view class="">
        <view class="focus"> 更多优惠，请关注我们的公众号 </view>
        <official-account class="official"></official-account>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex";

  export default {
    data() {
      return {
        payType: 2, // 1电子卡 2微信
        wxPayLoading: false,
        creditPayLoading: false,
        cardTypeTranslate: ['', '汽油卡', '柴油卡', '非油品卡', 'LNG', 'CNG']
      };
    },
    computed: {
      // ...mapState(["orderInfo", "selectedGas", "openId", "stationId"]),
      // ...mapState({
      //   orderInfo: state => state.order.orderInfo,
      //   openId: state => state.user.openId,
      //   stationId: state => state.station.stationId,
      //   selectedGas: state => state.station.selectedGas,
      // }),
      availableCredit() {
        if (this.orderInfo.oilsCardFlag == 0) {
          return false
        }
        if ((+this.orderInfo.balance) < (+this.orderInfo.amt_dzk)) {
          return false
        }
        return true
      },
      creditFlag() {
        return this.orderInfo.oilsCardFlag == '1' ? true : false
      }
    },
    created() {
      // console.log(this.orderInfo)
      // this.initPayType()
    },
    mounted() {
      // this.$refs.pay.close()
      // this.$refs.coupon.open();
    },
    methods: {
      ...mapMutations(["clearLabelId"]),
      initPayType() {
        if (this.orderInfo.oilsCardFlag == 1 && this.availableCredit) {
          this.payType = 1
        }
      },
      closeCoupon() {
        this.$refs.coupon.close();
      },
      async creditPay() {
        this.creditPayLoading = true;
        if (this.payType === 2) {
          this.wxPay()
          return
        }
        uni.showLoading({
          title: '支付中...',
          mask: true
        });
        try {
          const creditPayData = await this.$Request({
            url: "/dzkPaySet",
            data: {
              "ordNo": this.orderInfo.ordNo
            },
          })
          console.log(creditPayData)
          if (creditPayData.retCode !== 0) {
            throw new Error(creditPayData.message)
          }
          this.creditPayLoading = false;
          uni.hideLoading();
          uni.redirectTo({
            url: "/pages/succeed/succeed"
          })
        } catch (e) {
          this.creditPayLoading = false;
          uni.hideLoading();
          this.showToastAndGoback(e.toString())
        }
      },
      async wxPay() {
        this.wxPayLoading = true;
        uni.showLoading({
          title: '拉取支付...',
          mask: true
        });
        try {
          const JhPayData = await this.$Request({
            url: "/getJhPayInfo",
            method: "POST",
            data: {
              "ordNo": this.orderInfo.ordNo,
              "openId": this.openId,
              "stationId": this.stationId,
              "userType": "1"
            },
          })
          console.log(JhPayData)
          if (JhPayData.retCode !== 0) {
            throw new Error("请求信息失败")
          }
          if (JhPayData.data.code !== '0000') {
            throw new Error(JhPayData.data.msg)
          }

          let timeStamp = JhPayData.data.respData.payTimeStamp;
          let nonceStr = JhPayData.data.respData.paynonceStr;
          let payPackage = JhPayData.data.respData.payPackage;
          let signType = JhPayData.data.signType;
          let paySign = JhPayData.data.respData.paySign;
          // 填写随行付的信息，启动支付
          const [payErr, payData] = await uni.requestPayment({
            'timeStamp': timeStamp,
            'nonceStr': nonceStr,
            'package': payPackage,
            'signType': signType,
            'paySign': paySign,
          })

          if (!!payData && payData.errMsg === "requestPayment:ok") {
            this.wxPayLoading = false;
            this.clearLabelId();
            uni.hideLoading();
            uni.redirectTo({
              url: "/pages/succeed/succeed"
            })
            return;
          }
          this.wxPayLoading = false;
          uni.hideLoading();
          if (payErr.errMsg === "requestPayment:fail cancel") {
            this.showToastAndGoback("取消了支付")
            return;
          }
          this.showToastAndGoback("支付失败")
        } catch (e) {
          this.wxPayLoading = false;
          uni.hideLoading();
          this.showToastAndGoback(e.message)
        }
      },
      showToastAndGoback(title) {
        uni.showToast({
          title,
          mask: true
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      },

      // selectPayType(type) {
      //   if (!this.availableCredit && type == 1) {
      //     return
      //   }
      //   if (type === this.payType) {
      //     this.payType = ""
      //     return
      //   }
      //   this.payType = type
      // },

      selectPayType() {
        if (!this.availableCredit) {
          return
        }
        if (this.payType === 1) {
          this.payType = 2
          return
        }
        this.payType = 1
      },
      goPay() {
        if (this.payType === 2) {
          this.wxPay()
          return
        }
        if (this.payType === 1) {
          // this.$refs.selectPayType.close();
          this.$refs.pay.open()
        }
      },
      backToSelectPayType() {
        this.$refs.pay.close()
        // this.$refs.selectPayType.open();
      },
      // closeSelectPayType() {
      //   this.$refs.selectPayType.close();
      // }

    }
  }
</script>

<style lang="scss">
  page {
    width: 750rpx;
    background: #F2F2F2;

    .succeed {
      .bg {
        width: 750rpx;
        height: 352rpx;
        background: #0ca674;
      }

      // 占位元素
      .container {
        width: 690rpx;
        margin: 0 auto;
        margin-top: -150rpx;

        .voucher {
          width: 690rpx;
          height: 540rpx;
          background: #FFFFFF;
          border-radius: 14rpx;
          box-sizing: border-box;
          padding: 21rpx;
          box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);

          .title {
            height: 44rpx;
            font-size: 33rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: bolder;
            color: #1C1C27;
            line-height: 44rpx;
            text-align: center;
          }

          .tip {
            height: 34rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: #F63932;
            line-height: 34rpx;
            text-align: center;
            margin-top: 30rpx;
          }

          .dashed {
            width: 500rpx;
            border: 2rpx dashed #c0c0c0;
            margin: 20rpx auto 0 auto;
          }
          .content{
            height: 300rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 40rpx 80rpx 0 80rpx;
            
            >view{
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              
              text:nth-child(1){
                font-size: 33rpx;
                font-weight: bold;
                color: #1C1C27;
                line-height: 40rpx;
              }
              text:nth-child(2){
                font-size: 33rpx;
                font-weight: bold;
                color: rgba(0, 0, 0, 0.5);
                line-height: 40rpx;
                color: #1C1C27;
              }
            }
          }
        }
      }
    }
  }
</style>