Skip to content

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

联票样式处理

parent 658b92e3
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 325 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ d467d949
......@@ -10,143 +10,77 @@
</u-swiper>
</view>
<view class="middle">
<!-- <view class="tabbar" :style="tabbarObj">
<text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }">
{{ item }}
</text>
</view> -->
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
<swiper-item class="swiper-item">
<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>
<view class="product-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" v-if="items.productRefundRuleVo">
<!-- 索道写死 -->
<!-- <text v-if="item.id=='z0015605022691a5945bbe463141668c'">
有条件退
</text>
<template v-else>
<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 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-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view>
</view>
</view>
</view>
</label>
<view class="detail">
</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 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-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>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</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>
</checkbox-group>
<!-- <u-empty text="空空如也..." mode="list" v-if="scenicList.length == 0" width="320" height="320"></u-empty> -->
</swiper-item>
<!-- <swiper-item class="swiper-item">
<u-waterfall v-model="albumList" class="waterfall" style="padding-top: 8rpx;">
<template v-slot:left="{leftList}">
<view v-for="(item, index) in leftList" :key="index" class="album-left" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
<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="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
<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>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view v-for="(item, index) in rightList" :key="index" class="album-right" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
<text class="product-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view>
</view>
</view>
</template>
</u-waterfall>
</swiper-item>
</view>
</label>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item> -->
</swiper>
<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>
</checkbox-group>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view>
<view class="bottom">
......@@ -223,9 +157,6 @@ export default {
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList:[], //景区数据
......@@ -235,7 +166,6 @@ export default {
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
swiperHeight: 0 ,//swiper高度
tabbarObj:'',
albumList: [{
title: '精彩瞬间',
count: '10W+',
......@@ -454,9 +384,6 @@ export default {
}
})
})
this.$nextTick(() => {
this.countSwiper()
})
} else {
uni.showToast({
title: res.message,
......@@ -526,21 +453,6 @@ export default {
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
if(index==1){
this.countSwiper('waterfall')
}
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
},
//---展示客服组件
showCustomer() {
this.$refs.customer.showPop = true
......@@ -555,30 +467,16 @@ export default {
this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId)
},
//计算swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
if(data){
this.swiperHeight=data.height+20
}
}).exec()
})
},
//---展示更多产品
showMoreProduct(item) {
item.productListCopy = item.productList
this.$forceUpdate()
this.countSwiper()
},
//---收起产品
retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate()
this.countSwiper()
},
//---多选框变化
checkboxChange(e) {
......@@ -698,36 +596,7 @@ export default {
})
}
}
},
//---跳转影集页面
goAlbum(index){
if(index==0){
let data={
openid: uni.getStorageSync('openid')||''
}
this.$request('wechatUser/pdFace/checkScanFace',data).then(res => {
if (res.code === '00') {
let merchantId = this.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
if (res.data.isScanFace == 0) { //未扫脸
uni.navigateTo({
url:`/pages/album/getPortrait?merchantId=${merchantId}`
})
} else if (res.data.isScanFace == 1) { //已扫脸
let faceIds = JSON.stringify(res.data.faceIds)
let companyId = this.companyId
uni.navigateTo({
url: `/pages/album/myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
},
}
}
}
</script>
......@@ -743,39 +612,6 @@ export default {
padding: 0 24rpx 100rpx 24rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
position: relative;
top: -40rpx;
}
.tabbar {
transition:1s;
width: 100%;
left: 0;
z-index: 1;
position: relative;
top: -40rpx;
background: #fff;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
border-radius: 16rpx;
display: flex;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
}
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant {
border-radius: 16rpx;
......@@ -956,57 +792,10 @@ export default {
font-size: 32rpx;
width: 200rpx;
}
//摄影、旅拍
.album-left{
margin:8rpx 6rpx 0 0;
}
.album-right{
margin: 8rpx 0 0 6rpx;
}
.album-list-top image {
width: 100%;
}
.album-list-bottom{
border-radius: 0 0 16rpx 16rpx;
position: relative;
top: -4px;
padding: 20rpx 16rpx;
color: #fff;
view:first-child{
font-weight: bold;
}
view:nth-child(2){
font-size: 24rpx;
margin-top: 16rpx;
}
view:nth-child(3){
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
}
.album-btn{
display: flex;
width: 160rpx;
height: 44rpx;
background: #E1E1D9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 22rpx;
color: #333333;
align-items: center;
justify-content: center;
padding-left: 8rpx;
}
.suodaoImg{
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
}
</style>
pages/my/order/jointElectronicTicket/jointElectronicTicket.vue
View file @ d467d949
......@@ -2,8 +2,8 @@
<view class="wrap">
<!-- 联票电子门票 -->
<view class="top">
<text class="one-txt-cut">
{{orderInfo.productName}}
<text>
{{orderInfo.productName}}X{{orderInfo.orderNum}}份
</text>
<text>
¥{{orderInfo.totalMoney}}
......@@ -14,7 +14,7 @@
<view class="productInfo" v-for="(item,index) in orderInfo.childs" :key="index">
<view class="product-top">
<view class="product-name">
<text class="one-txt-cut">{{item.productName}}</text>
<text>{{item.productName}}</text>
<text>{{item.orderStatus|orderStatus}}</text>
</view>
<view class="product-datetime">
......@@ -49,7 +49,7 @@
<!-- 等于1为需要排号的景区 -->
<view class="product-number" v-if="item.showSortInfo==true" v-for="(item2,a) in item.sorts" :key='a'>
<!-- 1可进入等候区 -->
<view v-if="item2.sortFair==1" style="background: #31AA6B;color: #ffffff;">
<view v-if="item2.sortFair==1" style="background: #31AA6B;color: #ffffff;border: none;">
<view class="my-number" >
<view>
<view>我的排队号</view>
......@@ -63,7 +63,7 @@
<view class="current-number">
当前排队区间<text>{{item2.showStart}}-{{item2.showEnd}}</text>号
</view>
<view class="number-notice" style="color: #ffffff;">
<view class="number-notice" style="color: #9ed9ba;">
<view>
温馨提示：{{item2.config.paRowNumHint}}
</view>
......@@ -175,14 +175,14 @@
<!-- 后端返回了二维码才显示下面内容 -->
<view class="product-code" v-if="item.orderTicketDetailList.length>0&&item.orderTicketDetailList[0].verifyCode">
<view class="code-title">
凭「身份证」或「入园码」直接入园
凭「入园码」直接入园
</view>
<view class="code-image">
<image :src="item.codeImage"></image>
</view>
<view class="code-number">
<text>
数字码:{{item.orderTicketDetailList[0].verifyCode}}
{{item.orderTicketDetailList[0].verifyCode}}
</text>
<text @click="copyText(item.orderTicketDetailList[0].verifyCode)">
复制
......@@ -209,7 +209,7 @@
<view class="rufundRule">
<!-- 等于3退票规则以子订单为准 -->
<template v-if="orderInfo.isRefund==3">
<view style="padding: 32rpx;" v-if="orderInfo.isRefund==3">
<view v-for="(item,index) in orderInfo.childs" :key="index" >
<view class="rule-title">
{{item.productName}}退改规则
......@@ -250,9 +250,9 @@
</view>
</view>
</view>
</template>
</view>
<!-- 不等于3退票规则以主订单为准 -->
<template v-else>
<view style="padding: 32rpx;" v-else>
<view class="rule-title">
退改规则
</view>
......@@ -291,10 +291,10 @@
</view>
</view>
</template>
</view>
<view class="rule-service" @click="makePhone('4000720368')">
<u-icon name='kefu-ermai'></u-icon>
联系客服
<text style="margin-left: 12rpx;">联系客服</text>
</view>
</view>
<view class="orderInfo">
......@@ -305,7 +305,9 @@
<view>
<text style="flex-shrink: 0;">订单编号</text>
<view class="order-id">
<text class="one-txt-cut" style="flex: 1;">{{orderInfo.id?orderInfo.id.substr(0,8)+"****"+orderInfo.id.substr(orderInfo.id.length-8,8):''}}</text>
<text class="one-txt-cut" style="flex: 1;text-align: right;">
{{orderInfo.id?orderInfo.id.substr(0,8)+"****"+orderInfo.id.substr(orderInfo.id.length-8,8):''}}
</text>
<text class="order-btn">复制</text>
</view>
</view>
......@@ -613,8 +615,7 @@ export default {
refundTime = orderInfo.playDate+' '+item2.refundTime
}
let refundTimeNumber=new Date(refundTime.replace(/-/g, '/')).getTime()
//refundDateType退款时间0之前1之后2至（用于区间）
// refundDateType退款时间0之前,1至(用于区间),2之后
if(item2.refundDateType==0){
if(nowTimeNumber<refundTimeNumber){
this.subRefundBtn=true
......@@ -625,23 +626,23 @@ export default {
}
}
if(item2.refundDateType==1){
if(nowTimeNumber>refundTimeNumber){
this.subRefundBtn=true
//增加字段用于弹窗展示该产品是否可退
item.ifRefund=true
}else{
this.subRefundBtn=false
}
let refundEndTime=''
if(item2.refundDay){
let playDate = this.getNewDate(orderInfo.playDate,-item2.refundDay)
refundEndTime = playDate+' '+item2.refundEndTime
}else{
refundEndTime = orderInfo.playDate+' '+item2.refundEndTime
}
if(refundTime<nowTime<refundEndTime){
this.subRefundBtn=true
//增加字段用于弹窗展示该产品是否可退
item.ifRefund=true
}else{
this.subRefundBtn=false
}
}
if(item2.refundDateType==2){
let refundEndTime=''
if(item2.refundDay){
let playDate = this.getNewDate(orderInfo.playDate,-item2.refundDay)
refundEndTime = playDate+' '+item2.refundEndTime
}else{
refundEndTime = orderInfo.playDate+' '+item2.refundEndTime
}
if(refundTime<nowTime<refundEndTime){
if(nowTimeNumber>refundTimeNumber){
this.subRefundBtn=true
//增加字段用于弹窗展示该产品是否可退
item.ifRefund=true
......@@ -654,7 +655,6 @@ export default {
}
}
})
console.log(this.orderInfo.childs)
}else{
// 退票规则以主订单为准
if(orderInfo.orderStatus==2||orderInfo.orderStatus==7){
......@@ -696,26 +696,27 @@ export default {
}
}
if(item.refundDateType==1){
if(nowTimeNumber>refundTimeNumber){
this.mainRefundBtn=true
}else{
this.mainRefundBtn=false
}
let refundEndTime=''
if(item.refundDay){
let playDate = this.getNewDate(orderInfo.playDate,-item.refundDay)
refundEndTime = playDate+' '+item.refundEndTime
}else{
refundEndTime = orderInfo.playDate+' '+item.refundEndTime
}
if(refundTime<nowTime<refundEndTime){
this.mainRefundBtn=true
}else{
this.mainRefundBtn=false
}
}
if(item.refundDateType==2){
let refundEndTime=''
if(item.refundDay){
let playDate = this.getNewDate(orderInfo.playDate,-item.refundDay)
refundEndTime = playDate+' '+item.refundEndTime
}else{
refundEndTime = orderInfo.playDate+' '+item.refundEndTime
}
if(refundTime<nowTime<refundEndTime){
if(nowTimeNumber>refundTimeNumber){
this.mainRefundBtn=true
}else{
this.mainRefundBtn=false
}
}
}
})
}
......@@ -1020,17 +1021,20 @@ export default {
margin-top: 20rpx;
background: #ffffff;
border-radius: 16rpx;
padding: 40rpx 32rpx 32rpx 32rpx;
padding: 40rpx 0 32rpx 0;
}
.product-refund-detail{
display: flex;
justify-content: space-between;
padding: 20rpx 0;
padding: 20rpx 32rpx;
border-bottom: 1px solid #EDEDED;
}
.product-refund-list view{
margin-top: 10rpx;
}
.product-top{
padding: 0 32rpx;
}
.product-name{
display: flex;
justify-content: space-between;
......@@ -1055,13 +1059,14 @@ export default {
}
}
.product-number{
padding: 0 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
border: 1px solid #dcdcdc;
margin-top: 20rpx;
>view{
padding: 32rpx;
border-radius: 16rpx;
border: 1px solid #dcdcdc;
}
}
.my-number{
......@@ -1122,7 +1127,7 @@ export default {
}
.code-title{
margin-top: 40rpx;
font-size: 32rpx;
font-size: 36rpx;
font-weight: 600;
}
.code-number{
......@@ -1162,7 +1167,6 @@ export default {
// 退票规则
.rufundRule{
background: #ffffff;
padding: 32rpx;
border-radius: 16rpx;
margin-top: 20rpx;
}
......@@ -1181,12 +1185,12 @@ export default {
}
}
.rule-list{
margin: 30rpx 0;
margin-top:30rpx;
}
.rule-service{
display: flex;
align-items: center;
padding-top: 36rpx;
padding: 36rpx 0;
justify-content: center;
border-top: 1px solid #EBEEF5;
}
......@@ -1226,6 +1230,7 @@ export default {
border-radius: 20rpx;
font-size: 24rpx;
margin-left: 20rpx;
color: #333333;
}
.bottom{
position: fixed;
......@@ -1238,7 +1243,7 @@ export default {
display: flex;
align-items: center;
padding: 0 40rpx;
justify-content: space-around;
justify-content:flex-end;
text{
display: inline-block;
width: 170rpx;
......@@ -1248,6 +1253,7 @@ export default {
text-align: center;
line-height: 60rpx;
color: #666666;
margin-left: 20rpx;
}
}
.subtitle{
......
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