Skip to content

U
uni-pdtravel
Commit dbfbb65d authored by 潘永坪's avatar 潘永坪
Browse files
Options

组合票优化

parent 96876d54
Show whitespace changes
Inline Side-by-side
Showing with 62 additions and 33 deletions
pages.json
View file @ dbfbb65d
......@@ -54,7 +54,8 @@
"path": "pages/combination/distributionCombiChoose/distributionCombiChoose",
"style": {
"navigationBarTitleText": "产品选择",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
......
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ dbfbb65d
<!-- 修改这个页面时，需要同步更新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){
//middleTopHeight中间盒子上部分高度，topHeight为顶部导航栏和状态栏高度和，20为中间盒子的top-20
height=data.height+this.middleTopHeight-this.topHeight-20
this.tabbarOpacity=scrollTop/(data.height-this.topHeight)
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
}
}
}).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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment