130 lines
6.0 KiB
Vue
130 lines
6.0 KiB
Vue
<template>
|
|
<view class="waper" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
|
<u-navbar left-icon-size="0" :placeholder="true" bgColor="#fff">
|
|
<view slot='center' class="navbar_title">购票</view>
|
|
</u-navbar>
|
|
<view class="waper_box">
|
|
<view class="list_waper" v-for="(i, index) in list" :key="index" v-if="i.children.length > 0">
|
|
<view class="title">{{i.name}}</view>
|
|
<view class="content">
|
|
<navigator hover-class="none" :url="(item.classify == '3' ? '/pages/scenic/otherTick?id=' : '/pages/scenic/ticket?id=') + item.id" class="list" v-for="(item, itemIndex) in i.children" :key="itemIndex">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(item.image11)" mode=""></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="name">{{item.name}}</view>
|
|
<view class="tag">
|
|
<text v-if="item.refundRule == '0'">不可退</text>
|
|
<text v-if="item.refundRule == '3'">有效期可退</text>
|
|
<text v-if="item.refundRule == '4'">{{item.refundDay}}天内可退</text>
|
|
<text v-if="item.refundRule == '5'">未激活可退</text>
|
|
</view>
|
|
<view class="price-box">
|
|
<view :class="'discounts' + (item.salesRice > 0 ? '' : ' free')">{{item.salesRice > 0 ? item.salesRice.toFixed('2') : '免费'}}</view>
|
|
<view class="lineation" v-if="item.price && item.price > 0">￥{{item.price}}</view>
|
|
</view>
|
|
<view class="btn">购票</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tabbar name="ticketing"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/index.vue'
|
|
export default {
|
|
components: { tabbar },
|
|
data () {
|
|
return {
|
|
windowBottom: 0,
|
|
list: []
|
|
}
|
|
},
|
|
async onLoad () {
|
|
let info = uni.getSystemInfoSync();
|
|
this.windowBottom = info.windowBottom;
|
|
let group = await this.$http.groupList();
|
|
for (var i = 0; i < group.data.length; i ++) {
|
|
group.data[i].children = [];
|
|
}
|
|
this.list = group.data;
|
|
let scenicId = this.$scenicId;
|
|
if (!scenicId) {
|
|
let config = await this.$http.getConfigData()
|
|
scenicId = config.data.scenic.id || '1';
|
|
}
|
|
|
|
let ticket = await this.$http.ticketList({scenicId: scenicId});
|
|
var f;
|
|
ticket.data.forEach((e, i) => {
|
|
f = this.list.find(m => m.id == e.groupId);
|
|
if (f) {
|
|
f.children.push(e)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.waper_box{
|
|
width: 100%; box-sizing: border-box; padding: 24rpx 24rpx;
|
|
.list_waper{
|
|
width: 100%; margin-bottom: 40rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.title{
|
|
height: 46rpx; box-sizing: border-box; padding-left: 16rpx; position: relative; font-size: 32rpx; color: #333; font-weight: 500; line-height: 46rpx;
|
|
&::after{ content: ""; width: 6rpx; height: 28rpx; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 2rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
|
|
}
|
|
.content{
|
|
width: 100%; margin-top: 24rpx;
|
|
.list{
|
|
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 24rpx 24rpx 252rpx; position: relative; margin-bottom: 20rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.img{
|
|
width: 208rpx; height: 208rpx; position: absolute; left: 24rpx; top: 24rpx;
|
|
image{ border-radius: 10rpx; }
|
|
}
|
|
.info{
|
|
width: 100%; height: 208rpx; position: relative; box-sizing: border-box; padding-top: 16rpx;
|
|
.name{ line-height: 48rpx; color: #333; font-size: 32rpx; font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tag{
|
|
width: 100%; margin-top: 14rpx; display: flex; align-items: center; height: 36rpx;
|
|
text{
|
|
color: #FFA944; font-size: 24rpx; margin-right: 32rpx; position: relative;
|
|
&::after{ content: ""; width: 2rpx; height: 16rpx; background: #FFA944; position: absolute; right: -17rpx; top: 50%; transform: translateY(-50%); }
|
|
&:last-child{
|
|
margin-right: 0;
|
|
&::after{ width: 0; }
|
|
}
|
|
}
|
|
}
|
|
.price-box {
|
|
display: flex; align-items: baseline;
|
|
.discounts {
|
|
margin-top: 36rpx; line-height: 46rpx; color: #FF3333; font-size: 40rpx; font-weight: bold; box-sizing: border-box; padding-left: 24rpx; position: relative;
|
|
&::after{ content: "￥"; color: #FF3333; line-height: 34rpx; font-size: 24rpx; font-weight: 500; position: absolute; left: 0; bottom: 0; }
|
|
&.free{
|
|
padding-left: 0; font-size: 28rpx; margin-right: 10rpx;
|
|
&::after{ font-size: 0; }
|
|
}
|
|
}
|
|
.lineation {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #C8C8C8;
|
|
margin-left: 14rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
.btn { position: absolute; right: 0; bottom: 0; width: 178rpx; height: 64rpx; line-height: 64rpx; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 32rpx; text-align: center; font-size: 28rpx; color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |