|
|
@@ -27,7 +27,7 @@
|
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="2"></tui-skeleton>
|
|
|
<template v-else >
|
|
|
<view class="container-product tui-skeleton">
|
|
|
- <view class="container-product-main product-details0">
|
|
|
+ <view class="container-product-main product-details product-details0">
|
|
|
<view class="product-top">
|
|
|
<view class="banner-section">
|
|
|
<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
|
@@ -211,7 +211,7 @@
|
|
|
<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 cmPrice from "@/components/cm-module/productDetails/cm-price-activity.vue" //价格显示
|
|
|
import cmAttributes from "@/components/cm-module/productDetails/cm-attributes.vue" //规格信息
|
|
|
import parser from "@/components/jyf-Parser/index" //富文本处理
|
|
|
import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
@@ -284,27 +284,21 @@
|
|
|
scrollTopArray:[],
|
|
|
sectionTopRangeArr: [],
|
|
|
winHeight:'',
|
|
|
- isShowButton:false,
|
|
|
- heUserId:0,
|
|
|
- hasActiviType:false
|
|
|
+ isShowButton:false
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
- console.log(option)
|
|
|
- if(this.isShareType =='share'){
|
|
|
- wxLogin.wxLoginAuthorize()
|
|
|
- }
|
|
|
+
|
|
|
this.productId = option.productId;//获取商品ID
|
|
|
this.isShareType = option.type
|
|
|
this.linkPath = option.path
|
|
|
this.isHeaderPoduct = true
|
|
|
+ if(this.isShareType =='share'){
|
|
|
+ wxLogin.wxLoginAuthorize()
|
|
|
+ }
|
|
|
if(option.page == 2){
|
|
|
this.backPage = option.page
|
|
|
}
|
|
|
- if(option.heUserId){
|
|
|
- this.heUserId = option.heUserId
|
|
|
- this.hasActiviType = true
|
|
|
- }
|
|
|
this.getWinHeight()
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -312,6 +306,7 @@
|
|
|
},
|
|
|
filters:{
|
|
|
NumFormat(value) {//处理金额
|
|
|
+ // console.log('===' + Number(value).toFixed(2))
|
|
|
return Number(value).toFixed(2);
|
|
|
}
|
|
|
},
|
|
|
@@ -339,7 +334,7 @@
|
|
|
this.productImage.push(item);
|
|
|
})
|
|
|
//处理阶梯价格
|
|
|
- if(this.product.ladderList.length>0){
|
|
|
+ if(this.product.ladderList && this.product.ladderList.length>0){
|
|
|
this.ladderList = this.product.ladderList;
|
|
|
}
|
|
|
this.retailPrice = this.product.price.toFixed(2);
|
|
|
@@ -384,21 +379,30 @@
|
|
|
longPressActions:''
|
|
|
})
|
|
|
},
|
|
|
- tabClick(index) {//商品详情&&供应商信息tab切换
|
|
|
+ tabClick(index) {
|
|
|
+ //商品详情&&供应商信息tab切换
|
|
|
this.tabSelectFlag = true
|
|
|
- this.tabCurrentIndex = index;
|
|
|
- let classIndex = '.product-details'+index;
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
- uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
- uni.pageScrollTo({
|
|
|
- duration:300,//过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
- scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
- })
|
|
|
- setTimeout(()=>{
|
|
|
- this.tabSelectFlag = false;
|
|
|
- },500)
|
|
|
- }).exec()
|
|
|
- }).exec()
|
|
|
+ this.tabCurrentIndex = index
|
|
|
+ let classIndex = '.product-details' + index
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.container-product')
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select(classIndex)
|
|
|
+ .boundingClientRect(res => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.pageScrollTo({
|
|
|
+ duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
|
|
|
+ scrollTop: res.top - data.top - 40 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tabSelectFlag = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
},
|
|
|
handleContact(e){//跳转小程序客服
|
|
|
|
|
|
@@ -479,7 +483,6 @@
|
|
|
allCount:this.number,
|
|
|
productId:this.product.productId,
|
|
|
productCount:this.number,
|
|
|
- heUserId:this.heUserId
|
|
|
}
|
|
|
this.$api.navigateTo(`/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({data:productStp})}`)
|
|
|
setTimeout(() => {
|
|
|
@@ -492,7 +495,7 @@
|
|
|
productId:this.productId,
|
|
|
userId:this.userId,
|
|
|
productCount:this.number,
|
|
|
- heUserId:this.heUserId*1,
|
|
|
+ heUserId:0,
|
|
|
}
|
|
|
)
|
|
|
.then(response => {
|
|
|
@@ -555,15 +558,18 @@
|
|
|
getSectionProps() {//获取每个tab对应区域的scrollTop值
|
|
|
let className = '.product-details',
|
|
|
sectionPropsArr = [];
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
+ uni.createSelectorQuery().select('.container-product').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
res.forEach((item, index) => {
|
|
|
+ console.log(item);
|
|
|
sectionPropsArr.push({
|
|
|
className: `${className}${index}`,
|
|
|
- scrollTop: item.top - data.top - 150
|
|
|
+ scrollTop: item.top - data.top,
|
|
|
+ height:item.height
|
|
|
})
|
|
|
})
|
|
|
this.sectionPropsArr = sectionPropsArr;
|
|
|
+ console.log(this.sectionPropsArr);
|
|
|
this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
|
|
|
}).exec()
|
|
|
}).exec()
|
|
|
@@ -571,35 +577,46 @@
|
|
|
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}`);
|
|
|
- }
|
|
|
+ sectionScrollTopList.push(`${arr[i].scrollTop}-${arr[i].scrollTop + arr[i].height}`)
|
|
|
}
|
|
|
+ // for(let i = 0; i < arr.length; i++) {
|
|
|
+ // let thisScrollTop = arr[i].scrollTop;
|
|
|
+ // let thisHeight = arr[i].height;
|
|
|
+ // if(i < arr.length - 1) {
|
|
|
+ // let nextScrollTop = arr[i+1].scrollTop;
|
|
|
+ // if(i == 0) {
|
|
|
+ // sectionScrollTopList.push(`0-${thisScrollTop + thisHeight}`);
|
|
|
+ // } else if(i == arr.length - 1){
|
|
|
+ // sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop - this.winHeight}`);
|
|
|
+ // } else {
|
|
|
+ // sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${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),
|
|
|
+ activeTab: debounce(
|
|
|
+ (top, _this) => {
|
|
|
+ //当滑动时也能同步激活tab
|
|
|
+ const { sectionTopRangeArr } = _this
|
|
|
+ console.log(sectionTopRangeArr);
|
|
|
+ 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) {
|
|
|
+ console.log(top);
|
|
|
+ _this.tabCurrentIndex = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 100,
|
|
|
+ true
|
|
|
+ ),
|
|
|
getWinHeight() {
|
|
|
this.winHeight = wx.getSystemInfoSync().windowHeight;
|
|
|
},
|
|
|
@@ -874,22 +891,31 @@
|
|
|
}
|
|
|
}
|
|
|
.floor-item-act{
|
|
|
- width: 80rpx;
|
|
|
- height: 30rpx;
|
|
|
+ // width: 80rpx;
|
|
|
+ height: 34rpx;
|
|
|
margin-top: 15rpx;
|
|
|
margin-left: 20rpx;
|
|
|
float: left;
|
|
|
.tag{
|
|
|
display: inline-block;
|
|
|
- width: 80rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
- background-size: contain;
|
|
|
+ height: 32rpx;
|
|
|
font-size: 22rpx;
|
|
|
line-height: 30rpx;
|
|
|
text-align: center;
|
|
|
color: #f83c6c;
|
|
|
float: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.tag-02{
|
|
|
+ width: 80rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ &.tag-01{
|
|
|
+ width: 56rpx;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f83c6c;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.floor-item-btn{
|
|
|
@@ -1113,7 +1139,7 @@
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
background: #FFFFFF;
|
|
|
- z-index: 999;
|
|
|
+ // z-index: 999;
|
|
|
.bottom-le{
|
|
|
width: 300rpx;
|
|
|
height: 100rpx;
|
