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>￥{{orderInfo.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>￥{{payType === 1 ? (+orderInfo.discountAmt_dzk).toFixed(2):(+orderInfo.discountAmt).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" @click="selectPayType" v-if="orderInfo.oilsCardFlag == 1">
        <view class="title">
          <text>电子卡</text>
          <text>电子卡支付更优惠</text>
        </view>
        <view class="tip">
          <text class="icon"></text>
          <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>
        </view>
        <view class="extra icon" :class="[payType === 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 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" v-show="payType==2">￥{{orderInfo.amt}}</text>
        <text class="amount" v-show="payType==1">￥{{orderInfo.amt_dzk}}</text>
        <button class="btn" @click="goPay" :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>
          {{ payType==2 ? orderInfo.amt : orderInfo.amt_dzk}}
        </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">
          <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 {
        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","updateVoucherInfo"]),
      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();
          this.updateVoucherInfo({
            receivableAmt: this.orderInfo.receivableAmt,
            amt:this.payType==2 ? this.orderInfo.amt : this.orderInfo.amt_dzk,
            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",
            url:"/yunPay",
            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)
          // }
          console.log(JhPayData.data.result_code)
          if (JhPayData.data.result_code !== '01') {
            throw new Error(JhPayData.data.msg)
          }
          // // let timeStamp = JhPayData.data.respData.payTimeStamp;
          // let timeStamp = JhPayData.data.respData.timeStamp;
          // let nonceStr = JhPayData.data.respData.paynonceStr;
          // // let payPackage = JhPayData.data.respData.payPackage;
          // let payPackage = JhPayData.data.respData.package_str;
          // let signType = JhPayData.data.signType;
          // let paySign = JhPayData.data.respData.paySign;
          
          
          // let timeStamp = JhPayData.data.respData.payTimeStamp;
          let timeStamp = JhPayData.data.timeStamp;
          let nonceStr = JhPayData.data.nonceStr;
          // let payPackage = JhPayData.data.respData.payPackage;
          let payPackage = JhPayData.data.package_str;
          let signType = JhPayData.data.signType;
          let paySign = JhPayData.data.paySign;
          // 填写随行付的信息，启动支付
          console.log({
            'timeStamp': timeStamp,
            'nonceStr': nonceStr,
            'package': payPackage,
            'signType': signType,
            'paySign': paySign,
          })
          const [payErr, payData] = await uni.requestPayment({
            'timeStamp': timeStamp,
            'nonceStr': nonceStr,
            'package': payPackage,
            'signType': signType,
            'paySign': paySign,
          })
          console.log('------------',payData)
          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.payType==2 ? this.orderInfo.amt : this.orderInfo.amt_dzk,
              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
      },
      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;
          .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),
            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: 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;

          >.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: 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>