first commit
This commit is contained in:
130
pages/tabbar/ticketing.vue
Normal file
130
pages/tabbar/ticketing.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user