组合票优化

pages.json

@@ -54,7 +54,8 @@
 			"path": "pages/combination/distributionCombiChoose/distributionCombiChoose",
 			"style": {
 				"navigationBarTitleText": "产品选择",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		},
 		{

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-into-view="toViewFull" 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">
@@ -13,10 +13,10 @@
 				<!-- 中间上面部分 -->
 				<view class="middle-top" :style="middleTopStyle">
 					<view class="merchant-name">
-						{{merchantTitle||''}}
+						{{currentMerchant.name||''}}
 					</view>
 					<u-transition :show="showTransition" :duration='600'>
-						<view class="merchant-info-bottom" >
+						<view class="merchant-info-bottom" id='info-bottom' >
 							<view class="merchant-bottom-left">
 								<view>
 									<text style="color: #00B42B;">营业时间</text>
@@ -95,7 +95,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>
@@ -188,6 +188,14 @@
 				</view>
 			</view>
 		</u-popup>
+		<!-- 自定义导航栏 -->
+		<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
+			<view class="tabbar-title">
+				<u-icon name="arrow-left" color="#333333" size="48"></u-icon>
+				<text>选择产品</text>
+				<text></text>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -207,7 +215,6 @@ export default {
   },
   data() {
     return {
-      merchantTitle:'',//商家标题
       currentMerchant:'',//当前入口商家信息
       showTip:false,//系统调不通或者崩了跳出弹窗
       detailData:'',//详情数据
@@ -228,14 +235,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,//导航栏透明度
     }
   },
   watch: {
@@ -295,21 +305,24 @@ 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//整个上部分总高度
   },
   onShow() {
-    //如果是索道
-    if(this.merchantId=='z0015605022691a5945bbe463141668c'){
-		  this.showSuodaoImg=true
-		  setTimeout(() => {
-		    this.showSuodaoImg = false
-		  }, 2500)
-    }
     //清空之前选中的数据以及状态
     this.detailData=''
     this.chooseProduct=[]
@@ -394,7 +407,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
@@ -426,11 +438,13 @@ export default {
             this.heightArr=[]
             uni.getSystemInfo({
 						  complete:(info)=> {
-                let windowHeight=info.windowHeight||753
+                let windowHeight=info.windowHeight||844
 						    //获取中间盒子需要滚动时的高度
 						    uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
 						      if(data){
-						        this.scrollHeight=windowHeight-data.height
+                    //40为middle的top-20值，还有middle-bottom盒子距离顶部的距离20
+                    this.middleTopHeight=data.height
+						        this.scrollHeight=windowHeight-data.height-40
 						      }
 						    }).exec()
                 //获取中间盒子原本高度
@@ -438,7 +452,7 @@ export default {
 								  //获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
 								  if(data){
 								    this.originHeight=data.height
-                    this.middleHeight=this.originHeight
+                    this.middleHeight=data.height
 								  }
                 }).exec()
 								
@@ -541,25 +555,18 @@ export default {
     scrollFull(e){
       setTimeout(()=>{
         let height=0
+        let scrollTop=e.detail.scrollTop
         uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
 				  if(data){
-				    //20=中间盒子top:-20的值
-				    // height=data.height-70
-            height=data.height-20
-            if(e.detail.scrollTop>=height){
-              //中间上部分固定，中间下部分可滚动，全屏不滚动
-              this.middleTopStyle='top:0;position:fixed;'
-              this.middleBottomStyle='margin-top:50px;'
+            //middleTopHeight中间盒子上部分高度，topHeight为顶部导航栏和状态栏高度和，20为中间盒子的top-20
+            height=data.height+this.middleTopHeight-this.topHeight-20
+            this.tabbarOpacity=scrollTop/(data.height-this.topHeight)
+            if(scrollTop>=height){
+            //中间上部分固定，中间下部分可滚动，全屏不滚动
               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
             } 
 				  }
         }).exec()
@@ -838,6 +845,8 @@ export default {
 //中间下部分
 .middle-bottom{
 	display: flex;
+	background: #f7f7f7;
+	z-index: 1;
 }
 .scroll-left{
 	width: 130rpx;
@@ -1078,4 +1087,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>