优化分类列表

src/components/cate/cate.vue

@@ -75,6 +75,10 @@ export default {
             type: Number,
             default: 0,
         },
+        activeId: {
+            type: [String, Number],
+            default: 0,
+        },
         data: {
             type: Array,
             default: [],
@@ -108,7 +112,6 @@ export default {
         // H5窗口高度会计算tabbar高度，这里减去
         this.wrapHeight -= this.$utils.rpx2px(100);
         // #endif
-        // this.switchCate(5);
     },
     destroyed() {},
     methods: {
@@ -247,6 +250,11 @@ export default {
             this.$emit("clickItem", id);
         },
     },
+    watch: {
+        activeId(activeId) {
+            this.switchCate(activeId);
+        },
+    },
 };
 </script>
 

src/pages/service/cate.vue

@@ -49,7 +49,7 @@ export default {
             config: (state) => state.system.config,
         }),
     },
-    onLoad() {
+    async onLoad() {
         let x = this.config.windowWidth - this.$utils.rpx2px(94);
         let y = this.config.windowHeight - this.$utils.rpx2px(94);
         // H5平台减去tabBar高度
@@ -61,7 +61,7 @@ export default {
             y: y - this.$utils.rpx2px(40),
         };
         // 加载分类
-        this.loadHot();
+        await this.loadHot();
         this.loadCate();
     },
     onShow() {},
@@ -72,8 +72,8 @@ export default {
         /**
          * 热门推荐
          */
-        loadHot() {
-            this.$request({
+        async loadHot() {
+            await this.$request({
                 api: "service.hotCate",
             }).then((response) => {
                 let child = [];
@@ -95,8 +95,8 @@ export default {
         /**
          * 分类
          */
-        loadCate() {
-            this.$request({
+        async loadCate() {
+            await this.$request({
                 api: "service.cate",
             })
                 .then((response) => {

src/pages/service/list.vue

@@ -1,7 +1,7 @@
 <template>
     <app-layout minHeight="unset" btnType="back" title="服务列表" headerBackgroundColor="#FFFFFF" backgroundColor="#FFFFFF">
         <view class="cate">
-            <app-cate :offsetHeight="0" :data="data" cateType="list" @clickItem="clickItem" />
+            <app-cate :offsetHeight="0" :data="data" cateType="list" @clickItem="clickItem" :activeId="currentId" />
         </view>
         <view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
             <view class="cart" @click="utils.toPage('/pages/service/cart')">
@@ -28,9 +28,10 @@ export default {
     data() {
         return {
             utils: this.$utils,
-            cateId: 0,
             data: [],
             bottom: 0,
+
+            currentId: 0,
         };
     },
     components: {
@@ -42,14 +43,14 @@ export default {
             config: (state) => state.system.config,
         }),
     },
-    onLoad(e) {
-        if (e.id) {
-            this.cateId = e.id;
-        } else {
+    async onLoad(e) {
+        if (!e.id) {
             this.$utils.toast("参数错误");
             return;
         }
-        this.loadList();
+        await this.loadList(e.id);
+        // 赋值，触发watch
+        this.currentId = e.id;
     },
     onShow() {},
     onReady() {},
@@ -59,10 +60,10 @@ export default {
         /**
          * 加载列表
          */
-        loadList() {
-            this.$request({
+        async loadList(cateId) {
+            await this.$request({
                 api: "service.list",
-                query: "id=" + this.cateId,
+                query: "id=" + cateId,
             })
                 .then((response) => {
                     response.data.forEach((item) => {