Skip to content

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

组合票开发

parent 58795d6b
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 140 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 7fd96b13
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
<view class="wrap">
<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">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
</u-swiper>
</view>
<view class="middle" :style="{height:middleHeight+'px'}">
<view class="merchant-info">
<view class="merchant-name">
{{currentMerchant.name}}
</view>
<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):''}}
<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">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
</u-swiper>
</view>
<view class="middle">
<view class="merchant-info" :style="middleInfoStyle">
<view class="merchant-name">
{{currentMerchant.name}}
</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>
<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>
</view>
<view class="middle-bottom">
<!-- <scroll-view :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 class="middle-bottom" :style="middleBottomStyle">
<!-- <scroll-view :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>
</view>
<!-- </scroll-view> -->
<scroll-view @scroll="scroll" :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">
<view class="merchantlist">
<view class="merchantlist-title" @click="clikDetail(item.id)">
<view class="merchantlist-name">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="merchantlist-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="merchantlist-detail">
距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
</view>
</view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<view class="product" :class="{ on: items.ifChangeBg }">
<view class="product-left">
<checkbox
style="transform: scale(0.8)"
class="blue"
:disabled="items.status == 2"
:value="JSON.stringify(items)"
:checked="items.ifChecked"
/>
<!-- </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">
<view class="merchantlist">
<view class="merchantlist-title" @click="clikDetail(item.id)">
<view class="merchantlist-name">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="merchantlist-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="merchantlist-detail">
距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
</view>
<view class="product-right">
<view class="product-name">
<text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<view class="product-rule">
<text>随买随用</text>
<template v-if="items.productRefundRuleVo">
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template>
<text> 无需取票 </text>
</view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<view class="product" :class="{ on: items.ifChangeBg }">
<view class="product-left">
<checkbox
style="transform: scale(0.8)"
class="blue"
:disabled="items.status == 2"
:value="JSON.stringify(items)"
:checked="items.ifChecked"
/>
</view>
<view class="product-price">
<view style="display: flex;">
<text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
<view class="product-right">
<view class="product-name">
<text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<view class="product-rule">
<text>随买随用</text>
<template v-if="items.productRefundRuleVo">
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template>
<text> 无需取票 </text>
</view>
<view class="product-sell">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
<view class="product-price">
<view style="display: flex;">
<text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view class="product-sell">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
</view>
</view>
</view>
</view>
</label>
</view>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view>
</label>
</view> -->
</view>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view>
</view> -->
</checkbox-group>
<view class="no-more">
已经到底啦
</view>
</checkbox-group>
<view class="no-more">
已经到底啦
<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
</view>
<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
</view>
</scroll-view>
</view>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</scroll-view>
</view>
</view>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<text class="bottom-three"></text>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;">已选产品 </text>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
<u-icon name="arrow-up" size="32"></u-icon>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<text class="bottom-three"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;">已选产品 </text>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
<u-icon name="arrow-up" size="32"></u-icon>
</view>
</view>
<view class="bottom-right">
<text class="bottom-btn" @click="goFillorder()">去预定</text>
</view>
</view>
<view class="bottom-right">
<text class="bottom-btn" @click="goFillorder()">去预定</text>
</view>
</view>
</scroll-view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
......@@ -213,12 +215,14 @@ export default {
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
middleHeight:3000,//中间列表盒子高度
heightArr:[],//元素高度数组
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
showBusiness:false,//用于是否显示营业中
showPauseBusiness:false,//用于显示暂停营业
middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式
}
},
watch: {
......@@ -423,13 +427,13 @@ export default {
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('.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 => {
......@@ -513,10 +517,38 @@ export default {
showDetail() {
this.$refs.detail.showPop = true
},
//---全屏滚动
scrollFull(e){
setTimeout(()=>{
let height=0
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
if(data){
//20=中间盒子top:-20的值
height=data.height-20
if(e.detail.scrollTop>height){
this.middleInfoStyle='top:0;position:fixed;'
this.middleBottomStyle='margin-top:240rpx'
this.middleHeight=600
}else{
this.middleInfoStyle='position:relative;'
this.middleBottomStyle='margin-top:0'
this.middleHeight=3000
}
}
}).exec()
},5)
},
//---右边滚动事件
scroll(e) {
scrollRight(e) {
setTimeout(()=>{
let scrollTop=e.detail.scrollTop
if(scrollTop==0){
//当滑到顶部时，上面固定元素还原
this.middleInfoStyle='position:relative;'
this.middleBottomStyle='margin-top:0'
this.middleHeight=3000
}
//通过滚动值获取下标
this.heightArr.forEach((item,i)=>{
if(i==0){
......@@ -531,7 +563,7 @@ export default {
}
}
})
},100)
},5)
},
//---导航
navigation(merchant){
......@@ -714,13 +746,16 @@ export default {
.middle {
padding-bottom: 100rpx;
position: relative;
top: -80rpx;
top: -20px;
}
// 中间上部分
.merchant-info{
width: 100%;
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding: 12rpx 20rpx 20rpx 20rpx;
z-index: 1;
transition: 0.6s;
}
.merchant-name{
font-size: 36rpx;
......
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