优化详情页面
This commit is contained in:
parent
5646b39094
commit
92669d3505
|
|
@ -9,74 +9,58 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="service-detail-group">
|
||||
<swiper
|
||||
class="service-detail-tab-list"
|
||||
:current="tabIndex"
|
||||
:duration="300"
|
||||
@change="changeTab"
|
||||
:style="{ minHeight: '75vh', height: tabHeight + 'px' }"
|
||||
>
|
||||
<swiper-item>
|
||||
<view class="tab-item 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">已服务{{ detail.times }}次</text>
|
||||
</view>
|
||||
<button class="share-icon" open-type="share">
|
||||
<text class="iconfont icon-fenxiang"></text>
|
||||
</button>
|
||||
</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-item tab1">
|
||||
<view class="reviews"> </view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view
|
||||
class="common-bottom-components"
|
||||
v-if="tabIndex == 0"
|
||||
:style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }"
|
||||
>
|
||||
<view class="price">
|
||||
<text class="text">¥{{ detail.price }}</text>
|
||||
</view>
|
||||
<view class="btn-group">
|
||||
<view class="cart" @click="addToCart">
|
||||
<text class="text">加入购物车</text>
|
||||
</view>
|
||||
<view class="order" @click="createOrder">
|
||||
<text class="text">立即下单</text>
|
||||
<view v-if="tabIndex == 0" class="tab-item 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">{{ detail.title }}</text>
|
||||
</view>
|
||||
<view class="text-box">
|
||||
<text class="text">已服务{{ detail.times }}次</text>
|
||||
</view>
|
||||
<button class="share-icon" open-type="share">
|
||||
<text class="iconfont icon-fenxiang"></text>
|
||||
</button>
|
||||
</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 class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
|
||||
<view class="price">
|
||||
<text class="text">¥{{ detail.price }}</text>
|
||||
</view>
|
||||
<view class="btn-group">
|
||||
<view class="cart" @click="addToCart">
|
||||
<text class="text">加入购物车</text>
|
||||
</view>
|
||||
<view class="order" @click="createOrder">
|
||||
<text class="text">立即下单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="tabIndex == 1" class="tab-item tab1">
|
||||
<view class="reviews"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</app-layout>
|
||||
|
|
@ -93,6 +77,7 @@ export default {
|
|||
tabHeight: 0,
|
||||
currentBanner: 1,
|
||||
pageTitle: "服务详情",
|
||||
timer: null,
|
||||
id: 0,
|
||||
detail: {
|
||||
title: "",
|
||||
|
|
@ -121,12 +106,9 @@ export default {
|
|||
title: response.goods.post_title,
|
||||
times: response.goods.post_hits,
|
||||
images: response.goods.image,
|
||||
content: response.goods.post_content,
|
||||
content: response.goods.post_content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
|
||||
price: response.goods.money,
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.setTabHeight();
|
||||
});
|
||||
});
|
||||
},
|
||||
onShow() {},
|
||||
|
|
@ -162,19 +144,6 @@ export default {
|
|||
},
|
||||
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;
|
||||
|
|
@ -262,10 +231,6 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
/deep/.rich-box img {
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.service-section.desc-box {
|
||||
.desc {
|
||||
|
|
|
|||
Loading…
Reference in New Issue