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页面的代码 --> <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="banner"> <scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular> <view class="banner">
<view slot="indicator" class="indicator-num"> <u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text> <view slot="indicator" class="indicator-num">
</view> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</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):''}}
</view> </view>
</u-swiper>
</view>
<view class="middle">
<view class="merchant-info" :style="middleInfoStyle">
<view class="merchant-name">
{{currentMerchant.name}}
</view> </view>
<view class="merchant-bottom-right"> <view class="merchant-info-bottom">
<view class="merchant-address"> <view class="merchant-bottom-left">
{{currentMerchant.address}} <view>
</view> <text v-if="showBusiness" style="color: #00B42B;">营业中</text>
<view class="merchant-nav" @click="navigation(currentMerchant)"> <text v-if="showPauseBusiness" style="color:#F53F3F;">暂停营业</text>
<view class="merchant-bg"> </view>
<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image> <view>
{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
{{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
</view> </view>
<view>导航</view>
</view> </view>
<view class="merchant-phone" @click="makePhone(currentMerchant.phone)"> <view class="merchant-bottom-right">
<view class="merchant-bg"> <view class="merchant-address">
<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image> {{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>
</view> </view>
</view> <view class="middle-bottom" :style="middleBottomStyle">
<view class="middle-bottom"> <!-- <scroll-view :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> -->
<!-- <scroll-view :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> --> <view class="middle-left">
<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}'>
<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}}
{{item.name}} </view>
</view> </view>
</view> <!-- </scroll-view> -->
<!-- </scroll-view> --> <scroll-view @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
<scroll-view @scroll="scroll" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y> <view class="middle-right">
<view class="middle-right"> <checkbox-group @change="checkboxChange" class="checkbox-box">
<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-wrap" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index"> <view class="merchantlist">
<view class="merchantlist"> <view class="merchantlist-title" @click="clikDetail(item.id)">
<view class="merchantlist-title" @click="clikDetail(item.id)"> <view class="merchantlist-name">
<view class="merchantlist-name"> <text>{{ item.name }}</text>
<text>{{ item.name }}</text> <template v-if="item.couponVoList && item.couponVoList.length > 0">
<template v-if="item.couponVoList && item.couponVoList.length > 0"> <image src="@/static/img/scenic/coupon.png"></image>
<image src="@/static/img/scenic/coupon.png"></image> <text class="merchantlist-coupon"> 劵惠 </text>
<text class="merchantlist-coupon"> 劵惠 </text> </template>
</template> </view>
</view>
<view v-if="showDistance" class="merchantlist-detail">
<view v-if="showDistance" class="merchantlist-detail"> 距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
距您{{ 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>
<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"
/>
</view> </view>
<view class="product-right"> </view>
<view class="product-name">
<text>{{ items.name }}</text> <label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text> <view class="product" :class="{ on: items.ifChangeBg }">
</view> <view class="product-left">
<view class="product-rule"> <checkbox
<text>随买随用</text> style="transform: scale(0.8)"
<template v-if="items.productRefundRuleVo"> class="blue"
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text> :disabled="items.status == 2"
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text> :value="JSON.stringify(items)"
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text> :checked="items.ifChecked"
</template> />
<text> 无需取票 </text>
</view> </view>
<view class="product-price"> <view class="product-right">
<view style="display: flex;"> <view class="product-name">
<text @click.stop="showBuyKnow(items)">购买须知</text> <text>{{ items.name }}</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon> <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>
<view class="product-sell"> <view class="product-price">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} <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> </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> </view>
</label> </view> -->
</view> </view>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2"> </checkbox-group>
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)"> <view class="no-more">
更多 已经到底啦
<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> -->
</view> </view>
</checkbox-group> <!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
<view class="no-more">
已经到底啦
</view> </view>
<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> --> </scroll-view>
</view> </view>
</scroll-view>
</view>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</view> </view>
<view class="bottom-middle"> <view class="bottom">
<view class="bottom-more" v-show="chooseProduct.length > 0"> <view class="bottom-left" @click="showCustomer()">
组合购更优惠 <u-icon name="chat" size="36"></u-icon>
<text class="bottom-three"></text> 客服
</view> </view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }"> <view class="bottom-middle">
<text style="margin-right: 10rpx;">已选产品 </text> <view class="bottom-more" v-show="chooseProduct.length > 0">
<text class="bottom-number"> 组合购更优惠
{{ chooseProduct.length }} <text class="bottom-three"></text>
</text> </view>
<u-icon name="arrow-up" size="32"></u-icon> <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> </view>
<view class="bottom-right"> </scroll-view>
<text class="bottom-btn" @click="goFillorder()">去预定</text>
</view>
</view>
<!-- 客服组件 --> <!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer> <customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 --> <!-- 购买须知 -->
...@@ -213,12 +215,14 @@ export default { ...@@ -213,12 +215,14 @@ export default {
showModal: false, //是否显示模态框 showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品 chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
merchantIndex:0,//选中的商家下标 merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度 middleHeight:3000,//中间列表盒子高度
heightArr:[],//元素高度数组 heightArr:[],//元素高度数组
toViewRight:'',//右边滚动到某个元素 toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素 toViewLeft:'',//左边滚动到某个元素
showBusiness:false,//用于是否显示营业中 showBusiness:false,//用于是否显示营业中
showPauseBusiness:false,//用于显示暂停营业 showPauseBusiness:false,//用于显示暂停营业
middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式
} }
}, },
watch: { watch: {
...@@ -423,13 +427,13 @@ export default { ...@@ -423,13 +427,13 @@ export default {
complete:(info)=> { complete:(info)=> {
let windowHeight=info.windowHeight||753 let windowHeight=info.windowHeight||753
//获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。 //获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => { // uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
//获取中间盒子的高度 // //获取中间盒子的高度
if(data){ // if(data){
bannerHeight=data.height // bannerHeight=data.height
this.middleHeight=windowHeight-bannerHeight // this.middleHeight=windowHeight-bannerHeight
} // }
}).exec() // }).exec()
//不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery() //不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery()
for(let i=0;i<this.scenicList.length;i++){ for(let i=0;i<this.scenicList.length;i++){
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => { uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
...@@ -513,10 +517,38 @@ export default { ...@@ -513,10 +517,38 @@ export default {
showDetail() { showDetail() {
this.$refs.detail.showPop = true 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(()=>{ setTimeout(()=>{
let scrollTop=e.detail.scrollTop 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)=>{ this.heightArr.forEach((item,i)=>{
if(i==0){ if(i==0){
...@@ -531,7 +563,7 @@ export default { ...@@ -531,7 +563,7 @@ export default {
} }
} }
}) })
},100) },5)
}, },
//---导航 //---导航
navigation(merchant){ navigation(merchant){
...@@ -714,13 +746,16 @@ export default { ...@@ -714,13 +746,16 @@ export default {
.middle { .middle {
padding-bottom: 100rpx; padding-bottom: 100rpx;
position: relative; position: relative;
top: -80rpx; top: -20px;
} }
// 中间上部分 // 中间上部分
.merchant-info{ .merchant-info{
width: 100%;
background: #ffffff; background: #ffffff;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
padding: 12rpx 20rpx 20rpx 20rpx; padding: 12rpx 20rpx 20rpx 20rpx;
z-index: 1;
transition: 0.6s;
} }
.merchant-name{ .merchant-name{
font-size: 36rpx; 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