Browse Source

商品详情页:分享事件

panyong 2 years ago
parent
commit
8b54964365

+ 2 - 1
htmldev/cps/src/App.vue

@@ -36,6 +36,7 @@ export default {
   watch: {
     '$route.name': {
       handler: function (newVal) {
+        const condition = ['PaymentCode', 'ShareMiddle', 'CategoryIndex', 'CategoryDetail'].findIndex(item => item === newVal) === -1
         if (!newVal) {
           return
         }
@@ -45,7 +46,7 @@ export default {
           this.active = newVal
         }
         // 为中转页的时候不调用
-        if (!this.$store.getters['common/isInit'] && newVal !== 'PaymentCode' && newVal !== 'ShareMiddle') {
+        if (!this.$store.getters['common/isInit'] && condition) {
           this.$store.dispatch('common/getUserInfo')
           this.$store.dispatch('common/getOrdertype')
           this.$store.commit('common/UPDATE_ISINIT', true)

+ 34 - 2
htmldev/cps/src/views/category/detail/index.vue

@@ -26,6 +26,7 @@
       </div>
       <div
         class="coupon-wrap"
+        @click="jumpShops"
         v-if="couponInfo.fav > 0">
         <div>
           <p class="amount">{{ couponInfo.fav }}元优惠券</p>
@@ -49,27 +50,37 @@
     </div>
     <!--底部按钮-->
     <div class="footer">
-      <a href="javascript:;">
+      <a
+        href="javascript:;"
+        @click="showShareTip">
         <span>分享赚</span>
         <span>¥{{ goodsInfo.commission }}</span>
       </a>
-      <a href="javascript:;">
+      <a
+        href="javascript:;"
+        @click="jumpShops">
         <span>自购省</span>
         <span>券¥{{ couponInfo.fav }} + ¥{{ goodsInfo.commission }}</span>
       </a>
     </div>
+    <ShareTipInWechat
+      ref="fbtShareTipInWechat"/>
   </div>
 </template>
 
 <script>
+import funWxShare from '@/utils/wxShare0.0'
 import Banner from './child/banner'
+import ShareTipInWechat from '../../common/shareTipInWechat'
 import { Button, Toast } from 'vant'
 import { apiGoodsDetail } from './api/api'
+import { platform } from '../../../utils/platform'
 
 export default {
   name: 'index',
   components: {
     Banner,
+    ShareTipInWechat,
     'van-button': Button
   },
   props: {
@@ -98,6 +109,7 @@ export default {
       try {
         const { status, data, msg } = await apiGoodsDetail(this.source, this.goodsId)
         if (status) {
+          let coverImg = ''
           this.goodsInfo = data
           this.couponInfo = data.coupon_info
           if (Array.isArray(data.goods_carousel_pictures)) {
@@ -106,10 +118,30 @@ export default {
           if (Array.isArray(data.goods_detail_pictures)) {
             this.goodsDetailPictures = data.goods_detail_pictures
           }
+          if (this.goodsCarouselPictures.length) {
+            coverImg = this.goodsCarouselPictures[0]
+          } else if (this.goodsDetailPictures.length) {
+            coverImg = this.goodsDetailPictures[0]
+          }
+          platform.isWeixin && funWxShare('返不停', data.goods_name, coverImg, data.url)
         } else {
           Toast(msg)
         }
       } catch (e) {}
+    },
+    showShareTip () {
+      if (!(Object.keys(this.goodsInfo).length)) {
+        Toast('数据加载中,稍后重试')
+        return
+      }
+      this.$refs.fbtShareTipInWechat.init()
+    },
+    jumpShops () {
+      if (!(Object.keys(this.goodsInfo).length)) {
+        Toast('数据加载中,稍后重试')
+        return
+      }
+      top.location.href = this.goodsInfo.url
     }
   }
 }

BIN
htmldev/cps/src/views/common/shareTipInWechat/image/icon_01@2x.png


+ 43 - 0
htmldev/cps/src/views/common/shareTipInWechat/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <van-popup
+    class="fbt-van-popup-share"
+    position="top"
+    v-model="booShareTip">
+    <img
+      src="./image/icon_01@2x.png"
+      alt="">
+  </van-popup>
+</template>
+
+<script>
+import { Popup } from 'vant'
+
+export default {
+  name: 'index',
+  components: {
+    'van-popup': Popup
+  },
+  data () {
+    return {
+      booShareTip: false
+    }
+  },
+  methods: {
+    init () {
+      this.booShareTip = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fbt-van-popup-share {
+  background: transparent;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 286px;
+  }
+}
+</style>