Skip to content

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

调整线路查询条件

parent 7e05c2d7
Show whitespace changes
Inline Side-by-side
Showing with 1473 additions and 63 deletions
App.vue
View file @ a06ffcbd
......@@ -104,6 +104,7 @@ export default {
<style lang="scss">
@import "uview-ui/index.scss";
// @font-face {
// font-family: "oswald";
// src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
asset/css/iconfont.css deleted 100644 → 0
View file @ 7e05c2d7
@font-face {
font-family: 'iconfont';
/* project id 1830471 */
src: url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.eot');
src: url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.eot?#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.woff2') format('woff2'), url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.woff') format('woff'), url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.ttf') format('truetype'), url('https://at.alicdn.com/t/font_1830471_h2mse3jucma.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconweibiaoti-:before {
content: "\e607";
}
\ No newline at end of file
node_modules/uview-ui/ali-iconfont.css 0 → 100644
View file @ a06ffcbd
@font-face {
font-family: "iconfont"; /* Project id 1830471 */
src: url('//at.alicdn.com/t/font_1830471_b1q5b9z71n.woff2?t=1622518908789') format('woff2'),
url('//at.alicdn.com/t/font_1830471_b1q5b9z71n.woff?t=1622518908789') format('woff'),
url('//at.alicdn.com/t/font_1830471_b1q5b9z71n.ttf?t=1622518908789') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconartboard9-copy:before {
content: "\e726";
}
.iconerweima:before {
content: "\e654";
}
.iconweibiaoti-:before {
content: "\e607";
}
node_modules/uview-ui/components/u-icon/u-icon.vue
View file @ a06ffcbd
......@@ -60,7 +60,11 @@ export default {
computed: {
customClass() {
let classes = [];
if(this.customPrefix!='iconfont'){
classes.push(this.customPrefix + '-' + this.name);
}else{
classes.push(this.name)
}
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
......@@ -93,6 +97,7 @@ export default {
<style scoped lang="scss">
// @import '../../iconfont.css';
@import '../../vantfont.css';
@import '../../ali-iconfont.css';
.uicon {
display: inline-flex;
......
node_modules/uview-ui/components/u-search/u-search.vue
View file @ a06ffcbd
......@@ -9,7 +9,7 @@
height: height + 'rpx'
}"
>
<view class="u-icon-wrap"><u-icon class="u-clear-icon" :size="30" name="search" color="#909399"></u-icon></view>
<view class="u-icon-wrap"><u-icon class="u-clear-icon" :size="32" name="iconartboard9-copy" customPrefix="iconfont" color="#000"></u-icon></view>
<input
confirm-type="search"
@blur="blur"
......
pages/jiuzhai/components/time/day.js 0 → 100644
View file @ a06ffcbd
//节假日信息
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/time/index.vue 0 → 100644
View file @ a06ffcbd
<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 {
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.setDate();
this.nowDay = new Date().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: {
//月份补零
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_Line.vue
View file @ a06ffcbd
......@@ -2,7 +2,7 @@
.jz_Line {}
.jz_Content {
margin: 30rpx 30rpx 0 30rpx;
margin: 20rpx 0rpx 30rpx 0rpx;
}
.jz_List {
......@@ -133,49 +133,215 @@
top: 130px;
z-index: 999;
}
.jz_Recommend{
color:#999999;
font-size:24rpx;
.jz_Recommend {
color: #999999;
font-size: 24rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top:10px;
margin-top: 10px;
line-height: 20px;
}
.jz_Content .search-box {
height: 88rpx;
background: #ECF1F4;
border-radius: 44rpx;
display: flex;
align-items: center;
padding: 19rpx 30rpx;
margin: 0 30rpx;
}
.jz_Content .search-box .date {
height: 50rpx;
font-size: 28rpx;
font-weight: 500;
color: #111111;
line-height: 50rpx;
margin-right: 30rpx;
display: flex;
align-items: center;
}
.jz_Content .team-box {
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.jz_Content .team-box:after {
content: "";
flex: auto;
}
.jz_Content .team-box .team {
width: calc(50% - 30rpx);
background: #ECF1F4;
border-radius: 10rpx;
font-size: 26rpx;
color: #999999;
text-align: center;
padding:20rpx;
margin-top:30rpx;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.jz_Content .team-box .team.active {
background: #111111;
color: #FFFFFF;
}
.jz_Content .team-box .team .team-content{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.jz_Content .start-range-box{
background: #ECF1F4;
border-radius: 10rpx;
margin-top:30rpx;
display: flex;
align-items: center;
padding:20rpx;
}
.jz_Content .start-range-box .date-box{
flex:1;
font-weight: 400;
}
.jz_Content .start-range-box .split-box{
color: #bbb;
font-size: 24rpx;
margin:0 20rpx
}
.jz_Content .start-range-box .date-box.right view{
text-align: right;
}
.jz_Content .start-range-box .date-box .label{
color:#bbb;
font-size: 24rpx;
}
.jz_Content .start-range-box .date-box .chosen-date{
color:#111;
font-size: 28rpx;
font-weight: 600;
}
</style>
<template>
<div class="jz_Line" >
<div class="jz_Line">
<view class="jz_Content">
<u-search placeholder="目的地,旅游线路" shape="round" v-model="searchKey" input-align="left" :value="searchKey" text-color="#111"
:show-action="false"></u-search>
<view class="jz_Sort">
<view class="jz_SortItem">价格</view>
<view class="jz_SortItem">团期</view>
<view class="jz_SortItem" @click="screenshow=true">线路</view>
<view class="jz_SortItem" @click="isShowDate=true">日期</view>
<!-- <u-search placeholder="目的地,旅游线路" shape="round" v-model="searchKey" input-align="left" :value="searchKey" text-color="#111"
:show-action="false"></u-search> -->
<view class="search-box">
<view class="date">
<u-icon name="location" color="#111" size="24"></u-icon>
<text style="margin-left: 20rpx;">成都站</text>
</view>
<view v-if="screenshow==true" class="Jz_tanchu">
<scroll-view :scroll-y="true" :enable-back-to-top="true" style="max-height: 321px;">
<view class="Jz_tanchu_item" v-for="(item, index) in lineList" :key="index" @click="onItemSelect(item)">
<view style="display: flex;flex-direction: row;align-items: center;">
<span>{{item.label}}</span>
<view style="width: 1px; flex: 1;">
<u-search placeholder="目的地名称" v-model="searchKey" input-align="left" :value="searchKey"
text-color="#111" bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
</view>
</view>
<view>
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<u-dropdown-item v-model="msg.orderBy" :title="optionsTitle[0]" :options="orderBys"
@change="changeOrderBy">
</u-dropdown-item>
<u-dropdown-item :title="optionsTitle[1]">
<view class="slot-content" style="padding: 30rpx;padding-top:0;background-color: #FFF;">
<scroll-view scroll-y="true" style="max-height: 50vh;">
<template v-for="(x,i) in lineList">
<view style="padding-top:30rpx">
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">{{x.DestinationName}}</text>
</view>
<view class="team-box">
<view v-for="(y,yi) in x.Teams" :key="i" class="team" :class="{'active':msg.team.indexOf(y.TeamId)!=-1}" @click="setTeams(i,yi)">
<view class="team-content">{{y.TeamName}}</view>
</view>
</view>
</template>
</scroll-view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="clearTeams">清除</u-button>
</view>
<view style="flex:1;">
<u-button :custom-style="btnStyle2" @click="changeTeams">完成</u-button>
</view>
</view>
</view>
</u-dropdown-item>
<u-dropdown-item :title="optionsTitle[2]">
<view class="slot-content" style="padding: 30rpx;padding-top:0;background-color: #FFF;">
<scroll-view scroll-y="true" style="max-height: 50vh;">
<view style="padding-top:30rpx">
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">行程天数</text>
</view>
<view class="team-box" >
<view v-for="x in days" class="team" style="width:calc(25% - 30rpx);" :class="{'active':msg.days.indexOf(x.day)!=-1}" @click="setDays(x.day)">{{x.name}}</view>
</view>
<view style="padding-top:30rpx">
<text style="font-size: 28rpx;color:#111;font-weight: 800;margin-right: 10rpx;">出发日期</text>
</view>
<view class="start-range-box" @click="showTimePopup=true">
<view class="date-box">
<view class="label">最早出发日期</view>
<view class="date" style="font-weight: 400;" v-if="msg.startDate==''">选择日期</view>
<view class="date" v-else>{{msg.startDate}}</view>
</view>
<view class="split-box">-至-</view>
<view class="date-box right">
<view class="label">最晚出发日期</view>
<view class="date" style="font-weight: 400;" v-if="msg.endDate==''">选择日期</view>
<view class="date" v-else>{{msg.endDate}}</view>
</view>
<u-icon name="success" :color="mainColor" size="30"></u-icon>
</view>
</scroll-view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="clearDayAndDate">清除</u-button>
</view>
<view style="flex:1;">
<u-button :custom-style="btnStyle2" @click="changeDayAndDate">完成</u-button>
</view>
</view>
</view>
</u-dropdown-item>
<u-dropdown-item v-model="msg.startCity" :title="optionsTitle[3]" :options="startCitys"
@change="changeStartCity" >
</u-dropdown-item>
<!-- <u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item> -->
</u-dropdown>
</view>
<!-- <view class="jz_Sort">
<view class="jz_SortItem">价格</view>
<view class="jz_SortItem">团期</view>
<view class="jz_SortItem" @click="screenshow=true">线路</view>
<view class="jz_SortItem" @click="isShowDate=true">日期</view>
</view> -->
<view v-if="screenshow==true" class="Jz_Mask" @click="screenshow=false"></view>
<u-empty v-if="dataList.length==0" text="暂无数据" mode="data"></u-empty>
<template v-else>
<view style="height: calc(100vh - 120px);overflow: hidden;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index" @click="goJzDetail(item.tcid,item.configId)">
<view style="height: calc(100vh - 120px);overflow: hidden;padding: 0 30rpx;">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
:style="{ height: '100%' }">
<view class="jz_ListMain" v-for="(item,index) in dataList" :key="index"
@click="goJzDetail(item.tcid,item.configId)">
<view class="jz_List">
<view class="jz_TuDiv">
<img class="jz_TuBigImg" mode="aspectFill" :src="getImgs(item.imgCover)" alt="" />
<view class="jz_TuDivBotm">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/address.png" />成都出发
<img
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/address.png" />成都出发
{{item.dayNum}} 天
</view>
</view>
......@@ -185,7 +351,8 @@
{{item.productRecommend}}
</view>
<view style="margin:10px 0">
<img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}
<img class="jz_calederImg"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}
<text class="jz_Canhoubu">
{{item.isSubstitution==0?'不可候补':'可以候补'}}
</text>
......@@ -204,19 +371,30 @@
</template>
</view>
<u-picker mode="time" v-model="isShowDate" @confirm='getStratDate' :params="params"></u-picker>
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
</div>
</template>
<script>
import canlendar from "./components/time/index.vue"
export default {
components: {
canlendar
},
data() {
return {
pageTitle: '线路',
showTimePopup:false,
msg: {
pageIndex: 1,
pageSize: 15
pageSize: 15,
orderBy: "",
team:[],
days:['<100'],
startDate:'',
endDate:'',
startCity:-1
},
time: '',
params: {
......@@ -227,33 +405,303 @@
minute: false,
second: false
},
btnStyle:{
borderRadius: '16rpx',
color: '#111',
fontSize: '30rpx',
width: '100%',
border:"1px solid #111",
background:"#FFF"
},
btnStyle2:{
borderRadius: '16rpx',
color: '#fff',
fontSize: '30rpx',
width: '100%',
background:"#111"
},
dataList: [], //数据
searchKey: '', //搜索数据
value1: 1,
isShowDate: false,
lineList: [{
label: '出境日本线',
orderBys: [{
label: '推荐排序',
value: 1,
},
{
label: '国内线',
label: '好评优先',
value: 2,
},
{
label: '低价优先',
value: 3,
},
{
label: '高价优先',
value: 4,
}
],
lineList: [{
DestinationName: '四川',
DestinationId: 1,
Teams:[
{
TeamName:"星空九寨",
TeamId:1
},
{
TeamName:"锦绣九寨",
TeamId:2
},
{
TeamName:"亲子系列：亲亲宝贝熊猫体验夏令营",
TeamId:3
},
{
TeamName:"礼佛峨眉·乐山大佛",
TeamId:4
}
]
},
{
DestinationName: '新疆',
DestinationId: 2,
Teams:[
{
TeamName:"印象新疆漫游西域假期",
TeamId:11
},
{
TeamName:"花间集~“杏”好遇见你",
TeamId:21
}
]
},
{
DestinationName: '内蒙古',
DestinationId: 2,
Teams:[
{
TeamName:"印象内蒙古草原风情",
TeamId:12
},
{
TeamName:"邂逅·内蒙",
TeamId:22
},
{
TeamName:"诗画·内蒙",
TeamId:32
},
{
TeamName:"辽阔•内蒙",
TeamId:42
},
{
TeamName:"私享内蒙",
TeamId:52
},
{
TeamName:"绝美金秋·额济纳旗",
TeamId:62
}
]
}
],
days:[
{
name:"不限",
day:'<100'
},
{
name:"2日以下",
day:'<=2'
},
{
name:"3日",
day:'=3'
},
{
name:"4日",
day:'=4'
},
{
name:"5日",
day:'=5'
},
{
name:"6日",
day:'=6'
},
{
name:"7日",
day:'=7'
},
{
name:"8日以上",
day:'>=8'
}
],
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
startCitys:[
{
label:'不限',
value:-1
},
{
label:'成都',
value:0
},
{
label:'绵阳',
value:1
},
{
label:'德阳',
value:2
}
],
screenshow: false,
status: "加载中",
page_count:0
page_count: 0,
optionsTitle: [
"推荐排序",
"线路玩法",
"天数日期",
"出发城市"
],
};
},
created() {
this.getList();
uni.setNavigationBarTitle({
title:"精品旅游线路"
})
},
methods: {
setDays(day){
if(day=='<100'){
this.msg.days=['<100']
}else{
if(this.msg.days.indexOf('<100')!=-1){
this.msg.days.splice(this.msg.days.indexOf('<100'),1)
}
let temp=this.msg.days.indexOf(day)
if(temp==-1){
this.msg.days.push(day)
}else{
this.msg.days.splice(temp,1)
}
}
},
clearDayAndDate(){
this.msg.days=['<100']
this.optionsTitle[2]='天数日期'
this.msg.startDate=''
this.msg.endDate=''
this.$forceUpdate()
this.$refs.uDropdown.close();
},
changeDayAndDate(){
let temp=''
if(this.msg.days.indexOf("<100")==-1){
this.msg.days.forEach(x=>{
this.days.forEach(y=>{
if(y.day==x){
temp+=y.name+","
}
})
})
}
if(this.msg.startDate!=''){
temp+="最早:"+this.msg.startDate+","
}
if(this.msg.endDate!=''){
temp+="最早:"+this.msg.endDate+","
}
this.optionsTitle[2]=temp==''?'天数日期':temp
this.$forceUpdate()
this.$refs.uDropdown.close();
},
chosenDateResult(obj) {
this.msg.startDate = obj.start;
this.msg.endDate = obj.end;
this.showTimePopup = false
},
clearTeams(){
this.msg.team=[]
this.optionsTitle[1]='线路玩法'
this.$forceUpdate()
this.$refs.uDropdown.close();
},
changeTeams(){
if(this.msg.team.length==0){
this.optionsTitle[1]='线路玩法'
}else{
let temp=''
this.lineList.forEach(x=>{
x.Teams.forEach(y=>{
if(this.msg.team.indexOf(y.TeamId)!=-1){
temp+=y.TeamName+","
}
})
})
this.optionsTitle[1]=temp
}
this.$forceUpdate()
this.$refs.uDropdown.close();
},
setTeams(x,y){
let id=this.lineList[x].Teams[y].TeamId
let temp=this.msg.team.indexOf(id)
if(temp==-1){
this.msg.team.push(id)
}else{
this.msg.team.splice(temp,1)
}
this.$forceUpdate()
},
changeOrderBy(index) {
let temp = this.orderBys.find(x => {
if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[0] = temp.label
this.msg.orderBy=temp.value
this.$forceUpdate()
},
changeStartCity(index) {
if(index==-1){
this.optionsTitle[3] = "出发城市"
this.msg.startCity=-1
}else{
let temp = this.startCitys.find(x => {
if (x.value == index) {
return x
} else {
return false
}
})
this.optionsTitle[3] = temp.label+"出发"
this.msg.startCity=temp.value
}
this.$forceUpdate()
},
open(index) {
this.$refs.uDropdown.highlight();
},
close(index) {
this.$refs.uDropdown.highlight(index);
},
//获取数据
getList() {
this.apipost(
......@@ -284,15 +732,15 @@
}
},
//跳转至详情
goJzDetail(tcid,configId){
goJzDetail(tcid, configId) {
uni.navigateTo({
url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid +'&configId='+configId
url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid + '&configId=' + configId
});
},
//获取第一张图
getImgs(imgObj){
getImgs(imgObj) {
let imgArr = JSON.parse(imgObj);
if(imgArr&&imgArr.length>0){
if (imgArr && imgArr.length > 0) {
return imgArr[0].Url
}
}
......
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