cps：商城

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

@@ -20,13 +20,17 @@
             </p>
           </div>
         </li>
+        <li>
+          <img
+            class="jump-more"
+            src="./image/ic_more@2x.png"
+            alt=""
+            @click="handleShowMall">
+        </li>
       </ul>
     </div>
-    <img
-      class="jump-more"
-      src="./image/ic_more@2x.png"
-      alt="">
-    <Mall/>
+    <Mall
+      ref="myMall"/>
   </div>
 </template>
 
@@ -75,6 +79,9 @@ export default {
     },
     handleJump (shop) {
       console.log(shop)
+    },
+    handleShowMall () {
+      this.$refs.myMall.show()
     }
   },
   beforeDestroy () {

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="mall-container">
-    <div class="mask"></div>
+  <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"
@@ -74,12 +79,12 @@
         </ul>
       </div>
     </div>
-  </div>
+  </van-popup>
 </template>
 
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
-import { Toast, Button } from 'vant'
+import { Toast, Button, Popup } from 'vant'
 import { mockGoods } from './mock'
 
 export default {
@@ -88,7 +93,8 @@ export default {
       goods: [],
       listHeight: [],
       scrollY: 0,
-      selectedFood: {}
+      selectedFood: {},
+      showFlag: false
     }
   },
   computed: {
@@ -105,7 +111,9 @@ export default {
     }
   },
   async activated () {
-    this.fetchProductList()
+    if (!this.$route.meta.isUseCache) {
+      this.fetchProductList()
+    }
   },
   methods: {
     selectMenu (index, event) {
@@ -127,22 +135,38 @@ export default {
     addFood (target) {
       this._drop(target)
     },
-    _initScroll () {
-      this.meunScroll = new BScroll(this.$refs.menuWrapper, {
-        click: true
-      })
+    show () {
+      this.showFlag = true
 
-      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
-        click: true,
-        probeType: 3
+      setTimeout(() => {
+        this._initScroll()
+        this._calculateHeight()
       })
+    },
+    _initScroll () {
+      if (!this.meunScroll) {
+        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
+          click: true
+        })
+      } else {
+        this.meunScroll.refresh()
+      }
 
-      this.foodsScroll.on('scroll', (pos) => {
-        // 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
-        if (pos.y <= 0) {
-          this.scrollY = Math.abs(Math.round(pos.y))
-        }
-      })
+      if (!this.foodsScroll) {
+        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
+          click: true,
+          probeType: 3
+        })
+
+        this.foodsScroll.on('scroll', (pos) => {
+          // 判断滑动方向，避免下拉时分类高亮错误（如第一分类商品数量为1时，下拉使得第二分类高亮）
+          if (pos.y <= 0) {
+            this.scrollY = Math.abs(Math.round(pos.y))
+          }
+        })
+      } else {
+        this.foodsScroll.refresh()
+      }
     },
     _calculateHeight () {
       const foodList = this.$refs.foodList
@@ -167,8 +191,8 @@ export default {
           if (Array.isArray(data) && data.length) {
             this.goods = data
             setTimeout(() => {
-              this._initScroll()
-              this._calculateHeight()
+              // this._initScroll()
+              // this._calculateHeight()
             }, 500)
           }
         } else {
@@ -178,7 +202,8 @@ export default {
     }
   },
   components: {
-    'van-button': Button
+    'van-button': Button,
+    'van-popup': Popup
   }
 }
 </script>
@@ -206,7 +231,7 @@ export default {
   display: flex;
   position: absolute;
   left: 0;
-  top: 111px;
+  top: 0;
   right: 0;
   bottom: 0;
   z-index: 1;