feat(index.ts): 购物车功能实现

app/web/api/editor.api.ts

@@ -4,5 +4,8 @@ import config from '../config';
 export default {
   getPageById(params) {
     return http.get(`${config.apiHost}/editor/get/${params.pageId}`);
+  },
+  getShopCartCount() {
+    return http.get(`${config.kdspApi}/api/kdsp/shop-cart/count`);
   }
 };
\ No newline at end of file

app/web/config/dev.config.ts

@@ -3,6 +3,7 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 const hostMap = {
   apiHost: `${protocol}//quantum-blocks-vcc2.liangkebang.net`,
+  kdspApi: `${protocol}//talos-vcc2.liangkebang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
   test: true
 };

app/web/config/prod.config.ts

@@ -2,6 +2,7 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 export default {
   apiHost: `https://quantum-blocks.q-gp.com`,
+  kdspApi: `${protocol}//talos.xyqb.com`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=production`,
   // opapiHost: `${protocol}//opapi.q-gp.com`,
   test: false

app/web/config/test.config.ts

@@ -3,6 +3,7 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 const hostMap = {
   apiHost: `${protocol}//quantum-blocks-vcc2.liangkebang.net`,
+  kdspApi: `${protocol}//talos-vcc2.liangkebang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
   test: true
 };

app/web/framework/app.ts

@@ -23,7 +23,7 @@ export default class App {
     sync(store, router);
     if (EASY_ENV_IS_BROWSER) {
       // const { initSa } = require('@/service/sa.service');
-      // initService.init(router);
+      initService.init(router);
       // initSa(router);
     }
     return {

app/web/page/activity/component/BackTop/index.vue

 <template>
   <div>
-    <cr-back-top :show-back-top="showBackTop && pageData.props.showBackTop" :list="backTopList" @click="handleBackTopClick" />
+    <cr-back-top :show-back-top="showBackTop && pageData.props.showBackTop" :list="backTopList" @click="handleBackTopClick" ref="crBackTop" />
     <cr-popover
       class="wxmp-tip"
       :value="showMpTip"
@@ -17,8 +17,10 @@
 <script>
 import Bridge from '@qg/js-bridge';
 import { mapGetters } from 'vuex';
-import { isApp, isWxMp } from '@/service/utils.service';
+import { isApp, isWxMp, debounce } from '@/service/utils.service';
+import localStorage from '@/service/localStorage.service';
 import { registeredEvents } from '@/service/sa.service';
+import api from '@/api/editor.api';
 export default {
   name: 'BackTop',
   props: {
@@ -29,7 +31,9 @@ export default {
     ...mapGetters(['pageInfo']),
     backTopList() {
       const btAttachVal = this.pageData && this.pageData.props.btAttachVal ? this.pageData.props.btAttachVal : [];
-
+      if (this.cartIndex !== null && btAttachVal.length) {
+        btAttachVal[this.cartIndex - 1].info = this.cartCount;
+      }
       return isApp ? btAttachVal : isWxMp ? btAttachVal.filter(item => item.persets !== '购物车') : [];
     }
   },
@@ -38,7 +42,10 @@ export default {
       showMpTip: false,
       tipTimer: null,
       jsBridge: null,
-      wx: null
+      wx: null,
+      cartIndex: null,
+      cartCount: 0,
+      getCartCountDebounce: debounce(this.getCartCount, 2000)
     };
   },
   created() {
@@ -47,6 +54,12 @@ export default {
       this.wx = require('weixin-js-sdk');
     }
   },
+  watch: {
+    backTopList(val) {
+      this.cartIndex = (val || []).findIndex(item => item.persets === '购物车') + 1;
+      this.getCartCountDebounce();
+    }
+  },
   methods: {
     handleBackTopClick(e) {
       registeredEvents('PD_WUXIEC_H5ActivityPageSuspendedBtnClick', {
@@ -94,6 +107,15 @@ export default {
         this.showMpTip = false;
       }, 10000);
     },
+    async getCartCount() {
+      if (localStorage.get('vccToken') && this.cartIndex && isApp) {
+        const [res] = await api.getShopCartCount();
+        this.cartCount = res.count;
+        this.$nextTick(() => {
+          this.$refs.crBackTop.$forceUpdate();
+        });
+      }
+    }
   },
 }
 </script>

app/web/page/activity/view/activity/index.ts

@@ -82,7 +82,13 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
     const { pageId } = route.params;
     return store.dispatch('getPageDate', { pageId });
   }
-
+  updateShopCartCount() {
+    if (EASY_ENV_IS_BROWSER) {
+      this.$nextTick(() => {
+        this.$refs.backTop.getCartCount();
+      });
+    }
+  }
   modifyPoints() {
     const clientWidth = document.documentElement.clientWidth > 768 ? 375 : document.documentElement.clientWidth;
     const elements = this.pageData?.elements?.map(v => {

app/web/page/activity/view/activity/index.vue

@@ -40,7 +40,7 @@
         <page-bottom-tip />
       </grid-item>
   	</grid-layout>
-    <back-top :show-back-top="showBackTop" />
+    <back-top :show-back-top="showBackTop" ref="backTop" />
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>