<!-- //电子码新规则,共计23位
            //2位固定数+2位分钟+9位会员ID+2位小时+5位企业ID+1位固定数(标识是否支持积分)+1位随机数+1位校验码
            /* 2位固定数字具体含义：
             * 20 企业会员电子码
             * 21 驿网会员电子码
             * 30 企业会员优惠券码
             * 31 驿网会员优惠券码
             */ -->
<template>
  <div class="page-body">
    <view class="centent-box">
      <!-- <view class="top-images"> -->
      <!-- <image
          src="/static/images/cumulativeCode/vip-ico.png"
          mode="aspectFill"
        ></image> -->
      <!-- </view> -->
      <!-- <view class="top-block"> </view> -->
      <!-- <h3 class="text-title">会员积分码</h3> -->

      <div class="userImgBox">
        <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #eaecee;
            border-radius: 50%;
          ">
          <image style="width: 100%; height: 100%" :src="WXProfile || user.MEMBERSHIP_HEADIMAGEURL" />
        </div>
      </div>

      <div v-if="checkPay">
        <div style="position: relative; text-align: center">
          <div v-if="!barcodeImg">
            <canvas canvas-id="barcode" style="height: 120rpx; width: 480rpx; margin: 0 0 14rpx 0" />
          </div>

          <image v-if="barcodeImg" style="height: 120rpx; width: 480rpx; margin: 0 0 14rpx 0" :src="barcodeImg" />
        </div>
        <view class="code-box">
          <text class="code-text">{{
            isShowAllCode ? allCode : showCode
          }}</text>

          <text class="text-blue" @tap="isShowAllCode = !isShowAllCode">{{ isShowAllCode ? "关闭查看" : "查看数字" }}
          </text>
        </view>

        <div style="position: relative; text-align: center">
          <div v-if="!qrcodeImg">
            <canvas canvas-id="qrcode" style="height: 360rpx; width: 360rpx" />
          </div>

          <image v-if="qrcodeImg" style="height: 360rpx; width: 360rpx" :src="qrcodeImg" />
        </div>
        <div class="refresh-box flex align-center" @click.stop="refreshCode()">
          <!-- <van-icon name="replay" size="30rpx" color="#ff6666" custom-style="margin-right:8rpx;" /> -->
          <image class="replayIcon" src="http://saas.eshangtech.com/caiyunyiImg/replay.png" />
          <span class="text-xs color9d">每分钟自动刷新</span>
        </div>
        <div class="flex justify-between coupon-box align-center" @tap="isShow = true">
          <div class="flex align-center">
            <div class="flex align-center">
              <image src="/static/images/home/couponIcon.png" class="coupon-ico"></image>
              <view class="text-39">优惠券</view>
            </div>
          </div>
          <div @click="handleSelectCoupon" style="display: flex; align-items: center">
            <text class="text-sm color9d" v-if="couponlist.length == 0">暂无可使用的优惠券</text>
            <text class="text-sm color9d" v-else>{{
              cid && choeseCouponIndex != null
                ? couponlist[choeseCouponIndex].CouponName
                : "选择要使用的优惠券"
            }}</text>
            <image style="width: 24rpx; height: 24rpx" src="/static/images/home/rightArrowIcon.png" />
          </div>
        </div>
      </div>
      <div class="check-end" v-if="checkPay === false">
        <p class="pay-end">支付成功</p>
        <p class="pay-door">{{ payDoor }}</p>
        <div class="pay-price">
          <span>{{ payPrice }}</span>元
        </div>
        <div class="pay-btn" @tap="payEnd">完成</div>
      </div>
    </view>

    <!-- 快捷跳转 -->
    <view class="skipBox" v-if="false">
      <view class="skipContent">
        <!-- <view class="skipTitleBox">
          <span class="skip">快捷支付</span>
        </view> -->

        <view class="shipList">
          <view class="shipItem" @click="handleRealGoPay(1)">
            <view class="shipIconBox">
              <image class="shipIcon" src="/static/images/home/alipayIcon.png" />
            </view>
            <!-- <span class="shipTitle">支付宝</span> -->
          </view>
          <view class="shipItem" @click="handleRealGoPay(2)">
            <view class="shipIconBox">
              <image class="shipIcon" src="/static/images/home/wxPay.png" />
            </view>
            <!-- <span class="shipTitle">微信</span> -->
          </view>
        </view>
      </view>
    </view>

    <UniPopup ref="popup" closeable position="bottom" :show="isShow" custom-style="height: 760rpx;" :safe-area="false">
      <view class="couponPopup">
        <view class="body-title"> 选择优惠券 </view>

        <view class="pop-body">
          <scroll-view scroll-y style="height: 680rpx">
            <view class="couponItem" v-for="(item, i) in couponlist" :key="i" @tap="selectCoupon" :data-key="i">
              <div class="itemleft">
                <div>
                  <span class="leftUnit">¥</span>
                  <span class="money">{{ item.UseAmount }}</span>
                </div>
                <div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
                  {{ item.CouponPoint }}积分兑换
                </div>
                <div v-else class="condition">
                  {{
                    item.WithAmount > 0
                      ? "满" + item.WithAmount + "可用"
                      : "无门槛使用"
                  }}
                </div>
              </div>
              <div class="itemRight">
                <div>
                  <div class="couponName">{{ item.CouponName }}</div>
                  <div class="timeText">
                    <span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
                    <span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
                  </div>
                </div>
              </div>
            </view>
          </scroll-view>
        </view>
      </view>
    </UniPopup>
  </div>
</template>

<script>
// let barcode = require('../../common/js/JsBarcode.all.js')
import { mapGetters } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  data() {
    return {
      showCode: "",
      isShowAllCode: false,
      allCode: "",
      isShow: false,
      timer: "",
      cid: "",
      couponlist: [],
      choeseCouponIndex: null,
      payTimer: "",
      checkPay: true,
      payDoor: "",
      payPrice: 0.01,
      isPrice: false,
      balance_amount: "0.00",
      loginType: "",
      barcodeImg: "", // 条码转的图片路径
      qrcodeImg: "", // 二维码图片转的路径
      isLoading: false,
      WXProfile: "",
      user: {}
    };
  },
  computed: {
    // ...mapGetters(["user"]),

    barcodeHeight() {
      return (120 / 750) * uni.getSystemInfoSync().windowWidth;
    },
    barcodeWidth() {
      return (480 / 750) * uni.getSystemInfoSync().windowWidth;
    },
    qrcodeHeight() {
      return (360 / 750) * uni.getSystemInfoSync().windowWidth;
    },
  },
  components: {
    UniPopup,
  },
  methods: {
    // 拿用户最新的user信息
    async handleGetUserInfo() {
      let _this = this;
      let vuex = uni.getStorageSync('vuex')
      let vuexObj = {}
      if (vuex) {
        vuexObj = JSON.parse(vuex)
        console.log('vuexObjvuexObjvuexObj', JSON.parse(JSON.stringify(vuexObj)));
      }

      const data = await _this.$api
        .getCoop({
          action_type: "GetMembershipInfo",
          // WechatUserId: _this.user.WechatUserId,
          WechatUserId: vuexObj.user.WechatUserId,
        })

      // .then(function (data) {
      if (data.ResultCode === "100") {
        let _data = data;
        _this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
        _this.user.WechatUserId = _data.Data.WechatUserId || "";
        _this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
        _this.user.MEMBERSHIP_LEVEL_TEXT =
          _data.Data.MEMBERSHIP_LEVEL_TEXT || "";
        _this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
        _this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
        _this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
        _this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
        _this.user.ISPLUS = _data.Data.ISPLUS || "";
        _this.user.INDUSTRY_MEMBERSHIP_ID =
          _data.Data.INDUSTRY_MEMBERSHIP_ID || "";
        _this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
        _this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
        _this.user.InviteCode = _data.Data.InviteCode || "";
        _this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
        _this.user.MEMBERSHIP_MOBILEPHONE =
          _data.Data.MEMBERSHIP_MOBILEPHONE || "";
        _this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
        // _this.setUser(user);
        _this.$store.commit("setUser", _this.user);

        _this.$forceUpdate()
        _this.showAvatar = true
      } else {
        // _this.setUser({});
        // _this.$store.commit("setUser", user);
      }
      // });
    },
    // 快捷支付
    handleRealGoPay(payType) {
      if (this.loginType === "android") {
        if (payType === 1) {
          uni.navigateTo({
            url: "/pages/thirdParty/aliPay",
          });

          // uni.showModal({
          //   title: "确认跳转支付宝？",
          //   content: "点击确认将自动跳转到支付宝付款码页面",
          //   confirmText: "确认",
          //   cancelText: "取消",
          //   success: function (res) {
          //     plus.runtime.openURL(
          //       `alipayqr://platformapi/startapp?saId=20000056`
          //     );
          //   },
          // });
        } else if (payType === 2) {
          uni.showModal({
            title: "确认跳转微信？",
            content: "跳转后点击首页右上角-->首付款",
            confirmText: "确认",
            cancelText: "取消",
            success: function (res) {
              plus.runtime.openURL(`weixin://`);
            },
          });
        }
      } else if (this.loginType === "min") {
        if (payType === 1) {
          // uni.navigateToMiniProgram({
          //   shortLink: "#小程序://云交经司服/jFbQlCIEsEjf5Nq",
          // });
          uni.navigateTo({
            url: "/pages/thirdParty/aliPay",
          });
        }
      }
    },
    paintCode() {
      let _this = this;

      let code = _this.allCode;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }

      _this.$utils.barc(
        "barcode",
        code,
        _this.barcodeWidth,
        _this.barcodeHeight
      );

      //   _this.$utils.barc('barcode2', code, _this.qrcodeHeight2, 160, 90)
      _this.$utils.qrc(
        "qrcode",
        code,
        _this.qrcodeHeight,
        _this.qrcodeHeight,
        null,
        "../../static/images/home/caiyunLogo.png"
      );
      //   _this.$utils.qrc('qrcode2', code, _this.qrcodeHeight2, _this.qrcodeHeight2, null, '../../../static/images/gsuyiw.png')
      _this.showCode = code.substring(0, 4) + " " + "*".repeat("6");

      setTimeout(() => {
        wx.canvasToTempFilePath({
          canvasId: "barcode",
          success: (res) => {
            console.log("barcode", res);
            // this.setData({
            //   qrCodeImage: res.tempFilePath, // 保存图片路径
            // });
            _this.barcodeImg = res.tempFilePath;
            _this.$forceUpdate();
          },
        });
        wx.canvasToTempFilePath({
          canvasId: "qrcode",
          success: (res) => {
            console.log("barcode", res);
            // this.setData({
            //   qrCodeImage: res.tempFilePath, // 保存图片路径
            // });
            _this.qrcodeImg = res.tempFilePath;
            _this.$forceUpdate();
          },
        });
      }, 300)

      _this.$forceUpdate();
      _this.timer = setInterval(function () {
        _this.getCode();
      }, 60000);
    },
    selectCoupon(e) {
      const index = e.currentTarget.dataset.key;
      this.cid = this.couponlist[index].CouponSendId;
      this.choeseCouponIndex = index;
      this.getCode();
      this.handleClosePopup();
    },
    // 调起选择优惠券的页面
    handleSelectCoupon() {
      this.$refs.popup.open("bottom");
      this.isShow = true;
    },
    // 关闭优惠券的页面
    handleClosePopup() {
      // @tap="isShow = false"
      this.isShow = false;
      this.$refs.popup.close();
    },
    // payMent () {
    //   let _this = this
    //   _this.$api.getCoop({
    //     action_type: 'GetMembershipConsumption',
    //     memberShipId: _this.user.MEMBERSHIP_ID,
    //     industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
    //     ticketcode: _this.str

    //   }).then((res) => {
    //     if (res.ResultCode === '100') {
    //       _this.payDoor = res.Data.List[0].SERVERPART_NAME + ' ' + res.Data.List[0].SHOPNAME
    //       _this.payPrice = res.Data.List[0].RECODE_AMOUNT

    //       clearInterval(this.payTimer)
    //       _this.checkPay = false
    //       _this.$forceUpdate()
    //     }
    //   })
    // },
    getCode() {
      let _this = this;

      this.isLoading = true;
      if (!_this.user.MEMBERSHIP_ID) {
        return;
      }

      this.barcodeImg = "";
      this.qrcodeImg = "";
      this.$api
        // .$get("/WeChat/GetMemberECode", { couponCode: this.cid || "" })
        .$get("/WeChat/GetMemberECode", {
          membershipId: _this.user.MEMBERSHIP_ID || "",
          couponCode: this.cid || "",
        })
        .then((res) => {
          console.log("resdsadasd", res);
          if (res.Result_Code === 100) {
            _this.allCode = res.Result_Data.Membership_ECode;
            _this.paintCode(res.Result_Data.Membership_ECode);
          }
          _this.isLoading = false;
        });
    },
    getCouponLsit() {
      let _this = this;

      this.$api
        .$get("/WeChat/GetMemberCouponList", { CouponStatus: 0 })
        .then((res) => {
          if (res.Result_Code === 100) {
            _this.couponlist = res.Result_Data.List;
            if (_this.cid) {
              let id = Number(_this.cid);
              let index = res.Result_Data.List.findIndex(
                (n) => id === n.CouponSendId
              );
              _this.choeseCouponIndex = index;
            }
          }
        });
    },
    // payEnd () {
    //   let _this = this
    //   _this.checkPay = true
    //   _this.paintCode()
    //   _this.payTimer = setInterval(function () {
    //     _this.payMent()
    //   }, 5000)
    // },

    refreshCode() {
      this.getCode();
    },
  },
  onShow() {
    // let _this = this
    // _this.timer = setInterval(function () {
    //   _this.paintCode()
    // }, 60000)
    // _this.payTimer = setInterval(function () {
    //   _this.payMent()
    // }, 5000)
  },
  async onLoad(option) {
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    console.log("option", option);
    if (option.cid) {
      this.cid = option.cid;
    } else {
      this.cid = "";
      this.choeseCouponIndex = null;
    }

    await this.handleGetUserInfo()

    this.getCouponLsit();
    this.getCode();
    this.$utils.addUserBehaviorNew();
  },
  onHide() {
    clearInterval(this.timer);
  },
  onUnload() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped lang="stylus">
bgBule = #4085EC;

page {
  background-color: bgBule;
}

canvas {
  display: inline-block;
}

.couponPopup {
  width: 100%;
  height: 500px;
  background: #fff;
}

.text-blue {
  // color: bgBule;
  color: #BA922F;
}

.text-38 {
  color: #383838;
}

.text-39 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #130F05;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
}

.color9d {
  color: #9D9D9D;
}

.text-sm {
  font-size: 24rpx;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.text-xs {
  font-size: 22rpx;
}

.page-body {
  padding-top: 112rpx;
  padding-bottom: 24rpx;
  height: calc(100vh);
  // background-color: bgBule;
  background-color: #F6F7F8;
  box-sizing: border-box;
}

.centent-box {
  width: 700rpx;
  // height 800rpx
  background: #fff;
  margin: 0 auto;
  border-radius: 12rpx;
  // padding 0rpx 0 64rpx 0
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0px 6rpx 12rpx 0px rgba(202, 202, 202, 0.23);
  padding-top: 112rpx;
  position: relative;

  .userImgBox {
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    z-index: 10;
    transform: translate(-50%, -50%);
  }
}

.skipBox {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  justify-content: center;

  .skipContent {
    width: 700rpx;
    padding: 6px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0px 6rpx 12rpx 0px rgba(202, 202, 202, 0.23);

    .skipTitleBox {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 6px 0;

      .skip {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .shipList {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .shipItem {
        box-sizing: border-box;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .shipIconBox {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 4px;

          .shipIcon {
            width: 100%;
            height: 100%;
          }
        }

        .shipTitle {
          font-size: 16px;
          color: #000;
          font-weight: bold;
        }
      }
    }
  }
}

.top-block {
  background-color: #e0ae86;
  height: 25rpx;
  width: 100%;
  position: relative;
}

.refresh-box {
  margin-bottom: 24rpx;
  justify-content: center;
}

.refresh-box .replayIcon{
  width: 24rpx;
  height: 24rpx;
  margin-right: 16rpx;
}

.cuIcon-refresh::before {
  color: #FF4748;
  margin-right: 6rpx;
}

.top-images {
  width: 65rpx;
  height: 65rpx;
  background: linear-gradient(#79aaf2 0%, #4085ec 100%);
  border: 2rpx solid #ffffff;
  border-radius: 50%;
  text-align: center;
  padding-top: 14rpx;
  position: absolute;
  left: 50%;
  top: 36rpx;
  transform: translateX(-50%);
  z-index: 1;
  box-sizing: border-box;

  image {
    width: 51rpx;
    height: 43rpx;
  }
}

.text-title {
  // background-color #f8f8f8
  padding: 30rpx 20rpx 20rpx;
  color: bgBule;
  font-size: 28rpx;
  position: relative;
  top: -1rpx;
}

// .text-title::before
// content ''
// width 34rpx
// height 15rpx
// background url(/static/images/cumulativeCode/border-radius.png) no-repeat
// background-size contain
// display block
// position absolute
// left 50%
// transform translateX(-54rpx)
// top 0rpx
// .text-title::after
// display block
// content ''
// width 34rpx
// height 15rpx
// background url(/static/images/cumulativeCode/border-radius.png) no-repeat
// background-size contain
// position absolute
// right 50%
// transform scaleX(-1) translateX(-54rpx)
// top 0rpx
.code-box {
  width: 480rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #656565;
  margin: auto;

  .code-text {
    letter-spacing: 2rpx;
    text-align: center;
    margin-right: 8rpx;
    // flex 1
  }
}

.coupon-box {
  width: 647rpx;
  margin: 0 auto;
  border-top: 1rpx solid #ebebeb;
  height: 108rpx;
  // padding 20rpx 0rpx
  text-align: left;
  line-height: 1.2;

  .coupon-ico {
    width: 44rpx;
    height: 35rpx;
    margin-right: 20rpx;
    line-height: 102rpx;
  }
}

.code-tab-box {
  width: 700rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8rpx;
  padding: 0 24rpx 0 36rpx;

  .code-btn {
    text-align: center;
    font-size: 26rpx;
    height: 96rpx;
    line-height: 96rpx;
    color: #fff;
    display: flex;
    align-items: center;
  }

  .cuIcon-right::before {
    color: #fff;
    font-size: 30rpx;
  }
}

.alipay-ico {
  width: 36rpx;
  height: 36rpx;
  margin-right: 16rpx;
}

// 优惠券列表弹出框
.body-title {
  color: #000;
  font-size: 30rpx;
  text-align: center;
  padding: 24rpx 0;
}

.pop-body {
  padding-top: 16rpx;
  border-top: 1rpx solid #ebebeb;
  box-sizing: border-box;

  .couponItem {
    width: 100%;
    height: 144rpx;
    background: url('/static/images/home/validCoupons.png') no-repeat center;
    background-size: contain;
    box-sizing: border-box;
    padding: 32rpx 0;
    display: flex;
    align-items: center;
    margin-bottom: 32rpx;

    .itemleft {
      width: 195rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 2rpx dashed #E5CD92;

      .leftUnit {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 34rpx;
        color: #BA922F;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        margin-right: 4rpx;
      }

      .money {
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        font-size: 48rpx;
        color: #BA922F;
        line-height: 56rpx;
        text-align: left;
        font-style: normal;
      }

      .condition {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #BA922F;
        line-height: 28rpx;
        text-align: justify;
        font-style: normal;
      }
    }

    .itemRight {
      flex: 1;
      width: 100%;
      box-sizing: border-box;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .couponName {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130F05;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .timeText {
        .coupon-date {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #716F69;
          line-height: 32rpx;
          text-align: justify;
          font-style: normal;
        }
      }

      .useBtn {
        .useBtnText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
          padding: 8rpx 20rpx;
          background: #BA922F;
          border-radius: 4rpx;
        }
      }
    }
  }
}

.coupon-img {
  border-radius: 50%;
  width: 56rpx;
  height: 56rpx;
  margin-right: 20rpx;
}

.coupon-list-cell {
  padding: 38rpx 36rpx 0 0;
  margin: 0 0 0 36rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  text-align: left;
  line-height: 1.2;
}

.flex-sub {
  flex: 1;
}

.border-bottom {
  padding-bottom: 25rpx;
  border-bottom: 1rpx solid #ebebeb;
}

.active {
  font-size: 40rpx;
  color: #4085EC;
}

.check-end img {
  width: 140rpx;
  height: 140rpx;
  margin-top: 50rpx;
}

.check-end .pay-end {
  color: #DD514C;
  margin: 30rpx;
  font-size: 40rpx;
}

.check-end .pay-door {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.check-end .pay-price span {
  display: inline-block;
  font-weight: bold;
  font-size: 60rpx;
}

.check-end .pay-btn {
  background: #3ab5f0;
  color: #fff;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 30rpx;
  font-size: 32rpx;
}
</style>
