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}}/{{orderInfo.cardOilsType==4 ? "Kg" : "L"}}</text>
            </view>
            <view>
              <text>优惠价：</text><text>￥{{discountPrice}}/{{orderInfo.cardOilsType==4 ? "Kg" : "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}}{{orderInfo.cardOilsType==4 ? "Kg" : "L"}}</text>
      </view>
      <view>
        <view>
          <view class="icon discount"></view>优惠金额
        </view>
        <text>￥{{discountAmt}}</text>
      </view>

      <!--  #ifdef  MP-WEIXIN -->
      <view class="dispose coupon"
        :class="[selectedCoupon.couponType=='1'?'direct':'', selectedCoupon.couponType=='2'?'rate':'']"
        @click="goSelectCoupon" v-if="couponEnabledFlag=='1'">
        <!--        <view class="coupon_bg">
          你好
        </view> -->
        <view class="title">
          <text>优惠券</text>
          <text v-if="!!selectedCoupon.id">{{creditNameplate}}</text>
        </view>
        <view class="tip">
          <text class="icon"></text>
          <text>{{couponTip}}</text>
        </view>
        <view class="extra" :class="couponsList.length==0 ? 'disable':'' ">
          {{couponMore}}
        </view>
      </view>
      <!--  #endif -->
      <!--  #ifdef  MP-WEIXIN -->
      <view class="dispose dzk" @click="selectPayType" v-if="orderInfo.oilsCardFlag == 1">
        <view class="title">
          <text>电子卡</text>
          <text> {{availableCouponToCredit?"电子卡支付更优惠":"不可用"}}</text>
        </view>
        <view class="tip">
          <text class="icon"></text>
          <template v-if="availableCouponToCredit">
            <text
              v-show="availableCredit">您的{{ cardTypeTranslate[orderInfo.cardOilsType]}}余额<text>{{' ' +  orderInfo.balance + ' '}}</text>元，可用来支付此订单</text>
            <text
              v-show="!availableCredit">{{ cardTypeTranslate[orderInfo.cardOilsType] }}余额<text>{{' ' +  orderInfo.balance + ' '}}</text>元，<text>不足以</text>完成此笔订单</text>
          </template>
          <template v-else>
            <text>您目前选中的优惠券不可使用电子卡</text>
          </template>
        </view>
        <view class="extra icon" :class="[payType === 1 ? 'selected':'', availableCredit ? '':'forbid']"></view>
      </view>
      <!--  #endif -->
      <!-- 
      <view>
        <view>
          <view class="icon vip"></view>油站会员
        </view>
        <text>立刻开通</text>
      </view> 
      -->

    </view>
    <view class="submit">
      <view class="area">
        <!--  #ifdef  MP-WEIXIN -->
        <text class="type" v-if="orderInfo.oilsCardFlag == 0" @click="selectPayType">实付款</text>
        <text class="type" v-show="orderInfo.oilsCardFlag == 1 && payType==2" @click="selectPayType">微信付款</text>
        <text class="type" v-show="orderInfo.oilsCardFlag == 1 && payType==1" @click="selectPayType">电子卡付款</text>
        <text class="icon" v-if="orderInfo.oilsCardFlag == 1 && availableCredit" @click="selectPayType"></text>
        <text class="amount">￥{{amt}}</text>
        <button class="btn" @click="goPay" :loading="wxPayLoading" :disabled="wxPayLoading">
          提交订单
        </button>
        <!--  #endif -->
        <!--  #ifdef  MP-ALIPAY -->
        <text class="type" @click="aliPay">实付款</text>
        <text class="amount">￥{{amt}}</text>
        <button class="btn" @click="aliPay" :loading="wxPayLoading" :disabled="wxPayLoading">
          提交订单
        </button>
        <!--  #endif -->

      </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>
          {{ amt }}
        </view>
        <view class="type" @click="selectPayType">
          <text>付款方式</text>
          <text> {{ payType==2  ? '微信支付' : '电子卡支付'}}</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">

          <template v-for="ele in couponsList">
            <view class="coupon" :class="[ele.couponType == 1 ? 'direct':'', ele.couponType == 2 ? 'rate':'' ]"
              @click="selectCoupon(ele)">
              <view class="left">
                <view class="amount">
                  {{ ele.couponType == 1 ? '￥':''}}{{ele.couponType == 2 ? '% ':''}}
                  <text class="value">{{ ele.couponAmt }}</text>
                </view>
                <view class="condition">{{
                  ele.couponThresholdAmt == 0
                    ? "无门槛"
                    : "满" + ele.couponThresholdAmt + "元可用"
                }}</view>
              </view>
              <view class="right">
                <view class="title">
                  <text class="type">{{ele.couponType == 1 ? '立减劵':''}}{{ele.couponType == 2 ? '折扣劵':''}}</text>
                </view>
                <view class="content">
                  <view class="items">
                    <view class="item scope">适用：<text>{{
                   (ele.oilName || []).toString()
                  }}</text></view>
                    <view class="item valid">截止：<text>{{ele.couponEffectiveTime}}</text></view>
                  </view>
                  <view class="btn">
                    <!--  <button>已领</button> -->
                    <view class="extra icon" :class="[selectedCoupon.id === ele.id ? 'selected':'']"></view>
                  </view>
                </view>
                <!-- <view class="tip">凭借此劵可以减少支付的金额，欢迎来加油~</view> -->
              </view>
            </view>
          </template>
          <!--    
          <template v-for="ele in couponsList">
            <view class="item cash" :class="[ele.couponType == 1 ? 'cash':'', ele.couponType == 2 ? 'discount':'' ]"
              v-if="ele.couponType == 1 || ele.couponType == 2">
              <view class="left">
                <text class="amount">
                  {{ ele.couponType == 1 ? '￥':''}}{{ele.couponType == 2 ? '% ':''}}
                  <text class="big">{{ ele.couponAmt }}</text>
                </text>
                <text>{{
                  ele.couponThresholdAmt == 0
                    ? "无门槛"
                    : "满" + ele.couponThresholdAmt + "元可用"
                }}</text>
              </view>
              <view class="right">
                <text class="title">{{ele.couponType == 1 ? '立减劵':''}}{{ele.couponType == 2 ? '折扣劵':''}}</text>
                <text class="scope">范围：{{
                   (ele.oilName || []).toString()
                  }}</text>
                <text class="valid">有效至 {{ele.couponEffectiveTime}}</text>
                <text class="use"></text>
              </view>
            </view>
          </template>
        -->
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

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

  export default {
    data() {
      return {
        payType: 2, // 1电子卡 2微信
        wxPayLoading: false,
        creditPayLoading: false,
        cardTypeTranslate: ['', '汽油卡', '柴油卡', '非油品卡', 'LNG', 'CNG'],
        selectedCoupon: {},
      };
    },
    computed: {
      // ...mapState(["orderInfo", "selectedGas", "openId", "stationId"]),
      ...mapState({
        couponEnabledFlag: state => state.coupon.couponEnabledFlag,
        couponsList: state => state.coupon.couponList,

        // 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
        }
        // 优惠劵
        if (!this.availableCouponToCredit) {
          return false
        }
        return true
      },
      availableCouponToCredit() { // 当前选择的优惠券是否可用电子卡
        return !(this.couponEnabledFlag == 1 && this.selectedCoupon.isCardFlag == 0)
      },
      creditFlag() {
        return this.orderInfo.oilsCardFlag == '1' ? true : false
      },
      creditNameplate() {
        if (!!this.selectedCoupon.id) {
          let amt = +this.orderInfo.receivableAmt
          let derate
          if (this.selectedCoupon.couponType == '1') {
            derate = +this.selectedCoupon.couponAmt
            derate = derate.toFixed(2)
            return '直降立减' + derate + "元"
          } else if (this.selectedCoupon.couponType == '2') {
            derate = (+amt) * (100 - (this.selectedCoupon.couponAmt)) / 100
            derate = derate.toFixed(2)
            return '折扣立减' + derate + "元"
          }
        } else {
          return "关注公众号获取优惠券"
        }
      },
      couponTip() {
        if (!!this.selectedCoupon.id) {
          if (this.selectedCoupon.couponType == '1') {
            return "您已经使用面值为" + this.selectedCoupon.couponAmt + "元的直降优惠券"
          } else if (this.selectedCoupon.couponType == '2') {
            return "您已经使用折扣为" + this.selectedCoupon.couponAmt + "%的优惠券"
          }
        }
        return "关注公众号获取更多优惠券"
      },
      couponMore() {
        console.log(this.couponEnabledFlag)
        if (this.couponEnabledFlag == '0') {
          return '未开启优惠券'
        }
        if (!!this.selectedCoupon.id) {
          return '重选优惠券 >>>'
        }
        if (this.couponsList.length == 0) {
          return '暂无可用优惠劵 >>>'
        }
        return '有可用的优惠券 >>>'
      },
      discountPrice() {
        if (!!this.selectedCoupon.id) {
          if (this.payType == 2) {
            return this.selectedCoupon.couponReckonAmt.discountPrice
          } else if (this.payType == 1) {
            return this.selectedCoupon.couponReckonAmt.dzkDiscountPrice
          }
        } else {
          if (this.payType == 2) {
            return this.orderInfo.discountPrice
          } else if (this.payType == 1) {
            return this.orderInfo.dzkDiscountPrice
          }
        }
      },
      discountAmt() {
        let discountAmt
        if (!!this.selectedCoupon.id) {
          if (this.payType == 2) { // 微信
            discountAmt = this.selectedCoupon.couponReckonAmt.discountAmt
          } else if (this.payType == 1) {
            discountAmt = this.selectedCoupon.couponReckonAmt.dzkDiscountAmt
          }
        } else {
          if (this.payType == 2) { // 微信
            discountAmt = this.orderInfo.discountAmt
          } else if (this.payType == 1) {
            discountAmt = this.orderInfo.discountAmt_dzk
          }
        }
        return (+discountAmt).toFixed(2)
      },
      amt() {
        if (!!this.selectedCoupon.id) {
          if (this.payType == 2) {
            return this.selectedCoupon.couponReckonAmt.amt
          } else if (this.payType == 1) {
            return this.selectedCoupon.couponReckonAmt.dzkAmt
          }
        } else {
          if (this.payType == 2) {
            return this.orderInfo.amt
          } else if (this.payType == 1) {
            return this.orderInfo.amt_dzk
          }
        }
      }
    },
    created() {
      this.initPayType()
    },
    mounted() {},
    methods: {
      ...mapMutations(["clearLabelId", "updateVoucherInfo"]),
      initPayType() {
        if (this.orderInfo.oilsCardFlag == 1 && this.availableCredit) {
          this.payType = 1
        }
      },
      closeCoupon() {
        this.$refs.coupon.close();
      },
      goSelectCoupon() {
        if (this.couponsList.length == 0) {
          return
        }
        this.$refs.coupon.open();
      },
      selectCoupon(ele) {
        // 未开启优惠券功能
        if (this.couponEnabledFlag == '0') {
          return
        }
        // 取消选中
        if (this.selectedCoupon.id == ele.id) {
          this.selectedCoupon = {}
          this.$refs.coupon.close();
          return
        }
        // 选中
        this.selectedCoupon = ele
        if (!this.availableCouponToCredit) {
          this.payType = 2
        }
        this.$refs.coupon.close();
        const index = this.couponsList.findIndex(item => ele.id == item.id)
        setTimeout(() => {
          this.couponsList.splice(0, 0, this.couponsList.splice(index, 1)[0])
        }, 500)
      },
      async aliPay() {
        this.wxPayLoading = true;
        uni.showLoading({
          title: '拉取支付...',
          mask: true
        });
        try {
          const aliPayData = await this.$Request({
            url: "/aliPayAmtToSxf",
            method: "POST",
            data: {
              "ordNo": this.orderInfo.ordNo,
              "openId": this.openId,
              "stationId": this.stationId,
            },
          })
          const [payErr, payData] = await uni.requestPayment({
            orderInfo: aliPayData.data.respData.source
          })
          console.log('支付', payErr, payData)
          if (!!payData && payData.errMsg === "requestPayment:ok" && payData.resultCode == "9000") {
            // this.wxPayLoading = false;
            uni.hideLoading();
            this.updateVoucherInfo({
              receivableAmt: this.orderInfo.receivableAmt,
              amt: this.amt,
              oilName: this.selectedGas.oilName
            })
            this.wxPayLoading = false;
            this.clearLabelId();
            uni.hideLoading();
            uni.redirectTo({
              url: "/pages/succeed/succeed"
            })
            return;
          }
          throw new Error(payData.memo);

        } catch (e) {
          this.wxPayLoading = false;
          uni.hideLoading();
          this.showToastAndGoback(e.message)
        }
      },
      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,
              "id": this.selectedCoupon.id // 优惠券的id
            },
          })
          console.log(creditPayData)
          if (creditPayData.retCode !== 0) {
            throw new Error(creditPayData.message)
          }
          this.creditPayLoading = false;
          uni.hideLoading();
          this.updateVoucherInfo({
            receivableAmt: this.orderInfo.receivableAmt,
            amt: this.amt,
            oilName: this.selectedGas.oilName
          })
          console.log('我要跳了~')
          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",
              "id": this.selectedCoupon.id // 优惠劵id
            },
          })
          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();
            // console.log({
            //   receivableAmt: this.orderInfo.receivableAmt,
            //   amt: this.payType == 2 ? this.orderInfo.amt : this.orderInfo.amt_dzk,
            //   oilName: this.selectedGas.oilName
            // })
            this.updateVoucherInfo({
              receivableAmt: this.orderInfo.receivableAmt,
              amt: this.amt,
              oilName: this.selectedGas.oilName
            })
            console.log('我要跳了~')
            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
      },
      creditAndCouponConflics(trigger, coupon) { // 处理电子卡和优惠券的互斥矛盾
        //trigger 触发的事件
        // trigger 1电子卡触发 2优惠券触发
        // coupon 当trigger为2时需要传选中的优惠券
        if (trigger == 1) {
          this.selectedCoupon

        }
      },
      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 {
            color: #F3B235;
            line-height: 33rpx;
          }

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

        }

        view.dispose {
          width: 690rpx;
          height: 150rpx;
          position: relative;
          display: inline-block;

          .coupon_bg {
            display: none;
          }

          .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;
              margin-left: 5rpx;
            }

            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),
            text:nth-child(3) {
              height: 28rpx;
              font-size: 20rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.4);
              line-height: 28rpx;

              text {
                font-size: 27rpx;
                font-weight: 800rpx;
                // color: #007AFF;
                color: #838383;
              }
            }
          }
        }

        view.coupon {
          .extra {
            position: absolute;
            right: 0rpx;
            top: 0rpx;
            height: 150rpx;
            width: 250rpx;
            font-size: 24rpx;
            color: #6D6D6D;
            line-height: 150rpx;
            color: #249bdd;
            font-weight: bold;
            text-align: center;
          }

          .disable {
            color: #6D6D6D;
          }
        }

        view.coupon.direct {
          background: url("../../static/icon/quan1.2x.png") no-repeat;
          background-size: 100% 100%;

          >.title {
            text:nth-child(2) {
              color: #FF2;
            }
          }
        }

        view.coupon.rate {
          background: url("../../static/icon/quan2.2x.png") no-repeat;
          background-size: 100% 100%;

          >.title {
            text:nth-child(2) {
              color: #FD2;
            }
          }
        }

        // view.coupon.direct{
        //   .coupon_bg{
        //     display: block;
        //   }
        //   .title,
        //   .tip{
        //     left: 300rpx;
        //   }
        //   .extra{
        //     display: none;
        //   }
        // }
        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;

          >.type {
            font-size: 28rpx;
            font-weight: 400;
            color: #111111;
            line-height: 40rpx;
          }

          >.amount {
            font-size: 30rpx;
            font-weight: 600;
            color: #f3b338;
            line-height: 40rpx;
          }

          >.icon {
            background: url(../../static/icon/1_b01_down.2x.png) no-repeat 0px 0px;
            background-size: 100% 100%;
            display: inline-block;
            width: 13rpx;
            height: 8rpx;
            line-height: 40rpx;
            margin-left: 10rpx;
            margin-right: 15rpx;
          }

          // 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: 600rpx;
            overflow: scroll;

            .coupon {
              display: flex;
              justify-content: space-between;
              width: 690rpx;
              height: 160rpx;
              margin-bottom: 50rpx;
              box-shadow: 0 0 10rpx 4rpx rgba(233, 223, 223, 0.5);

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

                .amount {
                  display: block;
                  font-size: 40rpx;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 56rpx;
                  text-align: center;
                  margin-top: 0;

                  .value {
                    font-size: 50rpx;
                  }
                }

                .condition {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #ffffff;
                  line-height: 33rpx;
                  text-align: center;
                  margin-top: 25rpx;
                }

                .exchangeName {
                  display: none;
                  font-size: 35rpx;
                  font-weight: 500;
                  color: #ffffff;
                  line-height: 56rpx;
                }
              }

              >.right {
                width: 456rpx;
                height: 160rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin: 8rpx 0 5rpx 0;

                .title {
                  height: 30rpx;
                  font-size: 24rpx;
                  font-weight: 600;
                  line-height: 33rpx;

                  .type {
                    width: 113rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    display: inline-block;
                    background: #f8c;
                    border-radius: 19rpx;
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #ffffff;
                    text-align: center;
                  }
                }

                .content {
                  display: flex;
                  justify-content: space-between;
                  margin: 5rpx 0 5rpx 0;
                  height: 120rpx;

                  >.items {
                    width: 360rpx;
                    height: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-direction: column;

                    .item {
                      color: #272626;
                      font-size: 21rpx;

                      >text {
                        width: 230rpx;
                        display: inline-block;
                        color: #272626;
                        font-size: 22rpx;
                        font-weight: bold;
                        overflow: scroll;
                        /* 超出部分隐藏 */
                        white-space: nowrap;
                        /* 文本不换行 */
                      }
                    }

                    .from {
                      display: block;
                    }
                  }

                  >.btn {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-right: 10rpx;
                    width: 70rpx;

                    .extra {

                      background: url(../../static/icon/select.png) no-repeat 0px 0px;
                      background-size: 100% 100%;
                      width: 55rpx;
                      height: 55rpx;
                      margin-right: 20rpx;
                      margin-top: -10rpx;
                    }

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

                    // >button {
                    //   height: 60rpx;
                    //   background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
                    //   border-radius: 20rpx;
                    //   border: none;
                    //   outline: none;
                    //   color: #ffffff;
                    //   line-height: 60rpx;
                    //   font-size: 30rpx;
                    //   font-weight: 400;
                    //   overflow: hidden;
                    //   /* 超出部分隐藏 */
                    //   white-space: nowrap;
                    //   /* 文本不换行 */
                    //   display: block;
                    // }
                  }
                }
              }
            }

            .direct {
              >.left {
                background: url("../../static/icon/quan1.2x.png") no-repeat;
                background-size: 100% 100%;
              }

              >.right {
                >.title>.type {
                  background: #f8ce57;
                }

                >.content>.btn button {
                  background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
                }
              }
            }

            .rate {
              >.left {
                background: url("../../static/icon/quan2.2x.png") no-repeat;
                background-size: 100% 100%;
              }

              >.right {
                >.title>.type {
                  background: #eb8573;
                }

                >.content>.btn button {
                  background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
                }
              }
            }

            // >.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%;
            }

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

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