已选择1张优惠券，共抵扣

src/components/coupon/coupon-select-list.vue

 <template>
-  <van-popup v-model="isShowCoupon" @click-overlay="cancle" position="bottom" class="coupon-select">
+  <van-popup v-model="isShow" @click-overlay="cancle" position="bottom" class="coupon-select">
     <section class="coupon-select-wrapper">
       <article class="title">
         <span>优惠券</span>
@@ -8,31 +8,34 @@
       <article v-if="true" class="list-wrapper">
         <p>
           已选择1张优惠券，共抵扣
-          <span class="sc thin">¥{{couponPrice}}</span>
+          <span class="sc thin">¥{{yuan(currentCoupon.discountAmount)}}</span>
         </p>
         <div
           class="item"
           @click="toggleChecked(item)"
-          :class="{'disabled': disabled}"
-          v-for="(item, index) in dataList"
+          :class="{'disabled': item.disabled}"
+          v-for="(item, index) in selectCouponList"
           :key="index"
         >
           <div class="left opacity">
             <p class="price">
               <span class="symbol sc">¥</span>
-              <span class="num sc">{{item.discountAmount}}</span>
+              <span class="num sc">{{yuan(item.discountAmount)}}</span>
             </p>
-            <p class="desc">满{{item.requiredTotalFee}}元可用</p>
+            <p class="desc">满{{yuan(item.requiredTotalFee)}}元可用</p>
           </div>
           <div class="center">
             <p class="name status">{{item.couponName}}</p>
             <div>
               <p v-if="item.validTimeType == 2" class="date">
                 距离到期仅剩
-                <span class="sc"> {{item.validLeftDays}} </span>天
+                <span class="sc">{{item.validLeftDays}}</span>天
               </p>
-              <p v-else class="date status">{{item.startTime}} 至 {{item.expireTime}}</p>
-              <p v-if="disabled" class="tips">
+              <p
+                v-else
+                class="date status"
+              >{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
+              <p v-if="item.disabled" class="tips">
                 <img @click="cancle" src="../../images/coupon/tips.png" />
                 <span>当前商品不可用</span>
               </p>
@@ -54,46 +57,65 @@
 </template>
 <script>
 import NoCoupon from "@/components/coupon/no-coupon";
+import { convertToYuan, parseTime } from "@/utils";
+import { mapGetters, mapActions } from "vuex";
+
 export default {
   components: {
     NoCoupon
   },
   props: {
-    isShowCoupon: {
+    showSelectCoupon: {
       type: Boolean,
       default: true
     },
-    dataList: {
-      type: Array,
-      default: () => []
-    },
-    goodsInfo: {
-      type: Object,
-      default: () => {
-        return {
-          price: 0,
-          goodsType: 0,
-          cardType: 0
-        };
-      }
-    }
+    // currentCoupon: {
+    //   type: Object,
+    //   default: () => {
+    //     return {};
+    //   }
+    // }
+    // goodsInfo4Coupon: {
+    //   type: Object,
+    //   default: () => {
+    //     return {};
+    //   }
+    // }
   },
 
   data() {
     return {
-      couponPrice: 100,
-      disabled: false,
-      isChecked: true,
-      currentCoupon: { couponId: "", canUseNum: 0, couponPrice: 0 }
+      currentCouponInfo: {}
     };
   },
 
   //
   watch: {
-    // isShowCoupon: {
-    //   // 处理是否可用
-    //   handler(newVal) {}
-    // }
+    isShowCoupon: {
+      // 处理是否可用
+      handler(newVal) {
+        // 如果打开了选择弹框，则重新选中已经选中的项目
+        if (newVal) {
+          this.currentCouponInfo = this.currentCoupon;
+        }
+      }
+    },
+
+    // 监听当前商品信息，如果价格改变，则要重新计算选择列表是否可用
+    goodsInfo4Coupon: {
+      handler(goodsInfo) {},
+      deep: true
+    }
+  },
+
+  computed: {
+    ...mapGetters(['currentCoupon', 'goodsInfo4Coupon', 'selectCouponList']),
+    isShow: {
+      get() {
+        return this.showSelectCoupon;
+      },
+      set() {}
+    }
   },
 
   mounted() {
@@ -107,19 +129,32 @@ export default {
 
     // 查找已经选择的
     confirm() {
-      this.$emit("confirm", this.currentCoupon);
+      this.$emit("confirm", this.currentCouponInfo);
     },
 
     // 切换当前选中优惠券
     toggleChecked(item) {
+      if(item.disabled) return;
       if (!item.isChecked) {
-        this.dataList.forEach((cItem, index) => {
+        this.selectCouponList.forEach((cItem, index) => {
           cItem.isChecked = false;
         });
+        this.currentCouponInfo = JSON.parse(JSON.stringify(item));
         item.isChecked = true;
       } else {
+        this.currentCouponInfo = {};
         item.isChecked = false;
       }
+    },
+
+    // 显示元
+    yuan(fen) {
+      return convertToYuan(fen);
+    },
+
+    // parseTime
+    parseTime(time) {
+      return parseTime(time, "{yyyy}-{mm}-{dd}");
     }
   }
 };

src/store/getters.js

@@ -17,5 +17,10 @@ const getters = {
   totalCount: state => state.question.titleConfig.totalCount,
   canRunNext: state => state.question.canRunNext,
   webUserInfo: state => state.user.info,
+
+  // 优惠券相关
+  currentCoupon: state => state.coupon.currentCoupon,
+  goodsInfo4Coupon: state => state.coupon.goodsInfo4Coupon,
+  selectCouponList: state => state.coupon.selectCouponList,
 }
 export default getters

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import coop from './modules/coop'
 import user from './modules/user'
 import question from './modules/question'
+import coupon from './modules/coupon';
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     coop,
     user,
-    question
+    question,
+    coupon
   },
   getters
 })

src/store/modules/coupon.js

+
+const coupon = {
+  state: {
+    currentCoupon: {},
+    goodsInfo4Coupon: {},
+    selectCouponList: [],
+  },
+  mutations: {
+    SET_CURRENT_COUPON: (state, payload) => {
+      state.currentCoupon = payload;
+    },    
+    SET_GOODS_INFO_COUPON: (state, payload) => {
+      state.goodsInfo4Coupon = payload;
+    },
+    SET_SELECT_COUPON_LIST: (state, payload) => {
+      state.selectCouponList = payload;
+    },
+  },
+  actions: {
+    // 设置当前选中的优惠券
+    setCurrentCoupon({ commit }, currentCoupon) {
+      commit("SET_CURRENT_COUPON", currentCoupon);
+    },
+    // 设置当前商品的信息(包括：总价格, goodsType, cardType)
+    setGoodsInfo4Coupon({ commit }, goodsInfo4Coupon) {
+      commit("SET_GOODS_INFO_COUPON", goodsInfo4Coupon);
+    },
+    // 这里只处理disabled的状态
+    setSelectCouponList({ commit, state }, selectCouponList) {
+      let goodsInfo4Coupon = state.goodsInfo4Coupon;
+      let price = goodsInfo4Coupon.price;
+      let flag = false;
+      selectCouponList.forEach( item => {
+        if( price > item.requiredTotalFee) {
+          
+        }
+      })
+      commit("SET_SELECT_COUPON_LIST", selectCouponList);
+    },
+  },
+}
+
+export default coupon;

src/views/goods-detail.vue

@@ -38,7 +38,7 @@
         <div class="name ">
           优惠券
         </div>
-        <div @click="showCouponPopup" class="coupon-select coupon-pc">-¥100</div>
+        <div @click="showCouponPopup" class="coupon-select coupon-pc">-¥{{yuan(currentCoupon.discountAmount)}}</div>
       </div>
 
       <div class="flex buy-way">
@@ -79,12 +79,10 @@
     <Loading v-show="showLoading" />
 
     <!-- 优惠券弹框 -->
-    <CouponSelectList
-      :dataList="couponDataList"
-      :goodsInfo="goodsInfo4Conpon"
-      :isShowCoupon="isShowCoupon"
+    <CouponSelectList v-if="isShowCoupon"
+      :showSelectCoupon="isShowCoupon"
       @cancle="closeCouponPopup"
-      @confirm="showCouponPopup">
+      @confirm="setCurrentPopup">
     </CouponSelectList>
 
     <CourseDialog
@@ -109,6 +107,7 @@ import CouponSelectList from "@/components/coupon/coupon-select-list";
 import { wxConfig, chooseWXPay } from '@/utils/wxShare';
 import { getAPPID, getTradeType, getWebPageUrl, isWeiXin, wxOauth, debounce, getHactiveUrl } from '@/utils';
 import { mapGetters, mapActions } from "vuex";
+import { convertToYuan } from "@/utils";
 const isWechat = isWeiXin();
 // wxConfig(location.href);
 
@@ -138,13 +137,10 @@ export default {
       isShowDialog: false,
       isShowCoupon: false, //是否展示激活弹框,
       courseUrl: "",
-      couponDataList: [],
-      currentCoupon: {couponId: '', canUseNum: 0, couponPrice: ''},
-      goodsInfo4Conpon: {}
     }
   },
   computed: {
-    ...mapGetters(["userInfo", "webUserInfo"]),
+    ...mapGetters(["userInfo", "webUserInfo", "currentCoupon", "goodsInfo4Coupon", "selectCouponList"]),
     wxInfo() {
       return this.$store.state.user.wxInfo;
     },
@@ -169,9 +165,9 @@ export default {
     },
 
     // 监听当前商品信息
-    goodsInfo4Conpon: {
+    goodsInfo4Coupon: {
       handler(goodsInfo) {
-
+        this.setSelectCouponList(this.selectCouponList);
       },
       deep: true      
     }
@@ -234,31 +230,40 @@ export default {
     sessionStorage.setItem('goodsDetailParams', JSON.stringify(this.$route.query))
   },
   methods: {
-    ...mapActions(["setUserInfo"]),
+    ...mapActions(["setUserInfo", "setCurrentCoupon", "setGoodsInfo4Coupon", "setSelectCouponList"]),
     
-    // 获取我的优惠券列表
+    // 查询我的可用优惠券
     getCanUseCoupons() {
-      // this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
       this.GET(`trade/coupon/app/goodsCoupons`, {}).then(res => {
         if (res.code == "000000") {
-          this.couponDataList = this.handlerCouponList(res.data || []);
+          this.handlerCouponList(res.data || []);
         }
       })
     },
 
+    // 处理数据
     handlerCouponList(couponList) {
       if(!couponList.length) return []
       let newList = [], obj = {};
+      this.setCurrentCoupon(JSON.parse(JSON.stringify(couponList[0])));
       couponList.forEach( item => {
-        // 是否是列表页面，否则是我的优惠券页面
-        item.isAll = false;
-        // 是否可用
+        // TODO 要根据商品价格及券适用类型来计算
+        item.disabled = this.isCanSelect();
+        // item.disabled = !(item.couponStatus == 0 || item.couponStatus == 1);
+        // 是否已经选择
         item.isChecked = false;
         newList.push(item);
       });
+      couponList[0].isChecked = true;
+      this.setSelectCouponList(newList);
       return newList;
     },
 
+    // 判断是否可用
+    isCanSelect(){
+      return false;
+
+    },
 
     //获取用户信息
     getUserInfo() {
@@ -306,6 +311,13 @@ export default {
       this.isShowCoupon = true;
     },
 
+    // 设置当前选中的优惠券
+    setCurrentPopup(currentCoupon) {
+      console.log('setCurrentPopup', currentCoupon);
+      this.setCurrentCoupon(currentCoupon);
+      this.isShowCoupon = false;
+    },
+
     // tab切换
     tabToggle(index) {
       this.curtTabIdx = index;
@@ -319,11 +331,11 @@ export default {
           const goods = res.data;
           const tabs = [];
           let price = goods.couponPrice || goods.preferentialPrice || goods.costPrice;
-          this.goodsInfo4Conpon = {
+          this.setGoodsInfo4Coupon({
             price: price,
             goodsType: goods.goodsType,
             cardType: goods.cardType,
-          }
+          });
           // 获取到商品后，再获取优惠券
           this.getCanUseCoupons();
           goods.salePrice = this.formatPrice(price);
@@ -397,7 +409,7 @@ export default {
             costPriceText: (costPrice / 100).toFixed(2),
             savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0,
           }
-          this.goodsInfo4Conpon.price = price;
+          this.goodsInfo4Coupon.price = price;
           this.goodsNum = num;
         } else if (res.code === "200006") {
           this.$store.dispatch('logout')
@@ -627,7 +639,12 @@ export default {
           this.$toast(res.message);
         }
       })
-    }
+    },
+
+    // 显示元
+    yuan(fen) {
+      return convertToYuan(fen);
+    },
   },
 }
 </script>