修复服务分类页面高度设置问题，新增服务详情页面
This commit is contained in:
parent
4f27f78409
commit
e573c5f473
|
|
@ -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);
|
||||
let offsetHeight = this.$utils.rpx2px(this.offsetHeight);
|
||||
const { windowHeight, statusBarHeight } = this.config;
|
||||
// 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
|
||||
this.wrapHeight = windowHeight - headerHeight - offsetHeight;
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信窗口高度不会计算tabbar高度，这里加回来
|
||||
if (this.cateType == 'cate') {
|
||||
this.wrapHeight += this.$utils.rpx2px(100);
|
||||
}
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
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
|
||||
// 微信窗口高度不会计算tabbar高度，这里加回来
|
||||
if (this.cateType == "cate") {
|
||||
this.wrapHeight += this.$utils.rpx2px(100);
|
||||
}
|
||||
// #endif
|
||||
}, 20);
|
||||
},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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": "服务详情"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue