<template>
|
<!-- 商品详情 -->
|
<!-- 默认是基础属性 1是项目 2是套餐 3是充值卡 -->
|
<view>
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="banner">
|
<swiper class="swiper"
|
autoplay="true"
|
interval="5000"
|
duration="1500"
|
@change="swiperChange"
|
>
|
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
<image class="banner-img" :src="item.img" mode="widthFix"></image>
|
<view class="dots-container flex align-center justify-center">
|
<text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
<navigator open-type="navigateBack">
|
<view class="return-icon iconfont iconzuojiantou"></view>
|
</navigator>
|
<view class="product-price">
|
<text class="font-24 red font-bold">￥128.00</text>
|
<view class="font-14 flex justify-between mt-5">
|
<text>多肽沁妍水润面膜</text>
|
<text class="gray">月销：122</text>
|
</view>
|
</view>
|
<view class="product-info mt-15">
|
<view class="product-info-row">
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 4,
|
fontSize: '28',
|
underLineWidth: 110
|
}"
|
@tabClick="tabClick($event)"
|
/>
|
</view>
|
<view v-if="tabIndex==0">
|
<image class="product-img" mode="widthFix" src="../../../static/images/banner1.jpg"></image>
|
</view>
|
<view v-else class="product-all">
|
<view class="product-property">
|
<view class="product-property-row flex justify-between">
|
<text>商品编码</text>
|
<text>123123000</text>
|
</view>
|
<view class="product-property-row flex justify-between">
|
<text>商品分类</text>
|
<text>家居产品</text>
|
</view>
|
<view class="product-property-row flex justify-between">
|
<text>规格</text>
|
<text>500ml</text>
|
</view>
|
<view class="product-property-row flex justify-between">
|
<text>每人限购次数</text>
|
<text>1</text>
|
</view>
|
<view class="product-property-row flex justify-between">
|
<text>最大销售数量</text>
|
<text>23</text>
|
</view>
|
</view>
|
<project class="mt-10" v-if="type==1"></project>
|
<combo class="mt-10" v-if="type==2"></combo>
|
<refillCard class="mt-10" v-if="type==3"></refillCard>
|
</view>
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
import project from './project.vue';
|
import combo from './combo.vue'
|
import refillCard from './refillCard.vue'
|
export default{
|
components: {
|
HTabs,
|
project,
|
combo,
|
refillCard
|
},
|
data(){
|
return{
|
bannerList:[
|
{img:'../../../static/images/banner1.jpg'},
|
{img:'../../../static/images/banner1.jpg'}
|
],
|
swiperIndex:0,
|
tabs:[
|
{
|
state: 1,
|
name: '商品介绍'
|
},
|
{
|
state: 2,
|
name: '商品属性'
|
}
|
],
|
tabIndex:0,
|
type:3
|
}
|
},
|
methods:{
|
swiperChange(e){
|
this.swiperIndex = e.detail.current;
|
},
|
tabClick(index){
|
this.tabIndex=index
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.return-icon{
|
font-size: 28px;
|
opacity: 0.5;
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
}
|
.swiper{
|
width: 100%;
|
height: 300px;
|
}
|
.banner-img{
|
width: 100%;
|
height: 100%;
|
}
|
.dots-container {
|
position: absolute;
|
right: 10px;
|
bottom: 10px;
|
background: rgba(0,0,0,0.5);
|
border-radius: 20px;
|
padding: 2px 15px;
|
}
|
.product-price{
|
background: #FFFFFF;
|
padding: 15px 10px;
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.product-info{
|
background: #FFFFFF;
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
box-shadow:0 -6px 6px rgba(237,234,244,0.5);
|
}
|
.product-info-row{
|
background: #FFFFFF;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.product-img{
|
width: 100%;
|
}
|
.product-all{
|
background: #F6F6F8;
|
}
|
.product-property{
|
background: #FFFFFF;
|
padding: 0 10px;
|
font-size: 14px;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.product-property-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 12px 0;
|
}
|
.product-property-row:nth-last-child(1){
|
border: 0;
|
}
|
</style>
|
