Skip to content

J
jz_Travel
Commit b2cf7ff9 authored by 罗超's avatar 罗超
Browse files
Options

1

parent c4579df1
Hide whitespace changes
Inline Side-by-side
Showing with 516 additions and 476 deletions
pages/ticketCoupons/components/buyNotice.vue
View file @ b2cf7ff9
<template> <template>
<view class="buyNotice"> <view class="buyNotice">
<scroll-view scroll-y="true" style="width: 100%;height: 100%; padding: 44rpx 0;" @scroll="scroll"> <scroll-view
<view class="notice-box"> scroll-y="true"
<view class="base-info"> style="width: 100%; height: 100%; padding: 44rpx 0"
<image class="left" :src="coverImg" mode="aspectFill"></image> @scroll="scroll"
<view class="right"> >
<view class="name"> <view class="notice-box">
{{TicketData.TicketSubName}}({{TicketData.TicketName}}) <view class="base-info">
</view> <image class="left" :src="coverImg" mode="aspectFill"></image>
<view class="evaluate"> <view class="right">
<u-rate size="24rpx" inactive-color="#FFF" :current="score" active-icon="star" disabled active-color="#F8632F"></u-rate> <view class="name">
<view class="rate"> {{ TicketData.TicketSubName }}({{ TicketData.TicketName }})
{{score}} </view>
<text v-if="score===1||score===2||score===3||score===4||score===5">.0</text> <view class="evaluate">
</view> <u-rate
<view class="comment"> size="24rpx"
{{TicketData.CommentCount}}人评论 inactive-color="#FFF"
<u-icon name="arrow-down" color="#6E6E6E" size="24rpx"></u-icon> :current="score"
</view> active-icon="star"
</view> disabled
<view class="sell"> active-color="#F8632F"
已售{{TicketData.SaleCount}}票 ></u-rate>
</view> <view class="rate">
</view> {{ score }}
</view> <text
<view class="detail-info"> v-if="
<view class="ticket-title"> score === 1 ||
购买须知 score === 2 ||
<text class="ticket-title-bg"></text> score === 3 ||
</view> score === 4 ||
<view class="detail-info-item" v-if="TicketData.SubscribeTime"> score === 5
<view class="item-name"> "
可订时间 >.0</text
</view> >
<view class="item-desc"> </view>
{{TicketData.AllTime}} <view class="comment">
</view> {{ TicketData.CommentCount }}人评论
</view> <u-icon name="arrow-down" color="#6E6E6E" size="24rpx"></u-icon>
<view class="detail-info-item" v-if="TicketData.OutTicket"> </view>
<view class="item-name"> </view>
出票速度 <view class="sell"> 已售{{ TicketData.SaleCount }}票 </view>
</view> </view>
<view class="item-desc"> </view>
{{TicketData.OutTicket}} <view class="detail-info">
</view> <view class="ticket-title">
</view> 购买须知
<view class="detail-info-item" v-if="TicketData.ChangeTickets"> <text class="ticket-title-bg"></text>
<view class="item-name"> </view>
无需换票 <view class="detail-info-item" v-if="TicketData.SubscribeTime">
</view> <view class="item-name"> 可订时间 </view>
<view class="item-desc"> <view class="item-desc">
{{TicketData.ChangeTickets}} {{ TicketData.AllTime }}
</view> </view>
</view> </view>
<!-- 退票政策 --> <view class="detail-info-item" v-if="TicketData.OutTicket">
<view class="method" v-if="TicketData.ReturnPriceList"> <view class="item-name"> 出票速度 </view>
<view class="method-title"> <view class="item-desc">
<image class="title-bg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tuipiaozhengce-bg.png"></image> {{ TicketData.OutTicket }}
<view class="title-text">退票政策</view> </view>
</view> </view>
<view v-for="(item,index) in TicketData.ReturnPriceList" :key="index" v-if="TicketData.IsWorryFreeRefund===0" <view class="detail-info-item" v-if="TicketData.ChangeTickets">
class="tuipaio-item"> <view class="item-name"> 无需换票 </view>
<view class="tuipiao-name">{{item.title}}</view> <view class="item-desc">
<view class="tuipiao-desc">{{item.Dec}}</view> {{ TicketData.ChangeTickets }}
</view> </view>
<view v-for="(item,index) in TicketData.ConditionPriceList" :key="index" v-if="TicketData.IsWorryFreeRefund===1" </view>
class="tuipaio-item"> <!-- 退票政策 -->
<view class="tuipiao-name">{{item.title}}</view> <view class="method" v-if="TicketData.ReturnPriceList">
<view class="tuipiao-desc">{{item.Dec}}</view> <view class="method-title">
</view> <image
</view> class="title-bg"
<!-- 使用说明 --> src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tuipiaozhengce-bg.png"
<view class="use-desc"> ></image>
<view class="ticket-title"> <view class="title-text">退票政策</view>
使用说明 </view>
<text class="ticket-title-bg"></text> <view
</view> v-for="(item, index) in TicketData.ReturnPriceList"
<view class="zanwu" v-if="TicketData.UseInstructionsList.length===0||(TicketData.UseInstructionsList[0].title==''&&TicketData.UseInstructionsList[0].Dec=='')"> :key="index"
暂无 v-if="TicketData.IsWorryFreeRefund === 0"
</view> class="tuipaio-item"
<view v-for="(item,index) in TicketData.UseInstructionsList" :key="index" v-if="TicketData.UseInstructionsList.length>0"> >
<view class="detail-info-item"> <view class="tuipiao-name">{{ item.title }}</view>
<view class="item2-name" v-if="item.title"> <view class="tuipiao-desc">{{ item.Dec }}</view>
{{item.title}} </view>
</view> <view
<view class="item-desc" v-if="item.Dec"> v-for="(item, index) in TicketData.ConditionPriceList"
{{item.Dec}} :key="index"
</view> v-if="TicketData.IsWorryFreeRefund === 1"
</view> class="tuipaio-item"
</view> >
</view> <view class="tuipiao-name">{{ item.title }}</view>
<!-- 费用说明 --> <view class="tuipiao-desc">{{ item.Dec }}</view>
<view class="cost-desc"> </view>
<view class="ticket-title"> </view>
费用说明 <!-- 使用说明 -->
<text class="ticket-title-bg"></text> <view class="use-desc">
</view> <view class="ticket-title">
<view class="zanwu" v-if="TicketData.PriceInstructionsList.length===0||(TicketData.PriceInstructionsList[0].title==''&&TicketData.PriceInstructionsList[0].Dec=='')"> 使用说明
暂无 <text class="ticket-title-bg"></text>
</view> </view>
<view v-for="(item,index) in TicketData.PriceInstructionsList" :key="index" v-if="TicketData.PriceInstructionsList.length>0"> <view
<view class="detail-info-item"> class="zanwu"
<view class="item2-name" v-if="item.title"> v-if="
{{item.title}} TicketData.UseInstructionsList.length === 0 ||
</view> (TicketData.UseInstructionsList[0].title == '' &&
<view class="item-desc" v-if="item.Dec"> TicketData.UseInstructionsList[0].Dec == '')
{{item.Dec}} "
</view> >
</view> 暂无
</view> </view>
<view
</view> v-for="(item, index) in TicketData.UseInstructionsList"
<!-- 其他信息 --> :key="index"
<view class="other-desc" v-if="TicketData.OtherDescList.length>0"> v-if="TicketData.UseInstructionsList.length > 0"
<view class="ticket-title"> >
其他信息 <view class="detail-info-item">
<text class="ticket-title-bg"></text> <view class="item2-name" v-if="item.title">
</view> {{ item.title }}
<view class="zanwu" v-if="TicketData.OtherDescList.length===0||(TicketData.OtherDescList[0].title==''&&TicketData.OtherDescList[0].Dec=='')"> </view>
暂无 <view class="item-desc" v-if="item.Dec">
</view> {{ item.Dec }}
<view v-for="(item,index) in TicketData.OtherDescList" :key="index" v-if="TicketData.OtherDescList.length>0"> </view>
<view class="detail-info-item"> </view>
<view class="item2-name" v-if="item.title"> </view>
{{item.title}} </view>
</view> <!-- 费用说明 -->
<view class="item-desc" v-if="item.Dec"> <view class="cost-desc">
{{item.Dec}} <view class="ticket-title">
</view> 费用说明
</view> <text class="ticket-title-bg"></text>
</view> </view>
</view> <view
<view class="detail-btn"> class="zanwu"
<view class="price"> v-if="
<text class="price-pre">￥</text> TicketData.PriceInstructionsList.length === 0 ||
{{$utils.getretailer()==true? TicketData.HPriceB:TicketData.HPriceC}} (TicketData.PriceInstructionsList[0].title == '' &&
</view> TicketData.PriceInstructionsList[0].Dec == '')
<view class="btn" @click="success"> "
立即预订 >
</view> 暂无
</view> </view>
</view> <view
v-for="(item, index) in TicketData.PriceInstructionsList"
</view> :key="index"
</scroll-view> v-if="TicketData.PriceInstructionsList.length > 0"
>
</view> <view class="detail-info-item">
<view class="item2-name" v-if="item.title">
{{ item.title }}
</view>
<view class="item-desc" v-if="item.Dec">
{{ item.Dec }}
</view>
</view>
</view>
</view>
<!-- 其他信息 -->
<view class="other-desc" v-if="TicketData.OtherDescList.length > 0">
<view class="ticket-title">
其他信息
<text class="ticket-title-bg"></text>
</view>
<view
class="zanwu"
v-if="
TicketData.OtherDescList.length === 0 ||
(TicketData.OtherDescList[0].title == '' &&
TicketData.OtherDescList[0].Dec == '')
"
>
暂无
</view>
<view
v-for="(item, index) in TicketData.OtherDescList"
:key="index"
v-if="TicketData.OtherDescList.length > 0"
>
<view class="detail-info-item">
<view class="item2-name" v-if="item.title">
{{ item.title }}
</view>
<view class="item-desc" v-if="item.Dec">
{{ item.Dec }}
</view>
</view>
</view>
</view>
<view class="detail-btn">
<view class="price">
<text class="price-pre">￥</text>
{{
$utils.getretailer() == true
? TicketData.HPriceB
: TicketData.HPriceC
}}
</view>
<view class="btn" @click="success"> 立即预订 </view>
</view>
</view>
</view>
</scroll-view>
</view>
</template> </template>
<script> <script>
export default { export default {
components: { components: {},
props: {
}, coverImg: {
props: { type: String,
coverImg: { default: "",
type: String, },
default: ""
}, score: {
type: Number,
score: { default: 1,
type: Number, },
default: 1
}, TicketData: {
type: Object,
TicketData: { default: {},
type: Object, },
default: {} },
}, data() {
return {
}, checkTicketNavIndex: 1,
data() { imgBaseUrl: "http://192.168.20.214:8130",
return { };
checkTicketNavIndex: 1, },
imgBaseUrl: "http://192.168.20.214:8130" watch: {
} TicketData: {
}, handler(val) {
watch: { console.log("购票须知", this.TicketData);
TicketData: { this.$forceUpdate();
handler(val) { },
console.log('购票须知', this.TicketData) },
this.$forceUpdate(); },
} mounted() {
} console.log(this.TicketData);
}, },
mounted() { methods: {
console.log(this.TicketData) goUrl() {
}, uni.navigateTo({
methods: { url: "/pages/ticketCoupons/imgList?id=" + this.ID,
goUrl() { });
uni.navigateTo({ },
url: "/pages/ticketCoupons/imgList?id=" + this.ID,
}) scroll(e) {},
}, goback() {
uni.navigateBack({
delta: 1,
scroll(e) { });
},
}, success() {
goback() { this.$emit("success");
uni.navigateBack({ },
delta: 1, },
}); };
},
success(){
this.$emit("success")
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.buyNotice { .buyNotice {
width: 100vw; width: 100vw;
height: 70vh; height: 70vh;
border-radius: 40rpx 40rpx 0rpx 0rpx; border-radius: 40rpx 40rpx 0rpx 0rpx;
overflow: hidden; overflow: hidden;
} }
.notice-box { .notice-box {
border-radius: 40rpx 40rpx 0rpx 0rpx; border-radius: 40rpx 40rpx 0rpx 0rpx;
padding: 45rpx 45rpx 0 45rpx; padding: 45rpx 45rpx 0 45rpx;
background-color: #FFFFFF; background-color: #ffffff;
height: 70vh; height: 70vh;
z-index: 10; z-index: 10;
.base-info { .base-info {
// height: 175rpx; // height: 175rpx;
display: flex; display: flex;
padding-bottom: 35rpx; padding-bottom: 35rpx;
border-bottom: 1rpx solid #E7E7E7; border-bottom: 1rpx solid #e7e7e7;
.left { .left {
width: 130rpx; width: 130rpx;
height: 130rpx; height: 130rpx;
border-radius: 20rpx; border-radius: 20rpx;
} }
.right { .right {
margin-left: 50rpx; margin-left: 50rpx;
.name { .name {
font-size: 34rpx; font-size: 34rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #1B1D1E; color: #1b1d1e;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.evaluate { .evaluate {
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
.rate { .rate {
margin: 0 10rpx; margin: 0 10rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #6E6E6E; color: #6e6e6e;
} }
.comment { .comment {
display: flex; display: flex;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #6E6E6E; color: #6e6e6e;
} }
} }
.sell { .sell {
width: 150rpx; width: 150rpx;
height: 40rpx; height: 40rpx;
background-color: #ECF1F4; background-color: #ecf1f4;
border-radius: 4rpx; border-radius: 4rpx;
font-size: 22rpx; font-size: 22rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #111111; color: #111111;
text-align: center; text-align: center;
line-height: 40rpx; line-height: 40rpx;
} }
} }
} }
.detail-info { .detail-info {
.ticket-title { .ticket-title {
// width: 70rpx; // width: 70rpx;
height: 50rpx; height: 50rpx;
font-size: 34rpx; font-size: 34rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #1F1F1F; color: #1f1f1f;
background-color: transparent; background-color: transparent;
// line-height: 44rpx; // line-height: 44rpx;
position: relative; position: relative;
margin: 40rpx 0; margin: 40rpx 0;
.ticket-title-bg { .ticket-title-bg {
width: 70rpx; width: 70rpx;
height: 10rpx; height: 10rpx;
background-color: #DFBE6E; background-color: #dfbe6e;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 6rpx; bottom: 6rpx;
z-index: 1; z-index: 1;
opacity: 0.6; opacity: 0.6;
} }
} }
.detail-info-item { .detail-info-item {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.item-name { .item-name {
// width: 120rpx; // width: 120rpx;
// height: 40rpx; // height: 40rpx;
padding: 8rpx; padding: 8rpx;
background-color: #111111; background-color: #111111;
border-radius: 4rpx; border-radius: 4rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #DFBE6E; color: #dfbe6e;
margin-right: 45rpx; margin-right: 45rpx;
text-align: center; text-align: center;
line-height: 38rpx; line-height: 38rpx;
overflow: hidden; overflow: hidden;
} }
.item2-name { .item2-name {
// width: 120rpx; // width: 120rpx;
// height: 40rpx; // height: 40rpx;
padding: 8rpx; padding: 8rpx;
background-color: #ECF1F4; background-color: #ecf1f4;
border-radius: 4rpx; border-radius: 4rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #111111; color: #111111;
margin-right: 45rpx; margin-right: 45rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
// text-align: center; // text-align: center;
line-height: 38rpx; line-height: 38rpx;
overflow: hidden; overflow: hidden;
}
}
.item-desc {
.item-desc { // width: 500rpx;
// width: 500rpx; font-size: 28rpx;
font-size: 28rpx; font-family: PingFang SC;
font-family: PingFang SC; font-weight: 800;
font-weight: 800; color: #111111;
color: #111111; line-height: 40rpx;
line-height: 40rpx; // white-space: nowrap;
// white-space: nowrap; // overflow: hidden;
// overflow: hidden; // text-overflow: ellipsis;
// text-overflow: ellipsis; }
} }
}
.method {
.method { // width: 660rpx;
// width: 660rpx; // height: 225rpx;
// height: 225rpx; background-color: #fcf8f0;
background-color: #FCF8F0; border-radius: 4rpx;
border-radius: 4rpx; position: relative;
position: relative; margin-top: 40rpx;
margin-top: 40rpx; padding: 60rpx 25rpx 25rpx 25rpx;
padding: 60rpx 25rpx 25rpx 25rpx; margin-bottom: 50rpx;
margin-bottom: 50rpx;
.method-title {
.method-title { width: 120rpx;
width: 120rpx; height: 60rpx;
height: 60rpx; position: absolute;
position: absolute; top: -20rpx;
top: -20rpx; left: 15rpx;
left: 15rpx; text-align: center;
text-align: center;
.title-bg {
.title-bg { width: 120rpx;
width: 120rpx; height: 60rpx;
height: 60rpx; position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; z-index: 0;
z-index: 0; }
}
.title-text {
.title-text { width: 100%;
width: 100%; text-align: center;
text-align: center; position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; z-index: 10;
z-index: 10; font-size: 24rpx;
font-size: 24rpx; font-family: PingFang SC;
font-family: PingFang SC; font-weight: bold;
font-weight: bold; line-height: 40rpx;
line-height: 40rpx; color: #fff;
color: #FFF; }
} }
.tuipaio-item {
} display: flex;
flex-wrap: wrap;
, padding-left: 25rpx;
.tuipaio-item { margin-bottom: 25rpx;
display: flex; .tuipiao-name {
flex-wrap: wrap; // height: 40rpx;
padding-left: 25rpx; background-color: #ffffff;
margin-bottom: 25rpx; border: 1rpx solid #dfbe6e;
.tuipiao-name { border-radius: 4rpx;
// height: 40rpx; font-size: 24rpx;
background-color: #FFFFFF; font-family: PingFang SC;
border: 1rpx solid #DFBE6E; font-weight: bold;
border-radius: 4rpx; color: #dfbe6e;
font-size: 24rpx; text-align: center;
font-family: PingFang SC; margin-right: 25rpx;
font-weight: bold; margin-bottom: 25rpx;
color: #DFBE6E; padding: 0 10rpx;
text-align: center; line-height: 38rpx;
margin-right: 25rpx; }
margin-bottom: 25rpx;
padding: 0 10rpx; .tuipiao-desc {
line-height: 38rpx; // height: 40rpx;
} font-size: 28rpx;
font-family: PingFang SC;
.tuipiao-desc { font-weight: bold;
// height: 40rpx; color: #111111;
font-size: 28rpx; }
font-family: PingFang SC; }
font-weight: bold; }
color: #111111; .detail-btn {
} height: 80rpx;
} margin: 35rpx 0;
} margin-bottom: 80rpx;
.detail-btn{ padding-right: 55rpx;
height: 80rpx; display: flex;
margin: 35rpx 0; justify-content: flex-end;
margin-bottom: 80rpx; align-items: center;
padding-right: 55rpx ; .price {
display: flex; font-size: 40rpx;
justify-content: flex-end; font-family: PingFang SC;
align-items: center; font-weight: 500;
.price{ color: #d91818;
font-size: 40rpx; .price-pre {
font-family: PingFang SC; font-size: 22rpx;
font-weight: 500; }
color: #D91818; }
.price-pre{ .btn {
font-size: 22rpx; width: 300rpx;
} height: 80rpx;
} background-color: #111111;
.btn{ border-radius: 20rpx;
width: 300rpx; margin-left: 45rpx;
height: 80rpx; text-align: center;
background-color: #111111; line-height: 78rpx;
border-radius: 20rpx; font-size: 28rpx;
margin-left: 45rpx; font-family: PingFang SC;
text-align: center; font-weight: bold;
line-height: 78rpx; color: #ffffff;
font-size: 28rpx; }
font-family: PingFang SC; }
font-weight: bold; }
color: #FFFFFF; }
} .zanwu {
} font-size: 28rpx;
} font-family: PingFang SC;
font-weight: 400;
color: #999999;
} }
.zanwu{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
}
</style> </style>
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