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

组合票首页面开发

parent 06d50525
......@@ -57,6 +57,13 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/combination/distributionCombiChoose/distributionCombiChooseNew",
"style": {
"navigationBarTitleText": "产品选择",
"enablePullDownRefresh": false
}
},
{
"path": "pages/combination/combiOrder/combiOrder",
"style": {
......
......@@ -24,13 +24,13 @@
重庆市渝中区新华路
</view>
<view class="merchant-nav">
<view>
<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">
<view>
<view class="merchant-bg">
<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view>电话</view>
......@@ -38,75 +38,82 @@
</view>
</view>
</view>
<checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchant" v-for="(item, index) in scenicList" :key="index">
<view class="merchant-title" @click="clikDetail(item.id)">
<view class="title-left">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="title-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="title-right">
距您{{ 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"
/>
</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 class="middle-bottom">
<view class="middle-bottom-left">
长江索道
</view>
<view class="middle-bottom-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchantlist" v-for="(item, index) in scenicList" :key="index">
<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 class="product-price">
<view style="font-size: 24rpx;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>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
<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"
/>
</view>
<view>
<text class="product-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
<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-price">
<view style="font-size: 20rpx;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>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view>
</view>
</view>
</view>
</label>
<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>
</view>
</label>
<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>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view>
</checkbox-group>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
......@@ -633,12 +640,14 @@ export default {
flex-direction: column;
background: #f7f7f7;
}
.middle {
padding: 0 24rpx 100rpx 24rpx;
padding-bottom: 100rpx;
display: flex;
flex-direction: column;
position: relative;
top: -40rpx;
}
// 中间上部分
.merchant-info{
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
......@@ -673,34 +682,70 @@ export default {
display: flex;
padding: 0 20rpx;
align-items: center;
background: url('@/static/img/combination/mapbg.png') no-repeat;
background-size: 100% 100%;
}
.merchant-address{
flex: 1;
font-size: 26rpx;
font-weight: 600;
}
.merchant-nav{
margin: 0 36rpx;
font-size: 20rpx;
text-align: center;
}
.merchant-phone{
font-size: 20rpx;
text-align: center;
}
.merchant-bg{
width: 52rpx;
height: 52rpx;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
//中间下部分
.middle-bottom{
display: flex;
}
.middle-bottom-left{
width: 128rpx;
margin-right: 24rpx;
}
.middle-bottom-right{
flex: 1;
}
.merchant {
.merchantlist {
border-radius: 16rpx;
background: #ffffff;
margin-top: 24rpx;
padding: 24rpx;
}
.merchant label{
.merchantlist label{
width: 100%;
}
.merchant label.off .product {
.merchantlist label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchant label.off .product-name {
.merchantlist label.off .product-name {
color: #999999;
}
.merchant label.off .product-rule {
.merchantlist label.off .product-rule {
color: #999999;
}
.merchant-title {
.merchantlist-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
}
.title-left {
font-size: 32rpx;
.merchantlist-name {
font-size: 36rpx;
margin-right: 10rpx;
font-weight: bold;
image {
......@@ -711,11 +756,11 @@ export default {
margin: 0 8rpx;
}
}
.title-coupon {
.merchantlist-coupon {
color: $red;
font-size: 24rpx;
}
.title-right {
.merchantlist-detail {
color: $grey;
font-size: 24rpx;
display: flex;
......@@ -738,7 +783,7 @@ export default {
flex: 1;
}
.product-name {
font-size: 28rpx;
font-size: 30rpx;
font-weight: bold;
color: #191919;
display: flex;
......@@ -771,11 +816,6 @@ export default {
background: #ccc;
width: 1px;
}
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
}
.product-sell {
font-size: 40rpx;
color: $red;
......
......@@ -197,7 +197,7 @@
</view>
</view>
<!-- 后端返回了二维码才显示下面内容 -->
<view class="product-code" v-if="item.orderTicketDetailList.length>0&&item.orderTicketDetailList[0].verifyCode">
<view class="product-code" v-if="item.orderTicketDetailList.length>0&&item.orderTicketDetailList[0].ticketCode">
<view class="code-title">
凭「入园码」直接入园
</view>
......@@ -206,9 +206,9 @@
</view>
<view class="code-number">
<text>
{{item.orderTicketDetailList[0].verifyCode}}
{{item.orderTicketDetailList[0].ticketCode}}
</text>
<text @click="copyText(item.orderTicketDetailList[0].verifyCode)">
<text @click="copyText(item.orderTicketDetailList[0].ticketCode)">
复制
</text>
</view>
......@@ -854,6 +854,7 @@ export default {
},
//---生成二维码
getCode(item){
//生成二维码码取值verifyCode,页面显示取值ticketCode--生成二维码比页面显示多一个TBD
let verifyCode=''
if(item.orderTicketDetailList.length>0){
verifyCode=item.orderTicketDetailList[0].verifyCode||''
......@@ -1036,7 +1037,6 @@ export default {
})
}
}
}
</script>
......
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