WECHAT-UNIAPP/pages/confirm/confirm.vue

<template>
  <view class="confirm">
    <view class="bg">
    </view>
    <view class="container">
      <view class="station">
        <image :src="orderInfo.stationPic" mode="scaleToFill"></image>
        <view class="info">
          <view class="name">
            {{orderInfo.stationName}}
          </view>
          <view class="content">
            <view>
              <text>油枪号：</text><text>{{selectedGas.oilGunNo}}号</text>
            </view>
            <view>
              <text>油品名：</text><text>{{selectedGas.oilName}}</text>
            </view>
            <view>
              <text>油站价：</text><text>￥{{selectedGas.oilPrice}}/L</text>
            </view>
            <view>
              <text>优惠价：</text><text>￥{{orderInfo.discountPrice}}/L</text>
            </view>
          </view>
        </view>
      </view>
      <view>
        <view>
          <view class="icon price"></view>订单金额
        </view>
        <text class="price">￥{{orderInfo.receivableAmt}}</text>
      </view>
      <view>
        <view>
          <view class="icon oil"></view>加油升数
        </view>
        <text>{{orderInfo.oilLiters}}L</text>
      </view>
      <view>
        <view>
          <view class="icon discount"></view>优惠金额
        </view>
        <text>￥{{(orderInfo.receivableAmt - orderInfo.amt).toFixed(2)}}</text>
      </view>

      <view class="dispose coupon">
        <view class="title">
          <text>优惠券</text>
          <text>立减10元</text>
        </view>
        <view class="tip">
          <text class="icon"></text>
          <text>优惠券和电子卡不可叠加</text>
        </view>
        <view class="extra">
          有可用的优惠券 >>
        </view>
      </view>
      <view class="dispose dzk">
        <view class="title">
          <text>电子卡支付</text>
          <text>立减50元</text>
        </view>
        <view class="tip">
          <text class="icon"></text>
          <text>优惠券和电子卡不可叠加</text>
        </view>
        <view class="extra icon" :class="[1 === 1 ? 'selected':'', availableCredit ? '':'forbid']"></view>
      </view>
<!--      <view>
        <view>
          <view class="icon vip"></view>油站会员
        </view>
        <text>立刻开通</text>
      </view> -->
    </view>
    <view class="submit">
      <view class="area">
        <text>实付款</text>
        <text>￥{{orderInfo.amt}}</text>
        <button class="btn" @click="goSelectPayType" :loading="wxPayLoading" :disabled="wxPayLoading">
          提交订单
        </button>
      </view>
    </view>
    <uni-popup ref="pay" class="pay" type="bottom" maskClick="false">
      <view class="cont">
        <view class="close" @click="backToSelectPayType">
        </view>
        <view class="amount">
          <text>￥</text>
          {{ orderInfo.amt }}
        </view>
        <view class="type">
          <text>付款方式</text>
          <text>电子卡支付</text>
          <text></text>
        </view>
        <button type="default" class="pay" @click="creditPay" :loading="creditPayLoading">
          立即付款
        </button>
      </view>
    </uni-popup>
    <uni-popup ref="selectPayType" class="selectPayType" type="bottom" maskClick="false">
      <view class="cont">
        <view class="close" @click="closeSelectPayType">
        </view>
        <view class="credit">
          <view class="credit-con" @click="selectPayType(1)">
            <text class="text">电子卡支付(剩余：{{ orderInfo.balance }})</text>
            <text class="icon" :class="[payType === 1 ? 'selected':'', availableCredit ? '':'forbid']"></text>
          </view>
          <text class="tip">
            {{tip}}
          </text>
        </view>
        <view class="wx" @click="selectPayType(2)">
          <text class="text">微信支付</text>
          <text class="icon" :class="[payType === 2 ? 'selected':'']"></text>
        </view>
        <button type="default" :class="[payType !== '' ? 'available' : '']" @click="goPay"
          :disabled="payType === '' ? true : false" :loading="wxPayLoading">
          确认
        </button>
      </view>
    </uni-popup>
    <uni-popup ref="coupon" class="coupon" type="bottom" maskClick="false">
      <view class="coupon-container">
        <view class="close" @click="closeCoupon">
        </view>
        <view class="title">
          优惠券
        </view>
        <scroll-view scroll-y="true" class="coupon-scroll">
          <view class="item cash">
            <view class="left">
              <text class="amount">￥<text class="big">100</text></text>
              <text>无门槛</text>
            </view>
            <view class="right">
              <text class="title">立减劵</text>
              <text class="scope">范围：限汽油</text>
             <text class="valid">有效至 2021.03.01</text>
              <text class="use"></text>
            </view>
          </view>
          <view class="item discount">
            <view class="left">
              <text class="amount">￥<text class="big">100</text></text>
              <text>无门槛</text>
            </view>
            <view class="right">
              <text class="title">立减劵</text>
              <text class="scope">范围：限汽油</text>
             <text class="valid">有效至 2021.03.01</text>
              <text class="use"></text>
            </view>
          </view>
          <view class="item exchange">
            <view class="left">
              <text class="amount">￥<text class="big">100</text></text>
              <text>无门槛</text>
            </view>
            <view class="right">
              <text class="title">立减劵</text>
              <text class="scope">范围：限汽油</text>
             <text class="valid">有效至 2021.03.01</text>
              <text class="use"></text>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

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

  export default {
    data() {
      return {
        creditFlag: false,
        payType: "", // 1电子卡 2微信
        wxPayLoading: false,
        creditPayLoading: false
      };
    },
    computed: {
      ...mapState(["orderInfo", "selectedGas", "openId", "stationId"]),
      availableCredit() {
        if (this.selectedGas.oilGunType == '2') {
          return false
        }
        if ((+this.orderInfo.balance) < (+this.orderInfo.amt)) {
          return false
        }
        return true
      },
      tip() {
        if (this.selectedGas.oilGunType == '2') {
          return "非油品不可用电子卡支付"
        }
        if ((+this.orderInfo.balance) < (+this.orderInfo.amt)) {
          if (this.orderInfo.cardOilsType == "1") {
            return "汽油卡余额不足，请在微信公众号充值"
          }
          if (this.orderInfo.cardOilsType == "2") {
            return "柴油卡余额不足，请在微信公众号充值"
          }
        }
        return "电子卡余额充足，可以使用电子卡支付"
      }
    },
    created() {
      this.getCreditFlag()
    },
    mounted() {
      // this.$refs.pay.close()
      // this.$refs.coupon.open();
    },
    methods: {
      closeCoupon(){
        this.$refs.coupon.close();
      },
      async goSelectPayType() {
        if (!this.creditFlag) { //未启用电子卡
          this.wxPay()
          return
        }
        this.$refs.selectPayType.open()
      },
      async creditPay() {
        this.creditPayLoading = true;
        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.navigateTo({
            url: "/pages/succeed/succeed"
          })
        } catch (e) {
          this.creditPayLoading = false;
          uni.hideLoading();
          this.showToastAndGoback(e.toString())
        }
      },
      cancelCreditPay() {
        this.showToastAndGoback("你取消了电子卡支付")
      },
      async wxPay() {
        this.wxPayLoading = true;
        uni.showLoading({
          title: '拉取支付...',
          mask: true
        });
        try {
          // 因为后期要加入定时删除 所以此步骤来确认数据库里是否有此订单
          // 如果没有定时删除任务，此步骤冗余
          const PayOrderData = await this.$Request({
            url: "/getPayOrderList",
            data: {
              "orderNo": this.orderInfo.ordNo,
              "openId": this.openId,
              "userType": 2
            },
          })
          console.log(PayOrderData)
          if (PayOrderData.retCode !== 0) {
            throw new Error("获取order主键失败")
          }
          const orderId = PayOrderData.data[0].orderId
          // 提供给服务端必要的信息，服务端生成随行付的支付信息,返回回来
          const JhPayData = await this.$Request({
            url: "/getJhPayInfo",
            method: "POST",
            data: {
              "orderId": orderId,
              "openId": this.openId,
              "stationId": this.stationId,
              "subject": this.orderInfo.stationName + "_" + this.selectedGas.oilName + this.selectedGas
                .oilGunType == "1" ? "油品" : "非油品" + "支付订单",
              "userType": "2"
            },
          })
          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;
            uni.hideLoading();
            uni.navigateTo({
              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)
      },
      async getCreditFlag() {
        const PayOrderData = await this.$Request({
          url: "/getStationCardEnabledFlag",
          data: {
            stationId: this.stationId
          }
        })
        console.log(PayOrderData)
        if (PayOrderData.retCode !== 0) {
          this.showToastAndGoback("拉取电子卡启用状态失败")
          return
        }
        this.creditFlag = PayOrderData.data == '1' ? true : false
      },
      selectPayType(type) {
        if (!this.availableCredit && type == 1) {
          return
        }
        if (type === this.payType) {
          this.payType = ""
          return
        }
        this.payType = type
      },
      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;

    .confirm {
      .bg {
        width: 750rpx;
        height: 352rpx;
        background: #0EA374;
      }

      .container {
        width: 690rpx;
        margin: 0 auto;
        margin-top: -239rpx;

        .station {
          width: 690rpx;
          height: 340rpx;
          background: #FFFFFF;
          border-radius: 14rpx;
          box-sizing: border-box;
          padding: 21rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          image {
            width: 200rpx;
            height: 240rpx;
          }

          .info {

            width: 400rpx;
            height: 240rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;

            .content {
              height: 180rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              font-size: 28rpx;
              font-weight: 400;
              color: #666666;
              line-height: 40rpx;

              view {
                display: flex;
                justify-content: space-between;

                text:nth-child(1) {
                  width: 200rpx;
                  display: inline-block;
                }
              }
            }

            .name {
              height: 45rpx;
              font-size: 32rpx;
              font-weight: 600;
              color: #111111;
              line-height: 45rpx;
            }
          }
        }


        >view:not(.station) {
          width: 690rpx;
          height: 110rpx;
          background: #FFFFFF;
          box-shadow: 0px 2rpx 6rpx 5rpx rgba(237, 237, 237, 0.5);
          border-radius: 10rpx;
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #111111;
          line-height: 40rpx;

          >view {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .icon {
              display: inline-block;
              width: 35rpx;
              height: 30rpx;
              // border: 2rpx solid #666666;
              margin-right: 14rpx;
            }

            .price {
              background: url(../../static/icon/dingdan.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }

            .oil {
              background: url(../../static/icon/sheng.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }

            .discount {
              background: url(../../static/icon/youhuiquan-2.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }

            .vip {
              background: url(../../static/icon/huiyuan-.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
            
          }

          text.price {
            font-size: 24rpx;
            color: #F3B235;
            line-height: 33rpx;
          }

          text.vip {
            font-size: 24rpx;
            color: #A76825;
            line-height: 33rpx;
          }

        }
        view.dispose{
          width: 690rpx;
          height: 138rpx;
          position: relative;
          display: inline-block;
          .title{
            position: absolute;
            top: 36rpx;
            left: 20rpx;
            
            text:nth-child(1){
              height: 40rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #000000;
              line-height: 40rpx;
              margin-right: 20rpx;
            }
            text:nth-child(2){
              height: 28rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #F0B849;
              line-height: 28rpx;
              box-sizing: border-box;
              border: 1px solid #F0B849;
            }
          }
          .tip{
            position: absolute;
            top: 90rpx;
            left: 20rpx;
            
            .icon{
              width: 22rpx;
              height: 22rpx;
              background: url(../../static/icon/tipicon1.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
            text:nth-child(2){
              width: 220rpx;
              height: 28rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.4);
              line-height: 28rpx;
            }
          }
        }
        view.coupon{
          .extra{
            position: absolute;
            right: 20rpx;
            top: 54rpx;
            height: 34rpx;
            font-size: 24rpx;
            color: #6D6D6D;
            line-height: 34rpx;
          }
        }
        view.dzk{
          .extra{
            position: absolute;
            right: 20rpx;
            top: 54rpx;
            background: url(../../static/icon/select.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            width: 40rpx;
            height: 40rpx;  
            margin-right: 20rpx;
          }
          
          .selected {
            background: url(../../static/icon/selected.png) no-repeat 0px 0px;
            background-size: 100% 100%;
          }
          
          .forbid {
            background: url(../../static/icon/forbid.png) no-repeat 0px 0px;
            background-size: 100% 100%;
          }
        }
      }

      .submit {
        width: 750rpx;
        height: 180rpx;

        // background: #FFFFFF;
        // margin-top: 30rpx;
        .area {
          width: 750rpx;
          height: 150rpx;
          background: #FFFFFF;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          text:nth-child(1) {
            font-size: 28rpx;
            font-weight: 400;
            color: #111111;
            line-height: 40rpx;
          }

          text:nth-child(2) {
            font-size: 30rpx;
            font-weight: 600;
            color: #f3b338;
            line-height: 40rpx;
          }

          .btn {
            margin-left: 20rpx;
            margin-right: 30rpx;
            background-color: #0ea374;
            border-radius: 40rpx;
            width: 250rpx;
            height: 80rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 80rpx;
            text-align: center;
          }
        }
      }

      uni-popup.pay {
        .cont {
          width: 750rpx;
          height: 682rpx;
          background: #FFFFFF;
          border-radius: 30rpx 30rpx 0 0;
          position: relative;

          .close {
            background: url(../../static/icon/left.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            width: 18rpx;
            height: 30rpx;
            position: absolute;
            top: 46rpx;
            left: 34rpx;
          }

          .amount {
            width: 100%;
            height: 100rpx;
            font-size: 80rpx;
            font-weight: 400;
            color: #000000;
            position: absolute;
            top: 112rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            text {
              font-size: 40rpx;
            }
          }

          .type {
            width: 100%;
            height: 34rpx;
            position: absolute;
            top: 310rpx;

            text:nth-child(1) {
              height: 34rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #aaaaaa;
              line-height: 34rpx;
              position: absolute;
              left: 58rpx;
            }

            text:nth-child(2) {
              height: 34rpx;
              font-size: 24rpx;
              font-weight: 500;
              color: #000000;
              line-height: 34rpx;
              position: absolute;
              right: 144rpx;
            }

            text:nth-child(3) {
              background: url(../../static/icon/right.png) no-repeat 0px 0px;
              background-size: 100% 100%;
              display: inline-block;
              width: 12rpx;
              height: 22rpx;
              position: absolute;
              right: 66rpx;
              top: 7rpx;
            }
          }

          .pay {
            width: 590rpx;
            height: 76rpx;
            background: linear-gradient(103deg, #12A273 0%, #25AA7E 100%);
            border-radius: 38rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 76rpx;
            letter-spacing: 1rpx;
            position: absolute;
            bottom: 114rpx;
            left: 80rpx;
          }
        }
      }

      uni-popup.selectPayType {
        .cont {
          width: 750rpx;
          // width: 100%;
          height: 680rpx;
          background: #FFFFFF;
          border-radius: 30rpx 30rpx 0 0;
          position: relative;
          padding: 0 25rpx;
          box-sizing: border-box;

          .close {
            width: 38rpx;
            height: 38rpx;
            position: absolute;
            top: 24rpx;
            left: 24rpx;
            background: url(../../static/icon/6_d05_close.2x.png) no-repeat 0px 0px;
            background-size: 100% 100%;
          }

          .credit {
            position: absolute;
            width: 700rpx;
            top: 138rpx;
            height: 130rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid #D8D8D8;
            color: #000 solid #D8D8D8;
            padding: 0 30rpx;

            .credit-con {
              height: 60rpx;
              display: flex;
              justify-content: space-between;

              .text {
                font-size: 28rpx;
                height: 40rpx;
                line-height: 60rpx;
                font-weight: 600;
              }

              .icon {
                background: url(../../static/icon/select.png) no-repeat 0px 0px;
                background-size: 100% 100%;
                width: 40rpx;
                height: 40rpx;
              }

              .selected {
                background: url(../../static/icon/selected.png) no-repeat 0px 0px;
                background-size: 100% 100%;
              }

              .forbid {
                background: url(../../static/icon/forbid.png) no-repeat 0px 0px;
                background-size: 100% 100%;
              }
            }

            .tip {
              margin-top: 16rpx;
              height: 44rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.29);
              line-height: 44rpx;
            }
          }

          .wx {
            position: absolute;
            width: 700rpx;
            top: 305rpx;
            padding: 0 30rpx;
            height: 40rpx;
            display: flex;
            box-sizing: border-box;
            justify-content: space-between;

            .text {
              font-size: 28rpx;
              height: 40rpx;
              line-height: 40rpx;
              font-weight: 600;
            }

            .icon {
              background: url(../../static/icon/select.png) no-repeat 0px 0px;
              background-size: 100% 100%;
              width: 40rpx;
              height: 40rpx;
            }

            .selected {
              background: url(../../static/icon/selected.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
          }

          >button {
            width: 590rpx;
            height: 76rpx;
            background-color: #cccccc;
            border-radius: 38rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 76rpx;
            letter-spacing: 1rpx;
            position: absolute;
            box-sizing: border-box;
            bottom: 114rpx;
            left: 80rpx;
          }

          >button.available {
            background: linear-gradient(103deg, #12A273 0%, #25AA7E 100%);
          }
        }
      }

      uni-popup.coupon {
        .coupon-container {
          width: 100%;
          border-radius: 42rpx 42rpx 0px 0px;
          background: #F2F2F2;
          padding: 0 30rpx;
          box-sizing: border-box;
          position: relative;
          
          .close{
            width: 38rpx;
            height: 38rpx;
            position: absolute;
            top: 24rpx;
            right: 24rpx;
            background: url(../../static/icon/6_d05_close.2x.png) no-repeat 0px 0px;
            background-size: 100% 100%;
          }
          
          >.title {
            height: 105rpx;
            font-size: 32rpx;
            font-weight: 400;
            color: #111111;
            line-height: 105rpx;
            font-weight: 600;
            color: #111111;
            text-align: center;
          }

          .coupon-scroll {
            max-height: 500rpx;
            overflow: scroll;
            
            .item {
              width: 690rpx;
              height: 160rpx;
              font-size: 24rpx;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 40rpx;
              display: flex;
              justify-content: space-between;
              margin-bottom: 20rpx;

              .left {
                width: 150rpx;
                height: 160rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;

                .amount {
                  font-size: 20rpx;

                  .big {
                    font-size: 33rpx;
                  }
                }
              }

              .right {
                width: 540rpx;
                height: 160rpx;
                color: #111111;
                position: relative;

                .title {
                  position: absolute;
                  top: 22rpx;
                  left: 20rpx;
                  height: 40rpx;
                  font-size: 28rpx;
                  font-weight: 500;
                  line-height: 40rpx;
                }

                .scope {
                  position: absolute;
                  top: 72rpx;
                  left: 20rpx;
                  height: 28rpx;
                  font-size: 20rpx;
                  color: #666666;
                  line-height: 28rpx;
                }

                .valid {
                  position: absolute;
                  top: 110rpx;
                  left: 20rpx;
                  height: 28rpx;
                  font-size: 20rpx;
                  color: #666666;
                  line-height: 28rpx;
                }

                .use {
                  position: absolute;
                  top: 54rpx;
                  right: 20rpx;
                  display: inline-block;
                  width: 160rpx;
                  height: 55rpx;
                }
              }
            }

            .cash{
              background: url(../../static/icon/youhuiquan1.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
            .discount{
              background: url(../../static/icon/youhuiquan2.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
            .exchange{
              background: url(../../static/icon/youhuiquan3.2x.png) no-repeat 0px 0px;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
</style>