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

This commit is contained in:
TOP糯米 2023-02-11 14:02:24 +08:00
parent 4f27f78409
commit e573c5f473
5 changed files with 72 additions and 34 deletions

View File

@ -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,13 +98,14 @@ export default {
},
computed: {
...mapState({
config: state => state.system.config,
config: (state) => state.system.config,
bodyPaddingTop: (state) => state.system.bodyPaddingTop,
})
}),
},
created() {},
mounted() {
this.getMenuItemTop();
setTimeout(() => {
let headerHeight = this.$utils.rpx2px(this.bodyPaddingTop);
let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
const { windowHeight, statusBarHeight } = this.config;
@ -112,10 +113,11 @@ export default {
this.wrapHeight = windowHeight - headerHeight - offsetHeight;
// #ifdef MP-WEIXIN
// tabbar
if (this.cateType == 'cate') {
if (this.cateType == "cate") {
this.wrapHeight += this.$utils.rpx2px(100);
}
// #endif
}, 20);
},
destroyed() {},
methods: {

View File

@ -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>

View File

@ -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": "服务详情"
}
}
],

View File

@ -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>

View File

@ -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>