组合票开发

pages/combination/distributionCombiChoose/distributionCombiChooseNew.vue

@@ -7,8 +7,6 @@
 							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
 					</view>
 			</u-swiper>
-		</view>
-		<view class="middle">
 			<view class="merchant-info">
 				<view class="merchant-name">
 					长江索道
@@ -37,16 +35,17 @@
 					</view>
 				</view>
 			</view>
-			<view class="middle-bottom">
-				<view class="middle-bottom-left">
-					<view class="merchant-tab" v-for="(item,index) in 5" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
-						云端之眼观景台
+		</view>
+		<view class="middle" :style="{height:middleHeight+'px'}">
+			<view class="middle-left">
+				<view class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
+					{{item.name}}
 				</view>
 			</view>
-				<scroll-view @scroll="scroll" style="height: 2000px;" scroll-y>
-					<view class="middle-bottom-right">
+			<scroll-view @scroll="scroll" :style="{height:middleHeight+'px'}" :scroll-into-view="toView" scroll-y>
+				<view class="middle-right">
 					<checkbox-group @change="checkboxChange" class="checkbox-box">
-							<view class="merchantlist" v-for="(item, index) in scenicList" :key="index">
+						<view class="merchantlist" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
 							<view class="merchantlist-title" @click="clikDetail(item.id)">
 								<view class="merchantlist-name">
 									<text>{{ item.name }}</text>
@@ -117,8 +116,6 @@
 				</view>
 			</scroll-view>
 		</view>
-			
-		</view>
 		<view class="bottom">
 			<view class="bottom-left" @click="showCustomer()">
 				<u-icon name="chat" size="36"></u-icon>
@@ -200,6 +197,9 @@ export default {
       showModal: false, //是否显示模态框
       chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
       merchantIndex:0,//选中的商家下标
+      middleHeight:0,//中间列表盒子高度
+      heightArr:[],//元素高度数组
+      toView:'',//点击导航滚动到某个元素
     }
   },
   watch: {
@@ -382,6 +382,37 @@ export default {
 		          }
 		        })
 		      })
+          this.$nextTick(() => {
+            let bannerHeight=0
+            uni.getSystemInfo({
+						  success:(info)=> {
+                let windowHeight=info.windowHeight
+						    //获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
+						    uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
+                  //获取中间盒子的高度
+						      if(data){
+						        bannerHeight=data.height
+						        this.middleHeight=windowHeight-bannerHeight
+						      }
+						    }).exec()
+                //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
+                for(let i=0;i<this.scenicList.length;i++){
+                  uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
+                    //获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
+									  if(data){
+                      if(i==0){
+                        this.heightArr.push(data.height)
+                      }else{
+                        this.heightArr.push(data.height+this.heightArr[i-1])
+                      }
+									  }
+                  }).exec()
+                }
+                
+						  }
+            })
+            
+          })
 		    } else {
 		      uni.showToast({
 		        title: res.message,
@@ -441,6 +472,7 @@ export default {
     //---商家下标切换
     merchantTabChange(index){
       this.merchantIndex=index
+      this.toView='merchant'+index
     },
     //---展示明细弹窗
     showDetail() {
@@ -448,12 +480,21 @@ export default {
     },
     //---页面滚动事件
     scroll(e) {
-      if(e.detail.scrollTop>200){
-        //固定导航栏
-        this.tabbarObj='top:0;position:fixed;border-radius:0'
+      setTimeout(()=>{
+        //100是自己定义的一个值，根据这个值来控制该元素距离盒子下方的距离
+        let scrollTop=e.detail.scrollTop
+        this.heightArr.forEach((item,i)=>{
+          if(i==0){
+            if(0<=scrollTop&&scrollTop<item){
+						  this.merchantIndex=i
+            }
           }else{
-        this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
+            if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
+						  this.merchantIndex=i
             }
+          }
+        })
+      },100)
     },
     //---展示客服组件
     showCustomer() {
@@ -606,23 +647,15 @@ export default {
 <style lang="scss" scoped>
 .wrap {
 	height: 100%;
-	display: flex;
-	flex-direction: column;
 	background: #f7f7f7;
 }
-.middle {
-	padding-bottom: 100rpx;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	top: -40rpx;
-	flex: 1;
-}
-// 中间上部分
+// 商家部分
 .merchant-info{
 	background: #ffffff;
 	border-radius: 24rpx 24rpx 0 0;
 	padding: 20rpx;
+	position: relative;
+	top: -40rpx;
 }
 .merchant-name{
 	font-size: 36rpx;
@@ -680,16 +713,20 @@ export default {
 	justify-content: center;
 }
 //中间下部分
-.middle-bottom{
+.middle {
 	display: flex;
-	flex: 1;
+	padding-bottom: 100rpx;
+	position: relative;
+	top: -40rpx;
 }
-.middle-bottom-left{
+.middle-left{
 	width: 128rpx;
 	margin:24rpx 24rpx 0 0;
 	font-size: 24rpx;
 	background: #ffffff;
 	border-radius: 0 20rpx 20rpx 0;
+	height: 100%;
+	overflow-y: auto;
 }
 .merchant-tab{
 	padding: 24rpx 16rpx;
@@ -699,8 +736,11 @@ export default {
 	border-radius: 0px 20px 20px 0px;
 	color: #ffffff;
 }
-.middle-bottom-right{
+.middle-right{
 	flex: 1;
+	// height: 100%;
+	// overflow-y: auto;
+	margin-top: 24rpx;
 }
 .merchantlist {
 	border-radius: 20rpx;
@@ -708,6 +748,9 @@ export default {
 	margin-top: 24rpx;
 	padding: 24rpx 0 0 24rpx;
 }
+.middle-right view.merchantlist:first-child{
+	margin-top: 0;
+}
 .merchantlist label{
 	width: 100%;
 }
@@ -884,5 +927,7 @@ export default {
 	z-index: 9999;
 	width: 100%;
 	height: 100%;
+	left: 0;
+	top: 0;
 }
 </style>

pages/indexs/hghgIndex/hghgIndex.vue

@@ -22,7 +22,7 @@
 					<text>
 						开放时间：
 					</text>
-					{{openTime}}
+					{{openTime}}(18:00停止售票入馆)
 				</view>
 				<view>
 					<text>
@@ -56,7 +56,7 @@ export default {
     return {
       urlQuery:'',
       showKnow:false,
-      openTime:'09:00 - 18:00，闭馆前1小时（17:00）停止售票',//开放时间
+      openTime:'',//开放时间
       merchantId:'',//商户Id
     }
   },
@@ -97,7 +97,7 @@ export default {
 		          item.merchantChildTitleData.forEach(item2=> {
 		            if (item2.childTitleCode == '101001') {
 		              //开放时间
-		              this.openTime = item2.contentList[0].content||'09:00 - 18:00，闭馆前1小时（17:00）停止售票'
+		              this.openTime = item2.contentList[0].content
 		            }
 		          })
 		        }