合并修复冲突

pages/goods/product.vue

@@ -55,7 +55,6 @@
 					class="nav-item tui-skeleton-fillet"
 					:class="{ current: tabCurrentIndex === 3 }"
 					@click="tabClick(3)"
-					v-if="product.archiveId !== 0"
 				>
 					<text>相关资料</text> <text class="line"></text>
 				</view>
@@ -562,6 +561,7 @@ import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton'
 import recommend from '@/components/cm-module/productDetails/recommend' //相关推荐
 import cmParameter from '@/components/cm-module/productDetails/cm-parameter' //相关参数
 import cmService from '@/components/cm-module/productDetails/cm-service' //服务项目
+import cmProductDoc from '@/components/cm-module/productDetails/cm-product-doc.vue'
 import couponTabs from '@/components/cm-module/coupon/tui-tabs.vue'
 import authorize from '@/common/config/authorize.js'
 import wxLogin from '@/common/config/wxLogin.js'
@@ -577,7 +577,8 @@ export default {
 		cmAttributes,
 		cmParameter,
 		cmService,
-		couponTabs
+		couponTabs,
+		cmProductDoc
 	},
 	data() {
 		return {
@@ -629,7 +630,6 @@ export default {
 			productCouponList: [], // 优惠券弹窗列表
 			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
 			systeminfo: this.setSysteminfo(), // 获取设备信息
-			isIphoneX: this.$store.state.isIphoneX,
 			windowHeight: '',
 			headerColor: false,
 			backPage: 1,
@@ -646,7 +646,6 @@ export default {
 			tabSelectFlag: false,
 			sectionPropsArr: [],
 			scrollTopArray: [],
-			sectionTopRangeArr: [],
 			winHeight: '',
 			isShowButton: true,
 			isNoneSupplier: false,
@@ -661,11 +660,13 @@ export default {
 			},
 			bottomCartNumber: 0,
 			navbar: [{ name: '未领取', num: 0 }, { name: '已领取', num: 0 }],
+			isPreviewImage: false,
+			opentype: '',
 			collectionType: false
 		}
 	},
 	computed: {
-		...mapState(['hasLogin', 'isWxAuthorize', 'identity'])
+		...mapState(['hasLogin', 'isWxAuthorize', 'identity', 'isIphoneX'])
 	},
 	filters: {
 		TypeFormat(value) {
@@ -688,8 +689,20 @@ export default {
 			}
 		}
 	},
+	watch: {
+		isNavbarFiexd(val) {
+			if (!this.isRequest || !val) return
+			let timer = null
+			clearTimeout(timer)
+			timer = setTimeout(() => {
+				if (this.sectionPropsArr.length > 0) return
+				this.getSectionProps()
+			}, 200)
+		}
+	},
 	onLoad(option) {
 		this.productId = this.couponParam.productId = option.id //获取商品ID
+		this.opentype = option.open
 		this.isShareType = option.type
 		this.linkPath = option.path
 		this.isHeaderPoduct = true
@@ -701,6 +714,20 @@ export default {
 		}
 		this.getWinHeight()
 	},
+	onReady() {
+		if (this.opentype == 'caimei') {
+			// 跳转到资料详情
+			uni.showLoading({
+				title: '加载中'
+			})
+			setTimeout(() => {
+				this.isNavbarFiexd = true
+				this.tabClick(3)
+				uni.hideLoading()
+			}, 2000)
+		}
+		console.log('是iPhoneX', this.isIphoneX)
+	},
 	methods: {
 		initData() {
 			// 初始化商品详情查询
@@ -785,11 +812,12 @@ export default {
 						this.goodsData.disabledText = '售罄'
 					}
 					console.log(this.disabled)
-					setTimeout(() => {
-						this.getSectionProps()
-					}, 2000)
+					// setTimeout(() => {
+					//     this.getSectionProps()
+					// }, 2000)
 					this.shoppingHeaderCartNumber()
 					this.queryProductDetilsCoupons()
+
 					this.isRequest = true
 				})
 				.catch(error => {
@@ -826,9 +854,7 @@ export default {
 		},
 		shoppingHeaderCartNumber() {
 			// 获取用户购物车储量
-			this.ProductService.shoppingHeaderCartNumber({
-				userId: this.userId
-			})
+			this.ProductService.shoppingHeaderCartNumber({ userId: this.userId })
 				.then(response => {
 					this.bottomCartNumber = response.data.length
 				})
@@ -870,30 +896,37 @@ export default {
 				longPressActions: ''
 			})
 		},
+		//商品详情&&供应商信息tab切换
 		tabClick(index) {
-			//商品详情&&供应商信息tab切换
-			this.tabSelectFlag = true
+			// 重新标记
+			this.getSectionProps()
 			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()
+			this.tabSelectFlag = true
+			let timer = null
+			clearTimeout(timer)
+			// 点击tab 300ms才执行跳转，避免出错（来回跳动）
+			timer = setTimeout(() => {
+				this.tabClickAction(index)
+			}, 300)
+		},
+		// 跳转执行
+		tabClickAction(index) {
+			const that = this
+			if (index === 3) {
+				return uni.pageScrollTo({
+					duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+					scrollTop: this.sectionPropsArr[0].scrollTop
 				})
-				.exec()
+			}
+			uni.pageScrollTo({
+				duration: 300, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+				scrollTop: this.sectionPropsArr[index].scrollTop,
+				success() {
+					setTimeout(() => {
+						that.tabSelectFlag = false
+					}, 300)
+				}
+			})
 		},
 		handleContact(e) {
 			//跳转小程序客服
@@ -946,8 +979,8 @@ export default {
 				this.$api.navigateTo('/pages/login/login?type=1')
 			}
 		},
+		//popup弹窗数量增加按钮
 		changeCountAdd() {
-			//popup弹窗数量增加按钮
 			if (this.buyRetailPriceStep == 2) {
 				this.number += this.minBuyNumber
 			} else {
@@ -955,8 +988,8 @@ export default {
 			}
 			this.processActivityPrice()
 		},
+		//popup弹窗数量减按钮
 		changeCountSub() {
-			//popup弹窗数量减按钮
 			if (this.number <= this.minBuyNumber) {
 				this.number = this.minBuyNumber
 				this.isQuantity = true
@@ -1170,60 +1203,50 @@ export default {
 					break
 			}
 		},
-		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()
+		// 获取每个tab对应区域的区间
+		async getSectionProps() {
+			const sectionPropsArr = [],
+				scrollTopArray = [],
+				className = 'product-details'
+
+			// 获取相关节点元素信息
+			const productMain = await this.$util.boundingClientRect(this, '.container-product-main', false)
+			const productDetail = await this.$util.boundingClientRect(this, '.product-details', true)
+			const topBar = await this.$util.boundingClientRect(this, '#topBar', false)
+
+			/*
+                说明：采用累加方式来计算每一个 prdocut-details 的 scrollTop 定位
+                     scrollTop = 上一个的scrollTop + 上一个的高度
+            */
+			productDetail.forEach((item, index) => {
+				// 上一个 prdocut-details 的 scrollTop 值
+				const prev = sectionPropsArr[index - 1]
+				const prevScrollTop = prev ? prev.scrollTop : productMain.height
+				// 上一个 prdocut-details 的高度
+				const add = productDetail[index - 1]
+				// 第一个需要减去tabs的高度
+				const addHeight = index === 0 ? (add ? add.height : 0) - topBar.height : add ? add.height : 0
+
+				sectionPropsArr.push({
+					className: `${className}-${index}`,
+					scrollTop: prevScrollTop + addHeight
 				})
-				.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
+				// - topBar.height
+			})
+			this.sectionPropsArr = sectionPropsArr
+
+			console.log('更新tab影响区域')
 		},
+		//当滑动时也能同步激活tab
 		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])
+				const { sectionPropsArr } = _this
+				if (sectionPropsArr.length > 0) {
+					sectionPropsArr.forEach((item, index) => {
+						// 当前位置为开始位置， 下个起始位置为结束位置
+						const openInterval = (index === 0 ? 0 : item.scrollTop) - 20 // 自定义偏移
+						const next = sectionPropsArr[index + 1]
+						const closedInterval = (next ? next.scrollTop : 10000000) - 20 // 自定义偏移
 						if (top >= openInterval && top < closedInterval) {
 							_this.tabCurrentIndex = index
 						}
@@ -1235,6 +1258,9 @@ export default {
 		),
 		getWinHeight() {
 			this.winHeight = wx.getSystemInfoSync().windowHeight
+		},
+		changePreViewImageStatus(falg) {
+			this.isPreviewImage = falg
 		}
 	},
 	onPageScroll(e) {
@@ -1278,28 +1304,33 @@ export default {
 		}
 	},
 	onShow() {
-		this.$api
-			.getStorage()
-			.then(resolve => {
-				this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : ''
-				this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
-				this.shopID = resolve.shopId ? resolve.shopId : ''
-				if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
-					this.isShowButton = true
-				} else {
-					this.isShowButton = false
-				}
-				if (isPreviewImg) {
-					isPreviewImg = false
-					return
-				} else {
+		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
+		if (!this.isPreviewImage) {
+			this.$api
+				.getStorage()
+				.then(resolve => {
+					this.userId = this.couponParam.userId = resolve.userId ? resolve.userId : ''
+					this.userIdentity = resolve.userIdentity ? resolve.userIdentity : 0
+					this.shopID = resolve.shopId ? resolve.shopId : ''
+					if (this.userIdentity == 0 || this.userIdentity == 2 || this.userIdentity == 4) {
+						this.isShowButton = true
+					} else {
+						this.isShowButton = false
+					}
+					if (isPreviewImg) {
+						isPreviewImg = false
+						return
+					} else {
+						this.initData()
+					}
+				})
+				.catch(error => {
 					this.initData()
-				}
-			})
-			.catch(error => {
-				this.initData()
-			})
-	}
+				})
+		}
+		this.isPreviewImage = false
+	},
+	created() {}
 }
 </script>
 
@@ -1424,7 +1455,7 @@ page {
 				border: 0;
 				margin: 0;
 				padding: 8rpx 0;
-				z-index: 990;
+				z-index: 980;
 				.icon-fenxiang1 {
 					font-size: $font-size-34;
 				}