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

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>