组合票开发

pages/combination/distributionCombiChoose/distributionCombiChoose.vue

 <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
 <template>
 	<view class="wrap">
-		<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
+		<scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
 			<view class="banner">
 				<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
 						<view slot="indicator" class="indicator-num">
@@ -10,40 +10,45 @@
 				</u-swiper>
 			</view>
 			<view class="middle" id="middle">
+				<!-- 商家信息部分 -->
 				<view class="merchant-info" :style="middleInfoStyle">
 					<view class="merchant-name">
 						{{currentMerchant.name||''}}
 					</view>
-					<view class="merchant-info-bottom" :style="merchantBottomStyle" >
-						<view class="merchant-bottom-left">
-							<view>
-								<text v-if="showBusiness" style="color: #00B42B;">营业中</text>
-								<text v-if="showPauseBusiness" style="color:#F53F3F;">暂停营业</text>
-							</view>
-							<view>
-								{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
-								 {{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
-							</view>
-						</view>
-						<view class="merchant-bottom-right">
-							<view class="merchant-address">
-								{{currentMerchant.address||''}}
-							</view>
-							<view class="merchant-nav" @click="navigation(currentMerchant)">
-								<view class="merchant-bg">
-									<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
+					<u-transition :show="showTransition" :duration='800'>
+						<view class="merchant-info-bottom" >
+							<view class="merchant-bottom-left">
+								<view>
+									<text v-if="showBusiness" style="color: #00B42B;">营业中</text>
+									<text v-if="showPauseBusiness" style="color:#F53F3F;">暂停营业</text>
+								</view>
+								<view>
+									{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
+									 {{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
 								</view>
-								<view>导航</view>
 							</view>
-							<view class="merchant-phone" @click="makePhone(currentMerchant.phone)">
-								<view class="merchant-bg"> 
-									<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
+							<view class="merchant-bottom-right">
+								<view class="merchant-address">
+									{{currentMerchant.address||''}}
+								</view>
+								<view class="merchant-nav" @click="navigation(currentMerchant)">
+									<view class="merchant-bg">
+										<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
+									</view>
+									<view>导航</view>
+								</view>
+								<view class="merchant-phone" @click="makePhone(currentMerchant.phone)">
+									<view class="merchant-bg"> 
+										<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
+									</view>
+									<view>电话</view>
 								</view>
-								<view>电话</view>
 							</view>
 						</view>
-					</view>
+					</u-transition>
+					
 				</view>
+				<!-- 列表部分 -->
 				<view class="middle-bottom" :style="middleBottomStyle">
 					<scroll-view class="scroll-left" :style="{height:scrlllHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
 						<view class="middle-left">
@@ -222,15 +227,13 @@ export default {
       merchantIndex:0,//选中的商家下标
       middleHeight:0,//中间列表盒子高度
       heightArr:[],//元素高度数组
-      infoHeight:0,//middle-info盒子高度
       scrlllHeight:0,//中间盒子滚动时的高度
       originHeight:0,//中间盒子原本高度
       middleInfoStyle:'',//中间盒子上部分样式
       middleBottomStyle:'',//中间盒子下部分样式
-      merchantBottomStyle:'',//商家信息下部分样式
       toViewRight:'',//右边滚动到某个元素
       toViewLeft:'',//左边滚动到某个元素
-      toViewFull:'',//全屏滚动到某个元素
+      showTransition:true
     }
   },
   watch: {
@@ -438,8 +441,7 @@ export default {
 						    //获取中间盒子需要滚动时的高度
 						    uni.createSelectorQuery().in(this).select('.merchant-info').boundingClientRect(data => {
 						      if(data){
-						        this.infoHeight=data.height
-						        this.scrlllHeight=windowHeight-this.infoHeight
+						        this.scrlllHeight=windowHeight-data.height
 						      }
 						    }).exec()
                 //获取中间盒子原本高度
@@ -534,8 +536,7 @@ export default {
       setTimeout(()=>{
         this.merchantIndex=index
         this.toViewRight='merchant'+index
-        // this.toViewFull='middle'
-      },100)
+      },150)
     },
     //---展示明细弹窗
     showDetail() {
@@ -554,13 +555,13 @@ export default {
 						  this.middleInfoStyle='top:0;position:fixed;'
               this.middleHeight=this.scrlllHeight
               this.middleBottomStyle='margin-top:50px'
-              this.merchantBottomStyle='height:0;margin-top:0;'
+              this.showTransition=false
             }else{
               //商家不固定，中间不可滚动，全屏滚动
 						  this.middleInfoStyle='position:relative;'
               this.middleHeight=this.originHeight
               this.middleBottomStyle='margin-top:0'
-              this.merchantBottomStyle='height:auto;margin-top:12rpx;'
+              this.showTransition=true
             } 
 				  }
         }).exec()