|
|
@@ -1,20 +1,23 @@
|
|
|
|
|
|
<template>
|
|
|
<view class="product" :style="{paddingBottom: userIdentity==1 ? '0rpx' :'188rpx'}">
|
|
|
- <!-- <custom-p v-if="isHeaderPoduct"
|
|
|
- :systeminfo='systeminfo'
|
|
|
- :navbar-data='nvabarData'
|
|
|
- :headerBtnPosi ="headerBtnPosi"
|
|
|
- :headerColor="headerColor"
|
|
|
- :type="isShareType"
|
|
|
- :page='backPage'>
|
|
|
- </custom-p> -->
|
|
|
<view class="navbar" :class="navbarFiexd">
|
|
|
- <!-- -->
|
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
|
<text>详情</text>
|
|
|
<text class="line"></text>
|
|
|
</view>
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
|
|
|
+ <text>品牌</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
+ <text>推荐</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
|
|
|
+ <text>详情</text>
|
|
|
+ <text class="line"></text>
|
|
|
+ </view>
|
|
|
<view class="nav-item tui-skeleton-fillet"
|
|
|
:class="{ current: tabCurrentIndex === 1 }"
|
|
|
@click="tabClick(1)"
|
|
|
@@ -25,7 +28,7 @@
|
|
|
<view class="nav-item tui-skeleton-fillet" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
|
|
|
<text>推荐</text>
|
|
|
<text class="line"></text>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
|
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
@@ -65,14 +68,14 @@
|
|
|
<view class="label-a tui-skeleton-fillet" v-for="(label,index) in product.tagsList" :key="index">{{label}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-seve">
|
|
|
- <text class="title">服务：</text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
- <text class="iconfont icon-dui tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
+ </view>
|
|
|
+ <view class="product-seve">
|
|
|
+ <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">无忧退货</text></text>
|
|
|
+ <text class="iconfont icon-wuyoutuihuoi tui-skeleton-rect"><text class="text">快速退款</text></text>
|
|
|
+ <text class="iconfont icon-wuyoutuihuo tui-skeleton-rect"><text class="text">正品保证</text></text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
<view class="product-parameter" @click="showPopup">
|
|
|
<text class="title">参数：</text>
|
|
|
<text class="name">品牌 起订量 分类...</text>
|
|
|
@@ -114,7 +117,7 @@
|
|
|
<view class="title-tab">相关推荐</view>
|
|
|
</view>
|
|
|
<view class="content hot">
|
|
|
- <recommend :query-productid="product.productID" ></recommend>
|
|
|
+ <recommend :query-productid="product.productID" v-if="isRequest" ></recommend>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -146,6 +149,7 @@
|
|
|
import recommend from "@/components/cm-module/productDetails/secondRecommend" //相关推荐
|
|
|
import cmParameter from "@/components/cm-module/productDetails/secondParameters.vue" //相关参数
|
|
|
import wxLogin from "@/common/config/wxLogin.js"
|
|
|
+ import { debounce } from '@/common/config/common.js'
|
|
|
var isPreviewImg;
|
|
|
export default{
|
|
|
components:{
|
|
|
@@ -196,6 +200,11 @@
|
|
|
linkPath:'',
|
|
|
popupShow:false,//参数弹窗
|
|
|
CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ tabSelectFlag:false,
|
|
|
+ sectionPropsArr: [],
|
|
|
+ scrollTopArray:[],
|
|
|
+ sectionTopRangeArr: [],
|
|
|
+ winHeight:''
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -234,8 +243,9 @@
|
|
|
this.product = response.data
|
|
|
//处理商品图片列表
|
|
|
this.product.imageList.forEach(item =>{
|
|
|
- this.productImage.push(item.image);
|
|
|
+ this.productImage.push(item);
|
|
|
})
|
|
|
+ this.isRequest = true
|
|
|
}).catch(error =>{
|
|
|
this.$util.msg(error.msg,2000);
|
|
|
})
|
|
|
@@ -254,7 +264,7 @@
|
|
|
})
|
|
|
},
|
|
|
tabClick(index) {//商品详情&&供应商信息tab切换
|
|
|
- console.log(index)
|
|
|
+ this.tabSelectFlag = true
|
|
|
this.tabCurrentIndex = index;
|
|
|
let classIndex = '.productDetails'+index;
|
|
|
uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
@@ -318,27 +328,83 @@
|
|
|
},
|
|
|
hidePopup(){
|
|
|
this.popupShow = false
|
|
|
- }
|
|
|
+ },
|
|
|
+ getSectionProps() {//获取每个tab对应区域的scrollTop值
|
|
|
+ let className = '.product-details',
|
|
|
+ sectionPropsArr = [];
|
|
|
+ uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
+ uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
+ res.forEach((item, index) => {
|
|
|
+ sectionPropsArr.push({
|
|
|
+ className: `${className}${index}`,
|
|
|
+ scrollTop: item.top - data.top - 150
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.sectionPropsArr = sectionPropsArr;
|
|
|
+ this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
|
|
|
+ }).exec()
|
|
|
+ }).exec()
|
|
|
+ },
|
|
|
+ getSectionRange(arr) {// 获取每个tab对应区域的区间
|
|
|
+ let sectionScrollTopList = [];
|
|
|
+ for(let i = 0; i < arr.length; i++) {
|
|
|
+ let thisScrollTop = arr[i].scrollTop;
|
|
|
+ if(i < arr.length - 1) {
|
|
|
+ let nextScrollTop = arr[i+1].scrollTop;
|
|
|
+ if(i == 0) {
|
|
|
+ sectionScrollTopList.push(`0-${thisScrollTop}`);
|
|
|
+ } else if(i == arr.length - 1){
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
|
|
|
+ } else {
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return sectionScrollTopList;
|
|
|
+ },
|
|
|
+ activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
|
|
|
+ const { sectionTopRangeArr } = _this;
|
|
|
+ if(sectionTopRangeArr.length > 0) {
|
|
|
+ sectionTopRangeArr.forEach((item, index) => {
|
|
|
+ let splitItem = item.split('-'),
|
|
|
+ openInterval = Number(splitItem[0]),
|
|
|
+ closedInterval = Number(splitItem[1]);
|
|
|
+ if(top >= openInterval && top < closedInterval) {
|
|
|
+ _this.tabCurrentIndex = index;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },100, true),
|
|
|
+ getWinHeight() {
|
|
|
+ this.winHeight = wx.getSystemInfoSync().windowHeight;
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
onPageScroll(e){//实时获取到滚动的值
|
|
|
- if(e.scrollTop>50){
|
|
|
+ const { scrollTop } = e;
|
|
|
+ if(!this.tabSelectFlag) {
|
|
|
+ this.activeTab(scrollTop, this);
|
|
|
+ }
|
|
|
+ if(e.scrollTop>100){
|
|
|
this.headerColor = true
|
|
|
+ this.navbarFiexd = 'fixed'
|
|
|
this.nvabarData={
|
|
|
showCapsule: 1,
|
|
|
title: '商品详情',
|
|
|
}
|
|
|
}else{
|
|
|
this.headerColor = false
|
|
|
+ this.navbarFiexd = 'none'
|
|
|
this.nvabarData={
|
|
|
showCapsule: 1,
|
|
|
title: '',
|
|
|
}
|
|
|
}
|
|
|
if(e.scrollTop>700){
|
|
|
- this.navbarFiexd = 'fixed'
|
|
|
this.isScrollTop = true
|
|
|
}else{
|
|
|
- this.navbarFiexd = 'none'
|
|
|
this.isScrollTop = false
|
|
|
}
|
|
|
},
|
|
|
@@ -378,7 +444,7 @@
|
|
|
height: 80rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 24rpx;
|
|
|
- background: #ffe6dc;
|
|
|
+ background: #fff;
|
|
|
z-index: 10;
|
|
|
display: flex;
|
|
|
position: fixed;
|
|
|
@@ -461,14 +527,12 @@
|
|
|
height: auto;
|
|
|
padding: 24rpx 0 0 0;
|
|
|
background-color: #FFFFFF;
|
|
|
- border-bottom: 20rpx solid #F7F7F7;
|
|
|
.wrap-top{
|
|
|
width: 702rpx;
|
|
|
padding: 0 24rpx;
|
|
|
height: auto;
|
|
|
float: left;
|
|
|
padding-bottom:20rpx;
|
|
|
- border-bottom: 1px solid #F8F8F8;
|
|
|
&.none{
|
|
|
.p-title{
|
|
|
color:#999999
|
|
|
@@ -480,18 +544,18 @@
|
|
|
float: left;
|
|
|
.p-title-name{
|
|
|
width:602rpx;
|
|
|
- height: 96rpx;
|
|
|
+ // height: 96rpx;
|
|
|
float: left;
|
|
|
- line-height: 42rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
font-size: $font-size-34;
|
|
|
color: $text-color;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
+ // -o-text-overflow: ellipsis;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ // display: -webkit-box;
|
|
|
+ // word-break: break-all;
|
|
|
+ // -webkit-box-orient: vertical;
|
|
|
+ // -webkit-line-clamp: 2;
|
|
|
+ // overflow: hidden;
|
|
|
}
|
|
|
.p-title-share{
|
|
|
width: 96rpx;
|
|
|
@@ -733,13 +797,13 @@
|
|
|
color: $text-color;
|
|
|
}
|
|
|
.iconfont{
|
|
|
- color: #999999;
|
|
|
- margin-right: 20rpx;
|
|
|
+ color: #fea785;
|
|
|
+ margin-right: 40rpx;
|
|
|
font-size: $font-size-26;
|
|
|
}
|
|
|
.text{
|
|
|
font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
+ color: #fea785;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
@@ -756,7 +820,7 @@
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
.name{
|
|
|
float: right;
|
|
|
@@ -764,7 +828,7 @@
|
|
|
display: inline-block;
|
|
|
float: left;
|
|
|
font-size: $font-size-28;
|
|
|
- color: #999999;
|
|
|
+ color: $text-color;
|
|
|
float: right;
|
|
|
padding-right: 48rpx;
|
|
|
overflow: hidden;
|
