Commit ff3bbff8 authored by 潘永坪's avatar 潘永坪

新组合票开发

parent b2cfec57
<!-- 修改这个页面时,需要同步更新combiChoose页面的代码 --> <!-- 修改这个页面时,需要同步更新combiChoose页面的代码 -->
<template> <template>
<view class="wrap"> <view class="wrap">
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y> <view class="banner">
<view class="banner"> <u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular> <view slot="indicator" class="indicator-num">
<view slot="indicator" class="indicator-num"> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text> </view>
</view> </u-swiper>
</u-swiper> </view>
</view> <view class="middle">
<view class="middle"> <view class="merchant-info">
<view class="merchant-info"> <view class="merchant-name">
<view class="merchant-name"> 长江索道
长江索道 </view>
<view class="merchant-info-bottom">
<view class="merchant-bottom-left">
<view>营业中</view>
<view>08:00-22:00</view>
</view> </view>
<view class="merchant-info-bottom"> <view class="merchant-bottom-right">
<view class="merchant-bottom-left"> <view class="merchant-address">
<view>营业中</view> 重庆市渝中区新华路
<view>08:00-22:00</view>
</view> </view>
<view class="merchant-bottom-right"> <view class="merchant-nav">
<view class="merchant-address"> <view class="merchant-bg">
重庆市渝中区新华路 <image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
</view> </view>
<view class="merchant-nav"> <view>导航</view>
<view class="merchant-bg"> </view>
<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image> <view class="merchant-phone">
</view> <view class="merchant-bg">
<view>导航</view> <image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view class="merchant-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 class="middle-bottom"> </view>
<view class="middle-bottom-left"> <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>
</view>
<scroll-view @scroll="scroll" style="height: 2000px;" scroll-y>
<view class="middle-bottom-right"> <view class="middle-bottom-right">
<checkbox-group @change="checkboxChange" class="checkbox-box"> <checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchantlist" v-for="(item, index) in scenicList" :key="index"> <view class="merchantlist" v-for="(item, index) in scenicList" :key="index">
...@@ -71,33 +73,34 @@ ...@@ -71,33 +73,34 @@
:checked="items.ifChecked" :checked="items.ifChecked"
/> />
</view> </view>
<view class="product-right"> <view class="product-right">
<view class="product-name"> <view class="product-name">
<text>{{ items.name }}</text> <text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</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>
<view class="product-price"> <view class="product-price">
<view style="font-size: 20rpx;display: flex;"> <view style="display: flex;">
<text class="product-rule" 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>
</text>
<text class="product-rule"> 无需取票 </text>
<text @click.stop="showBuyKnow(items)">购买须知</text> <text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon> <u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view> </view>
<view> <view class="product-sell">
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</label> </label>
<view class="product-more" v-if="index > 0 && item.productList.length > 2"> <!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)"> <view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多 更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon> <u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
...@@ -107,49 +110,48 @@ ...@@ -107,49 +110,48 @@
收起 收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon> <u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view> </view>
</view> </view> -->
</view> </view>
</checkbox-group> </checkbox-group>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view> </view>
</view> </scroll-view>
</view> </view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()"> </view>
<u-icon name="chat" size="36"></u-icon> <view class="bottom">
客服 <view class="bottom-left" @click="showCustomer()">
</view> <u-icon name="chat" size="36"></u-icon>
<view class="bottom-middle"> 客服
<view class="bottom-more" v-show="chooseProduct.length > 0"> </view>
组合购更优惠 <view class="bottom-middle">
<text class="bottom-three"></text> <view class="bottom-more" v-show="chooseProduct.length > 0">
</view> 组合购更优惠
<text class="bottom-three"></text>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;"> 明细 </text>
<u-icon name="arrow-up" size="32"></u-icon>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
</view>
</view> </view>
<view class="bottom-right"> <view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text class="btn" @click="goFillorder()">去预定</text> <text style="margin-right: 10rpx;"> 明细 </text>
<u-icon name="arrow-up" size="32"></u-icon>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
</view> </view>
</view> </view>
<!-- 客服组件 --> <view class="bottom-right">
<customer :scenicList="scenicList" ref="customer"></customer> <text class="btn" @click="goFillorder()">去预定</text>
<!-- 购买须知 --> </view>
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow> </view>
<!-- 产品明细 --> <!-- 客服组件 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail> <customer :scenicList="scenicList" ref="customer"></customer>
<!-- 商户详情 --> <!-- 购买须知 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail> <buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 模态框 --> <!-- 产品明细 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true"> <detail :chooseProduct="chooseProduct" ref="detail"></detail>
</u-modal> <!-- 商户详情 -->
</scroll-view> <merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image> <image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 --> <!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20"> <u-popup :show="showTip" :round="20">
...@@ -197,44 +199,7 @@ export default { ...@@ -197,44 +199,7 @@ export default {
chooseProduct: [], //选中的产品 chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框 showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时,选中的景区产品 chooseMerchantProduct: '', //不支持多产品购买时,选中的景区产品
swiperHeight: 0 ,//swiper高度 merchantIndex:0,//选中的商家下标
albumList: [{
title: '精彩瞬间',
count: '10W+',
image: '../static/scenic/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: '../static/scenic/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: '../static/scenic/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: '../static/scenic/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: '../static/scenic/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: '../static/scenic/customPic.png',
color: '#D48D46'
}
],
} }
}, },
watch: { watch: {
...@@ -392,7 +357,8 @@ export default { ...@@ -392,7 +357,8 @@ export default {
this.scenicList.unshift(item) this.scenicList.unshift(item)
item.productListCopy = item.productList item.productListCopy = item.productList
} else { } else {
item.productListCopy = item.productList.slice(0, 2) // item.productListCopy = item.productList.slice(0, 2)不要更多,暂时注释
item.productListCopy = item.productList
} }
//预订时间为当天时,当前时间大于最早预订时间显示未开售,当前时间大于最晚预订时间显示已售罄 //预订时间为当天时,当前时间大于最早预订时间显示未开售,当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss') let times = new Date().Format('hh:mm:ss')
...@@ -472,6 +438,10 @@ export default { ...@@ -472,6 +438,10 @@ export default {
} }
}) })
}, },
//---商家下标切换
merchantTabChange(index){
this.merchantIndex=index
},
//---展示明细弹窗 //---展示明细弹窗
showDetail() { showDetail() {
this.$refs.detail.showPop = true this.$refs.detail.showPop = true
...@@ -646,6 +616,7 @@ export default { ...@@ -646,6 +616,7 @@ export default {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
top: -40rpx; top: -40rpx;
flex: 1;
} }
// 中间上部分 // 中间上部分
.merchant-info{ .merchant-info{
...@@ -711,19 +682,31 @@ export default { ...@@ -711,19 +682,31 @@ export default {
//中间下部分 //中间下部分
.middle-bottom{ .middle-bottom{
display: flex; display: flex;
flex: 1;
} }
.middle-bottom-left{ .middle-bottom-left{
width: 128rpx; width: 128rpx;
margin-right: 24rpx; margin:24rpx 24rpx 0 0;
font-size: 24rpx;
background: #ffffff;
border-radius: 0 20rpx 20rpx 0;
}
.merchant-tab{
padding: 24rpx 16rpx;
}
.merchant-tab.on{
background: linear-gradient( 124deg, #FF9F00 0%, #FE6600 100%);
border-radius: 0px 20px 20px 0px;
color: #ffffff;
} }
.middle-bottom-right{ .middle-bottom-right{
flex: 1; flex: 1;
} }
.merchantlist { .merchantlist {
border-radius: 16rpx; border-radius: 20rpx;
background: #ffffff; background: #ffffff;
margin-top: 24rpx; margin-top: 24rpx;
padding: 24rpx; padding: 24rpx 0 0 24rpx;
} }
.merchantlist label{ .merchantlist label{
width: 100%; width: 100%;
...@@ -735,16 +718,14 @@ export default { ...@@ -735,16 +718,14 @@ export default {
.merchantlist label.off .product-name { .merchantlist label.off .product-name {
color: #999999; color: #999999;
} }
.merchantlist label.off .product-rule {
color: #999999;
}
.merchantlist-title { .merchantlist-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 16rpx; padding:0 24rpx 16rpx 0;
} }
.merchantlist-name { .merchantlist-name {
flex: 1;
font-size: 36rpx; font-size: 36rpx;
margin-right: 10rpx; margin-right: 10rpx;
font-weight: bold; font-weight: bold;
...@@ -766,12 +747,12 @@ export default { ...@@ -766,12 +747,12 @@ export default {
display: flex; display: flex;
} }
.product { .product {
padding:16rpx 16rpx 10rpx 16rpx; padding:24rpx 24rpx 24rpx 0;
background: #ffffff; background: #ffffff;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 10rpx; border-bottom: 1px solid #f5f5f5;
} }
.product.on { .product.on {
background: #e2eeff; background: #e2eeff;
...@@ -800,15 +781,12 @@ export default { ...@@ -800,15 +781,12 @@ export default {
top: 30rpx; top: 30rpx;
right: 80rpx; right: 80rpx;
} }
.product-price { .product-rule{
display: flex; font-size: 24rpx;
justify-content: space-between; color: #999999;
align-items: center; margin-top: 16rpx;
}
.product-rule {
color: $theme;
} }
.product-rule::after { .product-rule text:not(:last-child) ::after {
display: inline-block; display: inline-block;
content: ''; content: '';
height: 22rpx; height: 22rpx;
...@@ -816,6 +794,14 @@ export default { ...@@ -816,6 +794,14 @@ export default {
background: #ccc; background: #ccc;
width: 1px; width: 1px;
} }
.product-price{
display: flex;
margin-top: 10rpx;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
}
.product-sell { .product-sell {
font-size: 40rpx; font-size: 40rpx;
color: $red; color: $red;
......
...@@ -143,6 +143,7 @@ ...@@ -143,6 +143,7 @@
购物车 购物车
</view> </view>
</view> --> </view> -->
<!-- #ifdef MP-WEIXIN -->
<view class="middle3-list" @click="online()"> <view class="middle3-list" @click="online()">
<view> <view>
<image src="@/static/img/my/center/customer.png"></image> <image src="@/static/img/my/center/customer.png"></image>
...@@ -151,6 +152,7 @@ ...@@ -151,6 +152,7 @@
AI客服 AI客服
</view> </view>
</view> </view>
<!-- #endif -->
<view class="middle3-list" @click="goTravelNotes()"> <view class="middle3-list" @click="goTravelNotes()">
<view> <view>
<image src="@/static/img/my/center/mark.png"></image> <image src="@/static/img/my/center/mark.png"></image>
......
...@@ -1031,7 +1031,7 @@ export default { ...@@ -1031,7 +1031,7 @@ export default {
}, },
//---再次预订 //---再次预订
orderAgain(){ orderAgain(){
let query = '?merchantId='+this.orderInfo.merchantId+'&productId=' +this.orderInfo.id +'&orderSource=3' let query = '?merchantId='+this.orderInfo.merchantId+'&productId=' +this.orderInfo.productId +'&orderSource=3'
uni.navigateTo({ uni.navigateTo({
url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query
}) })
......
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