修复服务分类页面高度设置问题，新增服务详情页面

src/components/cate/cate.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 import CateTmpl from "@/components/cate/template/cate";
 import ListTmpl from "@/components/cate/template/list";
 export default {
@@ -98,24 +98,26 @@ export default {
     },
     computed: {
         ...mapState({
-            config: state => state.system.config,
+            config: (state) => state.system.config,
             bodyPaddingTop: (state) => state.system.bodyPaddingTop,
-        })
+        }),
     },
     created() {},
     mounted() {
         this.getMenuItemTop();
-        let headerHeight = this.$utils.rpx2px(this.bodyPaddingTop);
+        setTimeout(() => {
-        let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
+            let headerHeight = this.$utils.rpx2px(this.bodyPaddingTop);
-        const { windowHeight, statusBarHeight } = this.config;
+            let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
-        // 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
+            const { windowHeight, statusBarHeight } = this.config;
-        this.wrapHeight = windowHeight - headerHeight - offsetHeight;
+            // 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
-        // #ifdef MP-WEIXIN
+            this.wrapHeight = windowHeight - headerHeight - offsetHeight;
-        // 微信窗口高度不会计算tabbar高度，这里加回来
+            // #ifdef MP-WEIXIN
-        if (this.cateType == 'cate') {
+            // 微信窗口高度不会计算tabbar高度，这里加回来
-            this.wrapHeight += this.$utils.rpx2px(100);
+            if (this.cateType == "cate") {
-        }
+                this.wrapHeight += this.$utils.rpx2px(100);
-        // #endif
+            }
+            // #endif
+        }, 20);
     },
     destroyed() {},
     methods: {

src/components/cate/template/list.vue

@@ -8,21 +8,21 @@
                 class="thumb-box"
                 v-for="(child, index1) in data.child"
                 :key="index1"
-                @click="clickItem(child.id, child.name)"
             >
                 <image
                     class="cover-image"
                     mode="aspectFill"
                     :src="child.icon"
+                    @click="clickItem(child.id, child.name)"
                 ></image>
-                <view class="item-box">
+                <view class="item-box" @click="clickItem(child.id, child.name)">
                     <view class="title">{{ child.name }}</view>
                     <view class="text-box">
                         {{ "已服务113256次" }}
                     </view>
                     <view class="price">￥158元起</view>
-                    <mini-add class="component-add" :initNumber="child.buyNumber" />
                 </view>
+                <mini-add class="component-add" :initNumber="child.buyNumber" />
             </view>
         </view>
     </view>
@@ -64,10 +64,17 @@ export default {
     flex-wrap: wrap;
 }
 .thumb-box {
+    position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-top: 40rpx;
+    
+    .component-add {
+        position: absolute;
+        right: 0;
+        bottom: 8rpx;
+    }
 }
 .thumb-box:nth-child(3n) {
     margin-right: 0;
@@ -80,7 +87,6 @@ export default {
     border: 2rpx solid #d8d8d8;
 }
 .item-box {
-    position: relative;
     width: 300rpx;
     display: flex;
     justify-content: space-between;
@@ -99,10 +105,5 @@ export default {
         font-size: 30rpx;
         color: #ec7655;
     }
-    .component-add {
-        position: absolute;
-        right: 0;
-        bottom: 8rpx;
-    }
 }
 </style>

src/pages.json

@@ -22,7 +22,7 @@
 		{
 			"path": "pages/member/address",
 			"style": {
-				"navigationBarTitleText": "分类"
+				"navigationBarTitleText": "地址管理"
 			}
 		},
 		{
@@ -34,7 +34,13 @@
 		{
 			"path": "pages/service/list",
 			"style": {
-				"navigationBarTitleText": "分类"
+				"navigationBarTitleText": "服务列表"
+			}
+		},
+		{
+			"path": "pages/service/detail",
+			"style": {
+				"navigationBarTitleText": "服务详情"
 			}
 		}
 	],

src/pages/service/detail.vue

@@ -0,0 +1,25 @@
+<template>
+    <app-layout backgroundColor="#00418c" :title="title" textColor="light">
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "service-detail",
+    data() {
+        return {
+            title: "服务详情",
+        };
+    },
+    components: { AppLayout },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/pages/service/list.vue

@@ -1,9 +1,9 @@
 <template>
     <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
         <view class="cate">
-            <app-cate :data="data" cateType="list" />
+            <app-cate :data="data" cateType="list" @clickItem="clickItem" />
         </view>
-        <view class="buy-components" :style="{bottom: bottom + 'rpx'}">
+        <view class="buy-components" :style="{ bottom: bottom + 'rpx' }">
             <view class="cart">
                 <view class="cart-icon">
                     <text class="iconfont icon-gouwuche"></text>
@@ -22,7 +22,7 @@
 <script>
 import AppLayout from "@/components/layout/layout";
 import AppCate from "@/components/cate/cate";
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
     name: "service-list",
     data() {
@@ -91,19 +91,23 @@ export default {
     components: { AppLayout, AppCate },
     computed: {
         ...mapState({
-            config: (state) => state.system.config
+            config: (state) => state.system.config,
-        })
+        }),
     },
     onLoad() {
         this.bottom = this.$utils.px2rpx(this.config.safeAreaInsets.bottom);
     },
     onShow() {},
-    onReady() {
+    onReady() {},
-
-    },
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        clickItem(id) {
+            uni.navigateTo({
+                url: "/pages/service/detail?id=" + id,
+            });
+        },
+    },
 };
 </script>