Merge pull request #563 from John-Hong/John/release-3.14.0/SCRM-6742

fix(SCRM-6742): 优化电子券的加载速度

src/pages/parkingFeeV2/mixins/parkingFeeCoupon.js

@@ -1,13 +1,9 @@
-import { mapState } from 'vuex';
+import {mapState} from 'vuex';
 import uni from '@/utils/uniHooks';
-// import { initWxJsSdkConfig } from '@/utils/login';
-import { Toast } from 'vant';
-import { getPlatform, getAppIdByGroupIdAndMallId, isInWeixinH5 } from '@/utils';
-import { initWxJsSdkConfig } from '@/utils/login';
+import {Toast} from 'vant';
+import {getPlatform, getAppIdByGroupIdAndMallId, isInWeixinH5} from '@/utils';
 import moment from 'moment'
-// import { compare } from '@/utils/location.js';
-// import { isArray } from 'lodash';
-// import { v4 as uuidv4 } from 'uuid';
+import {debounce, throttle} from 'lodash';
 
 export default {
   data() {
@@ -20,7 +16,13 @@ export default {
       maxCouponFee: 0, // 计算优惠券已选的总金额
       remainPrice: 0, // 剩余可用优惠额度
       newAvailableDiscountFee: 0, // 可使用的电子券的优惠金额上限
-      extraData: {}
+      extraData: {},
+      // 虚拟dom
+      offset: 0,
+      height: 0,
+      rowHeight: 105,
+      rowData: [...new Array(30)].map((i, index) => index),
+      handleScrollDebounce: null
     };
   },
   computed: {
@@ -32,47 +34,50 @@ export default {
       maxOneDayDiscountFee: (state) => state.order.maxOneDayDiscountFee, // 深圳单日单次使用上限
       usingTotalDiscount: (state) => state.order.usingTotalDiscount, // 当前已使用优惠
       availableDiscountFee: (state) => state.order.availableDiscountFee, // 当前已使用优惠
-      paperDiscountFee: (state) => state.order.paperDiscountFee, // 当前已使用优惠
       unLimitWeekendPoints: (state) => state.order.unLimitWeekendPoints, // 新的积分上限, 默认为false（不开启）, unLimitWeekendPoints： true # 开启无上限功能；   unLimitWeekendPoints： false # 关闭无上限功能；
       lbsId: (state) => state.lbsId, // 楼栋ID
       groupId: (state) => state.groupId, // 楼盘ID
-      remainCoupons: ( state ) => state.order.remainCoupons, // 仅限杭州当前剩余可选电子券上限
-      parkMallCode: ( state ) => state.order.parkMallCode, // 当前车场的数据
-      maxOneDayCoupons: ( state ) => state.order.maxOneDayCoupons,// 仅限杭州当日电子券可选上限
-      paperDiscountFee: ( state ) => state.order.paperDiscountFee,// 纸质券的优惠金额
+      remainCoupons: (state) => state.order.remainCoupons, // 仅限杭州当前剩余可选电子券上限
+      parkMallCode: (state) => state.order.parkMallCode, // 当前车场的数据
+      maxOneDayCoupons: (state) => state.order.maxOneDayCoupons,// 仅限杭州当日电子券可选上限
+      paperDiscountFee: (state) => state.order.paperDiscountFee,// 纸质券的优惠金额
     }),
-    totalFee () {
+    totalFee() {
       return this?.orderDetail?.parkingRecord?.totalFee
     }
   },
-
   mounted() {
-    // console.log('parkingFeeCoupon.js');
-    // setTimeout(() => {
-    //   uni.setNavigationBarTitle({
-    //     title: '优惠券',
-    //   });
-    //   if (isInWeixinH5()) {
-    //     initWxJsSdkConfig(['checkJsApi', 'chooseImage'], ['wx-open-launch-weapp']);
-    //     this.launchPathInit();
-    //   }
-    // }, 300);
-    // setTimeout(() => {
-    //   window?.toWXSendMsg({
-    //     type: 'uni_func',
-    //     funcName: 'setNavigationBarColor',
-    //     options: {
-    //       frontColor: '#000000',
-    //       backgroundColor: '#FBFCFF',
-    //     },
-    //   });
-    // }, 500)
+    this.height = window.document.documentElement.offsetHeight;
+    if(!this.handleScrollDebounce) {
+      this.handleScrollDebounce = debounce(this.handleScroll, 100)
+    }
+    window.addEventListener('scroll', this.handleScrollDebounce, false);
     this.pageInit();
   },
   methods: {
+    handleScroll(e) {
+      const scrollingElement = e.target.scrollingElement;
+      const scrollTop = scrollingElement.scrollTop;
+      const scrollHeight = scrollingElement.scrollHeight;
+      const clientHeight = scrollingElement.clientHeight;
+      // 计算是否已经滚动到底部
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - this.rowHeight * 2;
+      if (isAtBottom) {
+        // 只有当滚动到底部时才进行计算
+        if (!this.rowHeight && this.coupons.length) {
+          this.rowHeight = scrollTop / (this.coupons.length === 20 ? 20 : this.coupons.length);
+        }
+        if (this.rowHeight > 100 && this.coupons.length > this.rowData.length) {
+          const newRowDataCount = Math.round(scrollTop / this.rowHeight);
+          if (newRowDataCount >= 20) {
+            this.rowData = Array.from({length: this.rowData.length + 10}, (_, index) => index);
+          }
+        }
+      }
+    },
     pageInit() {
       const {parkInfo} = this.orderDetail
-      const { parkMallCode } = parkInfo;
+      const {parkMallCode} = parkInfo;
       /*
        * 电子优惠券初始化逻辑(后端处理)
        *
@@ -83,7 +88,7 @@ export default {
       this.remainPrice = this.usingTotalDiscount - this.paperDiscountFee;
       if ((this.parkMallCode === 4 || this.parkMallCode === 6) && this.orderDetail?.discountInfo?.points?.[0]?.discountFee) {
         this.remainPrice = this.remainPrice - this.orderDetail.discountInfo.points[0].discountFee
-      }   
+      }
       // 前海积分不参与当前电子券优惠上限
       if ( [ 5, 8, 10 ].indexOf(parkMallCode) > -1 && this.orderDetail.discountInfo?.points?.[0]?.discountFee) {
         this.remainPrice = this.remainPrice - this.orderDetail?.discountInfo?.points[0]?.discountFee
@@ -115,7 +120,7 @@ export default {
           this.setAllDisabled()
           if (this.parkMallCode === 4 || this.parkMallCode === 6  || this.parkMallCode === 5 || this.parkMallCode === 8) {
             this.isDisabledByRule(this.couponList[0], 0, 'showMsg');
-          }          
+          }
         })
       }
     },
@@ -123,8 +128,8 @@ export default {
       return Number.parseInt(i.replace(/coupon/g, ''));
     },
     checkboxItemChange(name, index) {
-      const coupon  = this.couponList[index];
-      if ( coupon.disabled ) {
+      const coupon = this.couponList[index];
+      if (coupon.disabled) {
         if (this.getAmountToBePaid() <= 0) {
           Toast('当前无需追加优惠')
           return;
@@ -138,13 +143,11 @@ export default {
       // 取消勾选时
       if (this.checkedCouponList.indexOf(name) > -1) {
         this.checkedCouponList = this.checkedCouponList.filter((i) => i !== name);
-        setTimeout(() => {
-          this.remainPrice = this.remainPrice - this.couponList[index].discountFee
-          this.newAvailableDiscountFee = this.newAvailableDiscountFee + this.couponList[index].discountFee
-          this.newGroupedCouponData()
-          this.setAllDisabled()
-          this.isDisabledByRule(coupon, index, 'showMsg');
-        }, 100)
+        this.remainPrice = this.remainPrice - this.couponList[index].discountFee
+        this.newAvailableDiscountFee = this.newAvailableDiscountFee + this.couponList[index].discountFee
+        this.newGroupedCouponData()
+        this.setAllDisabled()
+        this.isDisabledByRule(coupon, index, 'showMsg');
         return;
       }
       // 如果有选中项
@@ -164,7 +167,6 @@ export default {
         this.setAllDisabled()
         this.isDisabledByRule(coupon, index, 'showMsg');
       })
-
     },
     // 获取还需支付金额
     getAmountToBePaid() {
@@ -172,7 +174,7 @@ export default {
       if([ 5, 8, 10 ].indexOf(this.parkMallCode) > -1 && this.orderDetail.discountInfo?.points?.[0]?.discountFee) {
         amountToBePaid = amountToBePaid - this.orderDetail.discountInfo?.points?.[0]?.discountFee
       }
-      if([ 4, 6 ].indexOf(this.parkMallCode) > -1 && this.orderDetail.discountInfo?.points?.[0]?.discountFee) {
+      if ([4, 6].indexOf(this.parkMallCode) > -1 && this.orderDetail.discountInfo?.points?.[0]?.discountFee) {
         amountToBePaid = amountToBePaid - this.orderDetail.discountInfo?.points?.[0]?.discountFee
       }
       return amountToBePaid
@@ -200,9 +202,9 @@ export default {
         // 计算单日剩余 remainConsumeTime
         // 当前使用优惠 state.usingTotalDiscount
         // 判断符合上限
-        if ( this.remainPrice >= maxOneTimeDiscountFee) {
-          this.couponList = this.couponList.map((elm,iemi) => {
-            if ( !elm.disabled && this.checkedCouponList.indexOf(`coupon${iemi}`) < 0) {
+        if (this.remainPrice >= maxOneTimeDiscountFee) {
+          this.couponList = this.couponList.map((elm, iemi) => {
+            if (!elm.disabled && this.checkedCouponList.indexOf(`coupon${iemi}`) < 0) {
               elm.disabled = true
             }
             return elm
@@ -216,9 +218,9 @@ export default {
         // 计算单日剩余 remainConsumeTime
         // 当前使用优惠 state.usingTotalDiscount
         // 判断符合上限
-        if ( this.remainPrice >= maxOneTimeDiscountFee ) {
-          this.couponList = this.couponList.map((elm,iemi) => {
-            if ( !elm.disabled && this.checkedCouponList.indexOf(`coupon${iemi}`) < 0) {
+        if (this.remainPrice >= maxOneTimeDiscountFee) {
+          this.couponList = this.couponList.map((elm, iemi) => {
+            if (!elm.disabled && this.checkedCouponList.indexOf(`coupon${iemi}`) < 0) {
               elm.disabled = true
             }
             return elm
@@ -247,13 +249,12 @@ export default {
         return
       }
       // 如果杭州、福州的使用券打到上限则不自动计算其余券是否可选
-      if ( this.checkedCouponList.length >= this.remainCoupons && (this.parkMallCode === 2 || this.parkMallCode === 8 || this.parkMallCode === 7 || this.parkMallCode === 9 || this.parkMallCode === 5) ) {
+      if (this.checkedCouponList.length >= this.remainCoupons && (this.parkMallCode === 2 || this.parkMallCode === 8 || this.parkMallCode === 7 || this.parkMallCode === 9 || this.parkMallCode === 5)) {
         return
       }
-      // console.log(292,this.couponList);
       const index = this.item2Number(this.checkedCouponList[0])
       const item = this.couponList[index];
-      const { superposition, limitCountPerOrder = 0, name } = item;
+      const {superposition, limitCountPerOrder = 0, name} = item;
       switch (superposition) {
         case '1': // 不可叠加
           couponList = couponList.map((elm, i) => {
@@ -262,12 +263,12 @@ export default {
           })
           break;
         case '2': // 同类型可叠加
-                  // 找到
+          // 找到
           couponList = couponList.map((elm, i) => {
             // 只有 status === 'available' 的才会赋值为 false
             elm.disabled = elm?.status !== 'available' || !moment().isBefore(elm.expirationDate); // 默认可选
             // 找到所以 superposition === 2 的同类型的券
-            if ( elm?.status === 'unavailable' || moment().isSameOrAfter(elm.expirationDate)) {
+            if (elm?.status === 'unavailable' || moment().isSameOrAfter(elm.expirationDate)) {
               // 这里是做一个阻断，就是避免程序往下执行，没有别的意思
               elm.disabled = true
             } else if (elm.superposition === superposition) { // 这里是找到一样类型的券
@@ -276,7 +277,7 @@ export default {
                 if (selectCouponIds.length >= elm.limitCountPerOrder) { // 如果这个批次的券已经选了一部分，并且超过了可选上限的话。
                   elm.disabled = selectCouponIds.findIndex(iem => iem.code === elm.code) < 0 // 置灰剩余没有选中的电子券
                 }
-              } else if (elm.limitCountPerOrder  === 0) { // 如果是 0 的话，则不做任何限制
+              } else if (elm.limitCountPerOrder === 0) { // 如果是 0 的话，则不做任何限制
                 elm.disabled = false
               } else {
                 elm.disabled = selectCouponIds.findIndex(iem => iem.code === elm.code) < 0 && selectCouponIds.length > 0 // 同类型可选的券，如果可选上限是1，就设为不可选择
@@ -292,7 +293,7 @@ export default {
     },
     // 根据电子券规则判断是否可选
     isDisabledByRule(item, index, showMsg) {
-      const { parkMallCode } = this.orderDetail.parkInfo;
+      const {parkMallCode} = this.orderDetail.parkInfo;
       // 最高优先级，提示未生效的电子券
       if (item.status === 'unavailable' || moment().isSameOrAfter(item.expirationDate)) {
         return Toast({
@@ -305,12 +306,12 @@ export default {
       if ( this.checkedCouponList.length >= this.remainCoupons && (this.parkMallCode === 2 || this.parkMallCode === 8 || this.parkMallCode === 7 || this.parkMallCode === 9 || this.parkMallCode === 5 || this.parkMallCode === 8) ) {
         if ( showMsg ) return true
         return Toast({
-          message: `电子券每天最多可使用${ this.maxOneDayCoupons }张`,
+          message: `电子券每天最多可使用${this.maxOneDayCoupons}张`,
           className: "white-space",
           icon: 'none',
         });
       }
-
+      
       // 浦东每次缴费超限控制、沈阳每日超限控制
       if ([1,4,5,999, 8, 6,10].indexOf(parkMallCode) > -1 && this.crossMessage(showMsg)) {
         this.couponList = this.couponList.map((e, i) => {
@@ -321,9 +322,8 @@ export default {
         });
         return;
       }
-
+      
       // 选中状态赋值
-      // this.groupedCouponData();
       this.newGroupedCouponData();
     },
     // 是否选中
@@ -332,14 +332,16 @@ export default {
     },
     // 超限提示
     crossMessage(showMsg = '') {
-      const { parkMallCode } = this.orderDetail.parkInfo;
-      const { maxOneDayCoupons, maxonedaydiscountFee, maxOneTimeDiscountTime, remainConsumeTime, hourPrice, availableDiscountFee, oneTimeLimitation,oneDayLimitation, maxOneDayDiscountFee } = this.orderDetail.parkingRule;
+      const {parkMallCode} = this.orderDetail.parkInfo;
       const {
-        usingTotalDiscount, // 使用总抵扣
-        coupons,
-      } = this.orderDetail.discountInfo;
+        maxOneTimeDiscountTime,
+        remainConsumeTime,
+        hourPrice,
+        oneTimeLimitation,
+        oneDayLimitation,
+        maxOneDayDiscountFee
+      } = this.orderDetail.parkingRule;
       const {
-        // totalFee, // 应缴
         actualPayFee, // 应付金额
       } = this.orderDetail.parkingRecord;
       // 剩余可使用的优惠金额，支持动态计算; 优惠时长，不可能全部使用，不能超过车费减去优惠的金额;不能超过单次的应付金额
@@ -358,10 +360,10 @@ export default {
           icon: 'none',
         });
       }
-
+      
       // 单日上限
       if (oneDayLimitation && this.remainPrice >= this.availableDiscountFee) {
-        if ( showMsg ) return true
+        if (showMsg) return true
         return Toast({
           message: [5, 8, 10].indexOf(parkMallCode) > -1 ? '当日优惠已达上限，不可再用' : `每日最高可抵扣${maxOneDayDiscountFee}元`,
           className: "white-space",
@@ -383,7 +385,6 @@ export default {
     // 确认
     confirm() {
       // 重新计算兑换券优惠
-      const checkedCouponList = this.checkedCouponList.map((i) => this.item2Number(i));
       const couponList = this.couponList.map((elm, index) => {
         elm.selected = false;
         if (this.checkedCouponList.indexOf(`coupon${index}`) > -1) {
@@ -397,36 +398,6 @@ export default {
           this.$router.back();
         },
       });
-
-      /*uni.setStorageSync('checkedCouponList', this.checkedCouponList);
-       uni.setStorageSync('list', this.list);
-       uni.setStorageSync('couponInfo', {
-       couponfee: this.totalFee,
-       couponcode: this.couponCode.join('#'),
-       });
-       this.$router.back();*/
-    },
-    launchPathInit() {
-      const groupId = uni.getStorageSync('groupId');
-      const mallId = uni.getStorageSync('mallId');
-      const { projectId } = getAppIdByGroupIdAndMallId({
-        groupId: groupId,
-        mallId: mallId,
-        type: 'all',
-      });
-      this.launchPath = `?trackSourceType=运营位&trackSourceName=功能球&projectId=${projectId}&groupId=${groupId}&mallId=${mallId}&source=tparkingH5`;
-
-      let isLogin = false
-      const member = uni.getStorageSync('member');
-      if (member && JSON.stringify(this.member) !== '{}') {
-        isLogin = true
-      }
-      this.extraData = {
-        brandId: this.groupId,
-        lbsId: this.lbsId,
-        isLogin: isLogin,
-        navigate_time:new Date().getTime()
-      }
     },
     // 跳转小程序
     navigateToMiniProgram() {
@@ -447,49 +418,22 @@ export default {
           }
         });
       }
-      if (isInWeixinH5()) {
-        // this.$wx.chooseWXPay({
-        //   timestamp: params?.timeStamp,
-        //   nonceStr: params?.nonceStr,
-        //   package: params?.package,
-        //   signType: params?.signType,
-        //   paySign: params?.paySign,
-        //   success: function (res) {
-        //     // alert('success: ' + JSON.stringify(res));
-        //     // res: {"errMsg":"chooseWXPay:cancel"}
-        //     if (res.errMsg === 'chooseWXPay:ok') {
-        //       resolve({ errMsg: 'requestPayment:ok' });
-        //     } else {
-        //       reject(res);
-        //     }
-        //   },
-        //   cancel: function (res) {
-        //     // alert('cancel: ' + JSON.stringify(res));
-        //     // res: {"errMsg":"chooseWXPay:cancel"}
-        //     resolve({ errMsg: 'requestPayment:cancel' });
-        //   },
-        //   fail: function (err) {
-        //     // eslint-disable-next-line no-console
-        //     console.error(err);
-        //     reject(err);
-        //   },
-        // });
-      }
     },
     // H5 跳转到小程序
-    launchFn({ appId, extInfo }) {
-      // console.log(584, JSON.stringify({ appId, extInfo }));
+    launchFn({appId, extInfo}) {
       this.$store.commit('cachedViews/DEL_CACHED_VIEW', {
         name: 'parkingFeeDetail',
       });
       this.$router.go(-2);
-      // console.log('H5 跳转到 嘉里中心小程序： success');
     },
-    launchErrorFn({ errMsg, appId, extInfo }) {
+    launchErrorFn({errMsg, appId, extInfo}) {
       // console.log('H5 跳转到 嘉里中心小程序： fail', JSON.stringify({ errMsg, appId, extInfo }));
     },
     onLaunchReady() {
       // console.log('H5 跳转到 嘉里中心小程序 的标签 渲染了');
     },
   },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScrollDebounce, 100);
+  }
 };

src/pages/parkingFeeV2/parkingFeeCoupon.vue

@@ -1,41 +1,42 @@
 <template>
-  <div scroll-y="true" :class="['scroll-Y' , theme]">
+  <div scroll-y="true" :class="['scroll-Y', theme]">
     <div>
       <div class="parkingFeeCoupon">
         <van-checkbox-group :value="checkedCouponList">
           <div class="card-list" v-if="couponList.length">
-            <div class="item" v-for="(item, index) in couponList" :key="index">
-              <div class="coupon-active" v-if="checkedCouponList.indexOf(`coupon${index}`) > -1">
-                <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <mask id="path-1-inside-1_304_8" fill="white">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z"/>
-                  </mask>
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="var(--k-color-primary-06)"/>
-                  <path d="M196 0V-1H195V0H196ZM176 0H177V-1H176V0ZM176 197V198H177V197H176ZM196 197H195V198H196V197ZM186 11C192.075 11 197 6.07513 197 0H195C195 4.97056 190.971 9 186 9V11ZM175 0C175 6.07513 179.925 11 186 11V9C181.029 9 177 4.97056 177 0H175ZM4 1H176V-1H4V1ZM1 4C1 2.34314 2.34315 1 4 1V-1C1.23858 -1 -1 1.23857 -1 4H1ZM1 193V4H-1V193H1ZM3.99999 196C2.34314 196 1 194.657 1 193H-1C-1 195.761 1.23856 198 3.99999 198V196ZM176 196H3.99999V198H176V196ZM186 186C179.925 186 175 190.925 175 197H177C177 192.029 181.029 188 186 188V186ZM197 197C197 190.925 192.075 186 186 186V188C190.971 188 195 192.029 195 197H197ZM686 196H196V198H686V196ZM689 193C689 194.657 687.657 196 686 196V198C688.761 198 691 195.761 691 193H689ZM689 4V193H691V4H689ZM686 1C687.657 1 689 2.34314 689 4H691C691 1.23858 688.761 -1 686 -1V1ZM196 1H686V-1H196V1Z" fill="var(--k-color-primary-01)" mask="url(#path-1-inside-1_304_8)"/>
-                  <path d="M185.5 12.486V184.514" stroke="#CCCCCC" stroke-linecap="square" stroke-dasharray="8"/>
-                </svg>  
-              </div>
-              <div class="coupon-active" v-else>
-                <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="#FAFBFF"/>
-                  <path d="M185.5 10.5V187.5" stroke="#D8DAE0" stroke-linecap="square" stroke-dasharray="8"/>
-                </svg>
-              </div>
-
-              <div class="item-image">
-                <div class="discountFee-box">
-                  <span>￥</span>
-                  <span class="itemValue">{{ item.discountFee }}</span>
+            <div v-for="(item, index) in couponList" :key="index" ref="couponItem">
+              <div v-if="rowData.indexOf(index)> -1" class="item" @click="checkboxItemChange(`coupon${index}`, index)">
+                <div class="coupon-active" v-if="checkedCouponList.indexOf(`coupon${index}`) > -1">
+                  <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <mask id="path-1-inside-1_304_8" fill="white">
+                      <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z"/>
+                    </mask>
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="var(--k-color-primary-06)"/>
+                    <path d="M196 0V-1H195V0H196ZM176 0H177V-1H176V0ZM176 197V198H177V197H176ZM196 197H195V198H196V197ZM186 11C192.075 11 197 6.07513 197 0H195C195 4.97056 190.971 9 186 9V11ZM175 0C175 6.07513 179.925 11 186 11V9C181.029 9 177 4.97056 177 0H175ZM4 1H176V-1H4V1ZM1 4C1 2.34314 2.34315 1 4 1V-1C1.23858 -1 -1 1.23857 -1 4H1ZM1 193V4H-1V193H1ZM3.99999 196C2.34314 196 1 194.657 1 193H-1C-1 195.761 1.23856 198 3.99999 198V196ZM176 196H3.99999V198H176V196ZM186 186C179.925 186 175 190.925 175 197H177C177 192.029 181.029 188 186 188V186ZM197 197C197 190.925 192.075 186 186 186V188C190.971 188 195 192.029 195 197H197ZM686 196H196V198H686V196ZM689 193C689 194.657 687.657 196 686 196V198C688.761 198 691 195.761 691 193H689ZM689 4V193H691V4H689ZM686 1C687.657 1 689 2.34314 689 4H691C691 1.23858 688.761 -1 686 -1V1ZM196 1H686V-1H196V1Z" fill="var(--k-color-primary-01)" mask="url(#path-1-inside-1_304_8)"/>
+                    <path d="M185.5 12.486V184.514" stroke="#CCCCCC" stroke-linecap="square" stroke-dasharray="8"/>
+                  </svg>
                 </div>
-                <span style=" font-size: 30px">停车券</span>
-              </div>
-              <div class="item-content">
-                <div class="content">
-                  <span class="h3">{{ item.name }}</span>
-                  <span class="span">有效期至 {{ item.expirationDate }}</span>
+                <div class="coupon-active" v-else>
+                  <svg width="690" height="197" viewBox="0 0 690 197" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M196 0C196 5.52285 191.523 10 186 10C180.477 10 176 5.52285 176 0H4C1.79086 0 0 1.79086 0 4V193C0 195.209 1.79085 197 3.99999 197H176C176 191.477 180.477 187 186 187C191.523 187 196 191.477 196 197H686C688.209 197 690 195.209 690 193V4C690 1.79086 688.209 0 686 0H196Z" fill="#FAFBFF"/>
+                    <path d="M185.5 10.5V187.5" stroke="#D8DAE0" stroke-linecap="square" stroke-dasharray="8"/>
+                  </svg>
                 </div>
-                <div class="erwm_box">
-                  <van-checkbox color="#fff" @click="checkboxItemChange(`coupon${index}`, index)" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`"/>
+                <div class="item-image">
+                  <div class="discountFee-box">
+                    <span>￥</span>
+                    <span class="itemValue">{{ item.discountFee }}</span>
+                  </div>
+                  <span style=" font-size: 30px">停车券</span>
+                </div>
+                <div class="item-content">
+                  <div class="content">
+                    <span class="h3">{{ item.name }}</span>
+                    <span class="span">有效期至 {{ item.expirationDate }}</span>
+                  </div>
+                  <div class="erwm_box">
+                    <van-checkbox color="#fff" checked-color="var(--k-color-primary)" :disabled="item.disabled" :name="`coupon${index}`"/>
+                  </div>
                 </div>
               </div>
             </div>
@@ -130,8 +131,8 @@ export default {
   box-sizing: border-box;
   flex: 1;
   position: relative;
-
   .item {
+    box-sizing: border-box;
     width: 100%;
     height: 197px;
     display: flex;