Skip to content

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

修改行程详情

parent 7bcc99cb
Show whitespace changes
Inline Side-by-side
Showing with 1789 additions and 513 deletions
pages.json
View file @ f2b1a864
......@@ -527,7 +527,11 @@
"pages": [{
"path":"jz_Line" //九寨-线路
},{
"path":"jz_LineDetail" //九寨-线路详情
"path":"jz_LineDetail",
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}//九寨-线路详情
},{
"path":"jz_Reserve" //线路-预定
},{
......
pages/jiuzhai/components/sign/day.js 0 → 100644
View file @ f2b1a864
//节假日信息
const day=[
{
year:2022,
month:1,
festival:[
{name:'元旦',day:1},
{name:'除夕',day:31},
]
},
{
year:2022,
month:2,
festival:[
{name:'春节',day:1},
{name:'元宵',day:15},
{name:'情人节',day:14}
]
},
{
year:2022,
month:3,
festival:[
{name:'妇女节',day:8},
]
},
{
year:2022,
month:4,
festival:[
{name:'清明',day:4},
]
},
{
year:2022,
month:5,
festival:[
{name:'劳动节',day:1},
{name:'青年节',day:4},
{name:'母亲节',day:10},
]
},
{
year:2021,
month:6,
festival:[
{name:'儿童节',day:1},
{name:'父亲节',day:21},
{name:'端午',day:14},
]
},
{
year:2021,
month:7,
festival:[
{name:'建党节',day:1}
]
},
{
year:2021,
month:8,
festival:[
{name:'建军节',day:1},
{name:'七夕',day:14},
{name:'中元节',day:22},
]
},
{
year:2021,
month:9,
festival:[
{name:'教师节',day:10},
{name:'中秋',day:21}
]
},
{
year:2021,
month:10,
festival:[
{name:'国庆',day:1},
{name:'重阳',day:14}
]
},
{
year:2021,
month:11,
festival:[
{name:'感恩节',day:26}
]
},
{
year:2021,
month:12,
festival:[
{name:'平安夜',day:24},
{name:'圣诞节',day:25}
]
}
]
export default day
\ No newline at end of file
pages/jiuzhai/components/sign/index.vue 0 → 100644
View file @ f2b1a864
<template>
<view class="content">
<scroll-view :scroll-y="true" style="height: 100%;">
<view class="header">
<!-- <view class="bar"></view>
<view class="set text-gray">
<text @click="close" style="font-size:40upx;">返回</text>
<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
</view> -->
<!-- <view class="in-and-out">
<view class="item" v-if="start.length > 0">
<view style="font-size:30upx;color:#C0C0C0">入住日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
</view>
<view class="item text" v-if="start.length == 0">
<view>入住日期</view>
</view>
<view class="item">
<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
<view class="count" style="font-size:26upx;line-height:26upx;">共{{ day }}晚</view>
</view>
</view>
<view class="item text" v-if="end.length == 0">
<view>离店日期</view>
</view>
<view class="item" v-if="end.length > 0">
<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
</view>
</view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>选择日期</text>
</view>
<view class="week">
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
</view>
</view>
<view class="section">
<view v-for="(res, line) in resDate" class="item" :key="line">
<view class="year">{{ res.year }}年{{ res.month }}月</view>
<view class="day">
<view v-for="week in res.oneDayWeek" class="day-list"
:style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
<view @tap="selectDay(line, index,(line+1).toString()+index)" v-for="(item, index) in res.day"
:key="index" class="day-list" :class="[
line == start[0] && index == start[1] ? 'bg-orange select-style' : '',
(line >= start[0] && line <= end[0] && index > start[1] && index < end[1]) || (line >= start[0] && index > start[1] && line < end[0]) || (line <= end[0] && index < end[1] && line > start[0]) || (line < end[0] && line > start[0]) ? 'bg-higlt-orange' : '',
line == 0 && index + 1 < nowDay ? 'time-out' : '',
isNaN(item) ? 'is-festival' : '',
(isNaN(item) && line == start[0] && index == start[1]) || (isNaN(item) && line == end[0] && index == end[1]) ? 'not-festival' : '',
(priceStauts.length > 0 && priceStauts[line][index] <0 && start.length>0 && end.length>0) ||(priceStauts.length > 0 && priceStauts[line][index] <0 &&start.length==0 && end.length==0)?'not-sub' : '',
priceStauts.length > 0 && end.length==0 && start.length>0 && priceStauts[line][index]<0 && line+index*2!=lastNot[0]+lastNot[1]*2? 'not-sub' : '',
]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#111':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}">
<view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view>
<view class="select-style" v-if="line == start[0] && index == start[1]">最早</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">最晚</view>
<view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index]>0">￥{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index] <0">无房</view>
</view>
</view>
</view>
</view>
</view>
<view class="submit">
<button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text>
<text v-if="!isSub">请选择入住日期</text>
</button>
</view>
</scroll-view>
</view>
</template>
<script>
//引入节假日的数据，也可以用后台返回去渲染
import json from './day.js';
export default {
props: {
priceList: {
type: Array,
default: []
},
},
computed: {
//房间是否能预订
isSub() {
if (this.priceStauts.length > 0) {
for (var i = this.start[0]; i <= this.end[0]; i++) {
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.date[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (this.end[0] == this.start[0]) {
for (var j = this.start[1]; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (i == this.end[0]) {
for (var j = 0; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
}
}
}
return this.start.length == 2 && this.end.length == 2 ? true : false
},
//计算日历里的节假日
resDate() {
if (this.date.length == 0) return
for (var i = 0; i < this.date.length; i++) {
for (var j = 0; j < this.festival.length; j++) {
if (this.festival[j].year == this.date[i].year && this.festival[j].month == this.date[i].month) {
for (var k = 0; k < this.festival[j].festival.length; k++) {
if (this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1) {
this.date[i].day[this.date[i].day.indexOf(this.festival[j].festival[k].day)] = this
.festival[j].festival[k].name;
}
}
}
}
}
return this.date;
}
},
data() {
return {
out: 0,
festival: json, //节假日
type: '-', //日期分隔符
date: [], //日期数组对象
dayWidth: 0, //日期的宽度
nowDay: 0, //当前时间的日
start: [], //入住时间
count: 6, //显示月的数量
startDay: '', //入住日期
startWeek: '', //入住时间的周几
end: [], //离开时间
endDay: '', //离开日期
endWeek: '', //离开时间的周几
day: 0, //多少晚
priceStauts: [], //价格状态
lastNot: [0, 10] //前置的无房操作
};
},
mounted () {
console.log("进入了....")
uni.getSystemInfo({
success: res => {
this.dayWidth = res.windowWidth;
}
});
this.priceStauts=this.initPrice()
this.setDate();
var dateTime=new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
this.nowDay = new Date(dateTime).getDate();
/*默认入住离店日期，今日入住明日离店，此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作
*不推荐使用本地缓存，下边只是使用缓存的示例
*/
uni.getStorage({
key: 'Time',
success: (res) => {
console.log(res)
if (res && res.data) {
var obj = JSON.parse(res.data)
this.start = this.setDefaultDate(obj.start);
this.end = this.setDefaultDate(obj.end);
}
},
fail: () => {
this.start = this.setDefaultDate(this.getDefaultDate(0));
this.end = this.setDefaultDate(this.getDefaultDate(1));
}
})
//如果需要日期的价格，-1为无房，其他价格代表正常
// if (option && option.request) {
// uni.request({
// url: 'http://api.tcdbp.com', //当需要日历价格的时候请求的后台接口地址
// method: 'GET',
// data: {
// count: this.count //获取几个月分的数据
// },
// success: res => {
// if (res.data.status != 1) {
// return uni.showToast({
// title: res.data.message,
// icon: 'none',
// mask: true
// });
// }
// this.priceStauts = res.data.data;
// },
// fail: () => {
// uni.showToast({
// title: '网络错误请稍后再试',
// icon: 'none',
// mask: true
// });
// }
// });
// }
},
watch: {
//离店日期
end(newVal) {
if (this.end.length != 0) {
//计算选择离店日期
this.endDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.endWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(newVal[0], newVal[1]));
//计算天数
var startDay = this.date[this.start[0]].year + '/' + this.date[this.start[0]].month + '/' + this
.isFestival(this.start[0], this.start[1]);
var endDay = this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(this
.end[0], this.end[1]);
this.day = this.getDay(startDay, endDay);
} else {
this.day = 0;
}
},
//入住日期
start(newVal) {
if (this.start.length > 0) {
this.startDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.startWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(
newVal[0], newVal[1]));
}
if (this.priceStauts.length > 0) {
console.log(this.lastNot)
for (var i = newVal[0]; i < this.priceStauts.length; i++) {
if (i == newVal[0]) {
for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j]
console.log(this.lastNot)
return
}
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j];
console.log(this.lastNot)
return
}
}
}
}
//清空
this.lastNot = []
}
}
},
methods: {
initPrice(){
//年份
var year = new Date().getFullYear();
let data=[]
//月份
var month = new Date().getMonth();
for (let i = 0; i < this.count; i++) {
var days = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
this.priceList.forEach(x=>{
if(x.startDate==`${year}-${month+1}-${j+1}`){
days.push(x.b2BPrice)
}else{
days.push(0)
}
})
}
data.push(days)
if (month == 11) {
year += 1;
month = 0;
} else {
month++;
}
}
return this.date;
},
//月份补零
setMonth(dateIndex) {
let month = this.date[dateIndex].month;
if (month < 10) {
month = '0' + month;
}
return month + '月';
},
//如果是节假日名称则返回选择的日期天数
isFestival(line, index, push = false) {
var date = this.date[line].day[index];
if (isNaN(date)) {
var newIndex = this.date[line].day.indexOf(date) + 1;
if (push) return newIndex;
return newIndex < 10 ? '0' + newIndex : newIndex;
} else {
if (push) return date;
return date < 10 ? '0' + date : date;
}
},
//获取今天明天的日期
getDefaultDate(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
var year = dd.getFullYear();
var mon = dd.getMonth() + 1; //获取当前月份的日期
var day = dd.getDate();
return year + '-' + mon + '-' + day;
},
//设置入住时间 如果没有传值则根据默认值设置
setDefaultDate(data) {
var arr = [0, parseInt(this.nowDay - 1)];
var start = data.indexOf('-') != -1 ? data.split('-') : data.split('/');
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
for (var i = 0; i < this.date.length; i++) {
if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
arr = [i, parseInt(this.nowDay - 1)];
} else {
arr = [i, parseInt(start[2] - 1)];
}
break;
}
}
return arr;
},
//清空
reset() {
this.start = [];
this.end = [];
this.day = 0;
},
//补零操作
setPull(day) {
if (day < 10) {
day = '0' + day;
}
return day
},
//计算天数
getDay(date1, date2) {
//获得天数
//date1：开始日期，date2结束日期
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
return day;
},
//计算周几
getWeek(date) {
var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
//选择入住离开
selectDay(line, index) {
if (line == 0 && index + 1 < this.nowDay) return;
//如果有入住情况和价格则需要进行一些列的判断
if (this.priceStauts.length > 0) {
if ((this.start.length == 0 && this.priceStauts[line][index] < 0) || (this.end.length > 0 && this
.priceStauts[line][index] < 0)) {
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
}
if ((this.start.length > 0 && line < this.start[0]) || (line == this.start[0] && this.start[1] >
index)) {
if (this.priceStauts[line][index] < 0)
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
this.start = [line, index];
this.end = [];
return;
}
if (this.start.length > 0 && this.end.length == 0) {
if (this.start[0] - line == 0) {
for (var j = this.start[1]; j < index; j++) {
if (this.priceStauts[line][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//如果不在同一个月份有三种情况需要处理
for (var i = this.start[0]; i <= line; i++) {
//开始日期到开始日期当月的最大日期是否包含无房情况
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else if (i == line) {
//结束日期到当月结束日期之前是否包含无房情况
for (var j = 0; j < index; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//中间间隔的月份需要检查每一天是否包含无房情况
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
}
}
}
}
}
//如果没有入住时间
if (this.start.length == 0) {
//填充入住时间
this.start = [line, index];
} else if (this.start.length > 0 && this.start[0] == line && this.start[1] == index && this.end.length ==
0) {
return;
} else {
//如果没有离开时间
if (this.end.length == 0) {
//如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期
if (line < this.start[0] || (line == this.start[0] && index < this.start[1])) {
this.end = this.start;
this.start = [line, index];
} else {
//如果离开时间比入住时间晚则填充
this.end = [line, index];
}
} else {
//如果有离开时间则清空离开时间重新填充入住时间
this.start = [line, index];
this.end = [];
}
}
},
//设置日历
setDate() {
//年份
var year = new Date().getFullYear();
//月份
var month = new Date().getMonth();
console.log("执行了...")
for (let i = 0; i < this.count; i++) {
var day = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
day.push(j + 1);
}
this.date.push({
year: year,
month: month + 1,
day: day,
oneDayWeek: new Date(Date.parse(year + '/' + (month + 1) + '/' + '01')).getDay()
});
if (month == 11) {
year += 1;
month = 0;
} else {
month++;
}
}
return this.date;
},
//关闭
close() {
uni.navigateBack({
delta: 1
});
},
//确定入住离店事件提交
submit() {
var obj = {
/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
this.start[0], this.start[1]),
startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
startDay: this.startDay,
startWeek: this.startWeek,
endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
.end[0], this.end[1]),
emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
endDay: this.endDay,
endWeek: this.endWeek,
day: this.day */
startWeek: this.startWeek,
endWeek: this.endWeek,
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type +
this.isFestival(this.start[0], this.start[1], true),
end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this
.isFestival(this.end[0], this.end[1], true),
startDay: this.date[this.start[0]].month + '-' + this.isFestival(this.start[0], this.start[1],
true),
endDay: this.date[this.end[0]].month + '-' + this.isFestival(this.end[0], this.end[1], true),
day: this.day
};
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
*不推荐使用本地缓存,下面是缓存的示例
*/
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.$emit("finish",obj)
//价格清单,应该存入vuex获取缓存中
// if (this.priceStauts.length > 0) {
// var price = []
// if (this.end[0] - this.start[0] == 0) {
// for (var i = this.start[1]; i < this.end[1]; i++) {
// var day = this.date[this.start[0]].year + this.type + this.setPull(this.date[this.start[0]]
// .month) + this.type + this.isFestival(
// this.start[0], i)
// price.push({
// day_str: day,
// price: this.priceStauts[this.start[0]][i]
// })
// }
// } else {
// for (var i = this.start[0]; i <= this.end[0]; i++) {
// console.log(i)
// if (i == this.start[0]) {
// for (var j = this.start[1]; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else if (i == this.end[0]) {
// for (var j = 0; j < this.end[1]; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else {
// for (var j = 0; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// }
// }
// }
// //加入缓存
// uni.setStorage({
// key: 'Price',
// data: JSON.stringify(price)
// })
// }
//跳转到上一页
// uni.navigateBack({
// delta: 1
// })
},
}
};
</script>
<style>
/**确认按钮**/
.submit {
width: 100%;
background: white;
position: fixed;
bottom: 0upx;
height: auto;
}
.sub-btn {
height: auto;
border-radius: 10upx;
background: #111;
color: white;
}
.content {
height: 100%;
z-index: 999;
}
/**不能预订**/
/* 入住离开时间的color */
.bg-orange {
background: #111111 !important;
border-radius: 6px 0px 0px 6px !important;
}
.bg-higlt-orange {
background-color: #fff;
}
/* 节假日的日期样式 */
.is-festival {
font-size: 22rpx !important;
color: #000 !important;
}
/** 非节假日的日期样式**/
.not-festival {
font-size: 18upx;
color: white;
}
/***入住离开时间的日历样式*/
.not-sub {
color: #222222;
background: #dddddd;
}
.select-out-item {
background: #ffffff;
}
.select-style {
color: white !important;
font-size: 20rpx !important;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
.time-out {
/* text-decoration: line-through; */
color: #ccc !important;
}
/**
* 点击日期的样式
*/
.bg {
background: orange;
}
/**
* 日期部分
*/
.section {
width: 100%;
padding-bottom: 150upx;
height: auto;
padding-top: 176rpx;
background-color: #F1F4F6;
}
.section>.item>.year {
text-align: center;
height: 50rpx;
font-weight: bold;
/* padding-left:30upx;
padding-right: 30upx; */
font-size: 24rpx;
line-height: 50rpx;
color: #1B1D1E;
}
.section>.item>.day {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.section>.item>.day>.day-list {
margin-top: 30upx;
margin-bottom: 30upx;
min-height: 100upx;
max-height: 180upx;
display: flex;
font-size: 26rpx;
flex-direction: column;
align-items: center;
justify-content: center;
color:#1B1D1E;
}
/**
* 头部固定
*/
.header {
position: fixed;
top: 0;
width: 100%;
/* height: 400upx; */
background: white;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
}
.bar {
width: 100%;
height: var(--status-bar-height);
background: #222222;
}
/**
* 关闭清空
*/
.set {
height: 100upx;
padding-left: 30upx;
padding-right: 30upx;
align-items: center;
display: flex;
justify-content: space-between;
}
/**
* 入住离开时间
*/
.in-and-out {
height: 210upx;
padding-left: 30upx;
padding-right: 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
/**
* 入住离开的view
*/
.in-and-out>.item {
display: flex;
flex-direction: column;
height: 100upx;
}
/**
* 未选择入离时间时的文字样式
*/
.in-and-out>.text {
margin-top: 100upx;
font-weight: bold;
font-size: 36upx;
color: #c0c0c0;
}
/**
* 一共选择了多少晚的样式
*/
.in-and-out>.item>.count-border {
width: 200upx;
font-size: 28upx;
height: 40upx;
margin-top: 48upx;
text-align: center;
}
.gray {
color: #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
.orange {
color: orange;
border-bottom: 1px solid orange;
}
/**
* 共多少晚
*/
.in-and-out>.item>.count-border>.count {
font-size: 10px;
}
/**
* 周一到周日
*/
.week {
/* height: 70upx; */
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
font-size: 24rpx;
color:#1B1D1E;
background: white;
margin-bottom: 16rpx;
}
.isa {
color: red;
}
.isa2 {
color: red;
}
</style>
pages/jiuzhai/jz_LineDetail.vue
View file @ f2b1a864
<template>
<scroll-view scroll-y="true" class="jz_LineDetail" @scroll="scroll" v-if="dataList.title">
<view class="jz_TopImg" >
<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper :list="dataList.tempImgCover" :effect3d="false" :height="535" :interval="5000" :border-radius="0"
name="Url"></u-swiper>
<view class="media-info">
<view style="display: flex;align-items: center;">
<view class="mi-left">
<view v-if="dataList.tempImgCover.length>0" class="type-img-box" @click="openPicture">
<image :src="dataList.tempImgCover[0].Url" mode="aspectFill"></image>
<view class="content">
<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
<text>{{dataList.tempImgCover.length}}</text>
</view>
</view>
</view>
<view class="mi-right">
<view style="color:#FFF;margin-bottom: 6rpx;font-size: 22rpx;">团队编号：CTU04210603A</view>
<view style="color:#FFF;font-size: 22rpx;">{{dataList.startCityName}}出发 · 精品线路</view>
</view>
</view>
</view>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
</view>
</view>
<view class="top-title" :style="[titleStyle]">
<view @click="goback">
<u-icon name="arrow-left" size="44"></u-icon>
</view>
<view style="margin-left: 30rpx; text-align: left;width: 60vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{dataList.title}}</view>
</view>
</view>
<view class="jz_TopPrice">
<view class="jz_LineTitle">
<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{dataList.currentPriceInfo.b2BPrice}}</text>
<text style="color:#999999;font-size:24rpx;font-weight: 400;"> /人起</text>
<text style="color:#999999;font-size:24rpx;font-weight: 400;margin-left: 30rpx;">2728人出游</text>
</view>
<view class="jz_MainTitle">
<text v-if="dataList.title">{{dataList.title}}</text>
</view>
<view class="jz_Maidian" v-text="dataList.productRecommend">
</view>
</view>
<view class="jz_Service">
<view class="jz_Serflex">
<view class="jz_Stitle">保障</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
alt="" />
<view style="margin-left:5px;">更改则赔付·承诺不加价·取消则赔付</view>
</view>
</view>
<view class="jz_Serflex" style="margin-top:40rpx;">
<view class="jz_Stitle">服务</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
alt="" />
<view style="margin-left:5px;">成团保障</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<view style="margin-bottom:40px;">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">
<text v-if="dataList.startCityName">{{dataList.startCityName}}</text>出发
</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
</view>
<view style="display:flex;overflow-x: auto;">
<template v-for="(item,pindex) in dataList.priceList">
<view class="jz_StartList" v-if="pindex<3" :class="{'active':delMsg.tcid==item.tcid}" @click="getDayInfo(item)" :key="pindex">
<view class="jz_StartTop">{{getMonth(item.startDate)}} </view>
<view class="jz_StartHoubu">
<text>余</text>
<text style="font-size: 28rpx;font-weight: 600;">{{item.remainNum}}</text>
</view>
<view style="color:#FF3166;font-size:26rpx;">￥{{item.b2BPrice}}</view>
</view>
</template>
<view class="jz_StartList" :class="{'active':delMsg.tcid==customerDate.tcid}" @click="openDate">
<view class="jz_StartTop" v-if="customerDate.startDate">{{customerDate.startDate?getMonth(customerDate.startDate):""}} </view>
<view class="jz_StartHoubu" v-if="customerDate.remainNum">
<text>余</text>
<text style="font-size: 28rpx;font-weight: 600;">{{customerDate.remainNum}}</text>
</view>
<view style="color:#FF3166;font-size:26rpx;" v-if="customerDate.b2BPrice">￥{{customerDate.b2BPrice}}</view>
<view v-if="!customerDate.startDate" style="height: 100%;width:100%;display: flex;align-items: center;justify-content: center;">
<view style="font-size: 24rpx;color:#999999;">更多<br>班期</view>
</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">摘要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>住宿
</view>
<view class="jz_ZhaiInner">
{{dataList.nightNum}}晚酒店
</view>
<template v-if="dataList.feature&&dataList.feature.shopRemarkText!=null&&dataList.feature.shopRemarkText!=''">
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>购物
</view>
<view class="jz_ZhaiInner">
{{dataList.feature.shopRemarkText}}
</view>
</template>
<template v-else>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>购物
</view>
<view class="jz_ZhaiInner">
纯玩儿，无购物
</view>
</template>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>景点
</view>
<view class="jz_ZhaiInner">
{{scenicNum}}个人气景点
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>餐食
</view>
<view class="jz_ZhaiInner">
含{{breakfastNum}}早餐 <text style="margin:0 20px;">{{lunchNum}}午餐</text> {{dinnerNum}}晚餐
</view>
<view class="jz_Zhankai" style="display:none;">展开全部</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程特色</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<image v-for="x in dataList.feature.tripImageList" :src="x" mode="widthFix" style="width: 100%;"></image>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程概要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<view class="jz_TripLine"></view>
<view v-for="(item,index) in dataList.dayList" :key="index">
<view class="jz_TripTitle">
<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
<view class="jz_TripRight"></view>
</view>
<view class="jz_RightInner">
<view v-for="(subItem,SubIndex) in item.dayArray" v-if="subItem.type==7" :key="SubIndex">
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text>{{subItem.childItem.title}}</text>
</view>
</view>
<template v-for="(subItem,index2) in item.dayArray" v-if="subItem.type==2">
<view class="jz_ImgDiv" :key="index2">
<img mode="aspectFill" :src="subItem.childItem.imaArray[0].url" alt="">
</view>
<view class="jz_Place" style="align-items: center;">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
{{subItem.childItem.couponsName}}
<text class="jz_Fenzhong">
<template v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">约</template>
<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
<template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
</text>
</text>
</view>
<view class="jz_Jinddian">
{{subItem.childItem.descriptionText}}
</view>
</template>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
<template v-for="(subItem,sIndex) in item.dayArray" v-if="subItem.type==6">
<text :key="sIndex">{{subItem.childItem.descriptionText}}</text>
</template>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
<template v-for="(subItem,sIndex2) in item.dayArray" v-if="subItem.type==4">
<text style="margin-right:20px;" :key="sIndex2" v-if="subItem.childItem.useDinnerType=='1'">{{subItem.childItem.dinnerName}}</text>
<text style="margin-right:20px;" v-if="subItem.childItem.useDinnerType=='2'">{{subItem.childItem.dinnerName}}</text>
<text v-if="subItem.childItem.useDinnerType=='3'">{{subItem.childItem.dinnerName}}</text>
</template>
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
<template v-for="(subItem,sIndex3) in item.dayArray" v-if="subItem.type==3">
<text :key="sIndex3">{{subItem.childItem.hotelName}}<text v-if="index!=dataList.dayList.length-1" style="margin:0 5px;">/</text></text>
</template>
<text v-if="index!=dataList.dayList.length-1">或同级</text>
</text>
</view>
</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">费用包含</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.feeInclude"></rich-text>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">费用不含</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.feeNonInclude"></rich-text>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">预定须知</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.importantTip"></rich-text>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">温馨提示</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.importantTip"></rich-text>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">证照说明</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.visaRemark"></rich-text>
</view>
</view>
<view class="jz_orderbox">
<view class="jz_OrderDiv">
<view style="color:#FF3166;font-weight:bold;">
<text style="font-size:22rpx;">¥</text>
<text style="font-size:40rpx;">{{dataList.currentPriceInfo.b2BPrice}}</text>
<text style="font-size:22rpx;">/起</text>
</view>
<view style="display:flex;align-items: center;">
<button open-type="contact" class="jz_ConButton">
<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
<view style="color:#111111;font-size: 22rpx;">客服</view>
</button>
<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
</view>
</view>
</view>
<u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
</scroll-view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import canlendar from "./components/sign/index.vue"
export default {
components: {
canlendar
},
data() {
return {
pageTitle: '线路详情',
showDateChosen:false,
msg: {
pageIndex: 1,
pageSize: 15
},
dataList: {}, //数据
delMsg: {
tcid: 0,
configId: 0
},
scenicNum: 0, // 景点数量
breakfastNum: 0, //早餐数
lunchNum: 0, //午餐数
dinnerNum: 0,//晚餐数
boxOption: 0,
titleStyle: {},
mainColor: "",
detailContent: "",
customerDate:{}
};
},
created() {
},
onLoad(option) {
if (option.tcid && option.configId) {
this.delMsg.tcid = option.tcid;
this.delMsg.configId = option.configId;
this.getDetails();
}
let that = this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: "0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
chosenDateResult(result){
this.showDateChosen=false
},
openPicture() {
let imgObj = JSON.stringify(this.dataList.HotelImg);
uni.navigateTo({
url: "/pages/hotel/picture?imgObj=" + imgObj
})
},
goback() {
uni.navigateBack({
delta: 1,
});
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
this.$forceUpdate()
},
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDesV1",
this.delMsg,
res => {
console.log(res, '详情');
if (res.resultCode == 1) {
res.data.tempImgCover=JSON.parse(res.data.imgCover)
this.dataList = res.data;
this.scenicNum = 0;
this.dataList.dayList.forEach(x => {
x.dayArray.forEach(y => {
if (y.type == 2) {
this.scenicNum++;
}
if (y.type == 4 && y.childItem.useDinnerType == 1) {
this.breakfastNum++;
}
if (y.type == 4 && y.childItem.useDinnerType == 2) {
this.lunchNum++;
}
if (y.type == 4 && y.childItem.useDinnerType == 3) {
this.dinnerNum++;
}
})
})
} else {
}
},
null
);
},
//转换图片格式
getCoverImg(imgCover) {
if (imgCover) {
return JSON.parse(imgCover)
}
},
//返回天数
getDays(day) {
if (day < 10) {
return '0' + day
} else {
return day
}
},
//返回月 日
getMonth(day) {
if (day) {
let Myday = day.split('-');
return Myday[1] + '-' + Myday[2]
}
},
//点击切换
getDayInfo(item){
this.delMsg.tcid = item.tcid;
this.delMsg.configId = item.configID;
this.getDetails();
},
openDate(){
if(this.customerDate.tcid){
if(this.customerDate.tcid==this.delMsg.tcid){
this.showDateChosen=true
}else{
this.delMsg.tcid = customerDate.tcid;
this.delMsg.configId = customerDate.configID;
this.getDetails();
}
}else{
this.showDateChosen=true
}
},
//立即预定
goReserce(){
let myCurrentInfo = this.dataList.currentPriceInfo;
myCurrentInfo.startCityName = this.dataList.startCityName;
let imgCover = JSON.parse(this.dataList.imgCover);
if(imgCover.length>0){
myCurrentInfo.CoverImg = imgCover[0].Url;
}
let myCurr = JSON.stringify(myCurrentInfo);
console.log(myCurrentInfo,'myCurrentInfo');
uni.navigateTo({
url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)
});
}
},
};
</script>
<style>
.jz_LineDetail {
background-color: #ECF1F4;
margin-bottom:70px;
padding-bottom:70px;
height: 100vh;
box-sizing: border-box;
}
.jz_TopImg {
width: 100%;
height: 500rpx;
height: 535rpx;
}
.jz_TopImg .top-title {
line-height: 45px !important;
font-size: 16px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
color: #111;
box-sizing: content-box;
z-index: 5;
display: flex;
align-items: center;
background-color: #f6f6f6;
padding-left: 6rpx;
}
.jz_TopImg .media {
height: 535rpx;
position: relative;
z-index: 1;
}
.jz_TopImg .media .play-btn {
position: absolute;
left: 50%;
top: 50%;
margin-top: -49rpx;
margin-left: -49rpx;
width: 98rpx;
height: 98rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
.jz_TopImg .media .video-box {
background-color: #111;
height: 535rpx;
position: relative;
}
.jz_TopImg .media .type-box {
width: 100px;
height: 50rpx;
position: absolute;
background-color: rgba(255, 255, 255, .6);
border-radius: 50rpx;
left: 50%;
bottom: 80px;
margin-left: -50px;
}
.jz_TopImg .media .media-info .type-img-box {
background-color: rgba(255, 255, 255, .5);
color: #FFF;
display: flex;
align-items: center;
height: 96rpx;
width: 96rpx;
padding: 8rpx;
border-radius: 12rpx;
position: relative;
}
.jz_TopImg .media .media-info .type-img-box image {
height: 80rpx;
width: 80rpx;
border-radius: 12rpx;
opacity: 0.5;
}
.jz_TopImg .media .media-info .type-img-box .content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 20rpx;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
}
.jz_TopImg .media .media-info .type-img-box text {
font-size: 22rpx;
font-family: pingfang;
margin-left: 6rpx;
}
.jz_TopImg .media .media-info {
position: absolute;
background-color: rgba(0, 0, 0, .35);
top: 287rpx;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx 50rpx;
}
.jz_TopImg .media .media-info .mi-left {
flex: 1;
}
.jz_TopPrice {
width: 100%;
height: auto;
background-color: #fff;
position: relative;
top: -20px;
border-top-left-radius: 45rpx;
border-top-right-radius: 45rpx;
margin-top: -110rpx;
border-radius: 60rpx 60rpx 0px 0px;
padding: 45rpx;
z-index: 2;
}
.jz_LineTitle {
......@@ -29,15 +590,13 @@
.jz_MainTitle {
color: #111111;
font-size: 36rpx;
font-weight: 800;
line-height: 28px;
font-weight: 600;
}
.jz_Maidian {
color: #999999;
font-size: 24rpx;
margin-top: 15px;
line-height: 23px;
margin-top: 22rpx;
}
.jz_Price {
......@@ -82,531 +641,258 @@
.jz_StartList {
height: 150rpx;
border-radius: 20rpx;
border: 1px solid #E2E2E2;
/* border: 1px solid #E2E2E2; */
text-align: center;
display: block;
width: 70px;
margin-right: 14px;
flex-shrink: 0;
white-space: nowrap;
}
.jz_renmin {
font-size: 12px;
font-weight: bold;
}
.jz_B2bPrice {
font-size: 23px;
font-weight: bold;
}
.jz_Service {
width: 100%;
background-color: #fff;
padding: 30px;
font-size: 24rpx;
margin-top: -5px;
}
.jz_Serflex {
display: flex;
}
.jz_Stitle {
color: #999999;
margin-right: 41rpx;
}
.jz_StartTop {
width: 100%;
height: 40rpx;
background-color: #ECF1F4;
color: #999999;
text-align: center;
line-height: 40rpx;
font-size: 22rpx;
}
.jz_Dian {
display: inline-block;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #111111;
margin-right: 23rpx;
position: relative;
top: -2px;
}
.jz_ZhaiTitle {
color: #1F1F1F;
font-size: 28rpx;
font-weight: bold;
margin-top: 40rpx;
}
.jz_ZhaiInner {
color: #6E6E6E;
font-size: 24rpx;
margin: 22rpx 0 0 30rpx;
}
.jz_Zhankai {
width: 220rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
color: #1F1F1F;
font-size: 24rpx;
border-radius: 8rpx;
border: 1px solid #111111;
margin: 40rpx auto;
}
.jz_TripMain {
position: relative;
overflow: hidden;
}
.jz_TripTitle {
width: 100%;
height: 90rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28rpx;
}
.jz_TripLeft {
font-size: 32rpx;
}
.jz_TripRight {
color: #111111;
font-size: 22rpx;
}
.jz_TripLine {
position: absolute;
width: 4rpx;
height: 100%;
background-color: #111111;
left: 24rpx;
top: 90rpx;
}
.jz_RightInner {
margin-left: 50rpx;
}
.jz_Place {
position: relative;
color: #111111;
font-size: 24rpx;
margin: 30rpx 0;
font-weight: bold;
display: flex;
}
.jz_ComDian {
width: 18rpx;
height: 18rpx;
background-color: #DFBE6E;
border-radius: 50%;
position: absolute;
left: -17.6px;
top: 4px;
}
.jz_ImgDiv {
width: 612rpx;
height: 376rpx;
border-radius: 20rpx;
overflow: hidden;
background: #ecf1f463;
}
.jz_ImgDiv img {
width: 100%;
height: 100%;
.jz_StartList.active{
border-color: #111;
background: rgba(0,0,0,.07);
}
.jz_Rermark {
color: #999999;
font-size: 23rpx;
line-height: 20px;
.jz_StartList.active .jz_StartTop{
background-color: #000;
color: #FFF;
}
.jz_Canyin {
color: #999999;
font-size: 23rpx;
margin-right: 44rpx;
flex-shrink: 0;
.jz_renmin {
font-size: 12px;
font-weight: bold;
}
.jz_CanInner {
color: #111111;
font-size: 26rpx;
.jz_B2bPrice {
font-size: 40rpx;
font-weight: 800;
}
.jz_Service {
width: 100%;
background-color: #fff;
padding: 30px;
font-size: 24rpx;
margin-top: -5px;
}
.jz_ArrowImg {
width: 25rpx;
height: 5rpx;
margin: 0 5px;
position: relative;
top: -3px;
.jz_Serflex {
display: flex;
}
.jz_Fenzhong {
.jz_Stitle {
color: #999999;
font-size: 22rpx;
margin-left: 20rpx;
margin-right: 41rpx;
}
.jz_Jinddian {
margin: 23rpx 0 31rpx 0;
.jz_StartTop {
width: 100%;
height: 40rpx;
background-color: #ECF1F4;
color: #999999;
font-size: 23rpx;
line-height: 20px;
text-align: center;
line-height: 40rpx;
font-size: 22rpx;
}
.jz_StartHoubu {
color: #E73828;
font-size: 20rpx;
margin: 10px 0;
}
.jz_OrderDiv{
position: fixed;
width:90%;
height:100rpx;
background-color: #fff;
margin:auto;
bottom:20px;
padding:20rpx;
left:40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
border-radius: 16px;
z-index:999;
}
.jz_OrderNow{
width:190rpx;
height:80rpx;
.jz_Dian {
display: inline-block;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #111111;
text-align: center;
line-height: 80rpx;
color:#fff;
font-weight: bold;
font-size:28rpx;
border-radius: 16rpx;
}
.jz_ConButton{
background-color: #fff;
height:40px;
line-height: 18px;
margin-top:3px;
}
.jz_ConButton::after{
border: none!important;
height:auto!important;
margin-right: 23rpx;
position: relative;
top: -2px;
}
</style>
<template>
<div class="jz_LineDetail">
<view class="jz_TopImg">
<swiper indicator-dots :autoplay="false" :interval="1000" style="height:100%;">
<block v-for="(item,cindex) in getCoverImg(dataList.imgCover)" :key="cindex">
<swiper-item>
<!--<video @click="startPlay(item)" style="width:100%;height:100%" id="myVideo" v-if="item.type==1" :src="item.pic_url"
:autoplay="false" loop muted show-play-btn :enable-progress-gesture="true"
:controls="true" :show-progress="true" :show-mute-btn="true" objectFit="cover"></video>-->
<image style="width:100%;height:100%;" :src="item.Url" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="jz_TopPrice">
<view class="jz_LineTitle">
<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{dataList.currentPriceInfo.b2BPrice}}</text>
<text style="color:#999999;font-size:14px;">/人起</text>
</view>
<view class="jz_MainTitle">
<text v-if="dataList.title">{{dataList.title}}</text>
</view>
<view class="jz_Maidian" v-text="dataList.productRecommend">
</view>
</view>
<view class="jz_Service">
<view class="jz_Serflex">
<view class="jz_Stitle">保障</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
alt="" />
<view style="margin-left:5px;">更改则赔付·承诺不加价·取消则赔付</view>
</view>
</view>
<view class="jz_Serflex" style="margin-top:40rpx;">
<view class="jz_Stitle">服务</view>
<view style="color:#111111;display:flex;align-items:center">
<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
alt="" />
<view style="margin-left:5px;">成团保障</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<view style="margin-bottom:40px;">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">
<text v-if="dataList.startCityName">{{dataList.startCityName}}</text>出发
</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
</view>
<view style="display:flex;overflow-x: auto;">
<view class="jz_StartList" v-for="(item,pindex) in dataList.priceList" @click="getDayInfo(item)" :key="pindex">
<view class="jz_StartTop">{{getMonth(item.startDate)}} 余{{item.remainNum}}</view>
<view class="jz_StartHoubu">
{{item.isSubstitution==1?'可候补':'不可候补'}}
</view>
<view style="color:#FF3166;font-size:26rpx;">￥{{item.b2BPrice}}</view>
</view>
</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">摘要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>住宿
</view>
<view class="jz_ZhaiInner">
{{dataList.nightNum}}晚酒店
</view>
<template v-if="dataList.feature&&dataList.feature.shopRemarkText!=null&&dataList.feature.shopRemarkText!=''">
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>购物
</view>
<view class="jz_ZhaiInner">
{{dataList.feature.shopRemarkText}}
</view>
</template>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>景点
</view>
<view class="jz_ZhaiInner">
{{scenicNum}}个人气景点
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>餐食
</view>
<view class="jz_ZhaiInner">
含{{breakfastNum}}早餐 <text style="margin:0 20px;">{{lunchNum}}午餐</text> {{dinnerNum}}晚餐
</view>
<view class="jz_Zhankai" style="display:none;">展开全部</view>
</view>
<view class="jz_TripDays">
<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程概要</text>
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<view class="jz_TripLine"></view>
<view v-for="(item,index) in dataList.dayList" :key="index">
<view class="jz_TripTitle">
<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
<view class="jz_TripRight"></view>
</view>
<view class="jz_RightInner">
<view v-for="(subItem,SubIndex) in item.dayArray" v-if="subItem.type==7" :key="SubIndex">
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text>{{subItem.childItem.title}}</text>
</view>
</view>
<template v-for="(subItem,index2) in item.dayArray" v-if="subItem.type==2">
<view class="jz_ImgDiv" :key="index2">
<img mode="aspectFill" :src="subItem.childItem.imaArray[0].url" alt="">
</view>
<view class="jz_Place" style="align-items: center;">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
{{subItem.childItem.couponsName}}
<text class="jz_Fenzhong">
<template v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">约</template>
<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
<template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
</text>
</text>
</view>
<view class="jz_Jinddian">
{{subItem.childItem.descriptionText}}
</view>
</template>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
<template v-for="(subItem,sIndex) in item.dayArray" v-if="subItem.type==6">
<text :key="sIndex">{{subItem.childItem.descriptionText}}</text>
</template>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
<template v-for="(subItem,sIndex2) in item.dayArray" v-if="subItem.type==4">
<text style="margin-right:20px;" :key="sIndex2" v-if="subItem.childItem.useDinnerType=='1'">{{subItem.childItem.dinnerName}}</text>
<text style="margin-right:20px;" v-if="subItem.childItem.useDinnerType=='2'">{{subItem.childItem.dinnerName}}</text>
<text v-if="subItem.childItem.useDinnerType=='3'">{{subItem.childItem.dinnerName}}</text>
</template>
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
<template v-for="(subItem,sIndex3) in item.dayArray" v-if="subItem.type==3">
<text :key="sIndex3">{{subItem.childItem.hotelName}}<text v-if="index!=dataList.dayList.length-1" style="margin:0 5px;">/</text></text>
</template>
<text v-if="index!=dataList.dayList.length-1">或同级</text>
</text>
</view>
</view>
</view>
</view>
</view>
<view class="jz_OrderDiv">
<view style="color:#FF3166;font-weight:bold;">
<text style="font-size:22rpx;">¥</text>
<text style="font-size:40rpx;">{{dataList.currentPriceInfo.b2BPrice}}</text>
<text style="font-size:22rpx;">/起</text>
</view>
<view style="display:flex;">
<button open-type="contact" class="jz_ConButton">
<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
<view style="color:#111111;font-size: 22rpx;">客服</view>
</button>
<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
</view>
</view>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
pageTitle: '线路详情',
msg: {
pageIndex: 1,
pageSize: 15
},
dataList: {}, //数据
delMsg: {
tcid: 0,
configId: 0
},
scenicNum: 0, // 景点数量
breakfastNum: 0, //早餐数
lunchNum: 0, //午餐数
dinnerNum: 0 //晚餐数
};
},
created() {
.jz_ZhaiTitle {
color: #1F1F1F;
font-size: 28rpx;
font-weight: bold;
margin-top: 40rpx;
}
},
onLoad(option) {
if (option.tcid && option.configId) {
this.delMsg.tcid = option.tcid;
this.delMsg.configId = option.configId;
this.getDetails();
.jz_ZhaiInner {
color: #6E6E6E;
font-size: 24rpx;
margin: 22rpx 0 0 30rpx;
}
},
methods: {
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDesV1",
this.delMsg,
res => {
console.log(res, '详情');
if (res.resultCode == 1) {
this.dataList = res.data;
this.scenicNum = 0;
this.dataList.dayList.forEach(x => {
x.dayArray.forEach(y => {
if (y.type == 2) {
this.scenicNum++;
.jz_Zhankai {
width: 220rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
color: #1F1F1F;
font-size: 24rpx;
border-radius: 8rpx;
border: 1px solid #111111;
margin: 40rpx auto;
}
if (y.type == 4 && y.childItem.useDinnerType == 1) {
this.breakfastNum++;
.jz_TripMain {
position: relative;
overflow: hidden;
}
if (y.type == 4 && y.childItem.useDinnerType == 2) {
this.lunchNum++;
.jz_TripTitle {
width: 100%;
height: 90rpx;
border-radius: 20rpx;
background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28rpx;
}
if (y.type == 4 && y.childItem.useDinnerType == 3) {
this.dinnerNum++;
.jz_TripLeft {
font-size: 32rpx;
}
})
})
} else {
.jz_TripRight {
color: #111111;
font-size: 22rpx;
}
},
null
);
},
//转换图片格式
getCoverImg(imgCover) {
if (imgCover) {
return JSON.parse(imgCover)
.jz_TripLine {
position: absolute;
width: 4rpx;
height: 100%;
background-color: #111111;
left: 24rpx;
top: 90rpx;
}
},
//返回天数
getDays(day) {
if (day < 10) {
return '0' + day
} else {
return day
.jz_RightInner {
margin-left: 50rpx;
}
},
//返回月 日
getMonth(day) {
if (day) {
let Myday = day.split('-');
return Myday[1] + '-' + Myday[2]
.jz_Place {
position: relative;
color: #111111;
font-size: 24rpx;
margin: 30rpx 0;
font-weight: bold;
display: flex;
}
},
//点击切换
getDayInfo(item){
this.delMsg.tcid = item.tcid;
this.delMsg.configId = item.configID;
this.getDetails();
},
//立即预定
goReserce(){
let myCurrentInfo = this.dataList.currentPriceInfo;
myCurrentInfo.startCityName = this.dataList.startCityName;
let imgCover = JSON.parse(this.dataList.imgCover);
if(imgCover.length>0){
myCurrentInfo.CoverImg = imgCover[0].Url;
.jz_ComDian {
width: 18rpx;
height: 18rpx;
background-color: #DFBE6E;
border-radius: 50%;
position: absolute;
left: -17.6px;
top: 4px;
}
let myCurr = JSON.stringify(myCurrentInfo);
console.log(myCurrentInfo,'myCurrentInfo');
uni.navigateTo({
url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)
});
.jz_ImgDiv {
width: 612rpx;
height: 376rpx;
border-radius: 20rpx;
overflow: hidden;
}
},
};
</script>
.jz_ImgDiv img {
width: 100%;
height: 100%;
}
.jz_Rermark {
color: #999999;
font-size: 23rpx;
line-height: 20px;
}
.jz_Canyin {
color: #999999;
font-size: 23rpx;
margin-right: 44rpx;
flex-shrink: 0;
}
.jz_CanInner {
color: #111111;
font-size: 26rpx;
}
.jz_ArrowImg {
width: 25rpx;
height: 5rpx;
margin: 0 5px;
position: relative;
top: -3px;
}
.jz_Fenzhong {
color: #999999;
font-size: 22rpx;
margin-left: 20rpx;
}
.jz_Jinddian {
margin: 23rpx 0 31rpx 0;
color: #999999;
font-size: 23rpx;
line-height: 20px;
}
.jz_StartHoubu {
color: #111;
font-size: 20rpx;
font-weight: 500;
margin: 10rpx 0;
}
.jz_orderbox{
height: 160rpx;
position: fixed;
background-color: #fff;
bottom: 0;
width: 100vw;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.jz_OrderDiv{
width:90%;
height:100rpx;
background-color: #fff;
margin:auto;
padding:20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
border-radius: 16px;
z-index:999;
}
.jz_OrderNow{
width:190rpx;
height:80rpx;
background-color: #111111;
text-align: center;
line-height: 80rpx;
color:#fff;
font-weight: bold;
font-size:28rpx;
border-radius: 16rpx;
}
.jz_ConButton{
background-color: #fff;
height:40px;
line-height: 18px;
margin-top:3px;
}
.jz_ConButton::after{
border: none!important;
height:auto!important;
}
</style>
\ No newline at end of file
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