优惠券ui优化

public/index.html

@@ -33,21 +33,21 @@
   <script>
     // const debug = window.localStorage.getItem('H5_DEBUG');
     // 开发环境和qa环境 打开debug
-    const debug = /dev-|qa-/.test(window?.injectConfig?.api) || window.location.href.indexOf(8080) > -1;
-    if (debug) {
-      const script = document.createElement('script');
-      script.src = 'https://unpkg.com/vconsole@latest/dist/vconsole.min.js';
-      document.head.appendChild(script);
-      script.addEventListener('load', () => {
-        setTimeout(() => {
-          window.vConsole = new window.VConsole();
-        }, 200);
-      });
-    }
-    if ( /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) ) {
-      // https://developers.weixin.qq.com/community/develop/doc/000ae2cb950808f90d8bc415551800
-      window.H5_LAUNCH_URL = location.href;
-    }
+    // const debug = /dev-|qa-/.test(window?.injectConfig?.api) || window.location.href.indexOf(8080) > -1;
+    // if (debug) {
+    //   const script = document.createElement('script');
+    //   script.src = 'https://unpkg.com/vconsole@latest/dist/vconsole.min.js';
+    //   document.head.appendChild(script);
+    //   script.addEventListener('load', () => {
+    //     setTimeout(() => {
+    //       window.vConsole = new window.VConsole();
+    //     }, 200);
+    //   });
+    // }
+    // if ( /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) ) {
+    //   // https://developers.weixin.qq.com/community/develop/doc/000ae2cb950808f90d8bc415551800
+    //   window.H5_LAUNCH_URL = location.href;
+    // }
   </script>
   <script>
       // var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))

src/pages/parkingFee/mixins/base.js

@@ -25,6 +25,7 @@ export default {
     if ( this.source === 'KIP' ) {
       this.theme = 'theme-office'
     }
+    this.theme = 'theme-office'
     // TODO: 根据lbsId动态切换
     // this.theme = 'theme-pudong'
     // this.theme = 'theme-jingan'

src/pages/parkingFee/parkingFeeCoupon.vue

@@ -5,6 +5,23 @@
         <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>
@@ -29,7 +46,7 @@
           </div>
         </van-checkbox-group>
         <!-- 为避免冲突，小程序 和 H5 跳转 CRM小程序：积分商城 的逻辑分开处理 -->
-        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'miniprogram'">
+        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'miniprogram' && source === 'KIP'">
           <div class="guide-title">优惠券兑换指导</div>
           <div class="guide-desc" @click="navigateToMiniProgram">
             停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
@@ -37,7 +54,7 @@
             进行兑换
           </div>
         </div>
-        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'micromessenger'">
+        <div :class="['guide-box', 'mgb-110', !couponList.length && 'flex-bottom']" v-if="platform === 'micromessenger' && source === 'KIP'">
           <div class="guide-title">优惠券兑换指导</div>
           <div class="guide-desc">
             停车优惠券可直接使用，若您还没有兑换或继续兑换，可前往
@@ -122,12 +139,30 @@ export default {
     display: flex;
     margin-bottom: 16px;
     border-radius: 4px;
-    background-image: url("./static/images/coupon-bg.png");
+    //background-image: url("./static/images/coupon-bg.png");
     background-repeat: no-repeat;
     background-position: 100% 100%;
     background-size:100% 100%;
     color: var(--k-color-primary);
+    position: relative;
+    z-index: 2;
+    .coupon-active {
+      position: absolute;
+      z-index: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: 100%;      
+    }
+    svg{
+      width: 100%;
+      height: 100%;
+    }
     .item-image {
+      z-index: 2;
       width: 190px;
       text-align: center;
       font-size: 24px;
@@ -141,6 +176,7 @@ export default {
     }
 
     .item-content {
+      z-index: 2;
       display: flex;
       flex: 1;
       padding-left: 44px;

src/pages/parkingFee/parkingFeeDetail.vue

@@ -37,13 +37,15 @@
         </div>
         <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
           <div class="label">积分减免</div>
-          <div :class="['value', integralDesc === '今日已达上限' ? 'text-disable' : 'text-red']" @click="showPointsMathPopup('bottom')">{{ integralDesc }}
+          <div :class="['value']" @click="showPointsMathPopup('bottom')">
+            <sapn :class="[integralDesc === '今日已达上限' ? 'text-disable' : 'text-red']">{{ integralDesc }}</sapn>
             <van-icon name="arrow"/>
           </div>
         </div>
         <div class="info-item-box" v-if="orderDetail && orderDetail.discountInfo">
           <div class="label">优惠劵</div>
-          <div :class="['value', coupons.length > 0 ? 'text-red' : 'text-disable']" @click="coupon">{{ couponDesc }}
+          <div :class="['value',]" @click="coupon">
+            <span :class="[ coupons.length > 0 ? 'text-red':  'text-disable']">{{ couponDesc }}</span>
             <van-icon name="arrow"/>
           </div>
         </div>
@@ -60,7 +62,7 @@
         <div class="van-hairline--bottom hr"></div>
         <div class="info-item-box npb">
           <div class="label pb--27">应付金额</div>
-          <div class="value bold-fz">
+          <div :class="['value', 'bold-fz', usingTotalDiscount === 0 && 'text-red']">
             {{ actualPayFee | currency }}
           </div>
         </div>
@@ -179,6 +181,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.text-red {
+  color: #F24439!important;
+}
 .scroll-Y {
   width: 100%;
   //display: flex;
@@ -254,6 +259,9 @@ export default {
       font-weight: 400;
       font-size: 30px;
       color: #333333;
+      .van-icon {
+        color: #999999;
+      }
 
       &.bold-fz {
         font-family: 'PingFang SC';

src/pages/parkingFee/static/images/coupon-active.svg

@@ -0,0 +1,8 @@
+<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="#E6EDF3"/>
+<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="#064C8A" mask="url(#path-1-inside-1_304_8)"/>
+<path d="M185.5 12.486V184.514" stroke="#CCCCCC" stroke-linecap="square" stroke-dasharray="8"/>
+</svg>

src/pages/parkingFee/static/images/coupon-noselect.svg

@@ -0,0 +1,4 @@
+<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>

src/store/order/points.js

@@ -27,7 +27,7 @@ export default {
         available, // 用户可用的积分（当前车辆在） available是用户选择抵扣N小时后剩余的可用积分
         maxDiscountFee, // 单次上限（元）
         unitAmount, // 兑换值（元）
-        unlimitUsePoints, // 前海积分最大上限
+        unlimitUsePoints= "LIMIT", // 前海积分最大上限
         unitHour, // 兑换值（小时）
         pointsPerUnit = 0, // 500积分对应的价值
         discountFee,