From 6e54af776db885ad1a22ec582bdc97d7e1273c6c Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Wed, 13 Jan 2021 17:31:30 +0800
Subject: [PATCH] 系统优化
---
hive-app/pages/workbench/productDetail/index.vue | 163 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 129 insertions(+), 34 deletions(-)
diff --git a/hive-app/pages/workbench/productDetail/index.vue b/hive-app/pages/workbench/productDetail/index.vue
index 25e65f9..8f4b154 100644
--- a/hive-app/pages/workbench/productDetail/index.vue
+++ b/hive-app/pages/workbench/productDetail/index.vue
@@ -4,73 +4,168 @@
<!-- #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="aspectFill"></image>
- </swiper-item>
- </swiper>
- </view>
- <view class="return-icon iconfont iconzuojiantou"></view>
- <view class="dots-container justify-center">
- <view v-for="(item, index) in bannerList" :key="index">
- <view :class="['dot', index === swiperIndex ? 'actives' : '']">1</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.img?item.img:'../../../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>
- /3
+ </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{
- bannerList:[
- {img:'../../../static/images/banner1.jpg'},
- {img:'../../../static/images/banner1.jpg'}
- ]
+ 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.push(this.productInfo.img);
+ }
+ })
+ }
}
}
</script>
<style>
- .return-icon{
- font-size: 28px;
- opacity: 0.5;
+ page{
+ background: #F6F6F8;
+ }
+ .back{
position: absolute;
top: 10px;
left: 10px;
+ z-index: 9;
+ font-size: 28px;
+ opacity: 0.5;
}
- .swiper{
+ .banner{
width: 100%;
height: 300px;
}
- .banner-img{
+ .banner .img{
width: 100%;
height: 100%;
}
- .dots-container {
- display: flex;
- padding-bottom: 17px;
+ .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;
}
- .dots-box{
-
+ .product-info{
+ background: #FFFFFF;
+ padding: 15px 10px;
+ font-size: 14px;
+ margin-bottom: 10px;
}
- .dot{
-
+ .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;
+ }
+ .product-desc img{
+ max-width: 100%;
+ }
+
</style>
--
Gitblit v1.9.1