组合票首页开发

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

@@ -45,14 +45,14 @@
 					</view>
 				</view>
 				<view class="middle-bottom" :style="middleBottomStyle">
-					<!-- <scroll-view :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> -->
+					<scroll-view class="scroll-left" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
 						<view class="middle-left">
 							<view :id="'merchant-tab'+index" 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-view @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
+					</scroll-view>
+					<scroll-view  @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
 						<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">
@@ -215,7 +215,7 @@ export default {
       showModal: false, //是否显示模态框
       chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
       merchantIndex:0,//选中的商家下标
-      middleHeight:3000,//中间列表盒子高度
+      middleHeight:0,//中间列表盒子高度
       heightArr:[],//元素高度数组
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
@@ -223,6 +223,7 @@ export default {
       showPauseBusiness:false,//用于显示暂停营业
       middleInfoStyle:'',//中间盒子上部分样式
       middleBottomStyle:'',//中间盒子下部分样式
+      infoHeight:0,//middle-info盒子高度
     }
   },
   watch: {
@@ -388,10 +389,12 @@ export default {
               let endNumber=parseInt(this.$commonjs.changeTime(item.businessEnd))||0
               if(startNumber<nowNumber<endNumber){
                 this.showBusiness=true
+                this.showPauseBusiness=false
               }
               //由于暂停营业有多种情况，所以另外用一个字段来区分显示隐藏
               if(nowNumber<startNumber||nowNumber>endNumber){
                 this.showPauseBusiness=true
+                this.showBusiness=false
               }
 		        } else {
 		          // item.productListCopy = item.productList.slice(0, 2)不要更多，暂时注释
@@ -422,18 +425,18 @@ export default {
           this.$nextTick(() => {
             //清空数组
             this.heightArr=[]
-            let bannerHeight=0
             uni.getSystemInfo({
 						  complete:(info)=> {
                 let windowHeight=info.windowHeight||753
 						    //获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
-						    // uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
-                //         //获取中间盒子的高度
-						    //   if(data){
-						    //     bannerHeight=data.height
-						    //     this.middleHeight=windowHeight-bannerHeight
-						    //   }
-						    // }).exec()
+						    uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
+                  //获取中间盒子的高度
+						      if(data){
+						        this.infoHeight=data.height
+						        this.xxx=windowHeight-this.infoHeight
+                    this.middleHeight=3000
+						      }
+						    }).exec()
                 //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() 
                 for(let i=0;i<this.scenicList.length;i++){
                   uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
@@ -511,6 +514,8 @@ export default {
     //---商家下标切换
     merchantTabChange(index){
       this.merchantIndex=index
+      //点击右边可滚动
+      this.middleHeight=this.xxx
       this.toViewRight='merchant'+index
     },
     //---展示明细弹窗
@@ -527,8 +532,8 @@ export default {
 				    height=data.height-20
             if(e.detail.scrollTop>height){
 						  this.middleInfoStyle='top:0;position:fixed;'
-						  this.middleBottomStyle='margin-top:240rpx'
-						  this.middleHeight=600
+						  this.middleBottomStyle=`margin-top:${this.infoHeight}px`
+              this.middleHeight=this.xxx
             }else{
 						  this.middleInfoStyle='position:relative;'
 						  this.middleBottomStyle='margin-top:0'
@@ -815,12 +820,13 @@ export default {
 //中间下部分
 .middle-bottom{
 	display: flex;
-	margin-top: 24rpx;
 }
-.middle-left{
+.scroll-left{
 	width: 130rpx;
 	flex-shrink: 0;
-	margin-right: 24rpx;
+	margin: 24rpx 24rpx 0 0;
+}
+.middle-left{
 	font-size: 24rpx;
 	background: #ffffff;
 	border-radius: 0 20rpx 20rpx 0;