|
@@ -15,12 +15,12 @@
|
|
|
<view class="banner-section">
|
|
|
<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
<swiper class="banner tui-banner tui-skeleton-rect" @change="swiperChange" :duration='800' :autoplay="false" :circular="true" >
|
|
|
- <swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
|
|
|
+ <swiper-item v-for="(item, index) in product.imageList" :key="index" class="banner-item">
|
|
|
<image :src="item" @click="previewImg(index)" class="product-img" />
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
<view class="swiper__dots-box">
|
|
|
- <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ productImage.length }}</tui-tag>
|
|
|
+ <tui-tag padding="12rpx 24rpx" type="translucent" shape="circleLeft" size="32rpx" :scaleMultiple="0.82" originRight>{{ current + 1 }}/{{ product.imageList.length }}</tui-tag>
|
|
|
</view>
|
|
|
</uni-swiper-dot>
|
|
|
</view>
|
|
@@ -62,22 +62,6 @@
|
|
|
<text class="name">品牌 起订量 分类...</text>
|
|
|
<text class="iconfont icon-xiayibu"></text>
|
|
|
</view>
|
|
|
- <view class="product-supplier" @click="goSupplier">
|
|
|
- <view class="logo"><img src="https://img.caimei365.com/group1/M00/03/4B/Cmis210DQ_qAIoyoAAKD15t_iQc959.png" alt=""></view>
|
|
|
- <view class="main">
|
|
|
- <view class="name">{{shop.name}}</view>
|
|
|
- <view class="massgs">
|
|
|
- <view class="label">满意度:</view>
|
|
|
- <view class="p-stars">
|
|
|
- <uni-stars :stars="6" :iconClass="iconClass" :iconColor="iconColor" :fontSize="36" :widthInfo="176"></uni-stars>
|
|
|
- </view>
|
|
|
- <view class="acount">
|
|
|
- <text>50</text>件商品
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right"><text class="iconfont icon-xiayibu"></text></view>
|
|
|
- </view>
|
|
|
<view class="product-details">
|
|
|
<!-- 商品详情 -->
|
|
|
<view class="title">
|
|
@@ -90,7 +74,12 @@
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="content tui-banner product-rich-text tui-skeleton-rect">
|
|
|
- <parser :html="html" :img-mode="widthFix"></parser>
|
|
|
+ <view class="contentHtml">
|
|
|
+ <view class="detailsText" v-if="product.productDetails!=''||product.productDetails!=null" >{{product.productDetails}}</view>
|
|
|
+ <view class="imgList" v-for="(item, index) in product.imageList" :key="index" :data-src="item">
|
|
|
+ <img :src="item"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="product-details secondBrand">
|
|
@@ -109,7 +98,6 @@
|
|
|
</view>
|
|
|
<view class="content hot">
|
|
|
<recommend :query-productid="product.productID" v-if="isRequest"></recommend>
|
|
|
- <!-- <recommend :query-productid="product.productID" v-if="isRequest"></recommend> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -117,8 +105,7 @@
|
|
|
<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
|
|
|
<view class="tui-popup-box clearfix">
|
|
|
<view class="title">商品参数</view>
|
|
|
- <!-- 二手商品参数-->
|
|
|
- <second-Parameters v-if="isRequest" :product="product" :goodsData="goodsData" />
|
|
|
+ <cm-parameter :product="product" :goodsData="goodsData" ></cm-parameter>
|
|
|
<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
<view class="tui-flex-1">
|
|
|
<view class="tui-button" @click="hidePopup()">收起</view>
|
|
@@ -135,54 +122,40 @@
|
|
|
<script>
|
|
|
import { mapState,mapMutations } from 'vuex'
|
|
|
import customP from '@/components/cm-module/headerNavbar/header-poduct' //自定义导航
|
|
|
- import cmPrice from "@/components/cm-module/productDetails/cm-price.vue" //价格显示
|
|
|
- import cmAttributes from "@/components/cm-module/productDetails/secondParameters.vue" //规格信息
|
|
|
+ import cmPrice from "@/components/cm-module/productDetails/secondPrice.vue" //价格显示
|
|
|
import authorize from '@/common/config/authorize.js'
|
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
- import parser from "@/components/jyf-Parser/index" //富文本处理
|
|
|
import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
- import recommend from "@/components/cm-module/productDetails/secondRecommend" //相关推荐//相关推荐
|
|
|
- import cmParameter from "@/components/cm-module/productDetails/cm-parameter" //相关参数
|
|
|
- import cmService from "@/components/cm-module/productDetails/cm-service" //服务项目
|
|
|
+ import recommend from "@/components/cm-module/productDetails/secondRecommend" //相关推荐
|
|
|
+ import cmParameter from "@/components/cm-module/productDetails/secondParameters.vue" //相关参数
|
|
|
import wxLogin from "@/common/config/wxLogin.js"
|
|
|
var isPreviewImg;
|
|
|
export default{
|
|
|
components:{
|
|
|
uniStars,
|
|
|
customP,
|
|
|
- parser,
|
|
|
tuiSkeleton,
|
|
|
recommend,
|
|
|
cmPrice,
|
|
|
- cmAttributes,
|
|
|
cmParameter,
|
|
|
- cmService
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
- html:'<div style="text-align: center;color:#333333;">暂无内容</div>',
|
|
|
disabledTabNavList:[{name:'相关推荐'}],
|
|
|
mode:'round',
|
|
|
iconClass:'icon-aixin',
|
|
|
iconColor:'#ff9100',
|
|
|
specClass: '',//规格弹窗css类,控制开关动画
|
|
|
- isBtnType:'',
|
|
|
isRequest:false,
|
|
|
isScrollTop:false,
|
|
|
current:0,
|
|
|
isShareType:'',
|
|
|
isHeaderPoduct:false,
|
|
|
navbarFiexd:'none',
|
|
|
- ladderPriceFlag:'',
|
|
|
- ladderPriceList:'',
|
|
|
isRecommend:false,
|
|
|
isRarameter:true,
|
|
|
isService:false,
|
|
|
- isEvaluate:false,
|
|
|
- isAnimation:false,
|
|
|
skeletonShow:true,
|
|
|
- isQuantity:false,
|
|
|
- isStock:false,
|
|
|
disabled:false,
|
|
|
isNoneDisabled:false,
|
|
|
tabCurrentIndex:0,
|
|
@@ -193,14 +166,6 @@
|
|
|
shop:{},//供应商信息
|
|
|
product:{},//采美
|
|
|
productImage:[],
|
|
|
- retailPrice:0,
|
|
|
- buyRetailPrice:0,
|
|
|
- buyRetailPriceStep:1,
|
|
|
- stock:0,
|
|
|
- number:0,
|
|
|
- minBuyNumber:0,
|
|
|
- productsList:[],
|
|
|
- goodListData:[],
|
|
|
headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
isIphoneX:this.$store.state.isIphoneX,
|
|
@@ -233,6 +198,13 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ this.SecondService.ProductCount({productId:this.productID}).then(res =>{
|
|
|
+ if(res.code==0){
|
|
|
+ console.log(res)
|
|
|
+ }else {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['hasLogin','isWxAuthorize'])
|
|
@@ -244,59 +216,10 @@
|
|
|
this.productImage=[];
|
|
|
this.shop = response.data.shop
|
|
|
this.product = response.data
|
|
|
- this.ladderPriceFlag = this.product.ladderPriceFlag;
|
|
|
- this.html = this.product.productDetail == null ? this.html : this.$api.adaptRichTextImg(this.product.productDetail.detailInfo)
|
|
|
- this.stock = this.product.stock
|
|
|
- this.buyRetailPriceStep = this.product.step
|
|
|
- this.number = this.product.minBuyNumber
|
|
|
- this.minBuyNumber = this.product.minBuyNumber
|
|
|
//处理商品图片列表
|
|
|
this.product.imageList.forEach(item =>{
|
|
|
this.productImage.push(item.image);
|
|
|
})
|
|
|
- //购物车数量
|
|
|
- this.goodsData.cartCount = this.product.productCount
|
|
|
- //处理阶梯价格
|
|
|
- if(this.product.ladderPriceList!=null){
|
|
|
- this.ladderPriceList = this.product.ladderPriceList;
|
|
|
- }
|
|
|
- //拆分金额并转千分位格式显示
|
|
|
- if(this.product.retailPrice!=null){
|
|
|
- this.retailPrice = this.product.retailPrice.toFixed(2);
|
|
|
- this.buyRetailPrice = this.product.retailPrice;
|
|
|
- }
|
|
|
- //处理下架商品和售罄商品
|
|
|
- if(this.product.validFlag =='3' || this.stock == 0 ){
|
|
|
- this.disabled = true
|
|
|
- this.isNoneDisabled = true
|
|
|
- this.tabCurrentIndex = 3;// 页面显示是默认选中第一
|
|
|
- this.isRecommend = true
|
|
|
- this.goodsData.disabledText = '下架'
|
|
|
- }else{
|
|
|
- this.disabled = false
|
|
|
- this.isNoneDisabled = false
|
|
|
- this.tabCurrentIndex = 0;// 页面显示是默认选中第三
|
|
|
- this.goodsData.disabledText = ''
|
|
|
- }
|
|
|
- if(this.product.price1TextFlag == "1"){
|
|
|
- this.disabled = true
|
|
|
- }
|
|
|
- if(this.product.price1TextFlag == "2"){
|
|
|
- if(this.userIdentity == 4){
|
|
|
- this.disabled = true
|
|
|
- }else{
|
|
|
- this.disabled = false
|
|
|
- }
|
|
|
- }
|
|
|
- this.goodsData.disabled = this.disabled
|
|
|
- this.goodsData.isNoneDisabled = this.isNoneDisabled
|
|
|
- if(this.product.validFlag =='3'){
|
|
|
- this.goodsData.disabledText = '下架'
|
|
|
- }
|
|
|
- if(this.stock == 0){
|
|
|
- this.goodsData.disabledText = '售罄'
|
|
|
- }
|
|
|
- this.isRequest = true
|
|
|
}).catch(error =>{
|
|
|
this.$util.msg(error.msg,2000);
|
|
|
})
|
|
@@ -331,124 +254,6 @@
|
|
|
},
|
|
|
handleContact(e){//跳转小程序客服
|
|
|
|
|
|
- },
|
|
|
- buyProductCart(){//底部购物车按钮点击
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- if(wxResponse == 1){
|
|
|
- if(this.hasLogin){
|
|
|
- this.$api.navigateTo('/pages/goods/cart')
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- btnGetConfirm(type){//加入购物车&&立即购买点击
|
|
|
- authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
|
- if(wxResponse == 1){
|
|
|
- if(this.hasLogin){
|
|
|
- this.showSpec(type);
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/login/login?type=1')
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=1')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- changeCountAdd(){//popup弹窗数量增加按钮
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number+=this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number++
|
|
|
- }
|
|
|
- this.processActivityPrice()
|
|
|
- },
|
|
|
- changeCountSub(){//popup弹窗数量减按钮
|
|
|
- if(this.number<=this.minBuyNumber){
|
|
|
- this.number= this.minBuyNumber
|
|
|
- this.isQuantity =true
|
|
|
- this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- if(this.buyRetailPriceStep == 2){
|
|
|
- this.number-=this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number--
|
|
|
- }
|
|
|
- this.processActivityPrice()
|
|
|
- this.isQuantity =false
|
|
|
- }
|
|
|
- },
|
|
|
- changeNumber(e){
|
|
|
- let _value = e.detail.value;
|
|
|
- if(!this.$api.isNumber(_value)){
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if(_value < this.minBuyNumber){
|
|
|
- this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else if( _value % this.minBuyNumber !=0 ){
|
|
|
- this.$util.msg(`购买量必须为起订量的整数倍`,2000);
|
|
|
- this.number = this.minBuyNumber
|
|
|
- }else{
|
|
|
- this.number = e.detail.value
|
|
|
- }
|
|
|
- this.processActivityPrice()
|
|
|
- },
|
|
|
- processActivityPrice(){//单独处理活动价格和阶梯价格
|
|
|
- if(this.ladderPriceFlag == '0' && this.product.actStatus == 0 || this.product.actStatus == 1){
|
|
|
- this.buyRetailPrice = this.product.retailPrice
|
|
|
- }else{
|
|
|
- this.ladderPriceList.forEach((item,index)=>{
|
|
|
- if(this.number>=item.buyNum){
|
|
|
- this.buyRetailPrice = item.buyPrice
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- showSpec(type) {//显示选择数量确认弹窗
|
|
|
- this.isBtnType = type
|
|
|
- this.specClass = 'show';
|
|
|
- },
|
|
|
- hideSpec() {//关闭选择数量确认弹窗
|
|
|
- this.specClass = 'hide';
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- btnConfirm() {//加入购物车&&立即购买跳转订单页并关闭弹窗
|
|
|
- if(this.isBtnType == 'add'){
|
|
|
- this.getAddProductCart()
|
|
|
- }else{
|
|
|
- this.toConfirmation()
|
|
|
- }
|
|
|
- },
|
|
|
- toConfirmation(){//跳转确认订单页面
|
|
|
- this.specClass = 'hide';
|
|
|
- let productStp ={
|
|
|
- allPrice:this.number*this.buyRetailPrice,
|
|
|
- allCount:this.number,
|
|
|
- productID:this.product.productID,
|
|
|
- productCount:this.number
|
|
|
- }
|
|
|
- this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
|
|
|
- setTimeout(() => {
|
|
|
- this.specClass = 'none';
|
|
|
- }, 200);
|
|
|
- },
|
|
|
- getAddProductCart(){//增加购物车成功和toast弹窗提示成功
|
|
|
- this.ProductService.shoppingAddCart({productID:this.productID,userID:this.userID,productCount:this.number}).then(response => {
|
|
|
- this.specClass = 'hide';
|
|
|
- this.$util.msg('加入购物车成功',1500,true,'success')
|
|
|
- this.isAnimation = true
|
|
|
- setTimeout(() => {this.specClass = 'none'}, 200)
|
|
|
- setTimeout(() => {this.isAnimation = false},2000)
|
|
|
- this.goodsData.cartCount = response.data;
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
- })
|
|
|
},
|
|
|
navToLogin(){
|
|
|
authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
|
|
@@ -478,10 +283,6 @@
|
|
|
getOptionFn(e){
|
|
|
this.isShareType = e.type
|
|
|
},
|
|
|
- goSupplier(){
|
|
|
- this.$api.setStorage('supplierInfo',this.shop)
|
|
|
- this.$api.navigateTo('/pages/goods/supplier')
|
|
|
- },
|
|
|
discard(){
|
|
|
//丢弃
|
|
|
},
|
|
@@ -491,8 +292,8 @@
|
|
|
}
|
|
|
return {
|
|
|
title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
- imageUrl:`${this.productImage[0]}`
|
|
|
+ path: `second/pages/product/product-details?type=share&id=${this.productID}`,
|
|
|
+ imageUrl:`${this.product.imageList[0]}`
|
|
|
}
|
|
|
},
|
|
|
showPopup(){
|
|
@@ -530,8 +331,8 @@
|
|
|
}
|
|
|
return {
|
|
|
title: `${this.product.name}`,
|
|
|
- path: `pages/goods/product?type=share&id=${this.productID}`,
|
|
|
- imageUrl:`${this.productImage[0]}`
|
|
|
+ path: `second/pages/product/product-details?type=share&id=${this.productID}`,
|
|
|
+ imageUrl:`${this.product.imageList[0]}`
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
@@ -623,7 +424,7 @@
|
|
|
height: 96rpx;
|
|
|
float: left;
|
|
|
line-height: 42rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
+ font-size: $font-size-34;
|
|
|
color: $text-color;
|
|
|
-o-text-overflow: ellipsis;
|
|
|
text-overflow: ellipsis;
|
|
@@ -801,7 +602,7 @@
|
|
|
}
|
|
|
}
|
|
|
.floor-item-btn{
|
|
|
- float: right;
|
|
|
+ float: left;
|
|
|
height: 40rpx;
|
|
|
margin-top: 8rpx;
|
|
|
.btn{
|
|
@@ -1546,4 +1347,21 @@
|
|
|
line-height: 46rpx;
|
|
|
font-size: 26rpx;
|
|
|
}
|
|
|
+ .imgList{
|
|
|
+ width: 702rpx;
|
|
|
+ margin: auto;
|
|
|
+ height: 710rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .imgList img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .detailsText{
|
|
|
+ padding: 0 30rpx 30rpx 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
</style>
|