<template>
|
<!-- 商品详情 -->
|
<view>
|
<navigator open-type="navigateBack" hover-class="none">
|
<view class="back iconfont iconzuojiantou"></view>
|
</navigator>
|
<swiper class="banner"
|
autoplay="true"
|
interval="5000"
|
duration="1500"
|
@change="swiperChange">
|
<swiper-item v-for="(item,index) in banner" :key="index">
|
<image class="img" :src="item?item:'../../../static/images/no-img.png'"></image>
|
<view class="indicator">
|
<text>{{swiperIndex+1}}/{{banner.length}}</text>
|
</view>
|
</swiper-item>
|
</swiper>
|
<view class="product-info">
|
<text class="price">￥{{productInfo.salePrice}}</text>
|
<view class="flex justify-between align-center">
|
<text>{{productInfo.goodsName}}</text>
|
<text class="gray">月销：{{productInfo.saleCnt}}</text>
|
</view>
|
</view>
|
<view class="product-desc-wrap">
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 4,
|
fontSize: '28',
|
underLineWidth: 110
|
}"
|
@tabClick="tabClick($event)"
|
/>
|
<template v-if="tabIndex==0">
|
<view class="product-desc" v-html="productInfo.desc"></view>
|
</template>
|
<template v-else>
|
<product :productInfo="productInfo" v-if="goodsType=='家居产品'"></product>
|
<project :productInfo="productInfo" v-if="goodsType=='项目'"></project>
|
<combo :productInfo="productInfo" v-if="goodsType=='套餐'"></combo>
|
<refillCard :productInfo="productInfo" v-if="goodsType=='充值卡'"></refillCard>
|
</template>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
import product from './product.vue';
|
import project from './project.vue';
|
import combo from './combo.vue'
|
import refillCard from './refillCard.vue'
|
export default{
|
components: {
|
HTabs,
|
product,
|
project,
|
combo,
|
refillCard
|
},
|
data(){
|
return{
|
goodsType: '家居产品',
|
banner:[],
|
swiperIndex:0,
|
tabs:[
|
{
|
state: 1,
|
name: '商品介绍'
|
},
|
{
|
state: 2,
|
name: '商品属性'
|
}
|
],
|
tabIndex:0,
|
productInfo: {}
|
}
|
},
|
onLoad(options) {
|
this.goodsType = options.goodsType;
|
this.getInfo(options.id);
|
},
|
methods:{
|
swiperChange(e){
|
this.swiperIndex = e.detail.current;
|
},
|
tabClick(index){
|
this.tabIndex=index
|
},
|
getInfo(id){
|
this.$httpUtils.request('/api/order/findGoodsDetailById/'+id).then((res) => {
|
if(res.status == 200){
|
this.productInfo = res.mapInfo.goods;
|
this.banner = this.productInfo.img?this.productInfo.img.split(','):[];
|
if(this.productInfo.desc){
|
this.productInfo.desc = this.productInfo.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
|
}
|
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.back{
|
position: absolute;
|
top: var(--status-bar-height);
|
left: 10px;
|
z-index: 9;
|
font-size: 28px;
|
opacity: 0.5;
|
}
|
.banner{
|
width: 100%;
|
height: 300px;
|
}
|
.banner .img{
|
width: 100%;
|
height: 100%;
|
}
|
.banner .indicator{
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
background: rgba(0,0,0,0.5);
|
border-radius: 20px;
|
padding: 2px 15px;
|
color: #FFFFFF;
|
font-size: 10px;
|
}
|
.product-info{
|
background: #FFFFFF;
|
padding: 15px 10px;
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
.product-info .price{
|
display: block;
|
font-size: 24px;
|
font-weight: bold;
|
color: #FA5151;
|
margin-bottom: 5px;
|
}
|
.product-desc-wrap{
|
background: #FFFFFF;
|
}
|
.tab{
|
background: #FFFFFF;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.product-desc{
|
padding: 10px;
|
min-height: 500rpx;
|
font-size: 14px;
|
}
|
|
</style>
|
