优惠券弹框

src/components/coupon/coupon-list.vue

 <template>
   <ul class="comp-list-wrapper">
-    <li class="list"  v-for="item in [1, 2, 3]" :key="item">
+    <li class="list"  v-for="(item, index) in dataList" :key="index">
       <section class="item">
         <div class="left">
-          <p class="name" :class="{'status': showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
+          <p class="name" :class="{'status': item.showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
           <div class="other">
-            <p v-if="true" class="time-end" :class="{'status': showStatus}">距离到期仅剩 <span class="coupon-pc">8</span> 天</p>
-            <p v-else class="time-end" :class="{'status': showStatus}">2020-10-15 至 2020-12-01</p>
+            <p v-if="item.validTimeType == 2" class="time-end" :class="{'status': item.showStatus}">距离到期仅剩 <span class="coupon-pc">8</span> 天</p>
+            <p v-else class="time-end" :class="{'status': item.showStatus}">2020-10-15 至 2020-12-01</p>
             <p class="rules">
-              <span :class="{'status': showStatus}" @click="toggleRules(item)">使用规则</span>
-              <img v-if="showRules" src="../../images/coupon/arrow-down.png" alt="">
+              <span :class="{'status': item.showStatus}" @click="toggleRules(item)">使用规则</span>
+              <img v-if="item.showRules" src="../../images/coupon/arrow-down.png" alt="">
               <img v-else src="../../images/coupon/arrow-up.png" alt="">
             </p>
-            <article v-show="showStatus" class="status-wrapper">
-              <img v-if="showStatus == 1" src="../../images/coupon/status-sx.png" alt="">
-              <img v-else-if="showStatus == 2" src="../../images/coupon/status-gq.png" alt="">
-              <img v-else-if="showStatus == 3" src="../../images/coupon/status-gq.png" alt="">
-              <img v-else-if="showStatus == 4" src="../../images/coupon/status-gq.png" alt="">
+            <article v-show="item.showStatus" class="status-wrapper">
+              <img v-if="item.showStatus == 1" src="../../images/coupon/status-sx.png" alt="">
+              <img v-else-if="item.showStatus == 2" src="../../images/coupon/status-gq.png" alt="">
+              <img v-else-if="item.showStatus == 3" src="../../images/coupon/status-gq.png" alt="">
+              <img v-else-if="item.showStatus == 4" src="../../images/coupon/status-gq.png" alt="">
             </article>            
           </div>
         </div>
-        <div class="right" :class="{'around': showStatus}">
+        <div class="right" :class="{'around': item.showStatus}">
           <div class="top">
-            <p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': showStatus}">50</span></p>
-            <p class="desc" :class="{'opacity': showStatus}">满100元可用</p>
+            <p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': item.showStatus}">50</span></p>
+            <p class="desc" :class="{'opacity': item.showStatus}">满100元可用</p>
           </div>
-          <span v-show="!showStatus && showBtn" class="btn coupon-pc">去使用</span>
-          <span v-show="!showStatus && !showBtn" class="btn-no">未开始</span>
+          <span v-show="!item.showStatus && showBtn" class="btn coupon-pc">去使用</span>
+          <span v-show="!item.showStatus && !showBtn" class="btn-no">未开始</span>
         </div>
       </section>
-      <section v-show="showRules" class="rule-list">
-        <p v-html="descContent"></p>
+      <section v-show="item.showRules" class="rule-list">
+        <p v-html="item.couponExplain"></p>
       </section>
     </li>
   </ul>
 </template>
 <script>
 export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
-      showStatus: false,
       showBtn: true,
-      showRules: true,
-      descContent: "1. 的量据特原今参商队把养因然据准加感子新亲2. 和必局方候多相人着山关议型现酸存性合外将界计3. 火电容收万般青起内别且越百商几该半写计机天队效儿六必群小"
     }
   },
   methods: {
     toggleRules(item) {
       console.log(item);
-      this.showRules = !this.showRules;
+      item.showRules = !item.showRules;
     }
   },
 }

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

@@ -10,9 +10,9 @@
         <span>优惠券</span>
         <img @click="cancle" src="../../images/cme/close.png" />
       </article>
-      <article class="list-wrapper">
+      <article v-if="true" class="list-wrapper">
         <p>已选择1张优惠券，共抵扣<span class="sc thin"> ¥{{couponPrice}}</span></p>
-        <div class="item" :class="{'disabled': disabled}" v-for="item in [1, 2, 3, 4]" :key="item">
+        <div class="item" :class="{'disabled': disabled}" v-for="(item, index) in dataList" :key="index">
           <div class="left opacity">
             <p class="price"><span class="symbol sc">¥</span><span class="num sc">100</span></p>
             <p class="desc">满100元可用</p>
@@ -28,12 +28,14 @@
               </p>
             </div>
           </div>
-          <div class="right" @click="toggleChecked">
-            <img v-show="isChecked" src="../../images/coupon/radio-checked.png" />
-            <img v-show="!isChecked" src="../../images/coupon/radio-no.png" />
+          <div class="right" @click="toggleChecked(item)">
+            <img v-show="item.isChecked" src="../../images/coupon/radio-checked.png" />
+            <img v-show="!item.isChecked" src="../../images/coupon/radio-no.png" />
           </div>
         </div>
       </article>
+      <no-coupon v-else></no-coupon>
+
       <article class="bottom">
         <van-button @click="confirm" size="large" round color="#449284">确定使用</van-button>
       </article>
@@ -41,11 +43,29 @@
   </van-popup>
 </template>
 <script>
+import NoCoupon from "@/components/coupon/no-coupon";
 export default {
+  components: {
+    NoCoupon
+  },
   props: {
     isShow: {
       type: Boolean,
       default: true
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    goodsInfo: {
+      type: Object,
+      default: () => {
+        return {
+          price: 0,
+          goodsType: 0,
+          cardType: 0,
+        }
+      }
     }
   },
 
@@ -53,27 +73,45 @@ export default {
     return {
       couponPrice: 100,
       disabled: false,
-      isChecked: true
+      isChecked: true,
+      currentCoupon: {couponId: '', canUseNum: 0, couponPrice: 0}
     };
   },
 
   //
   watch: {
+    isShow: {
+      // 处理是否可用
+      handler(newVal) {
 
+      }
+    }
   },
 
   mounted() {
-    this.$forceUpdate()
+    // this.$forceUpdate()
   },
   methods: {
+    // 取消操作
     cancle() {
       this.$emit("cancle");
     },
+
+    // 查找已经选择的
     confirm() {
-      this.$emit("confirm", aCode);
+      this.$emit("confirm", this.currentCoupon);
     },
-    toggleChecked() {
-      this.isChecked = !this.isChecked;
+
+    // 切换当前选中优惠券
+    toggleChecked(item) {
+      if(!item.isChecked) {
+        this.dataList.forEach( (cItem, index) => {
+          cItem.isChecked = false;
+        })
+        item.isChecked = true;
+      } else {
+        item.isChecked = false;
+      }
     }
   }
 };

src/router/router.js

@@ -12,7 +12,7 @@ const purchaseRezult = r => require.ensure([], () => r(require('../views/purchas
 const questionBank = r => require.ensure([], () => r(require('../views/question-bank')), 'question-bank')
 const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
 
-const couponList = r => require.ensure([], () => r(require('../views/coupon/list')), 'coupon-list')
+const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
 
 export default [{
   path: '/',

src/store/getters.js

@@ -16,5 +16,6 @@ const getters = {
   freeFlag: state => state.question.titleConfig.freeFlag,
   totalCount: state => state.question.titleConfig.totalCount,
   canRunNext: state => state.question.canRunNext,
+  webUserInfo: state => state.user.info,
 }
 export default getters

src/store/modules/user.js

@@ -41,7 +41,7 @@ const user = {
       try {
         const errCallBack = () => {
           dispatch('logout');
-          Toast('登录失效，请重新登录~')
+          // Toast('登录失效，请重新登录~')
         }
         const res = await fetch({
           url: getBaseUrl('account/login/web'),

src/utils/mixins.js

@@ -19,14 +19,14 @@ module.exports = {
         this.token = this.getUrlKey('token') || (query && query.token)
     },
     computed: {
-        ...mapGetters(['canRunNext'])
+        ...mapGetters(["userInfo", "canRunNext"])
     },
 
     mounted() {
     },
 
     methods: {
-        ...mapActions(["goLogin"]),
+        ...mapActions(["setUserInfo", "goLogin"]),
 
         getUrlPara(obj) {
             let dataStr = ''

src/views/coupon/coupon-list.vue

+<template>
+  <section class="coupon-list-wrapper">
+    <CommonNavbar
+      :isWeb="false"
+      ref="navBarCom"
+      :bgColor="bgColor"
+      v-if="isShowNavbar"
+      :title="navTitle"
+      :isFixNavbar="isFixNavbar"
+      borderStyle="1px solid #fff"
+    ></CommonNavbar>
+    <CouponList v-if="dataList.length" :dataList="dataList"></CouponList>
+    <no-coupon v-else></no-coupon>
+  </section>
+</template>
+<script>
+import CommonNavbar from "@/components/common/common-navbar";
+import CouponList from "@/components/coupon/coupon-list";
+import NoCoupon from "@/components/coupon/no-coupon";
+import { getWebPageUrl } from '@/utils';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  components: {
+    CommonNavbar,
+    CouponList,
+    NoCoupon
+  },
+  data() {
+    return {
+      token: "",
+      isWeb: window.__isWeb,
+      bgColor: "#fff",
+      isShowNavbar: true,
+      navTitle: '优惠券',
+      isFixNavbar: true,
+      shareUrl: '',
+      dataList: [],
+    }
+  },
+
+  created() {
+    let _this = this;
+    let href = location.href;
+    this.couponId = this.$route.query.couponId || '';
+    this.shareUrl = getWebPageUrl(`profexam/#/coupon-list?couponId=${this.couponId}`);
+    if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
+      location.replace(this.shareUrl);
+    }    
+    localStorage.setItem('returnUrl', this.shareUrl);
+
+    window.__getUserInfo4CouponList = function(param) {
+      console.log("__getUserInfo4CouponList", param);
+      _this.token = param.userToken;
+      _this.setUserInfo(param);
+      _this.getMyCoupons();
+    };
+
+    window.__refresh = function() {
+      _this.getUserInfo();
+    };
+  },
+
+  computed: {
+    ...mapGetters(['webUserInfo'])
+  },
+
+  watch: {
+    webUserInfo: {
+      handler(userInfo) {
+        console.log('userInfo', userInfo);
+        if(userInfo.id) {
+          // this.getMyCoupons();
+          this.getAllCoupons();
+        }
+      },
+      deep: true
+    }
+  },
+
+  mounted() {
+    // 如果在浏览器或微信里
+    if(this.isWeb) {
+      const { token, info } = this.$store.state.user;
+      console.log('token && !info.id', !info.id, 'wef', token);
+      if(!token) {
+        this.goLogin();
+        return;
+      }
+      if (token && !info.id) {
+        this.$store.dispatch('getUserInfo');
+        return;
+      }
+      // 从登陆页面过来的
+      this.getAllCoupons();
+    } else {
+      this.getUserInfo();
+    }
+
+  },
+  methods: {
+    //获取用户信息
+    getUserInfo() {
+      rocNative.getUserInfo({
+        __funcName: "__getUserInfo4CouponList"
+      });
+    },
+
+    // 获取我的优惠券列表
+    getMyCoupons() {
+      this.commonCheckToken( () => {
+        this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
+          if (res.code == "000000") {
+            this.dataList = this.handlerCouponList(res.data || []);
+          }
+        })
+      })
+    },
+
+    handlerCouponList(couponList) {
+      if(!couponList.length) return []
+      let newList = [], obj = {};
+      couponList.forEach( item => {
+        // 是否是列表页面，否则是我的优惠券页面
+        item.isAll = true;        
+        // 是否显示对应的规则
+        item.showRules = false;   
+        // 是否可用
+        item.showStatus = true;  
+        newList.push(item);
+      });
+      return newList;
+    },
+
+    // 获取所有优惠券列表
+    getAllCoupons() {
+      this.commonCheckToken( () => {
+        let params = {
+          cardTypes: [],
+          couponIds: [],
+          goodsIds: [],
+          goodsTypes: []
+        }
+        this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
+          if (res.code == "000000") {
+            this.dataList = this.handlerCouponList(res.data || []);
+          }
+        })
+      })
+    },
+
+
+  },
+}
+</script>
+<style lang="less" scoped>
+.coupon-list-wrapper {
+  padding-top: 88px;
+  min-height: 100vh;
+  background: #F8F9FA;
+}
+</style>
\ No newline at end of file

src/views/coupon/list.vue

-<template>
-  <section class="coupon-list-wrapper">
-    <CommonNavbar
-      :isWeb="isWeb"
-      ref="navBarCom"
-      :bgColor="bgColor"
-      v-if="isShowNavbar"
-      :title="navTitle"
-      :isFixNavbar="isFixNavbar"
-      borderStyle="1px solid #fff"
-    ></CommonNavbar>
-    <CouponList></CouponList>
-    <!-- <no-coupon></no-coupon> -->
-  </section>
-</template>
-<script>
-import CommonNavbar from "@/components/common/common-navbar";
-import CouponList from "@/components/coupon/coupon-list";
-import NoCoupon from "@/components/coupon/no-coupon";
-
-export default {
-  components: {
-    CommonNavbar,
-    CouponList,
-    NoCoupon
-  },
-  data() {
-    return {
-      isWeb: false,
-      bgColor: "#fff",
-      isShowNavbar: true,
-      navTitle: '优惠券',
-      isFixNavbar: true,
-    }
-  },
-}
-</script>
-<style lang="less" scoped>
-.coupon-list-wrapper {
-  padding-top: 88px;
-  min-height: 100vh;
-  background: #F8F9FA;
-}
-</style>
\ No newline at end of file

src/views/goods-detail.vue

@@ -77,13 +77,16 @@
       </div>
     </div>
     <Loading v-show="showLoading" />
-        <!--去激活-->
+
+    <!-- 优惠券弹框 -->
     <CouponSelectList
-      :changeErrorMsg="changeCardErrorMsg"
-      :isShow="showChangeCard"
-      @cancle="cancleChangeCard"
-      @confirm="changeCardAction">
+      :dataList="couponDataList"
+      :goodsInfo="goodsInfo4Conpon"
+      :isShow="isShowCoupon"
+      @cancle="closeCouponPopup"
+      @confirm="showCouponPopup">
     </CouponSelectList>
+
     <CourseDialog
       content="微信授权"
       subContent='<p style="font-size: 16px; font-weight: bold; text-align: center;">云鹊医申请以下权限：</p><p style="font-size: 14px; color: #999; text-align: center; padding-bottom: 10px;">获得你的公开信息（头像，昵称等）</p>'
@@ -133,13 +136,15 @@ export default {
       tabW: 0, // tab的宽度
       showLoading: false,
       isShowDialog: false,
-      showChangeCard: false, //是否展示激活弹框,
-      changeCardErrorMsg: "",
+      isShowCoupon: false, //是否展示激活弹框,
       courseUrl: "",
+      couponDataList: [],
+      currentCoupon: {couponId: '', canUseNum: 0, couponPrice: ''},
+      goodsInfo4Conpon: {}
     }
   },
   computed: {
-    ...mapGetters(["userInfo"]),
+    ...mapGetters(["userInfo", "webUserInfo"]),
     wxInfo() {
       return this.$store.state.user.wxInfo;
     },
@@ -151,6 +156,27 @@ export default {
       return this.tabW * num;
     },
   },
+
+  watch: {
+    webUserInfo: {
+      handler(userInfo) {
+        console.log('userInfo', userInfo);
+        if(userInfo.id) {
+          this.getGoodsInfo();
+        }
+      },
+      deep: true
+    },
+
+    // 监听当前商品信息
+    goodsInfo4Conpon: {
+      handler(goodsInfo) {
+
+      },
+      deep: true      
+    }
+  },
+
   created() {
     let _this = this;
     console.log('in goods detail new', 111111111);
@@ -174,10 +200,11 @@ export default {
       console.log("__getUserInfo4GD", param);
       _this.token = param.userToken;
       _this.setUserInfo(param);
+      _this.getCanUseCoupons();
     };
 
     window.__refresh = function() {
-      _this.getAppUserInfo();
+      _this.getUserInfo();
     };
 
     window.__WXpay = function(params){
@@ -185,7 +212,6 @@ export default {
     };    
   },
   mounted() {
-    this.getGoodsInfo();
     this.getTabW();
     console.log('this.isWeb ... isWechat - 1', this.isWeb, isWechat);
     
@@ -193,9 +219,12 @@ export default {
       const { token, info } = this.$store.state.user;
       if (token && !info.id) {
         this.$store.dispatch('getUserInfo');
+        return;
       }
+      // 从登陆页面过来时
+      this.getGoodsInfo();
     } else {
-      this.getAppUserInfo();
+      this.getUserInfo();
     }
 
     // 数量加减
@@ -207,8 +236,32 @@ export default {
   methods: {
     ...mapActions(["setUserInfo"]),
     
+    // 获取我的优惠券列表
+    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 || []);
+        }
+      })
+    },
+
+    handlerCouponList(couponList) {
+      if(!couponList.length) return []
+      let newList = [], obj = {};
+      couponList.forEach( item => {
+        // 是否是列表页面，否则是我的优惠券页面
+        item.isAll = false;
+        // 是否可用
+        item.isChecked = false;
+        newList.push(item);
+      });
+      return newList;
+    },
+
+
     //获取用户信息
-    getAppUserInfo() {
+    getUserInfo() {
       rocNative.getUserInfo({
         __funcName: "__getUserInfo4GD"
       });
@@ -245,16 +298,12 @@ export default {
       });
     },
 
-    cancleChangeCard() {
-      this.showChangeCard = false;
-    },
-    
-    changeCardAction(cardKey, isInTips) {
-      
+    closeCouponPopup() {
+      this.isShowCoupon = false;
     },
 
     showCouponPopup() {
-      this.showChangeCard = true;
+      this.isShowCoupon = true;
     },
 
     // tab切换
@@ -270,6 +319,13 @@ export default {
           const goods = res.data;
           const tabs = [];
           let price = goods.couponPrice || goods.preferentialPrice || goods.costPrice;
+          this.goodsInfo4Conpon = {
+            price: price,
+            goodsType: goods.goodsType,
+            cardType: goods.cardType,
+          }
+          // 获取到商品后，再获取优惠券
+          this.getCanUseCoupons();
           goods.salePrice = this.formatPrice(price);
           goods.costPriceText = (goods.costPrice / 100).toFixed(2);
           goods.hasDiscount = !!(goods.couponPrice || goods.preferentialPrice);
@@ -341,6 +397,7 @@ export default {
             costPriceText: (costPrice / 100).toFixed(2),
             savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0,
           }
+          this.goodsInfo4Conpon.price = price;
           this.goodsNum = num;
         } else if (res.code === "200006") {
           this.$store.dispatch('logout')
@@ -377,6 +434,8 @@ export default {
         component_tag: `888#88801`
       });
       this.commonCheckToken(() => {
+      });
+
       let num = this.curtGoodsNum;
       if (this.goods.limitPurchase && this.goods.limitPurchaseNum && num >= this.goods.limitPurchaseNum) {
         this.$toast('已达最大限购数量')
@@ -388,7 +447,6 @@ export default {
       }
       this.curtGoodsNum = num + 1;
       this.countTotalPrice();      
-      });
 
       
     },
@@ -398,6 +456,7 @@ export default {
         component_tag: `888#88802`
       });
       this.commonCheckToken(() => {
+      });
       let num = this.curtGoodsNum;
       if (num <= 1) {
         this.$toast('最少购买一张哦')
@@ -405,7 +464,6 @@ export default {
       }
       this.curtGoodsNum = num - 1;
       this.countTotalPrice();
-      });
     },
     // goLogin() {
     //   this.$store.dispatch('goLogin');

src/views/merge-detail.vue

@@ -314,7 +314,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(["userInfo"])
+    // ...mapGetters(["userInfo"])
   },
 
   created() {
@@ -369,7 +369,7 @@ export default {
     window.removeEventListener("scroll", this.scrollFun);
   },
   methods: {
-    ...mapActions(["setUserInfo"]),
+    // ...mapActions(["setUserInfo"]),
 
     cancleChangeCard() {
       this.showChangeCard = false;