完成商品详情页，完全解决页面顶部距离问题

src/components/cate/cate.vue

@@ -99,25 +99,27 @@ export default {
     computed: {
         ...mapState({
             config: (state) => state.system.config,
-            bodyPaddingTop: (state) => state.system.bodyPaddingTop,
         }),
     },
     created() {},
     mounted() {
         this.getMenuItemTop();
-        setTimeout(() => {
+        const { windowHeight, statusBarHeight, headerHeight } = this.config;
-            let headerHeight = this.$utils.rpx2px(this.bodyPaddingTop);
+        // 计算页面内边距------------------------------------------
-            let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
+        // #ifndef H5
-            const { windowHeight, statusBarHeight } = this.config;
+        const bodyPt = statusBarHeight + headerHeight;
-            // 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
+        // #endif
-            this.wrapHeight = windowHeight - headerHeight - offsetHeight;
+        // #ifdef H5
-            // #ifdef MP-WEIXIN
+        const bodyPt = 0 + this.$utils.rpx2px(headerHeight * 2);
-            // 微信窗口高度不会计算tabbar高度，这里加回来
+        // #endif
-            if (this.cateType == "cate") {
+        // 计算页面内边距------------------------------------------
-                this.wrapHeight += this.$utils.rpx2px(100);
+        const offsetHeight = this.$utils.rpx2px(this.offsetHeight);
-            }
+        // 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
-            // #endif
+        this.wrapHeight = windowHeight - bodyPt - offsetHeight;
-        }, 20);
+        // #ifdef H5
+        // H5窗口高度会计算tabbar高度，这里减去
+        this.wrapHeight -= this.$utils.rpx2px(100);
+        // #endif
     },
     destroyed() {},
     methods: {

src/components/cate/template/list.vue

@@ -91,6 +91,7 @@ export default {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    padding-left: 50rpx;
     .title {
         font-size: 26rpx;
         font-weight: bold;

src/components/layout/layout.vue

@@ -4,8 +4,8 @@
             class="page-header"
             :class="[textColor]"
             :style="{
-                height: header.height + 'rpx',
+                height: header.height + 'px',
-                paddingTop: header.pt + 'rpx',
+                paddingTop: header.pt + 'px',
                 backgroundColor: backgroundColor,
             }"
         >
@@ -13,7 +13,7 @@
             <block v-if="btnType === 'city'">
                 <view
                     class="page-index-btn change-city"
-                    :style="{ height: header.height + 'rpx' }"
+                    :style="{ height: header.height + 'px' }"
                     @click="changeCity"
                 >
                     <text class="iconfont icon-31dingwei"></text>
@@ -24,20 +24,21 @@
             <block v-if="btnType === 'back'">
                 <view
                     class="page-index-btn back"
-                    :style="{ height: header.height + 'rpx' }"
+                    :style="{ height: header.height + 'px' }"
                     @click="onClick"
                 >
                     <text class="iconfont icon-fanhui"></text>
                 </view>
             </block>
-            <view
+            <view class="page-title">
-                class="page-title"
+                <text
-                :style="{ lineHeight: header.height + 'rpx' }"
+                    class="title-text"
-            >
+                    :style="{ lineHeight: header.height + 'px' }"
-                <text class="title-text">{{ title }}</text>
+                    >{{ title }}</text
+                >
             </view>
         </view>
-        <view class="page-body" :style="{ paddingTop: header.bodyPt + 'rpx' }">
+        <view class="page-body" :style="{ paddingTop: bodyPt + 'px' }">
             <slot></slot>
         </view>
         <view class="page-footer"></view>
@@ -53,8 +54,8 @@ export default {
             header: {
                 height: 0,
                 pt: 0,
-                bodyPt: 0,
             },
+            bodyPt: 0,
         };
     },
     components: {},
@@ -90,18 +91,16 @@ export default {
         }),
     },
     mounted() {
+        const { statusBarHeight, headerHeight } = this.config;
         // #ifndef H5
-        const { statusBarHeight } = this.config;
+        this.header.pt = statusBarHeight;
-        this.header.pt = this.$utils.px2rpx(statusBarHeight);
+        this.header.height = headerHeight;
-        this.header.height = this.$utils.px2rpx(50);
         // #endif
         // #ifdef H5
         this.header.pt = 0;
-        this.header.height = this.$utils.px2rpx(40);
+        this.header.height = this.$utils.rpx2px(headerHeight * 2);
         // #endif
-        // 向下取整，避免留白
+        this.bodyPt = this.header.pt + this.header.height;
-        this.header.bodyPt = Math.floor(this.header.pt + this.header.height);
-        this.$store.commit('system/setBodyPaddingTop', this.header.bodyPt);
     },
     methods: {
         onClick() {
@@ -153,6 +152,7 @@ export default {
     .page-title {
         width: 100%;
         height: auto;
+        line-height: 0;
         .title-text {
             font-size: 30rpx;
             font-weight: bold;
@@ -163,9 +163,10 @@ export default {
         bottom: 0;
         left: 0;
         width: 180rpx;
+        padding-left: 30rpx;
+        line-height: 0;
         display: flex;
         align-items: center;
-        padding-left: 30rpx;
         justify-content: flex-start;
     }
     .page-index-btn.change-city {

src/pages.json

@@ -42,6 +42,12 @@
 			"style": {
 				"navigationBarTitleText": "服务详情"
 			}
+		},
+		{
+			"path": "pages/order/create",
+			"style": {
+				"navigationBarTitleText": "服务详情"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/order/create.vue

@@ -0,0 +1,27 @@
+<template>
+    <app-layout backgroundColor="#00418c" title="确认订单" textColor="light">
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "order-create",
+    data() {
+        return {};
+    },
+    components: { AppLayout },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.finish {
+    margin: 20rpx 0;
+}
+</style>

src/pages/service/cate.vue

@@ -16,7 +16,7 @@
         </view>
         <view class="cate">
             <app-cate
-                :offsetHeight="195"
+                :offsetHeight="95"
                 :data="data"
                 cateType="cate"
                 @clickCate="clickCate"

src/pages/service/detail.vue

@@ -1,25 +1,341 @@
 <template>
-    <app-layout backgroundColor="#00418c" :title="title" textColor="light">
+    <app-layout
+        backgroundColor="#F6F6F6"
+        :title="pageTitle"
+        textColor="dark"
+        pageBackgroundColor="#F6F6F6"
+    >
+        <view class="service-header">
+            <view
+                class="select-item"
+                :class="[tabIndex == 0 ? 'active' : '']"
+                @click="tabIndex = 0"
+            >
+                <text class="text">详情</text>
+            </view>
+            <view
+                class="select-item"
+                :class="[tabIndex == 1 ? 'active' : '']"
+                @click="tabIndex = 1"
+            >
+                <text class="text">评价</text>
+            </view>
+        </view>
+        <view class="service-container">
+            <swiper
+                class="tabs"
+                :current="tabIndex"
+                :duration="300"
+                @change="changeTab"
+                :style="{ height: tabHeight + 'px' }"
+            >
+                <swiper-item>
+                    <view class="tab tab0">
+                        <view class="service-section banner-box">
+                            <swiper
+                                class="service-banner-swiper"
+                                circular
+                                autoplay
+                                @change="changeBanner"
+                            >
+                                <swiper-item
+                                    v-for="(item, index) in detail.images"
+                                    :key="index"
+                                >
+                                    <image
+                                        class="img"
+                                        :src="item"
+                                        mode="aspectFill"
+                                    />
+                                </swiper-item>
+                            </swiper>
+                            <view class="swiper-number">
+                                <text class="text">{{
+                                    currentBanner + "/" + detail.images.length
+                                }}</text>
+                            </view>
+                        </view>
+                        <view class="service-section desc-box">
+                            <view class="desc">
+                                <view class="title">
+                                    <text class="text">空调安装</text>
+                                </view>
+                                <view class="text-box">
+                                    <text class="text">已服务812121次</text>
+                                </view>
+                                <view class="share-icon" @click="share">
+                                    <text class="iconfont icon-fenxiang"></text>
+                                </view>
+                            </view>
+                        </view>
+                        <view class="service-section detail-box">
+                            <div class="detail">
+                                <view class="title">
+                                    <text class="text">商品详情</text>
+                                </view>
+                                <view class="rich-box">
+                                    <rich-text
+                                        :nodes="detail.content"
+                                    ></rich-text>
+                                </view>
+                            </div>
+                        </view>
+                    </view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="tab tab1">
+                        <view class="reviews"> </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view
+                class="service-buy-box"
+                v-if="tabIndex == 0"
+                :style="{ bottom: config.safeAreaInsets.bottom + 'px' }"
+            >
+                <view class="price">
+                    <text class="text">￥306.00</text>
+                </view>
+                <view class="btn-group">
+                    <view class="cart">
+                        <text class="text">加入购物车</text>
+                    </view>
+                    <view class="order" @click="createOrder">
+                        <text class="text">立即下单</text>
+                    </view>
+                </view>
+            </view>
+        </view>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import { mapState } from "vuex";
 export default {
     name: "service-detail",
     data() {
         return {
-            title: "服务详情",
+            tabIndex: 0, // 1评价
+            tabHeight: 0,
+            currentBanner: 1,
+            bottom: 0,
+            pageTitle: "服务详情",
+            detail: {
+                title: "服务标题",
+                images: [
+                    require("@/static/temp/cate/5.png"),
+                    require("@/static/temp/cate/5.png"),
+                    require("@/static/temp/cate/5.png"),
+                ],
+                content: "<p>这是服务内容</p>",
+            },
         };
     },
     components: { AppLayout },
-    onLoad() {},
+    computed: {
+        ...mapState({
+            config: (state) => state.system.config,
+        }),
+    },
+    onLoad() {
+        this.$nextTick(() => {
+            this.setTabHeight();
+        });
+    },
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        share() {
+            uni.showToast({
+                title: "分享",
+                icon: "none",
+            });
+        },
+        createOrder() {
+            uni.navigateTo({
+                url: "/pages/order/create",
+            });
+        },
+        changeTab(e) {
+            this.tabIndex = e.detail.current;
+            this.$nextTick(() => {
+                this.setTabHeight();
+            });
+        },
+        setTabHeight() {
+            let element = ".tab" + this.tabIndex;
+            let query = uni.createSelectorQuery().in(this);
+            query.select(element).boundingClientRect();
+            query.exec((res) => {
+                if (res && res[0]) {
+                    this.tabHeight = res[0].height;
+                }
+            });
+        },
+        changeBanner(e) {
+            this.currentBanner = e.detail.current + 1;
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.service-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    margin-bottom: 20rpx;
+    .select-item {
+        width: 210rpx;
+        height: 115rpx;
+        box-sizing: border-box;
+        text-align: center;
+        .text {
+            font-size: 30rpx;
+            color: #999999;
+            line-height: 115rpx;
+        }
+    }
+    .select-item.active {
+        border-bottom: 7rpx solid #8b9aeb;
+        .text {
+            font-weight: bold;
+            color: #8b9aeb;
+        }
+    }
+}
+.service-container {
+    width: 100%;
+    height: auto;
+    .tabs {
+        width: 100%;
+        .tab {
+            min-height: 300rpx;
+        }
+    }
+}
+.service-section {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
+    background-color: #ffffff;
+}
+.service-section.banner-box {
+    .service-banner-swiper {
+        width: 100%;
+        height: 400rpx;
+        .img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .swiper-number {
+        position: absolute;
+        bottom: 20rpx;
+        right: 35rpx;
+        .text {
+            font-size: 26rpx;
+            color: #8b9aeb;
+            letter-spacing: 4rpx;
+        }
+    }
+}
+.service-section.desc-box,
+.service-section.detail-box {
+    margin-top: 20rpx;
+    .title {
+        display: block;
+        margin-bottom: 30rpx;
+        line-height: 30rpx;
+        .text {
+            font-size: 30rpx;
+            font-weight: bold;
+        }
+    }
+}
+.service-section.desc-box {
+    .desc {
+        position: relative;
+        width: 670rpx;
+        padding: 45rpx 0;
+    }
+    .text-box {
+        line-height: 28rpx;
+        .text {
+            font-size: 28rpx;
+            color: #999999;
+        }
+    }
+    .share-icon {
+        position: absolute;
+        right: 0;
+        bottom: 45rpx;
+        .iconfont {
+            color: #999999;
+            font-size: 35rpx;
+        }
+    }
+}
+.service-section.detail-box {
+    padding-bottom: 205rpx;
+    .detail {
+        position: relative;
+        width: 670rpx;
+        padding: 45rpx 0;
+    }
+}
+.service-buy-box {
+    position: fixed;
+    width: 100%;
+    height: 100rpx;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    padding: 0 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #ffffff;
+    .price {
+        .text {
+            font-size: 42rpx;
+            font-weight: bold;
+            color: #ec7655;
+        }
+    }
+    .btn-group {
+        width: 360rpx;
+        display: flex;
+        justify-items: center;
+        justify-content: space-between;
+    }
+    .cart,
+    .order {
+        font-size: 26rpx;
+        line-height: 26rpx;
+        border: 1px solid #999999;
+        border-radius: 35rpx;
+        padding: 15rpx 25rpx;
+    }
+    .cart {
+        .text {
+            color: #666666;
+        }
+    }
+    .order {
+        background: #8b9aeb;
+        .text {
+            color: #ffffff;
+        }
+    }
+}
+</style>

src/pages/service/list.vue

@@ -1,9 +1,17 @@
 <template>
-    <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
+    <app-layout btnType="back" title="服务列表" backgroundColor="#FFFFFF" pageBackgroundColor="#FFFFFF">
         <view class="cate">
-            <app-cate :data="data" cateType="list" @clickItem="clickItem" />
+            <app-cate
+                :offsetHeight="0"
+                :data="data"
+                cateType="list"
+                @clickItem="clickItem"
+            />
         </view>
-        <view class="buy-components" :style="{ bottom: bottom + 'rpx' }">
+        <view
+            class="buy-components"
+            :style="{ bottom: config.safeAreaInsets.bottom + 'px' }"
+        >
             <view class="cart">
                 <view class="cart-icon">
                     <text class="iconfont icon-gouwuche"></text>
@@ -94,9 +102,7 @@ export default {
             config: (state) => state.system.config,
         }),
     },
-    onLoad() {
+    onLoad() {},
-        this.bottom = this.$utils.px2rpx(this.config.safeAreaInsets.bottom);
-    },
     onShow() {},
     onReady() {},
     onReachBottom() {},

src/store/modules/system.js

@@ -2,30 +2,30 @@ export default {
     namespaced: true,
     state: {
         config: {},
-        bodyPaddingTop: 0,
     },
     getters: {
         config(state) {
             return state.config;
         },
-        bodyPaddingTop(state) {
-            return bodyPaddingTop;
-        }
     },
     mutations: {
         setConfig(state, data) {
-            state.config = data;
+            state.config = {...state.config, ...data};
         },
-        setBodyPaddingTop(state, data) {
-            state.bodyPaddingTop = data;
-        }
     },
     actions: {
         initConfig(context) {
             let config = uni.getStorageSync('system_config');
             if (!config) {
-                let { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
+                const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
-                config = { windowWidth, windowHeight, statusBarHeight, safeAreaInsets };
+                // #ifndef H5
+                const { height, top } = uni.getMenuButtonBoundingClientRect();
+                const headerHeight = height + ((top - statusBarHeight) * 2);
+                // #endif
+                // #ifdef H5
+                const headerHeight = 40; // 乘2再使用rpx2px转px使用
+                // #endif
+                config = { windowWidth, windowHeight, statusBarHeight, headerHeight, safeAreaInsets };
                 uni.setStorageSync('system_config', config);
             }
             context.commit('setConfig', config);