组合票bug处理

pages/combination/distributionCombiChoose/distributionCombiChoose-old.vue

 <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
 <template>
 	<view class="wrap">
-		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
-			<view class="banner">
+		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
+			<view class="banner" id='banner'>
 				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
 						<view slot="indicator" class="indicator-num">
 								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
 						</view>
 				</u-swiper>
 			</view>
-			<view class="middle" id="middle">
+			<view class="middle" :style="middleStyle">
 				<!-- 中间上面部分 -->
-				<view class="middle-top" :style="middleTopStyle">
+				<view class="middle-top">
 					<view class="merchant-name">
-						{{merchantTitle||''}}
+						{{currentMerchant.name||''}}
 					</view>
 					<u-transition :show="showTransition" :duration='600'>
-						<view class="merchant-info-bottom" >
+						<view class="merchant-info-bottom">
 							<view class="merchant-bottom-left">
 								<view>
 									<text style="color: #00B42B;">营业时间</text>
@@ -48,7 +48,7 @@
 				</view>
 				
 				<!-- 列表部分 -->
-				<view class="middle-bottom" :style="middleBottomStyle">
+				<view class="middle-bottom" id="middle-bottom">
 					<!-- 左边滚动条 -->
 					<scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
 						<view class="middle-left">
@@ -58,7 +58,8 @@
 						</view>
 					</scroll-view>
 					<!-- 右边滚动条 -->
-					<scroll-view  @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
+					<!-- enhanced和bounces是处理ios系统橡皮筋回弹bug -->
+					<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
 						<view class="middle-right">
 							<checkbox-group @change="checkboxChange" class="checkbox-box">
 								<view class="merchantlist-wrap" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
@@ -95,7 +96,7 @@
 														<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
 													</view>								
 													<view class="product-rule">
-														<text>随买随用</text>
+														<!-- <text>随买随用</text> -->
 														<template v-if="items.productRefundRuleVo">
 															<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
 															<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
@@ -139,7 +140,7 @@
 				
 				
 			</view>
-			<view class="bottom">
+			<view class="bottom" :style="bottomStyle">
 				<view class="bottom-left" @click="showCustomer()">
 					<u-icon name="chat" size="42"></u-icon>
 					客服
@@ -147,7 +148,7 @@
 				<view class="bottom-right">
 					<view class="bottom-choose">
 						<view class="bottom-more" v-show="chooseProduct.length > 0">
-							组合购更优惠
+							组合购更便捷
 							<text class="bottom-triangle"></text>
 						</view>
 						<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
@@ -188,6 +189,14 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- 自定义导航栏 -->
+		<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
+			<view class="tabbar-title">
+				<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
+				<text>选择产品</text>
+				<text></text>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -207,7 +216,6 @@ export default {
   },
   data() {
     return {
-      merchantTitle:'',//商家标题
       currentMerchant:'',//当前入口商家信息
       showTip:false,//系统调不通或者崩了跳出弹窗
       detailData:'',//详情数据
@@ -228,14 +236,17 @@ export default {
       merchantIndex:0,//选中的商家下标
       middleHeight:0,//中间列表盒子高度
       heightArr:[],//元素高度数组
-      scrollHeight:0,//中间盒子滚动时的高度
-      originHeight:0,//中间盒子原本高度
-      middleTopStyle:'',//中间盒子上部分样式
-      middleBottomStyle:'',//中间盒子下部分样式
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
       toViewFull:'',//全屏滚动到某个元素
       showTransition:true,//控制动画显示隐藏
+      scrollHeight:0,//中间盒子滚动时的高度
+      originHeight:0,//中间盒子原本高度
+      middleTopHeight:0,//中间盒子上部分高度
+      topHeight:0,//上面状态栏+上面导航栏总高度
+      tabbarOpacity:0,//导航栏透明度
+      bottomStyle:'',//处理苹果手机的横线，单独增加一个样式
+      middleStyle:'',//中间盒子样式，单独增加一个样式
     }
   },
   watch: {
@@ -295,21 +306,30 @@ export default {
     }
   },
   onLoad(option) {
+    //如果是索道
+    if(this.merchantId=='z0015605022691a5945bbe463141668c'){
+		  this.showSuodaoImg=true
+		  setTimeout(() => {
+		    this.showSuodaoImg = false
+		  }, 2500)
+    }
     //获取公司Id,保存到本地，支付等逻辑需要入口companyId
     this.companyId=this.$commonjs.getCompanyId(option)||''
     this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
     this.channelId=this.$commonjs.getKey(option,'channelId')||''
     this.groupId=this.$commonjs.getKey(option,'groupId')||''
     this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
+    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
+    let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
+    this.topHeight =statusBarHeight+(capsule.top - statusBarHeight) * 2 + capsule.height//整个上部分总高度
+    //处理苹果手机下面有根横线，影响选中产品明细的操作
+    let platform = uni.getSystemInfoSync().platform
+    if(platform=='ios'){
+      this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
+      this.middleStyle='padding-bottom:140rpx;'
+    }
   },
   onShow() {
-    //如果是索道
-    if(this.merchantId=='z0015605022691a5945bbe463141668c'){
-		  this.showSuodaoImg=true
-		  setTimeout(() => {
-		    this.showSuodaoImg = false
-		  }, 2500)
-    }
     //清空之前选中的数据以及状态
     this.detailData=''
     this.chooseProduct=[]
@@ -325,7 +345,6 @@ export default {
     let token = uni.getStorageSync('token')
     if (token) {
       uni.getLocation({
-        type: 'wgs84',
         success: res => {
           let latitude = res.latitude //纬度
           let longitude = res.longitude //经度
@@ -394,7 +413,6 @@ export default {
 		          item.productListCopy = item.productList
               //获取当前商家信息
               this.currentMerchant=item
-              this.merchantTitle=item.name
 		        } else {
 		          // item.productListCopy = item.productList.slice(0, 2)不要更多，暂时注释
               item.productListCopy = item.productList
@@ -424,26 +442,46 @@ export default {
           this.$nextTick(() => {
             //清空数组
             this.heightArr=[]
-            uni.getSystemInfo({
-						  complete:(info)=> {
-                let windowHeight=info.windowHeight||753
             //获取中间盒子需要滚动时的高度
+            // #ifdef MP-WEIXIN
             uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
 						  if(data){
-						        this.scrollHeight=windowHeight-data.height
+						    this.middleTopHeight=data.height
+						  }
+            }).exec()
+            // #endif
+						
+            // #ifdef MP-ALIPAY
+            uni.createSelectorQuery().select('.middle-top').boundingClientRect(data => {
+              if(data){
+                this.middleTopHeight=data.height
               }
             }).exec()
+            // #endif
             //获取中间盒子原本高度
+            // #ifdef MP-WEIXIN
             uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
 						  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
 						  if(data){
 						    this.originHeight=data.height
-                    this.middleHeight=this.originHeight
+						    this.middleHeight=data.height
+						  }
+            }).exec()
+            // #endif
+						
+            // #ifdef MP-ALIPAY
+            uni.createSelectorQuery().select('.middle-right').boundingClientRect(data => {
+						  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
+						  if(data){
+						    this.originHeight=data.height
+						    this.middleHeight=data.height
 						  }
             }).exec()
+            // #endif
 						
-                //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
+            //不要这样  var query = uni.createSelectorQuery() query.in(this)放入循环里面会多次循环
             for(let i=0;i<this.scenicList.length;i++){
+              // #ifdef MP-WEIXIN
               uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
 							  //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
 							  if(data){
@@ -455,7 +493,38 @@ export default {
 							    }
 							  }
               }).exec()
+              // #endif
+						  // #ifdef MP-ALIPAY
+						  uni.createSelectorQuery().select(`#merchant${i}`).boundingClientRect(data => {
+						    //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
+						    if(data){
+						      if(i==0){
+						        //取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
+						        this.heightArr.push(parseInt(data.height))
+						      }else{
+						        this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
 						      }
+						    }
+						  }).exec()
+						  // #endif
+            }
+            uni.getSystemInfo({
+						  complete:(info)=> {
+                let windowHeight=info.windowHeight||844
+                // #ifdef MP-WEIXIN
+                uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
+								  if(data){
+								    this.scrollHeight=windowHeight-data.height-this.topHeight
+								  }
+                }).exec()
+                // #endif
+                // #ifdef MP-ALIPAY
+                uni.createSelectorQuery().select('.bottom').boundingClientRect(data => {
+                  if(data){
+                    this.scrollHeight=windowHeight-data.height-this.topHeight
+                  }
+                }).exec()
+                // #endif
 								
 						  }
             })
@@ -520,17 +589,20 @@ export default {
     //---商家下标切换
     merchantTabChange(index){
       //点击左边，全屏先置顶
-      this.toViewFull='middle'
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewFull='aaa'
+      // 数据更新后，视图的更新是异步的,防止点击无效
+      this.$nextTick(()=>{
+        this.toViewFull='middle-bottom'
+      })
       //点击左边，右边可滚动
       this.merchantIndex=index
       this.middleHeight=this.scrollHeight
-      //加个延时，防止第一次点击时元素样式还未更新，导致不滑动到对应元素
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewRight='aaa'
+      // 数据更新后，视图的更新是异步的,防止第一次点击无效
       this.$nextTick(()=>{
-        //this.$nextTick解决苹果手机
-        //settimeout解决安卓手机
-        setTimeout(()=>{
         this.toViewRight='merchant'+index
-        },100)
       })
     },
     //---展示明细弹窗
@@ -541,28 +613,33 @@ export default {
     scrollFull(e){
       setTimeout(()=>{
         let height=0
-        uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
+        let scrollTop=e.detail.scrollTop
+        let selectFun=(data)=>{
           if(data){
-				    //20=中间盒子top:-20的值
-				    // height=data.height-70
-            height=data.height-20
-            if(e.detail.scrollTop>=height){
+					  //20为中间盒子的top-20
+					  height=data.height+this.middleTopHeight-20-this.topHeight
+					  let opacity=scrollTop/(data.height)
+					  this.tabbarOpacity=parseFloat(opacity.toFixed(2))
+					  if(scrollTop>=height){
 					    //中间上部分固定，中间下部分可滚动，全屏不滚动
-              this.middleTopStyle='top:0;position:fixed;'
-              this.middleBottomStyle='margin-top:50px;'
 					    this.middleHeight=this.scrollHeight
-              this.showTransition=false
-              this.merchantTitle='组合购买更省钱'
+					    
 					  }else{
-              //中间上部分不固定，中间下部分不可滚动，全屏滚动
-              this.middleTopStyle='position:relative;'
-              this.middleBottomStyle='margin-top:0;'
+					    //中间上部分不固定，中间下部分不可滚动，全屏滚动'
 					    this.middleHeight=this.originHeight
-              this.showTransition=true
-              this.merchantTitle=this.scenicList[0].name
 					  }
           }
+        }
+        // #ifdef MP-WEIXIN
+        uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
+          selectFun(data)
+        }).exec()
+        // #endif
+        // #ifdef MP-ALIPAY
+        uni.createSelectorQuery().select('.banner').boundingClientRect(data => {
+          selectFun(data)
         }).exec()
+        // #endif
         
       },5)
     },
@@ -587,6 +664,15 @@ export default {
       },5)
 			 
     },
+    //---回到顶部
+    goTop(){
+      this.middleHeight=this.originHeight
+      //为了让scrollview能检测到滚动数据的变化
+      this.toViewFull='aaa'
+      this.$nextTick(()=>{
+        this.toViewFull='banner'
+      })
+    },
     //---导航
     navigation(merchant){
 		  uni.openLocation({
@@ -752,7 +838,7 @@ export default {
     onShareAppMessage(options) {
       let url='pages/combination/distributionCombiChoose/distributionCombiChoose'
       return {
-        title: '组合购买更优惠',
+        title: '组合购更便捷',
         path: `${url}?channelId=${this.channelId}&merchantId=${this.merchantId}&groupId=${this.groupId}&groupChannelId=${this.groupChannelId}&companyId=${this.companyId}`
       }
     }
@@ -838,11 +924,14 @@ export default {
 //中间下部分
 .middle-bottom{
 	display: flex;
+	background: #f7f7f7;
+	z-index: 1;
 }
 .scroll-left{
-	width: 130rpx;
 	flex-shrink: 0;
-	margin: 24rpx 24rpx 0 0;
+	padding: 12px 24rpx 0 0;
+	box-sizing: border-box;
+	width: 154rpx;
 }
 .middle-left{
 	font-size: 24rpx;
@@ -864,7 +953,7 @@ export default {
 }
 .merchantlist-wrap{
 	background: #f7f7f7;
-	padding-top: 24rpx;
+	padding-top:12px;
 }
 .merchantlist {
 	border-radius: 20rpx;
@@ -1055,9 +1144,7 @@ export default {
 	color: #ffffff;
 	font-weight: bold;
 	margin:0 10rpx;
-	
 }
-
 .bottom-btn {
 	display: inline-block;
 	width: 200rpx;
@@ -1078,4 +1165,23 @@ export default {
 	left: 0;
 	top: 0;
 }
+.tabbar{
+	background: #fff;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	opacity: 0;
+}
+.tabbar-title{
+	position: absolute;
+	bottom: 10px;
+	text-align: center;
+	display: flex;
+	width: 100%;
+	font-size: 32rpx;
+	font-weight: 500;
+	color: #000000;
+	padding: 0 24rpx;
+	justify-content: space-between;
+}
 </style>

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

@@ -620,7 +620,8 @@ export default {
 					  height=data.height+this.middleTopHeight-20-this.topHeight
 					  let opacity=scrollTop/(data.height)
 					  this.tabbarOpacity=parseFloat(opacity.toFixed(2))
-					  if(scrollTop>=height){
+            //下面值取整数，防止部分手机取值太多小数，出现抖动的bug
+					  if(parseInt(scrollTop)>=parseInt(height)){
 					    //中间上部分固定，中间下部分可滚动，全屏不滚动
 					    this.middleHeight=this.scrollHeight