完成商品详情页，完全解决页面顶部距离问题
This commit is contained in:
parent
e573c5f473
commit
ebffcc1ba8
|
|
@ -99,25 +99,27 @@ export default {
|
|||
computed: {
|
||||
...mapState({
|
||||
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;
|
||||
// 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
|
||||
this.wrapHeight = windowHeight - headerHeight - offsetHeight;
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信窗口高度不会计算tabbar高度，这里加回来
|
||||
if (this.cateType == "cate") {
|
||||
this.wrapHeight += this.$utils.rpx2px(100);
|
||||
}
|
||||
const { windowHeight, statusBarHeight, headerHeight } = this.config;
|
||||
// 计算页面内边距------------------------------------------
|
||||
// #ifndef H5
|
||||
const bodyPt = statusBarHeight + headerHeight;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
const bodyPt = 0 + this.$utils.rpx2px(headerHeight * 2);
|
||||
// #endif
|
||||
// 计算页面内边距------------------------------------------
|
||||
const offsetHeight = this.$utils.rpx2px(this.offsetHeight);
|
||||
// 窗口高度 - 头部高度 - 顶部内容高度 = 分类容器高度
|
||||
this.wrapHeight = windowHeight - bodyPt - offsetHeight;
|
||||
// #ifdef H5
|
||||
// H5窗口高度会计算tabbar高度，这里减去
|
||||
this.wrapHeight -= this.$utils.rpx2px(100);
|
||||
// #endif
|
||||
}, 20);
|
||||
},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
class="page-header"
|
||||
:class="[textColor]"
|
||||
:style="{
|
||||
height: header.height + 'rpx',
|
||||
paddingTop: header.pt + 'rpx',
|
||||
height: header.height + 'px',
|
||||
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
|
||||
class="page-title"
|
||||
:style="{ lineHeight: header.height + 'rpx' }"
|
||||
<view class="page-title">
|
||||
<text
|
||||
class="title-text"
|
||||
:style="{ lineHeight: header.height + 'px' }"
|
||||
>{{ title }}</text
|
||||
>
|
||||
<text class="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 = this.$utils.px2rpx(statusBarHeight);
|
||||
this.header.height = this.$utils.px2rpx(50);
|
||||
this.header.pt = statusBarHeight;
|
||||
this.header.height = headerHeight;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.header.pt = 0;
|
||||
this.header.height = this.$utils.px2rpx(40);
|
||||
this.header.height = this.$utils.rpx2px(headerHeight * 2);
|
||||
// #endif
|
||||
// 向下取整，避免留白
|
||||
this.header.bodyPt = Math.floor(this.header.pt + this.header.height);
|
||||
this.$store.commit('system/setBodyPaddingTop', this.header.bodyPt);
|
||||
this.bodyPt = this.header.pt + this.header.height;
|
||||
},
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "服务详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/create",
|
||||
"style": {
|
||||
"navigationBarTitleText": "服务详情"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</view>
|
||||
<view class="cate">
|
||||
<app-cate
|
||||
:offsetHeight="195"
|
||||
:offsetHeight="95"
|
||||
:data="data"
|
||||
cateType="cate"
|
||||
@clickCate="clickCate"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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() {
|
||||
this.bottom = this.$utils.px2rpx(this.config.safeAreaInsets.bottom);
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
onReady() {},
|
||||
onReachBottom() {},
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -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();
|
||||
config = { windowWidth, windowHeight, statusBarHeight, safeAreaInsets };
|
||||
const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
|
||||
// #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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue