feat: 超级订阅购买赠品

src/components/coupon/CouponCardList.vue

@@ -69,11 +69,7 @@ export default {
     }
   },
   watch: {
-    // active更新顺序：子组件触发activeChange，更新父组件v-model内容。父组件内容改变在触发子组件内容修改
-    active (newVal, oldVal) {
-      this.$emit('change', this.activeItem)
-    },
-    productionId (newVal, oldVal) {
+    price () {
       this.getCouponList()
     }
   },
@@ -131,6 +127,7 @@ export default {
     },
     clickItem (item) {
       this.active = item[this.activeType]
+      this.$emit('change', item)
     },
     getActiveItem () {
       return this.couponList.find(c => c[this.activeType] === this.active)

src/components/coupon/CouponGiftList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="gift-list">
+    <SpecCard
+      v-for="spec in giftList"
+      :key="spec.id"
+      :tipText="spec.tipText"
+      :active="spec[activeType] === active"
+      @onClick="clickSpec(spec)">
+      <div class="spec-c-label">{{ spec.name }}</div>
+      <div class="spec-c-desc"></div>
+    </SpecCard>
+  </div>
+</template>
+
+<script>
+import SpecCard from '@/components/common/SpecCard.vue'
+import { getGiftList } from '@/api/modules/'
+export default {
+  name: 'gift-list',
+  components: {
+    SpecCard
+  },
+  props: {
+    productionId: [String, Number],
+    activeType: {
+      type: String,
+      default: 'id'
+    }
+  },
+  data () {
+    return {
+      active: '',
+      giftList: []
+    }
+  },
+  watch: {
+    productionId () {
+      this.getGiftList()
+    }
+  },
+  computed: {
+    activeItem () {
+      return this.getActiveItem()
+    }
+  },
+  methods: {
+    clickSpec (spec) {
+      this.active = spec[this.activeType]
+      this.$emit('change', spec)
+    },
+    getActiveItem () {
+      return this.giftList.find(spec => spec[this.activeType] === this.active)
+    },
+    async getGiftList () {
+      var info = {
+        useProduct: this.productionId,
+        useProductType: 0
+      }
+      if (!info.useProduct) {
+        return this.giftListLoaded(0)
+      }
+      const { data, error_code: code } = await getGiftList(info)
+      if (code === 0) {
+        if (Array.isArray(data)) {
+          this.giftList = data.map(item => {
+            const giftInfo = this.sortGiftInfo(item)
+            return {
+              ...item,
+              giftInfo
+            }
+          })
+        }
+      }
+      this.giftListLoaded(this.giftList.length)
+    },
+    sortGiftInfo (gift) {
+      const info = gift
+      let timeType = ''
+      if (info.timeType === 1) {
+        timeType = '天'
+        return `${info.time}${timeType}`
+      } else if (info.timeType === 2) {
+        timeType = '月'
+        return `${info.time}个${timeType}`
+      }
+      return ''
+    },
+    giftListLoaded (length) {
+      this.$emit('loaded', { data: length, list: this.giftList })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gift-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ::v-deep {
+    .spec-card {
+      width: 240px;
+      height: 120px;
+    }
+    .spec-card:not(:last-of-type) {
+      margin-right: 16px;
+    }
+  }
+}
+</style>

src/views/vipsubscribe/Buy.vue

@@ -1,6 +1,6 @@
 <template>
   <Layout class="vip-subscribe-buy" contentWithState="full" :needAd="false">
-    <div class="vip-subscribe-title">开通超级订阅</div>
+    <div class="vip-subscribe-title">{{ buyTypeText }}超级订阅</div>
     <div class="vip-subscribe-content">
       <div class="vip-sub-list">
         <SelectorCard
@@ -33,7 +33,7 @@
           <div class="vip-sub-item-content">
             <CouponCardList
               :productionId="specActiveItem.productionId"
-              :price="specActiveItem.price * 100"
+              :price="computedPrice.total * 100"
               @loaded="couponCardLoaded"
               @change="couponCardChange" />
           </div>
@@ -43,7 +43,11 @@
           v-show="moduleShow.gift"
           :cardType="conf.selectorType">
           <div slot="header" class="vip-sub-item-title">赠品</div>
-          <div class="vip-sub-item-content"></div>
+          <div class="vip-sub-item-content">
+            <CouponGiftList
+              :productionId="specActiveItem.productionId"
+              @loaded="giftListLoaded" />
+          </div>
         </SelectorCard>
         <SelectorCard
           class="vip-sub-list-item"
@@ -92,6 +96,7 @@ import SelectorCard from '@/components/selector/SelectorCard.vue'
 import AreaSelector from '@/components/selector/AreaSelector.vue'
 import SpecList from '@/components/coupon/SpecList.vue'
 import CouponCardList from '@/components/coupon/CouponCardList.vue'
+import CouponGiftList from '@/components/coupon/CouponGiftList.vue'
 import CheckPhone from '@/components/coupon/CheckPhone.vue'
 import BuySubmit from '@/components/coupon/BuySubmit.vue'
 import Contrast from '@/views/vipsubscribe/components/Contrast.vue'
@@ -114,6 +119,7 @@ export default {
     AreaSelector,
     SpecList,
     CouponCardList,
+    CouponGiftList,
     CheckPhone,
     BuySubmit,
     Contrast,
@@ -216,7 +222,7 @@ export default {
     },
     buyTypeText () {
       const map = {
-        buy: '购买',
+        buy: '开通',
         upgrade: '升级'
       }
       return map[this.buyType]
@@ -313,6 +319,13 @@ export default {
       this.couponActiveItem = coupon
       this.updatePrice()
     },
+    giftListLoaded ({ list }) {
+      if (Array.isArray(list) && list.length) {
+        const gift = list[0]
+        this.specActiveItem.tipText = `赠送${gift.giftInfo}`
+        this.$set(this.specActiveItem, 'discountId', gift.discountId)
+      }
+    },
     showAreaDialog () {
       this.dialog.area = true
       this.$nextTick(() => {
@@ -388,7 +401,7 @@ export default {
         userLotteryId: coupon.userLotteryId,
         lotteryId: coupon.lotteryId,
         useProduct: this.specActiveItem.productionId,
-        discountId: ''
+        discountId: this.specActiveItem.discountId
       }
 
       // orderType: 1购买、2续费、3升级

src/views/vipsubscribe/components/Contrast.vue

@@ -77,15 +77,7 @@
 export default {
   name: 'contrast',
   data () {
-    return {
-      tableList: [
-        [
-          {
-            label: '宫娥能'
-          }
-        ]
-      ]
-    }
+    return {}
   }
 }
 </script>