From 44dae598a1c53594f98998c3ed011ed38fe210cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Thu, 9 Feb 2023 20:40:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9cate=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cate/cate.vue                  | 195 +++++++++++-------
 .../cate/template/{parent.vue => cate.vue}    |  21 +-
 src/components/cate/template/child.vue        |  79 -------
 src/components/cate/template/list.vue         |  81 ++++++++
 src/pages/service/cate.vue                    |  13 +-
 src/pages/service/list.vue                    |   2 +-
 6 files changed, 221 insertions(+), 170 deletions(-)
 rename src/components/cate/template/{parent.vue => cate.vue} (74%)
 delete mode 100644 src/components/cate/template/child.vue
 create mode 100644 src/components/cate/template/list.vue

diff --git a/src/components/cate/cate.vue b/src/components/cate/cate.vue
index 04f5a88..093c0d1 100644
--- a/src/components/cate/cate.vue
+++ b/src/components/cate/cate.vue
@@ -1,16 +1,22 @@
 <template>
-    <view class="component-wrap" :style="{height: wrapHeight + 'px'}">
+    <view class="component-wrap" :style="{ height: wrapHeight + 'px' }">
         <view class="component-menu-wrap">
-            <scroll-view scroll-y class="component-tab-view menu-scroll-view" :scroll-top="scrollTop"
-             :scroll-into-view="itemId">
+            <scroll-view
+                scroll-y
+                class="component-tab-view menu-scroll-view"
+                :scroll-top="scrollTop"
+                :scroll-into-view="itemId"
+            >
                 <view
                     class="component-tab-item"
                     v-for="(item, index) in data"
                     :key="index"
-                    :class="[current == index ? 'component-tab-item-active' : '']"
+                    :class="[
+                        current == index ? 'component-tab-item-active' : '',
+                    ]"
                     @tap.stop="swichMenu(index)"
                 >
-                    <text class="component-line-1">{{item.name}}</text>
+                    <text class="component-line-1">{{ item.name }}</text>
                 </view>
             </scroll-view>
             <scroll-view
@@ -20,16 +26,31 @@
                 class="right-box"
                 @scroll="rightScroll"
             >
-                <view class="page-view">
+                <view class="page-view" :class="[cateType]">
                     <view
                         class="class-item"
-                        v-for="(item, index) in data" 
+                        v-for="(item, index) in data"
                         :id="'item' + index"
-                        :key="index" 
-                        :style="{height: (index == data.length - 1 ? (cateType == 'parent' ? 'calc(100vh - 70rpx)' : '100vh') : 'auto')}"
+                        :key="index"
+                        :style="{
+                            height:
+                                index == data.length - 1
+                                    ? cateType == 'cate'
+                                        ? 'calc(100vh - 70rpx)'
+                                        : '100vh'
+                                    : 'auto',
+                        }"
                     >
-                        <parent-tmpl v-if="cateType === 'parent'" :data="item" @clickParent="clickParent"></parent-tmpl>
-                        <child-tmpl v-if="cateType === 'child'" :data="item" @clickChild="clickChild"></child-tmpl>
+                        <cate-tmpl
+                            v-if="cateType === 'cate'"
+                            :data="item"
+                            @clickCate="clickCate"
+                        ></cate-tmpl>
+                        <list-tmpl
+                            v-if="cateType === 'list'"
+                            :data="item"
+                            @clickItem="clickItem"
+                        ></list-tmpl>
                     </view>
                 </view>
             </scroll-view>
@@ -38,8 +59,8 @@
 </template>
 
 <script>
-import ParentTmpl from "@/components/cate/template/parent"
-import ChildTmpl from "@/components/cate/template/child"
+import CateTmpl from "@/components/cate/template/cate";
+import ListTmpl from "@/components/cate/template/list";
 export default {
     name: "component-cate",
     data() {
@@ -54,25 +75,25 @@ export default {
             scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
             timer: null, // 定时器
             wrapHeight: 0,
-        }
+        };
     },
     props: {
         cateType: {
             type: String,
-            default: "parent"
+            default: "cate",
         },
         offsetHeight: {
             type: Number,
-            default: 0
+            default: 0,
         },
         data: {
             type: Array,
-            default: []
-        }
+            default: [],
+        },
     },
     components: {
-        ParentTmpl,
-        ChildTmpl
+        CateTmpl,
+        ListTmpl,
     },
     created() {},
     mounted() {
@@ -89,40 +110,49 @@ export default {
         getElRect(elClass, dataVal) {
             new Promise((resolve, reject) => {
                 const query = uni.createSelectorQuery().in(this);
-                query.select('.' + elClass).fields({
-                    size: true
-                }, res => {
-                    // 如果节点尚未生成，res值为null，循环调用执行
-                    if (!res) {
-                        this.getElRect(elClass);
-                        return;
-                    }
-                    this[dataVal] = res.height;
-                    resolve();
-                }).exec();
-            })
+                query
+                    .select("." + elClass)
+                    .fields(
+                        {
+                            size: true,
+                        },
+                        (res) => {
+                            // 如果节点尚未生成，res值为null，循环调用执行
+                            if (!res) {
+                                this.getElRect(elClass);
+                                return;
+                            }
+                            this[dataVal] = res.height;
+                            resolve();
+                        }
+                    )
+                    .exec();
+            });
         },
         /**
          * 获取右边菜单每个item到顶部的距离
          * 储存到 arr 数组里面用于后面滚动判断
          */
         getMenuItemTop() {
-            new Promise(resolve => {
+            new Promise((resolve) => {
                 let selectorQuery = uni.createSelectorQuery().in(this);
-                selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
-                    // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-                    if(!rects.length) {
-                        this.getMenuItemTop();
-                        return ;
-                    }
-                    rects.forEach((rect) => {
-                        // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-                        this.arr.push(rect.top - rects[0].top);
-                        // this.arr.push(rect.top)
-                        resolve();
+                selectorQuery
+                    .selectAll(".class-item")
+                    .boundingClientRect((rects) => {
+                        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+                        if (!rects.length) {
+                            this.getMenuItemTop();
+                            return;
+                        }
+                        rects.forEach((rect) => {
+                            // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+                            this.arr.push(rect.top - rects[0].top);
+                            // this.arr.push(rect.top)
+                            resolve();
+                        });
                     })
-                }).exec()
-            })
+                    .exec();
+            });
         },
         /**
          * 观测元素相交状态
@@ -132,15 +162,17 @@ export default {
         async observer() {
             this.data.map((val, index) => {
                 let observer = uni.createIntersectionObserver(this);
-                observer.relativeTo('.right-box', {
-                    top: 0
-                }).observe('#item' + index, res => {
-                    if (res.intersectionRatio > 0) {
-                        let id = res.id.substring(4);
-                        this.leftMenuStatus(id);
-                    }
-                })
-            })
+                observer
+                    .relativeTo(".right-box", {
+                        top: 0,
+                    })
+                    .observe("#item" + index, (res) => {
+                        if (res.intersectionRatio > 0) {
+                            let id = res.id.substring(4);
+                            this.leftMenuStatus(id);
+                        }
+                    });
+            });
         },
         /**
          * 设置左边菜单的滚动状态
@@ -150,27 +182,30 @@ export default {
             this.current = index;
             // 如果为0，意味着尚未初始化
             if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-                await this.getElRect('menu-scroll-view', 'menuHeight');
-                await this.getElRect('component-tab-item', 'menuItemHeight');
+                await this.getElRect("menu-scroll-view", "menuHeight");
+                await this.getElRect("component-tab-item", "menuItemHeight");
             }
             // 将菜单活动item垂直居中
-            this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+            this.scrollTop =
+                index * this.menuItemHeight +
+                this.menuItemHeight / 2 -
+                this.menuHeight / 2;
         },
         /**
          * 点击左边的栏目切换
          * @index 传入的 ID
          */
         async swichMenu(index) {
-            if(this.arr.length == 0) {
+            if (this.arr.length == 0) {
                 await this.getMenuItemTop();
             }
             if (index == this.current) return;
             this.scrollRightTop = this.oldScrollTop;
-            this.$nextTick(function(){
+            this.$nextTick(function () {
                 this.scrollRightTop = this.arr[index];
                 this.current = index;
                 this.leftMenuStatus(index);
-            })
+            });
         },
         /**
          * 右边菜单滚动
@@ -178,11 +213,11 @@ export default {
          */
         async rightScroll(e) {
             this.oldScrollTop = e.detail.scrollTop;
-            if(this.arr.length == 0) {
+            if (this.arr.length == 0) {
                 await this.getMenuItemTop();
             }
-            if(!this.menuHeight) {
-                await this.getElRect('menu-scroll-view', 'menuHeight');
+            if (!this.menuHeight) {
+                await this.getElRect("menu-scroll-view", "menuHeight");
             }
             // scrollHeight为右边菜单垂直中点位置
             // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
@@ -191,18 +226,21 @@ export default {
             for (let i = 0; i < this.arr.length; i++) {
                 let height1 = this.arr[i];
                 let height2 = this.arr[i + 1];
-                if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+                if (
+                    !height2 ||
+                    (scrollHeight >= height1 && scrollHeight < height2)
+                ) {
                     this.leftMenuStatus(i);
-                    return ;
+                    return;
                 }
             }
         },
-        clickParent(id) {
-            this.$emit('clickParent', id);
+        clickCate(id) {
+            this.$emit("clickCate", id);
+        },
+        clickItem(id) {
+            this.$emit("clickItem", id);
         },
-        clickChild(id) {
-            this.$emit('clickChild', id);
-        }
     },
 };
 </script>
@@ -224,7 +262,7 @@ export default {
 .component-tab-view {
     width: 200rpx;
     height: 100%;
-    background-color: #F6F6F6;
+    background-color: #f6f6f6;
 }
 .component-tab-item {
     height: 100rpx;
@@ -233,19 +271,19 @@ export default {
     display: flex;
     align-items: center;
     font-size: 24rpx;
-    color: #8B8B8B;
+    color: #8b8b8b;
     font-weight: 400;
     line-height: 1;
 }
 .component-tab-item-active {
     position: relative;
-    color: #4B65ED;
-    background: #FFFFFF;
+    color: #4b65ed;
+    background: #ffffff;
 }
 .component-tab-item-active::before {
     content: "";
     position: absolute;
-    border-left: 4px solid #4B65ED;
+    border-left: 4px solid #4b65ed;
     height: 24rpx;
     left: 0;
     top: 38rpx;
@@ -256,9 +294,12 @@ export default {
 .right-box {
     width: 550rpx;
 }
-.page-view {
+.page-view.cate {
     padding-right: 16rpx;
 }
+.page-view.list {
+    padding-right: 0;
+}
 .class-item {
     background-color: #ffffff;
     padding: 36rpx 32rpx 0 32rpx;
diff --git a/src/components/cate/template/parent.vue b/src/components/cate/template/cate.vue
similarity index 74%
rename from src/components/cate/template/parent.vue
rename to src/components/cate/template/cate.vue
index 46ada90..e626976 100644
--- a/src/components/cate/template/parent.vue
+++ b/src/components/cate/template/cate.vue
@@ -1,7 +1,7 @@
 <template>
     <view>
         <view class="item-title">
-            <text>{{data.name}}</text>
+            <text>{{ data.name }}</text>
         </view>
         <view class="item-container">
             <view
@@ -10,8 +10,12 @@
                 :key="index1"
                 @click="clickItem(child.id, child.name)"
             >
-                <image class="item-menu-image" :src="child.icon" mode=""></image>
-                <view class="item-menu-name">{{child.name}}</view>
+                <image
+                    class="item-menu-image"
+                    :src="child.icon"
+                    mode=""
+                ></image>
+                <view class="item-menu-name">{{ child.name }}</view>
             </view>
         </view>
     </view>
@@ -19,14 +23,14 @@
 
 <script>
 export default {
-    name: "component-cate-template-parent",
+    name: "component-cate-template-cate",
     data() {
         return {};
     },
     props: {
         data: {
             type: Object,
-            default: []
+            default: [],
         },
     },
     components: {},
@@ -35,14 +39,13 @@ export default {
     destroyed() {},
     methods: {
         clickItem(id, name) {
-            this.$emit('clickParent', id);
-        }
+            this.$emit("clickCate", id);
+        },
     },
 };
 </script>
 
 <style lang="less" scoped>
-
 .item-title {
     font-size: 26rpx;
     color: #010101;
@@ -69,7 +72,7 @@ export default {
     height: 120rpx;
     box-sizing: border-box;
     border-radius: 20rpx;
-    border: 2rpx solid #D8D8D8;
+    border: 2rpx solid #d8d8d8;
 }
 .item-menu-name {
     margin-top: 15rpx;
diff --git a/src/components/cate/template/child.vue b/src/components/cate/template/child.vue
deleted file mode 100644
index d20d88a..0000000
--- a/src/components/cate/template/child.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-    <view>
-        <view class="item-title">
-            <text>{{data.name}}</text>
-        </view>
-        <view class="item-container">
-            <view
-                class="thumb-box"
-                v-for="(child, index1) in data.child"
-                :key="index1"
-                @click="clickItem(child.id, child.name)"
-            >
-                <image class="item-menu-image" :src="child.icon" mode=""></image>
-                <view class="item-menu-name">{{child.name}}</view>
-            </view>
-        </view>
-    </view>
-</template>
-
-<script>
-export default {
-    name: "component-cate-template-child",
-    data() {
-        return {};
-    },
-    props: {
-        data: {
-            type: Object,
-            default: []
-        },
-    },
-    components: {},
-    created() {},
-    mounted() {},
-    destroyed() {},
-    methods: {
-        clickItem(id, name) {
-            this.$emit('clickParent', id);
-        }
-    },
-};
-</script>
-
-<style lang="less" scoped>
-
-.item-title {
-    font-size: 26rpx;
-    color: #8B8B8B;
-    font-weight: bold;
-}
-.item-container {
-    display: flex;
-    flex-wrap: wrap;
-}
-.thumb-box {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    margin-top: 40rpx;
-    margin-right: 40rpx;
-}
-.thumb-box:nth-child(3n) {
-    margin-right: 0;
-}
-.item-menu-image {
-    width: 120rpx;
-    height: 120rpx;
-    box-sizing: border-box;
-    border-radius: 20rpx;
-    border: 2rpx solid #D8D8D8;
-}
-.item-menu-name {
-    margin-top: 15rpx;
-    font-weight: normal;
-    color: #333333;
-    font-size: 24rpx;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/cate/template/list.vue b/src/components/cate/template/list.vue
new file mode 100644
index 0000000..7a33f58
--- /dev/null
+++ b/src/components/cate/template/list.vue
@@ -0,0 +1,81 @@
+<template>
+    <view>
+        <view class="item-title">
+            <text>{{ data.name }}</text>
+        </view>
+        <view class="item-container">
+            <view
+                class="thumb-box"
+                v-for="(child, index1) in data.child"
+                :key="index1"
+                @click="clickItem(child.id, child.name)"
+            >
+                <image
+                    class="item-menu-image"
+                    mode="aspectFill"
+                    :src="child.icon"
+                ></image>
+                <view class="item-menu-name">{{ child.name }}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-cate-template-list",
+    data() {
+        return {};
+    },
+    props: {
+        data: {
+            type: Object,
+            default: [],
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        clickItem(id, name) {
+            this.$emit("clickItem", id);
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.item-title {
+    font-size: 26rpx;
+    color: #8b8b8b;
+    font-weight: bold;
+}
+.item-container {
+    display: flex;
+    flex-wrap: wrap;
+    .thumb-box {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: column;
+        margin-top: 40rpx;
+    }
+    .thumb-box:nth-child(3n) {
+        margin-right: 0;
+    }
+    .item-menu-image {
+        width: 120rpx;
+        height: 120rpx;
+        box-sizing: border-box;
+        border-radius: 20rpx;
+        border: 2rpx solid #d8d8d8;
+    }
+    .item-menu-name {
+        margin-top: 15rpx;
+        font-weight: normal;
+        color: #333333;
+        font-size: 24rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/service/cate.vue b/src/pages/service/cate.vue
index 5d91e4b..aa3c93d 100644
--- a/src/pages/service/cate.vue
+++ b/src/pages/service/cate.vue
@@ -15,7 +15,12 @@
             </view>
         </view>
         <view class="cate">
-            <app-cate :offsetHeight="60" :data="data" cateType="parent" @clickParent="clickParent" />
+            <app-cate
+                :offsetHeight="60"
+                :data="data"
+                cateType="cate"
+                @clickCate="clickCate"
+            />
         </view>
     </app-layout>
 </template>
@@ -91,11 +96,11 @@ export default {
     onReachBottom() {},
     onPullDownRefresh() {},
     methods: {
-        clickParent(id) {
+        clickCate(id) {
             uni.navigateTo({
-                url: '/pages/service/list?id=' + id
+                url: "/pages/service/list?id=" + id,
             });
-        }
+        },
     },
 };
 </script>
diff --git a/src/pages/service/list.vue b/src/pages/service/list.vue
index e7980d9..bb71522 100644
--- a/src/pages/service/list.vue
+++ b/src/pages/service/list.vue
@@ -1,7 +1,7 @@
 <template>
     <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
         <view class="cate">
-            <app-cate :offsetHeight="0" :data="data" cateType="child" />
+            <app-cate :offsetHeight="0" :data="data" cateType="list" />
         </view>
     </app-layout>
 </template>