完善分类页面

src/App.vue

@@ -1,6 +1,8 @@
 <script>
 export default {
-    onLaunch: function () {},
+    onLaunch: function () {
+        this.$store.dispatch('system/initConfig');
+    },
     onShow: function () {},
     onHide: function () {},
 };

src/components/cate/cate.vue

@@ -59,6 +59,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import CateTmpl from "@/components/cate/template/cate";
 import ListTmpl from "@/components/cate/template/list";
 export default {
@@ -95,14 +96,25 @@ export default {
         CateTmpl,
         ListTmpl,
     },
+    computed: {
+        ...mapState({
+            config: state => state.system.config,
+            bodyPaddingTop: (state) => state.system.bodyPaddingTop,
+        })
+    },
     created() {},
     mounted() {
         this.getMenuItemTop();
-        let headerHeight = 40;
-        const { windowHeight, statusBarHeight } = uni.getSystemInfoSync();
-        this.wrapHeight = windowHeight - headerHeight - this.offsetHeight;
+        let headerHeight = this.$utils.rpx2px(this.bodyPaddingTop);
+        let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
+        const { windowHeight, statusBarHeight } = this.config;
+        // 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
+        this.wrapHeight = windowHeight - headerHeight - offsetHeight;
         // #ifdef MP-WEIXIN
-        this.wrapHeight = this.wrapHeight - statusBarHeight;
+        // 微信窗口高度不会计算tabbar高度，这里加回来
+        if (this.cateType == 'cate') {
+            this.wrapHeight += this.$utils.rpx2px(100);
+        }
         // #endif
     },
     destroyed() {},
@@ -222,7 +234,7 @@ export default {
             // scrollHeight为右边菜单垂直中点位置
             // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
             // scrollHeight为右边菜单头部位置
-            let scrollHeight = e.detail.scrollTop + 10;
+            let scrollHeight = e.detail.scrollTop + 15;
             for (let i = 0; i < this.arr.length; i++) {
                 let height1 = this.arr[i];
                 let height2 = this.arr[i + 1];

src/components/cate/template/list.vue

@@ -11,17 +11,25 @@
                 @click="clickItem(child.id, child.name)"
             >
                 <image
-                    class="item-menu-image"
+                    class="cover-image"
                     mode="aspectFill"
                     :src="child.icon"
                 ></image>
-                <view class="item-menu-name">{{ child.name }}</view>
+                <view class="item-box">
+                    <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>
             </view>
         </view>
     </view>
 </template>
 
 <script>
+import MiniAdd from "@/components/mini/add";
 export default {
     name: "component-cate-template-list",
     data() {
@@ -33,7 +41,7 @@ export default {
             default: [],
         },
     },
-    components: {},
+    components: { MiniAdd },
     created() {},
     mounted() {},
     destroyed() {},
@@ -54,28 +62,47 @@ export default {
 .item-container {
     display: flex;
     flex-wrap: wrap;
+}
 .thumb-box {
     width: 100%;
     display: flex;
-        justify-content: flex-start;
-        flex-direction: column;
+    justify-content: space-between;
     margin-top: 40rpx;
 }
 .thumb-box:nth-child(3n) {
     margin-right: 0;
 }
-    .item-menu-image {
-        width: 120rpx;
-        height: 120rpx;
+.cover-image {
+    width: 130rpx;
+    height: 130rpx;
     box-sizing: border-box;
     border-radius: 20rpx;
     border: 2rpx solid #d8d8d8;
 }
-    .item-menu-name {
-        margin-top: 15rpx;
-        font-weight: normal;
+.item-box {
+    position: relative;
+    width: 300rpx;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .title {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #010101;
+    }
+    .text-box {
+        display: inline-block;
+        font-size: 22rpx;
         color: #333333;
-        font-size: 24rpx;
+    }
+    .price {
+        font-size: 30rpx;
+        color: #ec7655;
+    }
+    .component-add {
+        position: absolute;
+        right: 0;
+        bottom: 8rpx;
     }
 }
 </style>

src/components/layout/layout.vue

@@ -3,7 +3,11 @@
         <view
             class="page-header"
             :class="[textColor]"
-            :style="{height: header.height + 'rpx', paddingTop: header.pt + 'rpx', backgroundColor: backgroundColor}"
+            :style="{
+                height: header.height + 'rpx',
+                paddingTop: header.pt + 'rpx',
+                backgroundColor: backgroundColor,
+            }"
         >
             <!-- 首页选择地址 -->
             <block v-if="btnType === 'city'">
@@ -26,7 +30,10 @@
                     <text class="iconfont icon-fanhui"></text>
                 </view>
             </block>
-            <view class="page-title" :style="{lineHeight: header.height + 'rpx'}">
+            <view
+                class="page-title"
+                :style="{ lineHeight: header.height + 'rpx' }"
+            >
                 <text class="title-text">{{ title }}</text>
             </view>
         </view>
@@ -38,6 +45,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
     name: "component-layout",
     data() {
@@ -76,24 +84,25 @@ export default {
             default: "unset",
         },
     },
+    computed: {
+        ...mapState({
+            config: (state) => state.system.config,
+        }),
+    },
     mounted() {
         // #ifndef H5
-        const { statusBarHeight } = uni.getSystemInfoSync();
-        const { height } = uni.getMenuButtonBoundingClientRect();
-        this.header.pt = statusBarHeight;
-        this.header.height = height;
+        const { statusBarHeight } = this.config;
+        this.header.pt = this.$utils.px2rpx(statusBarHeight);
+        this.header.height = this.$utils.px2rpx(50);
         // #endif
         // #ifdef H5
         this.header.pt = 0;
-        this.header.height = 40;
+        this.header.height = this.$utils.px2rpx(40);
         // #endif
-        this.header.bodyPt = this.header.pt + this.header.height;
-        // px转rpx
-        this.header.pt = this.header.pt * 2;
-        this.header.height = this.header.height * 2;
-        this.header.bodyPt = this.header.bodyPt * 2;
+        // 向下取整，避免留白
+        this.header.bodyPt = Math.floor(this.header.pt + this.header.height);
+        this.$store.commit('system/setBodyPaddingTop', this.header.bodyPt);
     },
-    computed: {},
     methods: {
         onClick() {
             if (this.customBtn) {

src/components/mini/add.vue

@@ -0,0 +1,76 @@
+<template>
+    <view class="mini-add" :class="[number > 0 ? 'between' : 'end']">
+        <view v-if="number > 0" class="btn sub" @click="sub">
+            <text class="iconfont icon-jianhao"></text>
+        </view>
+        <view v-if="number > 0" class="num">{{ number }}</view>
+        <view class="btn add" @click="add">
+            <text class="iconfont icon-jiahao-"></text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "mini-add",
+    data() {
+        return {
+            number: 0,
+        };
+    },
+    props: {
+        initNumber: {
+            type: Number,
+            default: 0
+        },
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    components: {},
+    created() {
+        this.number = this.initNumber;
+    },
+    mounted() {},
+    destroyed() {},
+    methods: {
+        sub() {
+            if (this.number > 0) {
+                this.number--;
+            } else {
+                this.number = 0;
+            }
+            this.$emit('onSub', this.data, this.number);
+        },
+        add() {
+            this.number++;
+            this.$emit('onAdd', this.data, this.number);
+        }
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.mini-add {
+    width: 130rpx;
+    height: 35rpx;
+    display: flex;
+    align-items: center;
+    .num {
+        color: #2D2D2D;
+        font-size: 30rpx;
+    }
+}
+.mini-add.between {
+    justify-content: space-between;
+}
+.mini-add.end {
+    justify-content: flex-end;
+}
+.btn.sub .iconfont,
+.btn.add .iconfont {
+    color: #4b65ed;
+    font-size: 35rpx;
+}
+</style>

src/core/libs/utils.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 function time() {
     return parseInt(Math.round(new Date() / 1000));
 };
@@ -142,7 +144,17 @@ function debounce(func, wait = 500, immediate = false) {
     }
 }
 
-export {
+function px2rpx(px) {
+    const { windowWidth } = uni.getStorageSync('system_config');
+    return 750 * (px / windowWidth);
+}
+
+function rpx2px(rpx) {
+    const { windowWidth } = uni.getStorageSync('system_config');
+    return (rpx / 750) * windowWidth;
+}
+
+export default {
     time,
     datetime,
     timeDifference,
@@ -150,4 +162,6 @@ export {
     randomString,
     throttle,
     debounce,
+    px2rpx,
+    rpx2px,
 }

src/pages/service/cate.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-layout btnType="unset" title="分类" pageBackgroundColor="#F6F6F6">
+    <app-layout btnType="unset" title="分类" pageBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6">
         <view class="search">
             <view class="input-box">
                 <view class="icon">
@@ -16,7 +16,7 @@
         </view>
         <view class="cate">
             <app-cate
-                :offsetHeight="60"
+                :offsetHeight="195"
                 :data="data"
                 cateType="cate"
                 @clickCate="clickCate"
@@ -108,10 +108,11 @@ export default {
 <style lang="less" scoped>
 .search {
     width: 100%;
-    height: 120rpx;
+    height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-bottom: 30rpx;
     .input-box {
         width: 670rpx;
         height: auto;

src/pages/service/list.vue

@@ -1,7 +1,20 @@
 <template>
     <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
         <view class="cate">
-            <app-cate :offsetHeight="0" :data="data" cateType="list" />
+            <app-cate :data="data" cateType="list" />
+        </view>
+        <view class="buy-components" :style="{bottom: bottom + 'rpx'}">
+            <view class="cart">
+                <view class="cart-icon">
+                    <text class="iconfont icon-gouwuche"></text>
+                </view>
+                <view class="cart-number">
+                    <text class="text">99</text>
+                </view>
+            </view>
+            <view class="order-btn">
+                <text class="text">去下单</text>
+            </view>
         </view>
     </app-layout>
 </template>
@@ -9,6 +22,7 @@
 <script>
 import AppLayout from "@/components/layout/layout";
 import AppCate from "@/components/cate/cate";
+import { mapState } from 'vuex';
 export default {
     name: "service-list",
     data() {
@@ -23,21 +37,25 @@ export default {
                             id: 2,
                             name: "空调安装",
                             icon: require("@/static/temp/cate/1.png"),
+                            buyNumber: 1,
                         },
                         {
                             id: 3,
                             name: "空调拆卸",
                             icon: require("@/static/temp/cate/2.png"),
+                            buyNumber: 1,
                         },
                         {
                             id: 4,
                             name: "热水器安装",
                             icon: require("@/static/temp/cate/3.png"),
+                            buyNumber: 1,
                         },
                         {
                             id: 5,
                             name: "油烟机安装",
                             icon: require("@/static/temp/cate/4.png"),
+                            buyNumber: 0,
                         },
                     ],
                 },
@@ -50,30 +68,106 @@ export default {
                             id: 6,
                             name: "空调安装",
                             icon: require("@/static/temp/cate/2.png"),
+                            buyNumber: 0,
                         },
                         {
                             id: 7,
                             name: "空调拆卸",
                             icon: require("@/static/temp/cate/3.png"),
+                            buyNumber: 0,
                         },
                         {
                             id: 8,
                             name: "热水器安装",
                             icon: require("@/static/temp/cate/4.png"),
+                            buyNumber: 0,
                         },
                     ],
                 },
             ],
+            bottom: 0,
         };
     },
     components: { AppLayout, AppCate },
-    onLoad() {},
+    computed: {
+        ...mapState({
+            config: (state) => state.system.config
+        })
+    },
+    onLoad() {
+        this.bottom = this.$utils.px2rpx(this.config.safeAreaInsets.bottom);
+    },
     onShow() {},
-    onReady() {},
+    onReady() {
+
+    },
     onReachBottom() {},
     onPullDownRefresh() {},
     methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.buy-components {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: @tabBarHeight;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20rpx 0 50rpx;
+    .cart {
+        position: relative;
+        width: 95rpx;
+        height: 95rpx;
+    }
+    .cart-icon {
+        position: absolute;
+        top: -18rpx;
+        left: 0;
+        width: 95rpx;
+        height: 95rpx;
+        text-align: center;
+        background-color: #ffffff;
+        border: 1px solid #4b65ed;
+        border-radius: 50%;
+        .iconfont {
+            color: #4b65ed;
+            font-size: 50rpx;
+            line-height: 95rpx;
+        }
+    }
+    .cart-number {
+        position: absolute;
+        top: -24rpx;
+        right: -16rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background-color: #ec7655;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 0;
+        .text {
+            font-size: 24rpx;
+            line-height: 40rpx;
+            color: #ffffff;
+        }
+    }
+    .order-btn {
+        width: 300rpx;
+        height: 75rpx;
+        text-align: center;
+        background: linear-gradient(-90deg, #8194f2, #4c60c1);
+        border-radius: 38rpx;
+        .text {
+            font-size: 30rpx;
+            color: #ffffff;
+            line-height: 75rpx;
+        }
+    }
+}
+</style>

src/store/index.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import moduleA from '@/store/modules/moduleA'
 import user from "@/store/modules/user"
+import system from "@/store/modules/system"
 
 Vue.use(Vuex)
 export default new Vuex.Store({
     modules: {
-        moduleA,
         user,
+        system,
     }
 })

src/store/modules/system.js

@@ -0,0 +1,34 @@
+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;
+        },
+        setBodyPaddingTop(state, data) {
+            state.bodyPaddingTop = data;
+        }
+    },
+    actions: {
+        initConfig(context) {
+            let config = uni.getStorageSync('system_config');
+            if (!config) {
+                let { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
+                config = { windowWidth, windowHeight, statusBarHeight, safeAreaInsets };
+                uni.setStorageSync('system_config', config);
+            }
+            context.commit('setConfig', config);
+        }
+    }
+}