优化详情页面
This commit is contained in:
parent
5646b39094
commit
92669d3505
|
|
@ -9,74 +9,58 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="service-detail-group">
|
<view class="service-detail-group">
|
||||||
<swiper
|
<view v-if="tabIndex == 0" class="tab-item tab0">
|
||||||
class="service-detail-tab-list"
|
<view class="service-section banner-box">
|
||||||
:current="tabIndex"
|
<swiper class="service-banner-swiper" circular autoplay @change="changeBanner">
|
||||||
:duration="300"
|
<swiper-item v-for="(item, index) in detail.images" :key="index">
|
||||||
@change="changeTab"
|
<image class="img" :src="item" mode="aspectFill" />
|
||||||
:style="{ minHeight: '75vh', height: tabHeight + 'px' }"
|
</swiper-item>
|
||||||
>
|
</swiper>
|
||||||
<swiper-item>
|
<view class="swiper-number">
|
||||||
<view class="tab-item tab0">
|
<text class="text">
|
||||||
<view class="service-section banner-box">
|
{{ currentBanner + "/" + detail.images.length }}
|
||||||
<swiper class="service-banner-swiper" circular autoplay @change="changeBanner">
|
</text>
|
||||||
<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>
|
</view>
|
||||||
</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>
|
||||||
</view>
|
</view>
|
||||||
</app-layout>
|
</app-layout>
|
||||||
|
|
@ -93,6 +77,7 @@ export default {
|
||||||
tabHeight: 0,
|
tabHeight: 0,
|
||||||
currentBanner: 1,
|
currentBanner: 1,
|
||||||
pageTitle: "服务详情",
|
pageTitle: "服务详情",
|
||||||
|
timer: null,
|
||||||
id: 0,
|
id: 0,
|
||||||
detail: {
|
detail: {
|
||||||
title: "",
|
title: "",
|
||||||
|
|
@ -121,12 +106,9 @@ export default {
|
||||||
title: response.goods.post_title,
|
title: response.goods.post_title,
|
||||||
times: response.goods.post_hits,
|
times: response.goods.post_hits,
|
||||||
images: response.goods.image,
|
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,
|
price: response.goods.money,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
|
||||||
this.setTabHeight();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onShow() {},
|
onShow() {},
|
||||||
|
|
@ -162,19 +144,6 @@ export default {
|
||||||
},
|
},
|
||||||
changeTab(e) {
|
changeTab(e) {
|
||||||
this.tabIndex = e.detail.current;
|
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) {
|
changeBanner(e) {
|
||||||
this.currentBanner = e.detail.current + 1;
|
this.currentBanner = e.detail.current + 1;
|
||||||
|
|
@ -262,10 +231,6 @@ export default {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/.rich-box img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.service-section.desc-box {
|
.service-section.desc-box {
|
||||||
.desc {
|
.desc {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue