Refact(优惠券):优惠券重构

assets/css/v12-style.less

@@ -113,6 +113,14 @@ each(@colors, {
 .generateRadius(100);
 /*=========================================*/ 
 
+.generateSpacing(@n, @i: 0) when(@i <= @n) {
+  @baseSpacing:@i * 1rpx;
+  .v12-spacing-@{i} {
+    letter-spacing: @baseSpacing !important;
+  }
+  .generateSpacing(@n, (@i + 1))
+}
+.generateSpacing(100);
 /*====================flex 函数表达式=====================*/
 
 .v12-d-flex{
@@ -141,6 +149,10 @@ each(@colors, {
   display: flex;
   justify-content: center;
 }
+.v12-justify-around{
+  display: flex;
+  justify-content: space-around;
+}
 .v12-justify-between{
   display: flex;
   justify-content: space-between;

components/CouponsPopup.vue

@@ -8,8 +8,62 @@
         :not-use="notUse"
         radio-model
         @change="changeNav"
+        v-if="showTab"
       />
+      <view class="v12-radius-20 v12-white v12-align-center v12-justify-around v12-pa-3" v-else>
+        <view class="">
+          <view class="v12-text-center v12-font-28">
+            券后价
+          </view>
+          <view class="v12-mt-3 v12-text-center v12-red-text">
+            <text class="v12-font-28">
+              ￥
+            </text>
+            <text class="v12-font-44">
+              {{ computePrice }}
+            </text>
+          </view>
+        </view>
+        <view class="v12-text-center  v12-font-44">
+          =
+        </view>
+        <view class="">
+          <view class="v12-text-center v12-font-28">
+            当前售价
+          </view>
+          <view class="v12-mt-3 v12-text-center">
+            <text class="v12-font-28">
+              ￥
+            </text>
+            <text class="v12-font-44">
+              {{ currentPrice }}
+            </text>
+          </view>
+        </view>
+        <view class="v12-text-center  v12-font-44">
+          -
+        </view>
+        <view class="">
+          <view class="v12-text-center">
+            满减
+          </view>
+          <view class="v12-mt-3 v12-text-center v12-font-44">
+            {{ selectItem.couponPrice }}
+          </view>
+        </view>
+      </view>
+      
       <view class="list-box">
+        <view class="larg-one v12-mb-3">
+          <Coupons
+            :data="largOne"
+            :radio-model="current === 0"
+            @change="selectCoupon"
+          />
+        </view>
+        <view class="v12-font-32 v12-dark-text v12-spacing-2 v12-font-bold v12-mb-3">
+          更多可使用券
+        </view>
         <view
           v-for="(item, index) in list"
           :key="index"
@@ -19,6 +73,7 @@
             :data="item"
             :radio-model="current === 0"
             @change="selectCoupon"
+            v-if="index !== maxIndex"
           />
         </view>
         <view
@@ -55,6 +110,14 @@ export default {
         usable: [],
         unusable: []
       }
+    },
+    showTab: {
+      type: Boolean,
+      default: true
+    },
+    currentPrice: {
+      default: 0,
+      type: Number
     }
   },
   data() {
@@ -62,7 +125,9 @@ export default {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       current: 0,
       couponId: uni.getStorageSync('couponId') || 0,
-      selectItem: {}
+      selectItem: {
+        couponPrice: 0
+      },
     }
   },
   computed: {
@@ -81,7 +146,21 @@ export default {
     },
     notUse() {
       return this.twoList['unusable'].length
+    },
+    computePrice() {
+      return this.currentPrice - this.selectItem.couponPrice
+    },
+    maxIndex() {
+      const maxIndex = this.list.reduce((a, b, c) => {
+        return (this.list[a].couponPrice < b.couponPrice) ? c : a
+      }, 0)
+      return maxIndex
+    },
+    largOne() {
+      this.selectCoupon(this.list[this.maxIndex].id)
+      return this.list[this.maxIndex]
     }
+    
   },
   methods: {
     changeNav(index) {

components/ServiceWin.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="">
+    <u-popup :show="show" @close="close" @open="open" closeable>
+      <view class="v12-px-3">
+        <view class="v12-text-center v12-font-32 v12-py-3 v12-secondary-dark-text">
+          服务说明
+        </view>
+        <view class="wrap v12-dark-text">
+          <view class="service-title">
+            <text class="v12-dark-text v12-font-32">
+              售后服务
+            </text>
+          </view>
+          <view class="">
+            <text class="v12-font-28 v12-font-bold">
+              {{ info }}
+            </text>
+          </view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    info: ''
+  },
+  data() {
+    return {
+      show:false
+    }
+  },
+  methods: {
+    close() {
+      this.show = false
+      this.$emit('close')
+    },
+    open() {
+      this.show = true
+      this.$emit('open')
+    }
+  }
+}
+</script>
+
+<style>
+.wrap{
+  height: 388rpx;
+  height: 120rpx;
+  background: rgba(197,39,51,0.1);
+  border-radius: 16rpx;
+  padding: 20rpx;
+}
+</style>

pages/order/OrderSubmission/index.vue

@@ -251,6 +251,7 @@
         v-if="couponList.usable.length > 0"
         :two-list="couponList"
         @change="changeCoupons"
+        :show-tab="false"
       />
     </u-popup>
     <!-- v9 优惠券结束 -->

pages/shop/GoodsCon/index.vue

@@ -171,7 +171,7 @@
 
         <!-- v9 优惠券开始 -->
         <u-popup :show="show" :round="10" mode="bottom" closeOnClickOverlay @close="changeCoupons()">
-          <CouponsPopup :two-list="couponList" @change="changeCoupons"/>
+          <CouponsPopup :two-list="couponList" @change="changeCoupons" :showTab="false" :currentPrice="storeInfo.price" />
         </u-popup>
         <!-- v9 优惠券结束 -->
 
@@ -255,8 +255,8 @@
             </view>
             <!-- <view class="value red">销量：{{ storeInfo.sales }}</view> -->
           </view>
-
+          <!-- v-if="storeInfo.guarantee" -->
-          <view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee">
+          <view class="cell flex jc-between ai-center" v-if="storeInfo.guarantee" @click="showService">
             <view class="flex ai-center" >
               <view class="after-title flex-0 v12-dark-text v12-font-28 v12-align-center">
                 <image class="logo" :src="webUrl+'/orderIcon/服务.png'" mode="" style="margin-right:0; width: 32rpx; height:32rpx"/>
@@ -447,6 +447,7 @@
           :product-value-arr="productValueArr"
           :cartNum="cart_num"
         />
+        <ServiceWin ref="serviceWin" :info="storeInfo.guarantee" />
         <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
                      :posterData="posterData" :goodId="id"></StorePoster>
         <ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
@@ -478,6 +479,7 @@ import ProductWindow from "@/components/ProductWindow";
 import StorePoster from "@/components/StorePoster";
 import ShareInfo from "@/components/ShareInfo";
 import CountDown from "@/components/CountDown";
+import ServiceWin from "@/components/ServiceWin";
 import {getCartCount, getProductCode, getProductDetail, postCartAdd} from "@/api/store";
 import {userBindParent} from "@/api/user";
 import {handleQrCode, isWeixin} from "@/utils";
@@ -501,7 +503,8 @@ export default {
     ProductWindow,
     StorePoster,
     ShareInfo,
-    CouponsPopup
+    CouponsPopup,
+    ServiceWin
   },
   mixins: [pageListenMixins],
   data: function () {
@@ -728,6 +731,9 @@ export default {
     }
   },
   methods: {
+    showService() {
+      this.$refs.serviceWin.show = true
+    },
     toQualifications() {
       const merInfo = {
         name: this.storeInfo.merName,