Skip to content

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

组合票开发

parent ff3bbff8
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 100 deletions
pages/combination/distributionCombiChoose/distributionCombiChooseNew.vue
View file @ 61f8b5d0
......@@ -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
View file @ 61f8b5d0
......@@ -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
}
})
}
......
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