<template>
|
<view class="tcx">
|
<view class="tcx_bg" v-if="info">
|
<view class="index_box_vip_row">
|
<view class="vip1">
|
<text>{{info.name || ''}}</text>
|
<text>{{info.price || ''}}</text>
|
</view>
|
<view class="vip2">
|
<text>{{info.descs || ''}}</text>
|
<u>¥{{info.linePrice || ''}}</u>
|
</view>
|
<view class="vip3">
|
<view class="vip3_info">低至{{info.dayPrice}}元/天</view>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info_title">适用规则</view>
|
<view class="info_list">
|
<view class="info_list_row">
|
· 适用项目：<template v-if="info.isbike === 1">自行车</template>
|
<template v-if="info.isbike === 1 && info.iselecbike === 1"> | </template>
|
<template v-if="info.iselecbike === 1">电动车</template>
|
</view>
|
<view class="info_list_row">
|
· 适用范围：
|
<tempalte v-if="info.useHoliday === 1">节假日可用</tempalte>
|
<template v-if="info.useHoliday === 1 && info.useWorkday === 1"> | </template>
|
<tempalte v-if="info.useWorkday === 1">工作日可用</tempalte>
|
</view>
|
<view class="info_list_row">
|
· 生效时间：
|
<tempalte v-if="info.useType === 0">{{info.useStartDate}}至{{info.useEndDate}}内有效</tempalte>
|
<tempalte v-if="info.useType === 1">购买后生效，有效期{{info.useDays}}天</tempalte>
|
<tempalte v-if="info.useType === 2">自{{info.useStartDate}}起{{info.useDays}}天内有效</tempalte>
|
</view>
|
</view>
|
</view>
|
<view class="info">
|
<view class="info_title">套餐说明</view>
|
<view class="info_text">
|
<u-parse :content="info.content"></u-parse>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(96rpx + 20rpx + env(safe-area-inset-bottom));"></view>
|
</view>
|
<view class="tcx_footer" @click="jump">
|
<viwe class="tcx_footer_button">¥{{info.price || ''}} 购买套餐</viwe>
|
<view style="padding-bottom: env(safe-area-inset-bottom)"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
id: null,
|
info: null
|
};
|
},
|
onLoad(options) {
|
this.id = options.id
|
this.getDesc()
|
},
|
methods: {
|
async getDesc() {
|
let res = await this.$u.api.discountDetail({ id: this.id })
|
if (res.code === 200) {
|
this.info = res.data
|
}
|
},
|
jump() {
|
uni.navigateTo({
|
url: `/pages/paymentPage/paymentPage?id=${this.info.id}`
|
});
|
},
|
calculateDays(startDate, endDate) {
|
if (startDate && endDate) {
|
const start = new Date(startDate).getTime();
|
const end = new Date(endDate).getTime();
|
const days = (end - start) / (1000 * 3600 * 24) + 1;
|
return days;
|
};
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F7F7F7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.tcx {
|
width: 100%;
|
.tcx_bg {
|
width: 100%;
|
height: 400rpx;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(#01B6AD 0%, #F7F7F7 100%);
|
.index_box_vip_row {
|
width: 100%;
|
background: #FFFFFF;
|
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
|
border-radius: 12rpx;
|
padding: 24rpx;
|
box-sizing: border-box;
|
.vip1 {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #303030;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 40rpx;
|
color: #FF5A31;
|
&:before {
|
content: '￥';
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF5A31;
|
}
|
}
|
}
|
}
|
.vip2 {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
margin-top: 10rpx;
|
margin-bottom: 16rpx;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
u {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
text-decoration: line-through;
|
}
|
}
|
.vip3 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.vip3_info {
|
padding: 6rpx 12rpx;
|
box-sizing: border-box;
|
background: rgba(255,90,49,0.1);
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FF5A31;
|
}
|
}
|
}
|
.info {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin-top: 20rpx;
|
.info_title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #303030;
|
margin-bottom: 26rpx;
|
}
|
.info_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.info_list_row {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
.info_text {
|
width: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
.tcx_footer {
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
z-index: 999;
|
.tcx_footer_button {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
|
border-radius: 46rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
margin-bottom: 20rpx;
|
}
|
}
|
}
|
</style>
|
