cps：分享赚钱

htmldev/cps/src/App.vue

@@ -10,7 +10,7 @@
       v-model="active"
       v-if="$route.meta.showTabbar">
       <van-tabbar-item replace to="/" icon="wap-home-o" name="MarketingSave">首页</van-tabbar-item>
-      <van-tabbar-item replace to="/invite" icon="share-o" name="Invite">分享赚钱</van-tabbar-item>
+      <van-tabbar-item replace to="/invite" icon="gold-coin-o" name="Invite">分享赚钱</van-tabbar-item>
       <van-tabbar-item replace to="/mine" icon="user-o" name="Mine">我的</van-tabbar-item>
     </van-tabbar>
   </div>

htmldev/cps/src/views/invite/index.vue

@@ -1,12 +1,48 @@
 <template>
-  <div>invite</div>
+  <div class="invite-container">
+    <Mall
+      :goods="shops"
+      ref="myMall"/>
+  </div>
 </template>
 
 <script>
+import Mall from '../marketing/save/mall'
+import { getHomeList } from '@/views/marketing/api'
+
 export default {
   name: 'index',
+  components: {
+    Mall
+  },
+  data () {
+    return {
+      shops: []
+    }
+  },
   activated () {
-    if (!this.$route.meta.isUseCache) {} else {}
+    if (!this.$route.meta.isUseCache) {
+      this.fetchData()
+    } else {
+      this.$nextTick(() => {
+        this.shops.length && this.$refs.myMall.show()
+      })
+    }
+  },
+  methods: {
+    async fetchData () {
+      try {
+        const { status, data } = await getHomeList()
+        if (status) {
+          if (Array.isArray(data)) {
+            this.shops = data
+            this.$nextTick(() => {
+              this.shops.length && this.$refs.myMall.show()
+            })
+          }
+        }
+      } catch (err) {}
+    }
   },
   beforeRouteLeave (to, form, next) {
     if (['Mine', 'MarketingSave'].findIndex(item => item === to.name) > -1) {
@@ -19,5 +55,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.invite-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 50px;
+  width: 100%;
+}
 </style>

htmldev/cps/src/views/marketing/save/index.vue

@@ -41,18 +41,27 @@
             class="jump-more"
             src="./image/ic_more@2x.png"
             alt=""
+            v-show="shops.length"
             @click="handleShowMall">
         </li>
       </ul>
     </div>
-    <Mall
-      :goods="shops"
-      ref="myMall"/>
+    <van-popup
+      v-model="showFlag"
+      :lock-scroll="false"
+      position="bottom"
+      :close-on-click-overlay="false"
+      @click-overlay="showFlag = false"
+      style="height: 85%;">
+      <Mall
+        :goods="shops"
+        ref="myMall"/>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Loading } from 'vant'
+import { Loading, Popup } from 'vant'
 import BScroll from 'better-scroll'
 import Mall from './mall'
 import { getHomeList } from './api'
@@ -61,13 +70,15 @@ export default {
   name: 'index',
   components: {
     'van-loading': Loading,
+    'van-popup': Popup,
     Mall
   },
   data () {
     return {
       isRefresh: false, // 是否下拉刷新
       shopsScroll: null,
-      shops: []
+      shops: [],
+      showFlag: false
     }
   },
   activated () {
@@ -104,7 +115,10 @@ export default {
       top.location.href = shop.link_url
     },
     handleShowMall () {
-      this.shops.length && this.$refs.myMall.show()
+      this.showFlag = true
+      this.$nextTick(() => {
+        this.$refs.myMall.show()
+      })
     },
     onRefresh () {
       this.isRefresh = true

htmldev/cps/src/views/marketing/save/mall/index.vue

@@ -1,63 +1,54 @@
 <template>
-  <van-popup
-    v-model="showFlag"
-    :lock-scroll="false"
-    position="bottom"
-    :close-on-click-overlay="false"
-    @click-overlay="showFlag = false"
-    style="height: 85%;">
-    <div class="goods">
-      <div
-        ref="menuWrapper"
-        class="menu-wrapper">
-        <ul>
-          <li
-            v-for="(item, index) in goods"
-            :key="index"
-            ref="menuList"
-            :class="{'current':currentIndex === index}"
-            class="menu-item"
-            @click="selectMenu(index, $event)">
-            <span class="text">{{ item.category_type_name }}</span>
-          </li>
-        </ul>
-      </div>
-      <div
-        ref="foodsWrapper"
-        class="foods-wrapper">
-        <ul>
-          <li
-            v-for="(item, index) in goods"
-            :key="index"
-            ref="foodList"
-            class="food-list">
-            <h1 class="title">{{ item.category_type_name }}</h1>
-            <ul class="food-item-wrap">
-              <li
-                v-for="(food, idx) in item.category_data"
-                :key="idx"
-                class="food-item"
-                @click="selectFood(food, $event)">
-                <div class="icon">
-                  <img
-                    :src="food.category_img_url"
-                    alt=""
-                    height="48"
-                    width="48">
-                </div>
-                <h2 class="name">{{ food.category_name }}</h2>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <div class="goods">
+    <div
+      ref="menuWrapper"
+      class="menu-wrapper">
+      <ul>
+        <li
+          v-for="(item, index) in goods"
+          :key="index"
+          ref="menuList"
+          :class="{'current':currentIndex === index}"
+          class="menu-item"
+          @click="selectMenu(index, $event)">
+          <span class="text">{{ item.category_type_name }}</span>
+        </li>
+      </ul>
     </div>
-  </van-popup>
+    <div
+      ref="foodsWrapper"
+      class="foods-wrapper">
+      <ul>
+        <li
+          v-for="(item, index) in goods"
+          :key="index"
+          ref="foodList"
+          class="food-list">
+          <h1 class="title">{{ item.category_type_name }}</h1>
+          <ul class="food-item-wrap">
+            <li
+              v-for="(food, idx) in item.category_data"
+              :key="idx"
+              class="food-item"
+              @click="selectFood(food, $event)">
+              <div class="icon">
+                <img
+                  :src="food.category_img_url"
+                  alt=""
+                  height="48"
+                  width="48">
+              </div>
+              <h2 class="name">{{ food.category_name }}</h2>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
-import { Popup } from 'vant'
 
 export default {
   props: {
@@ -72,7 +63,8 @@ export default {
     return {
       listHeight: [],
       scrollY: 0,
-      showFlag: false
+      meunScroll: null,
+      foodsScroll: null
     }
   },
   computed: {
@@ -107,12 +99,10 @@ export default {
       top.location.href = food.link_url
     },
     show () {
-      this.showFlag = true
-
       setTimeout(() => {
         this._initScroll()
         this._calculateHeight()
-      })
+      }, 500)
     },
     _initScroll () {
       if (!this.meunScroll) {
@@ -155,22 +145,18 @@ export default {
       this.meunScroll.scrollToElement(el, 300, 0, -100)
     }
   },
-  components: {
-    'van-popup': Popup
+  beforeDestroy () {
+    if (this.meunScroll) {
+      this.meunScroll.destroy()
+    }
+    if (this.foodsScroll) {
+      this.foodsScroll.destroy()
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.mall-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-}
-
 .goods {
   display: flex;
   position: absolute;