template-parking-h5/src/pages/parkingFee/parkingFeeDetail.vue

<template>
  <div class="scroll-Y">
    <div class="warp">
      <div
        :class="{
          warp_index: true,
          warp_index1: true,
          'bgc-blue': custTypeId === 1,
          'bgc-green': custTypeId === 2,
        }"
      >
        {{ parkInfo.carno | formatCarno }}
      </div>
      <div class="warp_index">
        <div>停车场</div>
        <div class="warp_index_color">{{ parkInfo.parkname }}</div>
      </div>
      <div class="warp_index">
        <div>入场时间</div>
        <div class="warp_index_color">{{ parkInfo.entertime }}</div>
      </div>
      <div class="warp_index">
        <div>已停车时长</div>
        <div class="warp_index_color">{{ parkingTime }}</div>
      </div>
      <div class="warp_index">
        <div>应缴</div>
        <div class="warp_index_color">
          {{ (parkInfo.servicefee / 100) | currency }}
        </div>
      </div>
    </div>
    <div class="warp">
      <div
        class="warp_index warp_index_da"
        v-if="
          parkFee.parkInfoEntity &&
          (parkFee.parkInfoEntity.consumeReduce ||
            parkFee.parkInfoEntity.memberLevelReduce)
        "
      >
        <div>停车优惠</div>
        <div class="warp_index_color" @click="discounts">
          <div
            style="margin-right: 10px"
            :class="hasDiscount ? 'text-red' : ''"
          >
            {{ discountDesc }}
          </div>
          <img
            style="width: 26px; height: 26px"
            src="static/images/arrows.png"
          />
        </div>
      </div>
      <div
        class="warp_index warp_index_da"
        v-if="
          parkFee.parkInfoEntity && parkFee.parkInfoEntity.isuseintegral === 1
        "
      >
        <div>积分减免</div>
        <div class="warp_index_color" @click="toggle('bottom')">
          <div
            style="margin-right: 10px"
            :class="bonusCopy > integral || duration ? 'text-red' : ''"
          >
            {{ integralDesc }}
          </div>
          <img
            style="width: 26px; height: 26px"
            src="static/images/arrows.png"
          />
        </div>
      </div>
      <div
        class="warp_index warp_index_da"
        v-if="
          parkFee.parkInfoEntity && parkFee.parkInfoEntity.isuseticket === 1
        "
      >
        <div>优惠劵</div>
        <div class="warp_index_color" @click="coupon">
          <div
            style="margin-right: 10px"
            :class="couponCount > 0 ? 'text-red' : ''"
          >
            {{ couponDesc }}
          </div>
          <img
            style="width: 26px; height: 26px"
            src="static/images/arrows.png"
          />
        </div>
      </div>
      <!-- 纸质券 -->
      <div
        class="warp_index warp_index_da"
        v-if="
          (parkFee.parkInfoEntity &&
            parkFee.parkInfoEntity.papercoupons === 1) ||
          isShowPapercoupons
        "
      >
        <div>纸质优惠劵</div>
        <div class="warp_index_color" @click="paperCoupon">
          <div style="margin-right: 10px" class="text-red">
            扫描纸质优惠劵二维码
          </div>
          <img
            style="width: 26px; height: 26px"
            src="static/images/arrows.png"
          />
        </div>
      </div>
      <div
        :class="{
          warp_index: true,
          color_warp_index: custTypeId !== 0,
          warp_index_da: true,
        }"
      >
        <div>优惠金额:</div>
        <div class="warp_index_color" style="color: #ff0000">
          -{{ discountTotalFee | currency }}
        </div>
      </div>
      <div :class="{ warp_index: true, color_warp_index: custTypeId !== 0 }">
        <div>应付金额:</div>
        <div class="warp_index_color" style="color: #ff0000">
          {{ actualFee | currency }}
        </div>
      </div>
    </div>
    <div
      class="top_content"
      v-if="parkFee.parkInfoEntity && parkFee.parkInfoEntity.payinstruction"
    >
      <div class="title_box">
        <span class="btn">缴费说明</span>
      </div>
      <div class="info" :class="!isShow ? 'is-show' : ''">
        <span>{{ parkFee.parkInfoEntity.payinstruction }}</span>
      </div>
      <div
        class="top-down"
        @click="togglePayinstruction"
        v-if="!isShow && parkFee.parkInfoEntity.payinstruction.length > 60"
      >
        ︾
      </div>
      <div
        class="top-down"
        @click="togglePayinstruction"
        v-if="isShow && parkFee.parkInfoEntity.payinstruction.length > 60"
      >
        ︽
      </div>
    </div>
    <div class="flewx">
      <div class="flewx-content">
        应付<span style="color: #ff0000; font-size: 32px; padding-left: 20px">{{
          actualFee | currency
        }}</span>
        元
        <span style="color: #8d8d8d; padding-left: 30px; font-size: 28px"
          >已优惠{{ discountTotalFee | currency }}元</span
        >
        <uni-countdown
          v-if="payCarno"
          splitorColor="#FF0000"
          color="#FF0000"
          :show-day="false"
          :show-hour="false"
          :second="refreshTime"
          @timeup="resetCountDown()"
        >
          <span style="align-self: center; font-size: 26px; color: #ff0000"
            >后同步最新费用</span
          >
        </uni-countdown>
      </div>
      <div
        :class="{
          flewx_index3: true,
          blue_flewx_index3: custTypeId === 1,
          green_flewx_index3: custTypeId === 2,
          'btn-disabled': payBtnDisabled,
        }"
        @click="toPay"
      >
        支付{{this.parkInfo.servicefee}}-{{this.parkFee.parkInfoEntity}}
      </div>
    </div>
    <uni-popup ref="popup" type="bottom" :animation="false" :maskClick="false">
      <div class="popue_box">
        <div class="popue_box_index1">积分减免</div>
        <div class="popue_box_index">
          <div>减免规则</div>
          <div style="color: #989898">
            {{ integral }}积分抵扣{{
              parkMallCode === 5 ? integralToValue + '元' : '1小时'
            }}
          </div>
        </div>
        <div class="popue_box_index">
          <div style="font-weight: 700">可用积分</div>
          <div style="color: #ed1c24">{{ bonus }}分</div>
        </div>
        <div class="popue_box_index">
          <div>抵扣{{ parkMallCode === 5 ? '金额' : '时长' }}</div>
          <div class="popue_box_index" style="width: 325px">
            <div class="popue_box_index4_xs">
              <div class="popue_box_index4_xs_index1" @click="durationMinus">
                -
              </div>
              <div class="popue_box_index4_xs_index2">{{ duration }}</div>
              <div class="popue_box_index4_xs_index3" @click="durationAdd">
                +
              </div>
            </div>
            <div style="color: #808080">
              {{ parkMallCode === 5 ? '元' : '小时' }}
            </div>
          </div>
        </div>
        <div class="popue_box_index5">
          <div
            :class="{
              popue_box_index4_by: true,
              blue_popue_box_index4_by: custTypeId === 1,
              green_popue_box_index4_by: custTypeId === 2,
            }"
            @click="cancel"
          >
            取消
          </div>
          <div
            :class="{
              popue_box_index4_by1: true,
              blue_popue_box_index4_by1: custTypeId === 1,
              green_popue_box_index4_by1: custTypeId === 2,
            }"
            @click="confirm"
          >
            确定
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
// const app = getApp()
const app = {};
import moment from 'moment';
import { mapState } from 'vuex';
import MemberCacheTool from '@/utils/member-cache-tool.js';
import log from '@/utils/log.js';
import { compare } from '@/utils/location.js';
import uni from '@/utils/uniHooks';

export default {
  data() {
    return {
      bindflag: '',
      initFlag: true, // 用作应缴费用为0时的提示弹框标记
      animationChilc: false,
      duration: 0, // 积分兑换时长
      durationCopy: 0, // 积分兑换时长备份
      orderno: '',
      params: {},
      integral: 0, // 积分
      bonus: 0, // 当前积分
      bonusCopy: 0, // 积分备份
      bonusfee: 0, // 积分减免金额
      hourMoney: 15,
      payCarno: '',
      picUrl: '',
      parkInfo: {},
      parkFee: {},
      checkedTotal: 0, // 已选择优惠项目数
      discountTotal: {}, // 已选择优惠项目统计(时间、费用)
      couponCount: 0, // 可选优惠券数量
      checkedCouponCount: 0, // 已选优惠券数量
      couponInfo: {}, // 已选择电子券信息
      paperCouponInfo: {}, // 已选择纸质优惠券信息
      isShowPapercoupons: false, // 未登录时显示纸质优惠券
      // dimension: 1, // 计算维度 浦东0.5小时 其它停车场1小时
      maxonetimediscountFee: 0, // 每次优惠上限金额
      maxonedaydiscountFee: 0, // 每天优惠上限金额
      discountTotalFeeCopy: 0, // 用于超限判断
      parkMallCode: 0, // 0静安 1浦东 2杭州 3北京 4沈阳 5深圳
      hasDiscount: false, // 是否有会员减免、消费减免
      isShow: true, // 缴费说明true:显示全部 false:显示部分
      orderCreateTime: '', // 订单创建时间
      refreshTime: 180, // 停车场重置费用倒计时3分钟
      isPageHide: false, // 用于其它有人吗倒计时重置时不再弹出优惠框
      isShowPopup: false, // 优惠提示是否显示
      preUrl: '',
      integralToValue: 0, // 深圳前海停车500积分兑换5元
      integralMaxMoney: 0, // 深圳前海停车积分上限
    };
  },
  computed: {
    // 支付按钮状态
    payBtnDisabled() {
      return (
        !this.parkInfo.servicefee ||
        (this.member && !this.parkFee.parkInfoEntity)
      );
    },
    // 已停车时长
    parkingTime() {
      const time = this.parkInfo.serviceMin;
      const days = parseInt(time / 60 / 24);
      const hours = parseInt((time / 60) % 24);
      const minutes = parseInt(time % 60);
      if (days > 0) {
        return `${days}天 ${hours}小时 ${minutes}分钟`;
      }
      if (hours > 0) {
        return `${hours}小时 ${minutes}分钟`;
      }
      return `${minutes}分钟`;
    },

    // 停车优惠(首停、会员减免、消费减免)
    discountDesc() {
      if (this.hasDiscount) {
        if (this.checkedTotal > 0) {
          return `已选择${this.checkedTotal}项优惠`;
        }
        return '立即使用';
      } else {
        return '暂无可用优惠';
      }
    },

    // 积分减免
    integralDesc() {
      if (this.duration > 0) {
        // 深圳特殊处理(单位:金额)
        if (this.parkMallCode === 5) {
          return `已选择兑换${this.duration}元`;
        }
        return `已选择兑换${this.duration}小时`;
      }
      if (this.bonusCopy < this.integral) {
        return `${this.integral}积分可停车1小时`;
      }
      console.log(354, this.member);
      if (
        this.parkMallCode === 3 &&
        this.member?.currnentintegral >= this.integral &&
        !this.bonus
      ) {
        return `今日已达上限`;
      }
      return `${this.bonus}积分可减免`;
    },

    // 电子券
    couponDesc() {
      if (this.checkedCouponCount > 0) {
        return `已选择${this.checkedCouponCount}张优惠劵`;
      } else {
        if (this.couponCount > 0) {
          return `您有${this.couponCount}张可用优惠劵`;
        }
        return `暂无可用优惠券`;
      }
    },

    // 实际支付金额
    actualFee() {
      const fee = this.parkInfo.servicefee / 100 - this.discountTotalFee;
      return fee > 0 ? fee : 0;
    },

    // 优惠金额
    discountTotalFee() {
      let total = 0;
      if (this.discountTotal?.fee > 0) {
        total += this.discountTotal.fee; // 首停、会员、消费减免
      }
      if (this.bonusfee > 0) {
        total += this.bonusfee; // 积分减免
      }
      if (this.couponInfo?.couponfee > 0) {
        total += this.couponInfo.couponfee; // 电子券减免
      }
      this.discountTotalFeeCopy = total;
      // 超出上限按上限计算(parkMallCode: 0静安 1浦东 2杭州 3北京 4沈阳 5深圳)
      if (this.parkMallCode === 1) {
        if (total > this.maxonetimediscountFee) {
          total = this.maxonetimediscountFee;
        }
      }
      if (this.parkMallCode === 5) {
        if (total > this.maxonedaydiscountFee) {
          total = this.maxonedaydiscountFee;
        }
      }
      // 沈阳超限处理(maxonedaydiscountFee 会员、消费、电子券减免)
      if (this.parkMallCode === 4) {
        if (total - this.bonusfee > this.maxonedaydiscountFee) {
          total = this.maxonedaydiscountFee + this.bonusfee;
        }
      }
      if (this.paperCouponInfo.paperDiscountFee > 0) {
        total += this.paperCouponInfo.paperDiscountFee; // 纸质券减免
        this.discountTotalFeeCopy += this.paperCouponInfo.paperDiscountFee;
      }
      uni.setStorageSync('parkingTotal', {
        time: total / this.hourMoney,
        fee: total,
        feeCopy: this.discountTotalFeeCopy,
        bonusfee: this.bonusfee || 0,
      });
      return total;
    },
    // 页面初始化出发条件
    isInit() {
      console.log(426426426426, this.member);
      return {
        projectId: this.projectId,
        member: this.member,
      };
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
      paramsScene: (state) => state.paramsScene,
      mallid: (state) => state.mallId,
      openId: (state) => state.openid,
      member: (state) => state.member,
      groupId: (state) => state.groupId,
      mobile: (state) => state.mobile,
      projectId: (state) => state.projectId,
    }),
  },
  // 分享好友
  onShareAppMessage: function (res) {
    return {
      title: '缴费详情', // 分享标题
      // desc: this.params.shareDescribe, // 分享描述
      imageUrl: '', // 分享图标
      path: `/pages/parkingFee/parkingFeeDetail?orderno=${this.orderno}&id=${this.id}&mallid=${app.globalData.mallid}`,
    };
  },
  // 分享朋友圈
  onShareTimeline: function (res) {
    return {
      title: '缴费详情', // 分享标题
      // desc: this.params.shareDescribe, // 分享描述
      imageUrl: '', // 分享图标
      path: `/pages/parkingFee/parkingFeeDetail?orderno=${this.orderno}&id=${this.id}&mallid=${app.globalData.mallid}`,
    };
  },
  created() {
    this.picUrl = this.$picUrl;
    this.payCarno = this.$route.query.carno;
    this.orderno = this.$route.query.orderno;
    this.id = this.$route.query.id;
    // 场景二维码记录(是否扫码进入)
    // app.globalData.paramsScene = {};
    this.$store.commit('SET_PARAMS_SCENE', {});
    // this.$saveSceneQrcodeDetail(
    //   'page',
    //   'parkingFeeDetail:' + this.$route.query.id,
    //   '缴费详情',
    //   '',
    //   '',
    //   '',
    //   ''
    // );
    // this.init();
    // this.createParkOrder();
    // if (JSON.stringify(app.globalData.userInfo) !== "{}" && JSON.stringify(app.globalData.member) !== "{}") {
    // this.createParkOrder();
    // } else {
    // 	this.$refs.authorize.login("/pages/parkingFee/parkingFeeDetail", () => {
    // 		this.createParkOrder();
    // 	});
    // }
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync('previousUrl', '/pages/parkingFee/parkingFeeDetail.vue');
  },
  watch: {
    isInit() {
      console.log(
        493493493,
        this.isInit,
        this.isInit?.projectId,
        this.isInit?.member?.vipcode
      );
      if (
        this.isInit &&
        this.isInit?.projectId &&
        this.isInit?.member?.vipcode
      ) {
        this.init();
        this.createParkOrder();
      }
    },
    // member() {
    //   this.init();
    //   this.createParkOrder();
    // },
    // projectId() {
    //   console.log(490490490, this.projectId)
    // }
  },
  mounted() {
    console.log('页面被打开了');
    console.log('订单时间：' + this.orderCreateTime);
    // log.info('订单时间：' + this.orderCreateTime);
    // return;
    // 用户加载页面是计算规则
    if (
      this.isInit &&
      this.isInit?.projectId &&
      this.isInit?.member?.vipcode
    ) {
      this.isPageHide = false;
      // 如果订单时间+3分钟-当前时间<=0 刷新订单
      if (this.orderCreateTime) {
        const countDownTime = moment(this.orderCreateTime)
          .add(180, 's')
          .diff(moment(), 's');
        console.log('剩余时间：' + countDownTime);
        log.info('剩余时间：' + countDownTime);
        if (countDownTime <= 0) {
          setTimeout(() => {
            this.createParkOrder();
          }, 300);
        } else {
          this.refreshTime = countDownTime;
        }
      }
      return

      // 优惠减免(首停、会员、消费)
      this.checkedTotal = uni.getStorageSync('checkedTotal');
      this.discountTotal = uni.getStorageSync('discountTotal');

      // 电子券减免(停车券)
      this.couponInfo = uni.getStorageSync('couponInfo');
      this.checkedCouponCount = uni.getStorageSync('checkedCouponList').length;

      // 纸质优惠券
      this.paperCouponInfo = uni.getStorageSync('paperCouponInfo');
    }
  },
  onHide() {
    this.isPageHide = true;
  },
  methods: {
    // 页面初始清空缓存
    init() {
      // 优惠减免(首停、会员、消费)
      uni.removeStorageSync('checkedList'); // 选中list
      uni.removeStorageSync('checkedTotal'); // 选中count数
      uni.removeStorageSync('discountTotal'); // 减免信息(时长、费用)

      // 停车减免(优惠、积分、停车券)
      uni.removeStorageSync('parkFee');

      // 电子券优惠信息
      uni.removeStorageSync('checkedCouponList'); // 选中list
      uni.removeStorageSync('couponInfo'); // 减免信息(时长、费用)
      uni.removeStorageSync('list'); // 电子券list

      // 总停车优惠信息(时长、费用)
      uni.removeStorageSync('parkingTotal');

      // 应缴金额
      uni.removeStorageSync('servicefee');

      // 订单号
      uni.removeStorageSync('orderno');

      // 纸质优惠券
      uni.removeStorageSync('paperCouponInfo');
    },

    // 重置倒计时
    resetCountDown() {
      this.refreshTime = 0;
      this.createParkOrder();
    },

    // 创建订单
    async createParkOrder() {
      try {
        // return;
        uni.showLoading({
          title: '加载中',
        });
        // const openId = MemberCacheTool.getOpenId(app);
        // const params = {
        //   carno: this.payCarno,
        //   mallid: this.mallid,
        //   openId: this.openId,
        //   vipcode:
        //     this.member?.vipcode || uni.getStorageSync('member')?.vipcode,
        //   mobile: this.mobile,
        //   groupId: this.groupId,
        //   createuser: 'sys_miniprogram',
        // };

        // const params = {"carno":"沪K99118","createuser":"sys_miniprogram","groupId":"8a8884e77cc9e70a017cca14d07e0002","mallid":"8a88835c7cd96d31017cda3f77e80003","mobile":"13901890884","openId":"ozdsB4_V8HXo0pwmyMc612j8CUY0","vipcode":"01900734052"}
        const params = {
          carno: '皖EEEEEE',

          mallid: '8aaa80b47c784020017c78b00d060022',

          openId: 'ozdsB4yx3I7ez2Ba3DgEmeSR-CFY',

          vipcode: 'KERRY100212801',

          mobile: '15267617473',

          groupId: '8aaa81947c6e1ca0017c7201e82d0001',

          createuser: 'sys_miniprogram',
        };
        this.$md(params);
        console.log(623)
        // console.log(567, this.$baseURL + 'api/1.0/park/createParkOrderAndCarFee')
        console.log({
          // path: this.$baseURL + 'api/1.0/park/createParkOrder',
          path: this.$baseURL + 'api/1.0/park/createParkOrderAndCarFee',
          // path: 'http://172.21.90.87:8083/xcrm-api/api/1.0/park/createParkOrderAndCarFee',
          data: params,
          method: 'POST',
          header: JSON.parse(uni.getStorageSync('handleUser')),
        });
        /*const res = await this.$request({
          url: this.$baseURL + 'api/1.0/park/createParkOrderAndCarFee',
          // path: 'http://172.21.90.87:8083/xcrm-api/api/1.0/park/createParkOrderAndCarFee',
          data: params,
          method: 'POST',
          header: JSON.parse(uni.getStorageSync('handleUser')),
        });*/

        const res = {
          data: {
            code: 0,
            msg: 'success',
            data: {
              id: null,
              parkServiceFee: null,
              noCarNo: null,
              parkPayFee: null,
              addFee: null,
              outTradeNo: null,
              isUseFree: null,
              type: null,
              openTime: null,
              parkname: null,
              parkcode: 'kerry_bj_park',
              parksign: null,
              channel: null,
              orderno: null,
              tradeId: '90C01E53-874E-4B44-ABED-D2E43B71518E',
              accountId: null,
              merchantAccount: null,
              status: 1,
              remark: null,
              carno: '浙C12410',
              mobile: null,
              vipcode: null,
              vipName: null,
              memberGrade: null,
              entertime: '2022-08-31 10:03:30',
              outtime: '2022-09-13 15:07:38',
              serviceMin: 19024.0,
              servicehour: 317.07,
              servicefee: 18825,
              bonusfee: null,
              bonus: null,
              newMemberBonus: null,
              newMemberBonusMin: null,
              bonusFeeMin: null,
              couponfee: null,
              couponfeeMin: null,
              otherfee: 0,
              consumeFee: null,
              consumeFeeHour: null,
              consumeFeeMin: null,
              consumeTicket: null,
              useConsumeFee: null,
              memberGradeFee: null,
              memberGradeFeeHour: null,
              memberGradeFeeMin: null,
              paperCouponFee: null,
              paperCouponFeeMin: null,
              paperCoupons: null,
              paperCouponCode: null,
              firstParkFee: null,
              firstParkFeeMin: null,
              payfee: null,
              doflag: null,
              totalfee: null,
              usetotalfee: null,
              paytype: null,
              paykind: null,
              paychannel: null,
              integraladjustid: null,
              refundIntegralAdjustId: null,
              couponcode: null,
              mallid: null,
              createuser: null,
              updateuser: null,
              deptId: null,
              groupId: null,
              creator: null,
              createDate: null,
              updater: null,
              updateDate: null,
              openId: null,
              refundNo: null,
              wxState: null,
              isInvoice: null,
              invoiceId: null,
              payStatus: null,
              notifyStatus: null,
              timeoutStatus: null,
              refundStatus: null,
              parkMallCode: null,
              projectId: null,
              pspName: null,
              newMemeberBonusFee: null,
            },
          },
        };
        console.log('590590590res', res);
        // return;
        uni.hideLoading();
        if (res.data.code === 0) {
          this.bindflag = res.data.data.bind;
          this.parkInfo = res.data.data;
          this.parkMallCode = this.parkInfo.parkMallCode;
          this.orderCreateTime = this.parkInfo.createDate;
          uni.setStorageSync('servicefee', this.parkInfo.servicefee / 100);
          uni.setStorageSync('orderno', this.parkInfo.orderno);
          if (!this.parkInfo.servicefee && this.initFlag) {
            this.initFlag = false;
            return uni.showModal({
              showCancel: false,
              title: '提示',
              content: '当前无需缴费',
              complete: () => {
                // this.createParkOrder();
                this.$router.back();
              },
            });
          }
          console.log(629, this.member);
          if (this.member) {
            console.log(639);
            this.getDiscount();
          } else {
            // 未登录状态显示纸质券
            this.isShowPapercoupons = true;
          }
          this.refreshTime = 180;
        } else {
          uni.showModal({
            showCancel: false,
            title: '提示',
            content: res.data.msg,
            complete(r) {
              this.$router.back();
            },
          });
        }
      } catch (err) {
        console.log(err);
      }
    },

    // 获取优惠、停车场相关配置
    getDiscount() {
      uni.showLoading({
        title: '加载中',
      });
      console.log(662, this.member);
      // return
      const params = {
        carno: this.payCarno,
        mallid: this.mallid,
        vipcode: this.member.vipcode,
        groupId: this.groupId,
      };
      console.log(670, params);
      // return;
      this.$md(params);
      this.$request({
        url: this.$baseURL + 'api/1.0/park/discount',
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 0) {
            this.parkFee = res.data.data;
            if (this.parkFee.parkIntegraltomoneyList) {
              this.integral = this.parkFee.parkIntegraltomoneyList[0].integral;
              this.integralToValue =
                this.parkFee.parkIntegraltomoneyList[0].value || 0;
              this.integralMaxMoney =
                this.parkFee.parkIntegraltomoneyList[0].integralMaxHour || 0;
              this.bonus = this.parkFee.parkIntegraltomoneyList[0].bonus;
              // 深圳特殊处理(单位:金额)
              if (this.parkMallCode === 5) {
                if (this.duration) {
                  this.bonus -=
                    (this.duration * this.integral) / this.integralToValue;
                  this.bonusfee = this.duration;
                  this.durationCopy = this.duration;
                }
              } else {
                if (this.duration) {
                  this.bonus -= this.duration * this.integral;
                  this.bonusfee = this.duration * this.hourMoney;
                  this.durationCopy = this.duration;
                }
              }
              this.bonusCopy = this.bonus;
            }
            if (!this.parkFee.parkInfoEntity) {
              return;
            }
            const reg = /[;；]/g;
            this.parkFee.parkInfoEntity.payinstruction =
              this.parkFee.parkInfoEntity.payinstruction.replace(reg, '\r\n');
            this.hourMoney = this.parkFee.parkInfoEntity.needmoney;
            this.parkMallCode = this.parkFee.parkInfoEntity.parkMallCode;
            if (this.parkFee.memberTicketList) {
              this.couponCount = this.parkFee.memberTicketList.length;
            }
            // 上限金额
            this.maxonetimediscountFee =
              this.parkFee.parkInfoEntity.maxonetimediscount * this.hourMoney;
            // 深圳特殊处理(单位:金额)
            if (this.parkMallCode === 5) {
              this.maxonedaydiscountFee =
                this.parkFee.parkInfoEntity.maxOneDayHour -
                  this.parkFee.parkInfoEntity
                    .ticketandMemeberGradeAndConsumeUseHour || 0;
            } else {
              this.maxonedaydiscountFee =
                (this.parkFee.parkInfoEntity.maxOneDayHour -
                  this.parkFee.parkInfoEntity
                    .ticketandMemeberGradeAndConsumeUseHour) *
                  this.hourMoney || 0;
            }
            if (this.maxonedaydiscountFee < 0) {
              this.maxonedaydiscountFee = 0;
            }
            uni.setStorageSync('parkFee', JSON.stringify(this.parkFee));
            // 如果有可使用会员减免、消费减免，追加弹框提示
            if (
              this.parkFee.parkInfoEntity.consumeReduce ||
              this.parkFee.parkInfoEntity.memberLevelReduce
            ) {
              if (
                (this.parkFee.parkMemberOrderReducesEntityList &&
                  this.parkFee.parkMemberOrderReducesEntityList[0]) ||
                (this.parkFee.parkConsumeReducesEntityList &&
                  this.parkFee.parkConsumeReducesEntityList[0])
              ) {
                this.hasDiscount = true;
                // if (!this.parkInfo.servicefee) {
                // 	return;
                // }
                // let confirmColor = '#703a98';
                // if (this.custTypeId === 1) {
                // 	confirmColor = '#023694';
                // }
                // if (this.custTypeId === 2) {
                // 	confirmColor = '#0B683A';
                // }
                // if (this.checkedTotal || this.isPageHide || this.isShowPopup) {
                // 	return;
                // }
                // this.isShowPopup = true;
                // uni.showModal({
                // 	title: '停车优惠',
                // 	content: '您有停车优惠可使用, 前往使用!',
                // 	cancelText: '返回',
                // 	confirmText: '点击查看',
                // 	confirmColor: confirmColor,
                // 	success: res => {
                // 		if (res.confirm) {
                // 			this.discounts();
                // 		}
                // 		this.isShowPopup = false;
                // 	}
                // })
              }
            }
            // 自动勾选优惠
            if (
              !this.discountTotalFee &&
              (this.hasDiscount ||
                this.bonusCopy > this.integral ||
                this.couponCount)
            ) {
              this.autoCheckDiscounts();
            }
          } else {
            uni.showModal({
              showCancel: false,
              title: '提示',
              content: res.data.msg,
              complete(r) {
                // this.$router.back();
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 积分取消
    cancel() {
      this.duration = this.durationCopy;
      this.bonus = this.bonusCopy;
      // 深圳特殊处理(单位:金额)
      if (this.parkMallCode === 5) {
        this.bonusfee = this.duration;
      } else {
        this.bonusfee = this.duration * this.hourMoney;
      }
      this.$refs.popup.close();
    },

    // 积分确认
    confirm() {
      this.bonusCopy = this.bonus;
      this.durationCopy = this.duration;
      this.$refs.popup.close();
    },

    // 减积分
    durationMinus() {
      if (this.duration > 0) {
        // 深圳特殊处理(单位:金额)
        if (this.parkMallCode === 5) {
          this.duration -= this.integralToValue;
        } else {
          this.duration--;
        }
        this.bonus += this.integral;
      }
      // 深圳特殊处理(单位:金额)
      if (this.parkMallCode === 5) {
        this.bonusfee = this.duration;
      } else {
        this.bonusfee = this.duration * this.hourMoney;
      }
    },

    // 加积分
    durationAdd() {
      // 浦东每次缴费超限控制
      if (
        this.parkMallCode === 1 &&
        this.discountTotalFee >= this.maxonetimediscountFee
      ) {
        return uni.showToast({
          title: `超出抵扣上限,每次最高可抵扣${this.parkFee.parkInfoEntity.maxonetimediscount}小时`,
          icon: 'none',
        });
      }
      // 北京积分上限控制
      if (this.parkMallCode === 3) {
        const bonusMax =
          this.parkFee.parkInfoEntity.integralMaxHour -
            this.parkFee.parkInfoEntity.integralUseHour || 0;
        if (this.duration >= bonusMax) {
          return uni.showToast({
            title: `超出抵扣上限,每日最高可抵扣${this.parkFee.parkInfoEntity.integralMaxHour}小时`,
            icon: 'none',
          });
        }
      }
      // 深圳积分上限控制
      if (this.parkMallCode === 5) {
        if (this.discountTotalFee >= this.maxonedaydiscountFee) {
          return uni.showToast({
            title: `超出抵扣上限,每日最高可抵扣${this.parkFee.parkInfoEntity.maxOneDayHour}元`,
            icon: 'none',
          });
        }
        if (this.duration >= this.integralMaxMoney) {
          return uni.showToast({
            title: `超出抵扣上限,每次最高可抵扣${this.integralMaxMoney}元`,
            icon: 'none',
          });
        }
      }

      if (this.bonus - this.integral >= 0) {
        this.bonus -= this.integral;
        // 深圳特殊处理(单位:金额)
        if (this.parkMallCode === 5) {
          this.duration += this.integralToValue;
        } else {
          this.duration++;
        }
      } else {
        uni.showToast({
          title: '积分不足',
          icon: 'none',
        });
      }
      // 深圳特殊处理(单位:金额)
      if (this.parkMallCode === 5) {
        this.bonusfee = this.duration;
      } else {
        this.bonusfee = this.duration * this.hourMoney;
      }
    },

    // 积分减免弹出
    toggle(type) {
      if (
        this.parkFee.parkIntegraltomoneyList &&
        this.parkFee.parkIntegraltomoneyList.length
      ) {
        this.$refs['popup'].open();
      }
    },

    // 跳转纸质优惠
    paperCoupon() {
      this.$router.push({
        path: '/parkingFeePaperCoupon',
        query: {
          parkInfo: this.parkInfo,
        },
      });
    },

    // 电子优惠劵
    coupon() {
      if (!this.couponCount) {
        return uni.showToast({
          title: '暂无可使用的优惠券，请前往积分商城兑换优惠券',
          icon: 'none',
        });
      }
      this.$router.push({
        path: './parkingFeeCoupon',
      });
    },

    // 跳转首停、会员、消费减免页面
    discounts() {
      if (!this.hasDiscount && this.parkMallCode !== 2) {
        return uni.showToast({
          title: '暂无可用优惠',
          icon: 'none',
        });
      }
      this.$router.push({
        path: '/parkingFeeDiscounts',
      });
    },

    // 自动勾选优惠 优先级：会员/消费->电子券->积分
    autoCheckDiscounts() {
      if (!this.parkFee || !this.parkInfo.servicefee) {
        return;
      }
      const serviceFee = this.parkInfo.servicefee / 100; // 应缴费用

      // 自动选取消费减免
      if (
        this.parkFee.parkConsumeReducesEntityList &&
        this.parkFee.parkConsumeReducesEntityList[0] &&
        this.parkFee.parkConsumeReducesEntityList[0].recuceContent
      ) {
        this.autoConsume(serviceFee);
      }

      // 自动选取会员等级减免
      if (
        this.parkFee.parkMemberOrderReducesEntityList &&
        this.parkFee.parkMemberOrderReducesEntityList[0] &&
        this.parkFee.parkMemberOrderReducesEntityList[0].reduceContent
      ) {
        this.autoMember();
      }

      // 自动选取电子券减免
      if (this.couponCount) {
        this.autoCoupon(serviceFee);
      }

      // 自动选取积分减免
      if (this.bonusCopy > this.integral) {
        this.autoBonus(serviceFee);
      }
    },

    // 自动选取消费减免
    autoConsume(serviceFee) {
      let consumeTime =
        +this.parkFee.parkConsumeReducesEntityList[0].recuceContent || 0; // 消费减免时长
      let consumeFee = 0; // 消费减免费用
      const isSplit = this.parkFee.parkInfoEntity.isSplit === 0 ? 0 : 1; // 是否拆分 0: 可拆 1: 不可拆
      const serviceTime = Math.ceil(serviceFee / this.hourMoney); // 停车时长(防止有小数情况向上取整)

      /*************************************************** 静安 ***************************************************/
      if (this.parkMallCode === 0) {
        // 超过上限取上限
        if (consumeTime > this.parkFee.parkInfoEntity.remainReduceTime) {
          consumeTime = this.parkFee.parkInfoEntity.remainReduceTime;
        }
        // 拆分消费减免
        if (isSplit === 0) {
          // 减免时长超出停车时长取停车时长
          if (consumeTime > serviceTime) {
            consumeTime = serviceTime;
          }
        }
        // 消费减免费用
        consumeFee = consumeTime * this.hourMoney;
      }

      /*************************************************** 浦东 ***************************************************/
      if (this.parkMallCode === 1) {
        // 可用消费减免时长上限
        let remainReduceTime = this.parkFee.parkInfoEntity.remainReduceTime;
        if (remainReduceTime > this.parkFee.parkInfoEntity.maxonetimediscount) {
          remainReduceTime = this.parkFee.parkInfoEntity.maxonetimediscount;
        }
        // 超过上限取上限
        if (consumeTime > remainReduceTime) {
          consumeTime = remainReduceTime;
        }
        // 拆分消费减免
        if (isSplit === 0) {
          // 减免时长超出停车时长取停车时长
          if (consumeTime > serviceTime) {
            consumeTime = serviceTime;
          }
        }
        // 消费减免费用
        consumeFee = consumeTime * this.hourMoney;
      }

      /*************************************************** 杭州 ***************************************************/
      if (this.parkMallCode === 2) {
        // 超过上限取上限
        if (consumeTime > this.parkFee.parkInfoEntity.remainReduceTime) {
          consumeTime = this.parkFee.parkInfoEntity.remainReduceTime;
        }
        // 消费减免费用
        consumeFee = consumeTime * this.hourMoney;
      }

      /*************************************************** 沈阳 ***************************************************/
      if (this.parkMallCode === 4) {
        // 超过上限取上限
        if (
          consumeTime >
          this.parkFee.parkInfoEntity.maxOneDayHour -
            this.parkFee.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour
        ) {
          consumeTime =
            this.parkFee.parkInfoEntity.maxOneDayHour -
            this.parkFee.parkInfoEntity.ticketandMemeberGradeAndConsumeUseHour;
        }
        // 消费减免费用
        consumeFee = consumeTime * this.hourMoney;
      }

      // 实时显示
      this.checkedTotal++;
      this.discountTotal = {
        memberGradeFee: 0,
        consumeFee: consumeFee,
        useConsumeFee:
          this.parkFee.parkConsumeReducesEntityList[0].consumerLimit,
        time: consumeTime,
        fee: consumeFee,
      };

      // 存入缓存(用于子页面停车优惠画面显示)
      uni.setStorageSync('checkedList', ['reduces']);
      uni.setStorageSync('checkedTotal', this.checkedTotal);
      uni.setStorageSync('discountTotal', this.discountTotal);
    },

    // 自动选取会员等级减免
    autoMember() {
      // 支付金额0 则无需后续减免
      if (!this.actualFee) {
        return;
      }

      const memberGradeTime =
        +this.parkFee.parkMemberOrderReducesEntityList[0].reduceContent || 0; // 会员等级减免时长
      const memberGradeFee = memberGradeTime * this.hourMoney; // 会员等级减免费用

      // 浦东每次超限
      if (this.parkMallCode === 1) {
        // 超出每次减免上限 则无需后续
        if (this.discountTotalFee >= this.maxonetimediscountFee) {
          return;
        }
      }

      // 沈阳(会员等级+消费+电子券)、深圳每日超限
      if (this.parkMallCode === 4 || this.parkMallCode === 5) {
        // 超出每日减免上限 则无需后续
        if (this.discountTotalFee >= this.maxonedaydiscountFee) {
          return;
        }
      }

      // 实时显示
      let checkedList = [];
      if (uni.getStorageSync('discountTotal')) {
        this.discountTotal.memberGradeFee = memberGradeFee;
        this.discountTotal.time += memberGradeTime;
        this.discountTotal.fee += memberGradeFee;
        checkedList = ['reduces', 'member'];
      } else {
        this.discountTotal = {
          memberGradeFee: memberGradeFee,
          consumeFee: 0,
          useConsumeFee: 0,
          time: memberGradeTime,
          fee: memberGradeFee,
        };
        checkedList = ['member'];
      }
      this.checkedTotal++;

      // 存入缓存(用于子页面停车优惠画面显示)
      uni.setStorageSync('checkedList', checkedList);
      uni.setStorageSync('checkedTotal', this.checkedTotal);
      uni.setStorageSync('discountTotal', this.discountTotal);
    },

    // 自动选取电子券减免
    autoCoupon(serviceFee) {
      console.log('查看 actualFee 的状态', this.actualFee)
      // 支付金额0 则无需后续减免
      if (!this.actualFee) {
        return;
      }

      // 浦东 超出每次减免上限 则无需后续
      if (
        this.parkMallCode === 1 &&
        this.discountTotalFee >= this.maxonetimediscountFee
      ) {
        return;
      }

      // 沈阳(会员等级+消费+电子券)、深圳 超出每日减免上限 则无需后续
      if (
        (this.parkMallCode === 4 || this.parkMallCode === 5) &&
        this.discountTotalFee >= this.maxonedaydiscountFee
      ) {
        return;
      }

      // 杭州 超出电子券使用数量上限 则无需后续
      if (
        this.parkMallCode === 2 &&
        this.parkFee.parkInfoEntity.useTicketNum ===
          this.parkFee.parkInfoEntity.couponcodeNum
      ) {
        return;
      }

      const checkedCouponList = []; // 所选电子券
      let couponList = this.parkFee.memberTicketList; // 所有电子券
      let couponFee = 0;
      let couponCode = '';

      // 电子券价值统一转换金额方便后续排序 type 1: 金额 2: 时长
      couponList.forEach((e) => {
        e.disabled = true;
        e.checked = false;
        if (e.carType == '2') {
          e.value = e.parktime * this.hourMoney;
        } else if (e.carType == '1') {
          e.value = e.ticketValue;
        }
      });

      // 电子券按叠加规则分组
      const couponListRule1 = couponList.filter(
        (e) => e.superpositionrule == '1'
      ); // 不可叠加
      const couponListRule2 = couponList.filter(
        (e) => e.superpositionrule == '2'
      ); // 同类型可叠加

      // 电子券按价值排序
      if (couponListRule1 && couponListRule1.length > 1) {
        couponListRule1.sort(compare('value'));
      }
      if (couponListRule2 && couponListRule2.length > 1) {
        couponListRule2.sort(compare('value'));
      }

      // 排序后的全部电子券
      couponList = [...couponListRule1, ...couponListRule2];

      // 如果不可叠加电子券价值大于可叠加总和则使用不可叠加电子券
      let couponListRule1Max = 0;
      if (couponListRule1 && couponListRule1.length) {
        couponListRule1Max = couponListRule1[couponListRule1.length - 1].value;
      }
      let couponListRule2Sum = 0;
      if (couponListRule2 && couponListRule2.length) {
        couponListRule2.forEach((e) => {
          couponListRule2Sum += e.value;
        });
      }
      let isCheckedRule1 = false;
      if (
        couponListRule1Max >= couponListRule2Sum &&
        couponListRule2Sum < serviceFee - this.discountTotalFee
      ) {
        isCheckedRule1 = true;
      }

      // 使用不可叠加电子券
      if (isCheckedRule1 && couponListRule1 && couponListRule1.length) {
        for (let i = 0; i < couponListRule1.length; i++) {
          const coupon = couponListRule1[i];
          const checkedIndex = couponList.findIndex(
            (e) => e.couponCode === coupon.couponCode
          );

          // 浦东每次上限处理
          if (this.parkMallCode === 1) {
            if (
              this.discountTotalFee + coupon.value >
              this.maxonetimediscountFee
            ) {
              couponList[checkedIndex - 1].checked = true;
              couponList[checkedIndex - 1].disabled = false;
              checkedCouponList.push(checkedIndex - 1);
              couponFee += coupon.value;
              couponCode += coupon.couponCode + '#';
              break;
            }
          }

          // 沈阳(会员等级+消费+电子券)、深圳 超出每日减免上限处理
          if (this.parkMallCode === 4 || this.parkMallCode === 5) {
            if (
              this.discountTotalFee + coupon.value >
              this.maxonedaydiscountFee
            ) {
              couponList[checkedIndex - 1].checked = true;
              couponList[checkedIndex - 1].disabled = false;
              checkedCouponList.push(checkedIndex - 1);
              couponFee += coupon.value;
              couponCode += coupon.couponCode + '#';
              break;
            }
          }

          // 若当前减免已经使费用减免为0则跳出循环
          if (coupon.value >= serviceFee - this.discountTotalFee) {
            couponList[checkedIndex].checked = true;
            couponList[checkedIndex].disabled = false;
            checkedCouponList.push(checkedIndex);
            couponFee += coupon.value;
            couponCode += coupon.couponCode + '#';
            break;
          }

          // 循环到最后一张券
          if (i === couponListRule1.length - 1) {
            couponList[checkedIndex].checked = true;
            couponList[checkedIndex].disabled = false;
            checkedCouponList.push(checkedIndex);
            couponFee += coupon.value;
            couponCode += coupon.couponCode + '#';
          }
        }
      }

      // 未使用规则1的电子券则继续
      if (!isCheckedRule1 && couponListRule2 && couponListRule2.length) {
        // 使用同类型可叠加电子券
        let sum = 0; // 电子券价值累加
        for (const coupon of couponListRule2) {
          sum += coupon.value;
          // 浦东每次上限处理
          if (
            this.parkMallCode === 1 &&
            this.discountTotalFee + sum > this.maxonetimediscountFee
          ) {
            break;
          }
          // 沈阳(会员等级+消费+电子券)、深圳每日上限处理
          if (
            (this.parkMallCode === 4 || this.parkMallCode === 5) &&
            this.discountTotalFee + sum > this.maxonedaydiscountFee
          ) {
            break;
          }
          const checkedIndex = couponList.findIndex(
            (e) => e.couponCode === coupon.couponCode
          );
          couponList[checkedIndex].checked = true;
          couponList[checkedIndex].disabled = false;
          checkedCouponList.push(checkedIndex);
          couponFee = sum;
          couponCode += coupon.couponCode + '#';
          // 杭州电子券使用数量上限处理
          if (
            this.parkMallCode === 2 &&
            checkedCouponList.length ===
              this.parkFee.parkInfoEntity.useTicketNum -
                this.parkFee.parkInfoEntity.couponcodeNum
          ) {
            break;
          }

          // 若当前减免已经使费用减免为0则跳出循环
          if (sum >= serviceFee - this.discountTotalFee) {
            break;
          }
        }
      }

      // 实时显示
      if (couponCode.lastIndexOf('#') === couponCode.length - 1) {
        couponCode = couponCode.slice(0, couponCode.length - 1);
      }
      this.couponInfo = {
        couponfee: couponFee,
        couponcode: couponCode,
      };
      this.checkedCouponCount = checkedCouponList.length;

      // 存入缓存(用于子页面停车优惠画面显示)
      console.log('将 checkedCouponList 写入缓存----》')
      uni.setStorageSync('checkedCouponList', checkedCouponList);
      uni.setStorageSync('list', couponList);
      uni.setStorageSync('couponInfo', this.couponInfo);
    },

    // 自动选取积分减免
    autoBonus(serviceFee) {
      // 支付金额0 则无需后续减免
      if (!this.actualFee) {
        return;
      }

      // 浦东 超出每次减免上限 则无需后续
      if (
        this.parkMallCode === 1 &&
        this.discountTotalFee >= this.maxonetimediscountFee
      ) {
        return;
      }

      // 深圳积分特殊处理(金额计算) 其它停车场小时计算
      if (this.parkMallCode === 5) {
        if (this.discountTotalFee >= this.maxonedaydiscountFee) {
          return;
        }
        let bonus = this.bonus;
        // 剩余可减免金额
        const remainDiscountFee =
          this.maxonedaydiscountFee - this.discountTotalFee;
        // 剩余停车金额
        let remainFee = serviceFee - this.discountTotalFee;
        if (remainFee > remainDiscountFee) {
          remainFee = remainDiscountFee;
        }
        let bonusAll = (remainFee * this.integral) / this.integralToValue; // 全部减免所需积分
        if (bonusAll < this.integral) {
          bonusAll = this.integral;
        }
        // 取余
        const remainBonus = bonusAll % this.integral;
        const remainMyBonus = this.bonus % this.integral;
        // 如果有余数 做倍数处理
        if (remainBonus) {
          bonusAll = bonusAll - remainBonus + this.integral;
        }
        if (remainMyBonus) {
          bonus = this.bonus - remainMyBonus;
        }
        if (bonus <= bonusAll) {
          // 积分可兑换多少金额 小数向下取整
          this.duration = Math.floor(
            (bonus * this.integralToValue) / this.integral
          );
        } else {
          this.duration = (bonusAll * this.integralToValue) / this.integral;
        }
        if (this.duration > this.integralMaxMoney) {
          this.duration = this.integralMaxMoney;
        }
      } else {
        // 剩余停车时长(有小数情况因此向上取整)
        const serviceTime = Math.ceil(
          (serviceFee - this.discountTotalFee) / this.hourMoney
        );
        const bonusAll = serviceTime * this.integral; // 全部减免所需积分
        if (this.bonus <= bonusAll) {
          // 积分不够兑换整小时 向下取整
          this.duration = Math.floor(this.bonus / this.integral);
        } else {
          this.duration = serviceTime;
        }
      }
      // 浦东每次减免上限处理
      if (this.parkMallCode === 1) {
        const bonusMax = Math.floor(
          (this.maxonetimediscountFee - this.discountTotalFee) / this.hourMoney
        );
        if (this.duration > bonusMax) {
          this.duration = bonusMax;
        }
      }

      // 北京积分减免每日上限处理
      if (this.parkMallCode === 3) {
        const bonusMax =
          this.parkFee.parkInfoEntity.integralMaxHour -
            this.parkFee.parkInfoEntity.integralUseHour || 0;
        if (this.duration > bonusMax) {
          this.duration = bonusMax;
        }
      }

      // 深圳特殊处理(单位:金额)
      if (this.parkMallCode === 5) {
        this.bonus -= (this.duration * this.integral) / this.integralToValue;
        this.bonusfee = this.duration;
      } else {
        this.bonus -= this.duration * this.integral;
        this.bonusfee = this.duration * this.hourMoney;
      }
      this.durationCopy = this.duration;
      this.bonusCopy = this.bonus;
    },

    // 节流函数
    throttle(fc, waitTime = 1500, imme = true) {
      if (imme) {
        if (!this.flag) {
          this.flag = true;
          typeof fc === 'function' && fc();
          this.timer = setTimeout(() => {
            this.flag = false;
          }, waitTime);
        }
      } else {
        if (!this.flag) {
          this.flag = true;
          this.timer = setTimeout(() => {
            this.flag = false;
            typeof fc === 'function' && fc();
          }, waitTime);
        }
      }
    },
    // 支付前
    toPay() {
      this.throttle(() => {
        // 北京特殊处理
        if (this.parkMallCode === 3 && this.discountTotalFee) {
          return uni.showModal({
            title: '提示',
            content: '请确认是否使用优惠，确认后无法返还!',
            success: (res) => {
              if (res.confirm) {
                this.goPay();
              }
            },
          });
        }
        this.goPay();
      }, 3000);
    },

    // 支付
    goPay() {
      console.log(159515951595,  this.$kipAppId)
      // this.kerryPayment()
      // return
      // console.log(1580, this.parkMallCode);
      // window.toWXSendMsg({
      //   type: 'openWxPay',
      //   options: { title: '1589', mask: true },
      // });
      // window.subscribe('wxPayOver',(options) =>{
      //   console.log(1596, options)
      // })
      // if (
      //   !this.parkInfo.servicefee ||
      //   (this.member && !this.parkFee.parkInfoEntity)
      // ) {
      //   return;
      // }
      uni.showLoading({
        title: '加载中',
      });
      let bonus = this.duration * this.integral;
      // 深圳特殊处理(单位:金额)
      if (this.parkMallCode === 5) {
        bonus = (this.duration * this.integral) / this.integralToValue;
      }
      // const openId = MemberCacheTool.getOpenId(app);
      // const openId = 'oIUfO5QBRfEmnaqj7To0C4_0JUTA';
      const openId = this.openId;
      console.log(1614, this.actualFee);
      const params = {
        carno: this.parkInfo.carno,
        mallid: this.mallid,
        groupId: this.groupId,
        openId: openId,
        vipcode: this.member?.vipcode || uni.getStorageSync('member')?.vipcode,
        createuser: 'sys_miniprogram',
        orderno: this.parkInfo.orderno || '7719219221312412c21v3218u',
        bonusfee: this.bonusfee * 100,
        bonus: bonus,
        couponfee: this.couponInfo.couponfee * 100 || 0,
        couponfeeMin: (this.couponInfo.couponfee / this.hourMoney) * 60 || 0,
        couponcode: this.couponInfo.couponcode,
        paperCoupons: JSON.stringify(this.paperCouponInfo.paperCouponList), // 纸质优惠券券码 多个以#分割
        paperCouponCode: this.paperCouponInfo.paperCouponcode, // 纸质优惠券券码 多个以#分割
        paperCouponFee: this.paperCouponInfo.paperDiscountFee * 100 || 0, // 纸质优惠券优惠金额，单位：分
        paperCouponFeeMin:
          parseInt(this.paperCouponInfo.paperDiscountTime * 60) || 0, // 纸质优惠券优惠时长，单位：分钟
        bonusFeeMin: this.duration * 60, // 积分抵扣时长，单位：分钟
        consumeFeeMin:
          (this.discountTotal.consumeFee / this.hourMoney) * 60 || 0, // 消费减免时长，单位：分钟
        firstParkFeeMin:
          (this.discountTotal.firstParkFee / this.hourMoney) * 60 || 0, // 首停减免时长 单位 分钟
        memberGradeFeeMin:
          (this.discountTotal.memberGradeFee / this.hourMoney) * 60 || 0, // 会员等级减免时长，单位：分钟
        consumeFee: this.discountTotal.consumeFee * 100 || 0,
        consumeFeeHour: this.discountTotal.consumeFee / this.hourMoney || 0,
        useConsumeFee:
          this.parkMallCode === 3 ? '0.0' : this.discountTotal.useConsumeFee,
        memberGradeFee: this.discountTotal.memberGradeFee * 100 || 0,
        memberGradeFeeHour:
          this.discountTotal.memberGradeFee / this.hourMoney || 0,
        firstParkFee: this.discountTotal.firstParkFee * 100 || 0,
        usetotalfee:
          ((this.discountTotal.memberGradeFee || 0) +
            (this.discountTotal.consumeFee || 0) +
            this.bonusfee +
            (this.couponInfo.couponfee || 0) +
            (this.paperCouponInfo.paperDiscountFee || 0)) *
          100,
        payfee: parseFloat((this.actualFee * 100).toFixed(2)),
        totalfee:
          this.discountTotalFee * 100 < this.parkInfo.servicefee
            ? this.discountTotalFee * 100
            : this.parkInfo.servicefee,
        paytype: this.actualFee > 0 ? 3 : 1,
        projectId: this.projectId,
      };
      console.log(1663, this.actualFee);
      let path =
        this.actualFee > 0
          ? 'api/1.0/park/weixinPay'
          : 'api/1.0/park/notWeixinPay';
      // 北京特殊处理
      if (this.parkMallCode === 3) {
        path = 'api/1.0/park/dealParkOrderBj';
      }
      this.$md(params);
      console.log(165516551655, this.actualFee);
      console.log(1654, this.$baseURL + path);
      this.$request({
        url: this.$baseURL + path,
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 0) {
            // 北京特殊处理
            if (this.parkMallCode === 3 && false) {
              if (!res.data.data.syncId) {
                uni.showToast({
                  title: '缴费成功',
                  icon: 'none',
                });
                this.$router.back();
                return;
              }
              console.log(this.bindflag, 'bindflag');
              const accountInfo = uni.getAccountInfoSync();
              const {
                miniProgram: { envVersion },
              } = accountInfo;

              if (this.bindflag === 0) {
                uni.navigateToMiniProgram({
                  appId: 'wx192b7d2e8dcbefd0',
                  path: this.$etcpAppPath,
                  extraData: {
                    params: {
                      token: res.data.data.token,
                      syncId: res.data.data.syncId,
                      payType: 6,
                      CarNumber: res.data.data.CarNumber,
                      actionId: 1,
                      payAcType: 2,
                    },
                  },
                  envVersion: 'trial',
                  success: (res) => {
                    console.log(res);
                    this.$router.back();
                  },
                });
              } else if (this.bindflag === 1) {
                uni.navigateToMiniProgram({
                  appId: 'wx192b7d2e8dcbefd0',
                  path: this.$etcpAppPath,
                  extraData: {
                    params: {
                      token: res.data.data.token,
                      syncId: res.data.data.syncId,
                      payType: 6,
                      CarNumber: res.data.data.CarNumber,
                      actionId: 1,
                    },
                  },
                  envVersion: 'trial',
                  success: (res) => {
                    console.log(res);
                    this.$router.back();
                  },
                });
              }
              return;
            }
            console.log(17211721172117211721);
            if (this.actualFee > 0) {
              // 微信支付
              this.kerryPayment(res.data.data, params);
            } else {
              // 埋点位置
              this.sensorsClick('$ClickParkingPay', {
                car_no: params.carno,
                pay_fee: params.payfee,
                total_fee: params.totalfee,
                redirect_path: 'pages/parkingFee/parkingFeeSuccess',
              });
              this.$router.replace({
                path: './parkingFeeSuccess?carno=' + this.parkInfo.carno,
              });
            }
          } else {
            uni.showModal({
              showCancel: false,
              title: '提示',
              content: res.data.msg,
              complete: (r) => {
                // uni.navigateBack({})
                this.createParkOrder();
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
          uni.hideLoading();
          uni.showToast({
            title: JSON.stringify(err),
            icon: 'none',
          });
        });
    },
    // 埋点方法
    sensorsClick(eventName, params) {
      let optionsQuery = uni.getStorageSync('options_query');
      let fixedParams = {
          cta_itemno: '',
          cta_name: '',
          previous_path: this.preUrl || '',
          // 原previous_path: uni.getStorageSync('previousUrl') || ''
          // previous_path: 使用sdk预置参数$referrer,
          $brand_id: uni.getStorageSync('groupId'),
          $location: uni.getStorageSync('mallid'),
          $channel: optionsQuery.channel || '',
          // $utm_lbs: this.optionsQuery.utm_lbs || '',
          $utm_channel: optionsQuery.utm_channel || '',
          $utm_method: optionsQuery.utm_method || '',
          $utm_source: optionsQuery.utm_source || '',
          $utm_function: optionsQuery.utm_function || '',
          $utm_user: optionsQuery.utm_user || '',
        },
        finalParams = Object.assign(fixedParams, params);
      this.$sensors.track(eventName, finalParams);
    },
    // 嘉里第三方支付接口
    kerryPayment(session='011cad54-735f-4e92-8f1b-f22bdfe073cd', payParams) {
      // window.toWXSendMsg({
      //   type: 'openWxPay',
      //   options: {
      //     session
      //   },
      // });
      // return
      console.log(1782, 1782, 1782, session, payParams);
      const openId = MemberCacheTool.getOpenId(app);
      // const appId = uni.getAccountInfoSync().miniProgram.appId;
      // const appId = 'wx192b7d2e8dcbefd0';
      // const appId = 'wxd830fe4d1e04988e';
      const appId = 'wx92c3e55fbef6b2af';
      const params = {
        region: 'cn',
        payChannel: 'MINI_PROGRAM',
        payOption: 'WECHATPAY',
        appId: appId,
        // openId: openId,
        openId: this.openId
      };
      this.$md(params);
      // let path =
      //   this.$kipPaymentUrl + 'services/session/' + session + '/transactions';
        // https://qa-payment.kerryplus.com/services/session/7c6a199a-fbcb-48b0-a9c1-b325c2c9bf88/transactions
      // let path = 'kipPaymentUrl/services/session/' + session + '/transactions';
      let path = `/qaPayment/services/session/${session}/transactions`
      this.$request({
        // url: this.$baseURL + `services/session/${session}/transactions`,
        url: path,
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          console.log(res);
          if (res.data?.code == '000000') {
            const prepayJson = res.data.data.params;
            window.toWXSendMsg({
              type: 'openWxPay',
              options: {
                provider: 'wxpay',
                timeStamp: prepayJson.timeStamp,
                nonceStr: prepayJson.nonceStr,
                package: prepayJson.package,
                signType: prepayJson.signType,
                paySign: prepayJson.paySign,
              },
            });
            window.subscribe('wxPayOver', (options) => {
              console.log(1596, options);
            });
            return;
            // 微信支付接口
            // uni.requestPayment({
            //   provider: 'wxpay',
            //   timeStamp: prepayJson.timeStamp,
            //   nonceStr: prepayJson.nonceStr,
            //   package: prepayJson.package,
            //   signType: prepayJson.signType,
            //   paySign: prepayJson.paySign,
            //   success: () => {
            //     uni.showModal({
            //       showCancel: false,
            //       title: '提示',
            //       content: '支付成功',
            //       complete: () => {
            //         this.sensorsClick('$ClickParkingPay', {
            //           car_no: payParams.carno,
            //           pay_fee: payParams.payfee,
            //           total_fee: payParams.totalfee,
            //           redirect_path: 'pages/parkingFee/parkingFeeSuccess',
            //         });
            //         this.$router.replace({
            //           path: './parkingFeeSuccess?carno=' + this.parkInfo.carno,
            //         });
            //       },
            //     });
            //   },
            //   fail: () => {
            //     this.failedParkOrder();
            //   },
            // });
          } else {
            this.failedParkOrder();
          }
        })
        .catch((err) => {
          console.log(err);
          this.failedParkOrder();
        });
    },

    // 支付失败弹框 重新创建订单
    reCreateParkOrder() {
      uni.showModal({
        showCancel: false,
        title: '提示',
        content: '支付失败',
        complete: (r) => {
          this.createParkOrder();
        },
      });
    },

    // 支付失败后返还优惠券
    failedParkOrder() {
      const param = {
        orderno: this.parkInfo.orderno,
      };
      this.$md(param);
      this.$request({
        path: this.$baseURL + 'api/1.0/park/failedParkOrder',
        data: param,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          this.reCreateParkOrder();
        })
        .catch((err) => {
          this.reCreateParkOrder();
        });
    },

    //缴费说明隐藏显示
    togglePayinstruction() {
      this.isShow = !this.isShow;
    }
  },
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
  //padding-bottom: 20px;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;

  .parkingFee {
    display: flex;
    flex-direction: column;

    .parkingFee-top {
      display: flex;
      flex-direction: column;
      background: #c69c6d;

      .top_content {
        padding: 35px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        span {
          font-size: 24px;
          color: #fff;
          text-align: left;
        }

        .title_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 30px;

          .btn {
            padding: 8px 14px;
            box-sizing: border-box;
            color: #c69c6d;
            background: #fff;
            border-radius: 20px;
            text-align: center;
          }
        }
      }

      .top_menu {
        background: #fff;
        padding: 30px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-radius: 15px 15px 0 0;

        .menu_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33.3%;

          img {
            width: 102px;
            height: 102px;
          }

          span {
            font-size: 24px;
            margin-top: 24px;
          }
        }
      }
    }

    .parkingFee-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 14px 25px;
      box-sizing: border-box;

      // 车牌号查询
      .parkingFee-search {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 24px;
        padding: 26px 25px 20px;
        box-sizing: border-box;

        .search_tip {
          color: #999;
          font-size: 24px;
          text-align: center;
        }

        .searchPrice {
          margin: 0 auto;
          width: 40%;
          height: 60px;
          line-height: 60px;
          border-radius: 20px;
        }
      }

      .search-list {
        display: flex;
        flex-direction: column;
        background: #fff;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 20px;
        border-radius: 24px;
        width: 100%;

        .list_item {
          padding: 38px 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f2f2f2;

          span {
            font-size: 28px;
          }

          button {
            height: 60px;
            line-height: 60px;
            margin: 0;
          }
        }
      }
    }
  }
}

// 缴费说明
.payInstruct_wrap {
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;

  .scroll {
    height: 600px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;

    .payInstruct_title {
      font-size: 30px;
      text-align: center;
      padding: 20px 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
    }

    .payInstruct_con {
      display: flex;
      width: 100%;
      padding: 20px 10px;
      box-sizing: border-box;

      span {
        font-size: 28px;
        color: #999;
      }
    }
  }
}

// 车牌号 & 虚拟键盘
.input-box {
  width: 100%;
  height: 70px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
  border-radius: 0.4rem;
  margin: 1rem auto;
  display: flex;
  justify-content: center;

  .li {
    flex: 1;
    border: 1px solid rgba(206, 208, 210, 1);
    box-sizing: border-box;
    margin: 0 2px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #323233;

    img {
      width: 80%;
      height: 100%;
    }

    &.active {
      border-color: #3e67ff;
    }

    &:nth-child(2) {
      margin-right: 26px;
    }
  }
}

.class-van-button-small {
  min-width: 0;
  border-radius: 10px;
  margin: 10px 3px;
  box-shadow: 10px 10px 10px #aaa;
}

.class-plate-box {
  width: 100%;
  padding: 24px 0;
  box-sizing: border-box;
  position: relative;
}

.plate_number {
  width: 100%;
  display: flex;
  flex-direction: column;

  .plate_number_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #eaf1f9;
    padding: 0 0 10px;
    box-sizing: border-box;

    .close-box {
      width: 100%;
      font-size: 24px;
      color: #3e67ff;
      text-align: right;
      margin-right: 1.25rem;

      div {
        padding: 10px;
      }
    }

    .plate_chinese_box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      button {
        width: 9%;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        padding: 0;
        font-size: 28px;
        .class-van-button-small;
      }
    }
  }
}

.allBoard {
  width: 100%;
  display: flex;
  flex-direction: column;

  .allBoard_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #eaf1f9;
    padding: 0 0 10px;
    box-sizing: border-box;
  }

  .close-box {
    padding-top: 22px;
    box-sizing: border-box;
    font-size: 24px;
    color: #3e67ff;
    text-align: right;
    margin-right: 1.25rem;
  }

  .plate_number_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    button {
      width: 9%;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      padding: 0;
      font-size: 28px;
      .class-van-button-small;
    }
  }
}

.vehicleMgt-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 35px;

  .vehicleMgt-title {
    display: flex;
    padding: 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;

    span {
      font-size: 28px;
    }
  }

  .vehicleMgt-content {
    display: flex;
    flex-direction: column;
    background: #fff;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 36px;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;

      span {
        font-size: 28px;
      }
    }
  }
}

.delBtn {
  color: #c69c6d;
  height: 38px;
  line-height: 38px;
  font-size: 20px;
  width: 124px;
  border: 1px solid #c69c6d;
  border-radius: 19px;
  text-align: center;
}

.payThe {
  width: 100%;

  .pay_index {
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
    margin-bottom: 5px;
    background-color: #fff;
    font-weight: 600;
  }

  .pay_title {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 30px;

    .title {
      font-size: 16px;
    }

    .dk_desc {
      font-size: 12px;
      color: #999;
      margin-top: 3px;
    }

    .value {
      font-size: 14px;
      color: #999;
    }
  }

  .payjf {
    font-size: 12px;
    color: #999;
    margin-right: 18px;
    margin-top: 12px;
  }

  .paySelect {
    color: rgba(16, 16, 16, 100);
    font-size: 20px;
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 10px;
    margin-left: 80px;
    width: 260px;
    height: 80px;
  }

  .paySelect1 {
    color: rgba(16, 16, 16, 100);
    font-size: 20px;
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f2f2f2;
    margin-top: 5px;

    .pay-se-l {
      height: 50px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 50px;
      background-color: #fff;
    }
  }

  .payjfzk {
    font-size: 20px;
    color: #8b8c8b;
    margin-top: 10px;
    margin-left: 210px;
  }

  .pay_time {
    font-size: 28px;
    margin-left: 180px;
    padding-bottom: 40px;
  }

  .pay_time1 {
    margin-top: 26px;
  }
}

.pay_jiaof {
  width: 80%;
  height: 70px;
  line-height: 70px;
  background-color: #c69c6d;
  text-align: center;
  color: rgba(255, 255, 255, 100);
  font-size: 28px;
  font-family: Microsoft Yahei;
  border-radius: 10px;
  margin: 20px auto;
}

// 停车券弹窗
.ticketPopup {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 999;

  .popup-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 42px;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    position: relative;

    span {
      color: #999;
      font-size: 28px;
    }

    .useRule-text {
      position: absolute;
      right: 42px;
      color: rgb(58, 130, 248);
    }
  }

  .popup_scroll {
    height: 70vh;
    background: #f2f2f2;
  }

  .popup_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    box-sizing: border-box;

    .item {
      display: flex;
      margin-bottom: 16px;

      .item-image {
        border: 2px solid #f2f2f2;
        border-right: 2px dashed #f2f2f2;
        padding: 16px;
        border-radius: 16px 0 0 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;

        &.cro {
          position: relative;
        }

        .img {
          width: 130px;
          height: 130px;
          border-radius: 8px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .item-content {
        flex: 1;
        border: 2px solid #f2f2f2;
        border-radius: 0 8px 8px 0;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        display: flex;
        position: relative;

        &.cro_ {
          position: relative;
        }

        .content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;

          .h3 {
            font-size: 28px;
            line-height: 48px;
            font-weight: 600;
          }

          .h3.color_disabled {
            color: #838181;
            font-weight: 400;
          }

          .span {
            font-size: 24px;
            color: #838181;
            line-height: 40px;
          }
        }

        .erwm_box {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;

          img {
            width: 52px;
            height: 52px;
          }

          .tag {
            position: absolute;
            bottom: 0;
            right: 0;
            border-radius: 16px;
            padding: 5px 10px;
            box-sizing: border-box;
            background: #f7931e;
            text-align: center;
            color: #fff;
            width: 122px;
            font-size: 24px;
          }
        }
      }
    }
  }

  // 对勾
  .dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.375rem;
  }
}

// 弹窗按钮
.popup_button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  box-sizing: border-box;

  .desc .num {
    color: #c69c6d;
    font-size: 18px;
  }

  .ok_btn {
    height: 110px;
    line-height: 110px;
    text-align: center;
    background: #c69c6d;
    color: #fff !important;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
  }
}

.warp {
  width: 94%;
  margin-left: 3%;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 10px;

  .warp_index {
    width: 650px;
    margin-left: 27.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 28px;
  }

  .warp_index1 {
    justify-content: center;
    font-size: 40px;
    padding: 30px 0;
    border-bottom: 1px solid #f2f2f2;
  }

  .color_warp_index {
    color: #000000;
  }

  .bgc-blue {
    .bgc-color('blue');
  }

  .bgc-green {
    .bgc-color('green');
  }

  .bgc-color(@value) {
    @color: 'color-@{value}';
    color: #fff;
    background-color: @@color;
    margin: 0;
    width: 100%;
    border-radius: 10px 10px 0 0;
  }

  .warp_index_da {
    padding: 30px 0;
    border-bottom: 1px solid #f2f2f2;
  }

  .warp_index_color {
    color: #999999;
    display: flex;
    align-items: center;
  }
}

.flewx {
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 20px;

  .flewx-content {
    position: absolute;
    left: 16px;
  }

  .flewx_index3 {
    width: 150px;
    height: 70px;
    border-radius: 50px;
    text-align: center;
    font-size: 28px;
    line-height: 70px;
    color: #fff;
    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
    box-shadow: 2px 3px 5px #888888;
    position: absolute;
    right: 16px;
  }

  .blue_flewx_index3 {
    .color_flewx_index3('blue');
  }

  .green_flewx_index3 {
    .color_flewx_index3('green');
  }

  .color_flewx_index3(@value) {
    @color: 'color-@{value}';
    background-image: none;
    background-color: @@color;
  }

  .btn-disabled {
    color: hsla(0, 0%, 100%, 0.6);
    cursor: not-allowed;
    background-color: rgb(128, 128, 128);
    background-image: none;
  }
}

.popue_box {
  height: 530px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  .popue_box_index {
    width: 92%;
    margin-left: 4%;
    font-size: 30px;
    height: 90px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .popue_box_index1 {
    font-size: 32px;
    width: 92%;
    margin-left: 4%;
    font-weight: 700;
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
  }

  .popue_box_index4_xs {
    width: 250px;
    height: 55px;
    border: 2px solid #e5e6ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;

    .popue_box_index4_xs_index1 {
      width: 54px;
      height: 54px;
      background-color: #f5f8fb;
      text-align: center;
      line-height: 54px;
      border-right: 1px solid #e5e6ec;
    }

    .popue_box_index4_xs_index3 {
      width: 54px;
      height: 54px;
      background-color: #f5f8fb;
      text-align: center;
      line-height: 54px;
      border-left: 1px solid #e5e6ec;
    }
  }

  .popue_box_index5 {
    font-size: 30px;
    width: 92%;
    margin-left: 4%;
    font-weight: 700;
    height: 140px;
    line-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .popue_box_index4_by {
    width: 320px;
    height: 90px;
    line-height: 90px;
    color: #fff;
    border-radius: 60px;
    text-align: center;
    color: #7e4fa1;
    font-weight: 700;
    border: 1px solid #7e4fa1;
  }

  .blue_popue_box_index4_by {
    .color_popue_box_index4_by('blue');
  }

  .green_popue_box_index4_by {
    .color_popue_box_index4_by('green');
  }

  .color_popue_box_index4_by(@value) {
    @color: 'color-@{value}';
    color: @@color;
    border: 1px solid @@color;
  }

  .popue_box_index4_by1 {
    width: 320px;
    height: 90px;
    line-height: 90px;
    color: #fff;
    border-radius: 60px;
    text-align: center;
    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
    border: 1px solid #7e4fa1;
  }

  .blue_popue_box_index4_by1 {
    .color-background-color('blue');
  }

  .green_popue_box_index4_by1 {
    .color-background-color('green');
  }
}

.text-purple {
  color: #703a98;
}

.text-red {
  color: #ff0000;
}

.top_content {
  padding: 25px 35px 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  span {
    font-size: 24px;
    color: #898989;
    text-align: left;
  }

  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .btn {
      padding: 0px 14px;
      box-sizing: border-box;
      border-radius: 20px;
      font-size: 30px;
      color: #000;
      text-align: center;
    }
  }

  .info {
    padding-left: 18px;
    font-size: 27px;
    width: 95%;
    color: #666;
    line-height: 45px;
  }

  .is-show {
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .top-down {
    text-align: center;
    color: #d6d2d2;
  }
}
</style>