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 | 201 ++++++++++++++++++++++---------------------------
1 files changed, 90 insertions(+), 111 deletions(-)
diff --git a/hive-app/pages/workbench/productDetail/index.vue b/hive-app/pages/workbench/productDetail/index.vue
index 84ed221..8f4b154 100644
--- a/hive-app/pages/workbench/productDetail/index.vue
+++ b/hive-app/pages/workbench/productDetail/index.vue
@@ -1,104 +1,76 @@
<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 open-type="navigateBack" hover-class="none">
+ <view class="back 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>
+ <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>
</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 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:[
{
@@ -111,8 +83,12 @@
}
],
tabIndex:0,
- type:3
+ productInfo: {}
}
+ },
+ onLoad(options) {
+ this.goodsType = options.goodsType;
+ this.getInfo(options.id);
},
methods:{
swiperChange(e){
@@ -120,6 +96,14 @@
},
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);
+ }
+ })
}
}
}
@@ -129,64 +113,59 @@
page{
background: #F6F6F8;
}
- .return-icon{
- font-size: 28px;
- opacity: 0.5;
+ .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 {
+ .banner .indicator{
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);
+ color: #FFFFFF;
+ font-size: 10px;
}
.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;
+ padding: 15px 10px;
font-size: 14px;
- border-radius: 4px;
- box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ margin-bottom: 10px;
}
- .product-property-row{
+ .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;
- padding: 12px 0;
}
- .product-property-row:nth-last-child(1){
- border: 0;
+ .product-desc{
+ padding: 10px;
+ min-height: 500rpx;
+ font-size: 14px;
}
+ .product-desc img{
+ max-width: 100%;
+ }
+
</style>
--
Gitblit v1.9.1