Skip to content

J
jz_Travel
Commit d540c46d authored by Mac's avatar Mac
Browse files
Options

1

parent c63ceb50
Hide whitespace changes
Inline Side-by-side
Showing with 1416 additions and 144 deletions
pages/guidecar/bookaCarList.vue
View file @ d540c46d
<style scoped lang="scss">
.bookaCarList{
width: 100%;
height: 100vh;
background: #FFF;
.box-top{
width: 100%;
height: 50px;
display: flex;
align-items: center;
padding: 0 15px;
.box-top-b{
<style scoped lang="scss">
.bookaCarList {
width: 100%;
height: 100vh;
font-family: PingFang SC;
background: #FFF;
.mask {
width: 100%;
height: 100%;
background: rgba(17, 17, 17, 0.4);
position: fixed;
top: 0;
left: 0;
}
.box-top {
width: 100%;
height: 50px;
display: flex;
align-items: center;
padding: 0 15px;
.box-top-b {
width: 100%;
height: 45px;
background: #ECF1F4;
border-radius: 23px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
.box-top-b-l {
width: calc((100vw - 30px - 30px - 30px)/2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
}
}
.box-rili {
width: 100%;
height: 80px;
display: flex;
align-items: center;
padding: 0 10px;
position: relative;
box-shadow: 0px 5px 15px 0px rgba(36, 36, 36, 0.06);
.box-rili-scroll {
width: 100%;
overflow-x: auto;
display: flex;
}
.box-rili-item {
// width: 50px;无效
height: 50px;
border-radius: 10px;
font-size: 13px;
color: #111111;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.box-rili-item2 {
color: #FFF;
background: #111111;
}
.porili {
width: 120rpx;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
}
.scr-box {
width: 100%;
box-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.14);
border-radius: 10px;
margin-top: 15px;
.scr-box-top {
width: 100%;
padding: 15px;
.s-t-t {
width: 100%;
display: flex;
align-items: center;
font-size: 15px;
font-weight: 800;
color: #111111;
line-height: 35px;
}
}
.s-c-box {}
.s-c-o {
display: flex;
align-items: center;
justify-content: space-between;
}
.s-c-l {
flex: 1;
width: 1px;
display: flex;
align-items: flex-start;
}
.s-c-r {
width: 80px;
}
.chufatime {
width: 44px;
font-size: 11px;
font-weight: 500;
color: #111111;
line-height: 25px;
}
.setoutdian {
width: 5px;
height: 5px;
border-radius: 50%;
background: #111111;
margin-top: 10px;
margin-right: 2px;
}
.s-c-place {
font-size: 12px;
font-weight: bold;
color: #111111;
line-height: 25px;
width: calc(100vw - 60px - 44px - 5px - 80px - 2px);
}
.prices {
color: #FF3166;
font-size: 16px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.sold {
color: #111111;
font-size: 11px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.shuxian {
width: 1px;
height: 10px;
background: #111111;
margin-left: 46px;
}
.s-b-box {
width: 100%;
padding: 15px;
background: #F4F6F7;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
.s-b-box-l {
display: flex;
align-items: flex-start;
font-size: 11px;
color: #999999;
margin-top: 10px;
}
.s-b-box-r {
width: 60px;
height: 30px;
border: 1px solid #111111;
border-radius: 5px;
font-size: 13px;
color: #111111;
text-align: center;
line-height: 30px;
}
.s-b-box-posi {
width: 100%;
position: absolute;
left: 0;
top: -6px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.screenbottom {
width: calc(100vw - 40px);
height: 50px;
border-radius: 8px;
position: fixed;
left: 20px;
bottom: 30px;
box-shadow: 0px 5px 15px 0px rgba(36, 36, 36, 0.2);
display: flex;
align-items: center;
background: #FFF;
z-index: 9;
.screenbottom-item {
width: calc((100vw - 40px - 2px)/3);
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
color: #6E6E6E;
font-weight: 500;
}
.screenbottom-sx {
width: 1px;
height: 25px;
background: rgba(17, 17, 17, 0.3);
}
}
.popup-box {
width: 100%;
background: #FFF;
.picker-view {
width: 750rpx;
height: 300rpx;
margin-top: 20rpx;
}
.item{
height: 50px;
align-items: center;
justify-content: center;
text-align: center;
}
.btn{
width: 100%;
height: 45px;
background: #ECF1F4;
border-radius: 23px;
height: 40px;
margin: 30px 0;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
.box-top-b-l{
width: calc((100vw - 30px - 30px - 30px)/2);
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
text-align: center;
}
}
.btn-item1{
width: 300rpx;
height: 40px;
border-radius: 10px;
border: 1px solid #111111;
font-size: 14px;
color: #111111;
display: flex;
align-items: center;
justify-content: center;
}
.btn-item2{
width: 300rpx;
height: 40px;
font-size: 14px;
color: #FFFFFF;
background: #111111;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
}
.box-rili{
.kongbai{
width: 100%;
height: 80px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 10px;
position: relative;
font-size: 14px;
color: #999999;
}
}
</style>
<template>
<view class="bookaCarList">
<view class="box-top">
<view class="box-top-b">
<view class="box-top-b-l">
{{carMsg.StartCityName}}
</view>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png" mode="aspectFill" style="width: 20px;height: 20px;"></image>
<view class="box-top-b-l">
{{carMsg.ArriveCityName}}
</view>
</view>
</view>
<view class="box-rili">
<view class="box-rili-scroll">
}
}
</style>
<template>
<view class="bookaCarList">
<view class="box-top">
<view class="box-top-b">
<view class="box-top-b-l">
{{carMsg.StartCityName}}
</view>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png"
mode="aspectFill" style="width: 20px;height: 20px;"></image>
<view class="box-top-b-l">
{{carMsg.ArriveCityName}}
</view>
</view>
</view>
<view class="box-rili">
<view class="box-rili-scroll">
<view class="box-rili-item" :class="{'box-rili-item2':msg.Q_Date == x.date}"
v-for="(x,y) in topdateList" :key='y' @click="choicedatelist(x)">
<span style='width: 50px;display: inline-block;text-align: center;'>{{x.showdate}}</span>
<span>{{x.week}}</span>
</view>
</view>
<view class="porili" @click="showcalendar = true">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dingcherilitubiao.png"
mode="aspectFill" style="width: 48rpx;height: 48rpx;"></image>
</view>
</view>
<view class="kongbai" v-if="g.length == 0" >
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dingchekongbai.png"
mode="aspectFill" style="width: 110px;height: 117px;margin-top: 180rpx;"></image>
<span style='margin-top: 20px;'>真遗憾，没有相关数据</span>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
pageTitle: "去订车",
msg:{
pageIndex:1,
pageSize:20,
StartCityId:0,
StartCityType:0,
ArriveCityId:0,
ArriveCityType:0,
Q_Date:'',
StartCityName:'',
ArriveCityName:'',
<view style="height: calc(100% - 130px);" v-if="g.length > 0">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
style="height: 100%;width: 100%">
<view style="padding: 0 15px;">
<view class="scr-box" v-for="(x,y) in g" :key='y'>
<view class="scr-box-top">
<view class="s-t-t">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufa.png"
mode="aspectFill" style="width: 13px;height: 11px;"></image>
<span style='margin-left: 5px;'>{{x.StartCityName}}</span>
<span style='margin:0 5px;'>-</span>
<span>{{x.ArriveCityName}}</span>
</view>
<view class="s-c-box" v-if="x.show==false">
<view class="s-c-o">
<view class="s-c-l">
<view class='chufatime'>{{x.SiteList[0].AboutTime}}</view>
<view class="setoutdian"></view>
<view class="s-c-place">{{x.SiteList[0].Name}}</view>
</view>
<view class="s-c-r prices">
<span style='margin-top: 3px;font-size: 11px;'>￥</span>
<span style='font-weight: bold;'>{{x.Price}}</span>
<span style='margin-top: 3px;font-size: 11px;'>起</span>
</view>
</view>
<view class="shuxian"></view>
<view class="s-c-o">
<view class="s-c-l">
<view class='chufatime'>
{{x.SiteList[x.SiteList.length-1].AboutTime!=null && x.SiteList[x.SiteList.length-1].AboutTime!=''?x.SiteList[x.SiteList.length-1].AboutTime:''}}
</view>
<view class="setoutdian" style="background: #DFBE6E;"></view>
<view class="s-c-place">{{x.SiteList[x.SiteList.length-1].Name}}</view>
</view>
<view class="s-c-r sold">
<span v-if='x.SurplusNum>0 && x.ProductState==1'>余位:{{x.SurplusNum}}</span>
<span v-if='x.ProductState==2'>已售罄</span>
</view>
</view>
</view>
<view class="s-c-box" v-if="x.show == true ">
<view v-for='(item,index) in x.SiteList' :key='index'>
<view class="s-c-o">
<view class="s-c-l">
<view class='chufatime'>
{{item.AboutTime!=null && item.AboutTime!=''?item.AboutTime:''}}
</view>
<view class="setoutdian" v-if="x.SiteList.length-1 !=index"></view>
<view class="setoutdian" v-else style="background: #DFBE6E;"></view>
<view class="s-c-place">{{item.Name}}</view>
</view>
<view class="s-c-r prices" v-if="index==0">
<span style='margin-top: 3px;font-size: 11px;'>￥</span>
<span style='font-weight: bold;'>{{x.Price}}</span>
<span style='margin-top: 3px;font-size: 11px;'>起</span>
</view>
<view class="s-c-r sold" v-if="index==x.SiteList.length-1">
<span v-if='x.SurplusNum>0 && x.ProductState==1'>余位:{{x.SurplusNum}}</span>
<span v-if='x.ProductState==2'>已售罄</span>
</view>
</view>
<view class="shuxian" v-if='index!=x.SiteList.length-1'></view>
</view>
</view>
</view>
<view class="s-b-box">
<view class="s-b-box-posi" v-if="x.SiteList.length>2">
<u-icon v-if='x.show == false' name="arrow-down" color="#111111" size="30"
@click="getlistshow(y)" />
<u-icon v-if='x.show == true' name="arrow-up" color="#111111" size="30"
@click="getlistshow(y)" />
</view>
<view class="s-b-box-l">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dctixing.png"
mode="aspectFill" style="width: 9px;height: 13px;"></image>
<view style='margin-left: 3px;width: calc(100vw - 60px - 80px);'>{{x.Description}}
</view>
</view>
<view class="s-b-box-r" v-if="x.ProductState==1">
预定
</view>
</view>
</view>
</view>
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
bg-color="#FFF" />
<view style="width: 100%;height: 90px;"></view>
</scroll-view>
</view>
<view class="screenbottom">
<view class="screenbottom-item" @click="goscreen(0)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufa.png"
mode="aspectFill" style="width: 20px;height: 16px;"></image>
<span>出发地点</span>
</view>
<view class="screenbottom-sx"></view>
<view class="screenbottom-item" @click="goscreen(1)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcdaoda.png"
mode="aspectFill" style="width: 23px;height: 16px;"></image>
<span>到达地点</span>
</view>
<view class="screenbottom-sx"></view>
<view class="screenbottom-item" @click="goscreen(2)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufatime.png"
mode="aspectFill" style="width: 16px;height: 16px;"></image>
<span>出发时间</span>
</view>
</view>
<view class="mask" v-if="showcalendar"></view>
<calendar :is-show="showcalendar" :start-date='msg.Q_Date' @callback="getDate" @closeback='getclose'
:init-month='3' />
<u-popup v-model="screenshow" mode='bottom' ref="onlyhover">
<view class="popup-box">
<view class="popup-box-t">
<u-tabs style='width: 100%;' :is-scroll="false" name="name" :list="popuplist"
:active-color="mainColor" :current="popupcurrent" @change="popupchange" :show-bar="false"
:activeFontSize="34" :inactive-color="secondary" :bold="true" height="100" duration="0"
font-size="28"></u-tabs>
<picker-view v-show="popupcurrent==0" @change="getpopupcu1" class="picker-view">
<picker-view-column>
<view class=" item" v-for="(item,index) in DepartList" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
<picker-view v-show="popupcurrent==1" @change="getpopupcu2" class="picker-view">
<picker-view-column>
<view class=" item" v-for="(item,index) in ArriveList" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
<picker-view v-show="popupcurrent==2" @change="getpopupcu3" class="picker-view">
<picker-view-column>
<view class=" item" v-for="(item,index) in alltime" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
<view class="btn">
<view class="btn-item1" @click="chongzhi">重置</view>
<view class="btn-item2" @click="queren">确认</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import Calendar from './components/Calendar.vue'
export default {
components: {
Calendar,
},
data(options) {
return {
screenshow: false,
startDate: '',
pageTitle: "去订车",
showcalendar: false,
mainColor: '',
msg: {
pageIndex: 1,
pageSize: 20,
StartCityId: 0,
StartCityType: 0,
ArriveCityId: 0,
ArriveCityType: 0,
Q_Date: '',
StartCityName: '',
ArriveCityName: '',
StartDate: '',
EndDate: '',
},
carMsg: {},
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
nomore: "没有更多了",
},
page_count: 1,
status: "loadmore",
g: [],
topdateList: [],
DepartList: [], //出发点数组
ArriveList: [], //到达点数组
timeList: [], //时间数组
alltime: ['不限', '00:00-03:00', '03:00-06:00', '06:00-09:00', '09:00-12:00',
'12:00-15:00', '15:00-18:00', '18:00-21:00', '21:00-24:00'
],
popuplist: [{
name: '出发地点'
}, {
name: '到达地点'
}, {
name: '出发时间'
}],
popupcurrent: 0,
SMsg:{
depart:'',
Arrive:'',
StartDate:'',
EndDate:'',
},
carMsg:{},
page_count:1,
status: "loadmore",
g: [],
}
}
},
},
onLoad(options) {
if(options && options.carMsg){
//对象解码
this.carMsg = JSON.parse(decodeURIComponent(options.carMsg))
this.msg.StartCityId = this.carMsg.StartCityId;
this.msg.StartCityType = this.carMsg.StartCityType;
this.msg.ArriveCityId = this.carMsg.ArriveCityId;
this.msg.ArriveCityType = this.carMsg.ArriveCityType;
this.msg.Q_Date = this.carMsg.Q_Date;
}
this.gettimeList()
this.init()
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods:{
gettimeList(){
var date1 = new Date();
var date2 = new Date(date1);
date2.setDate(date1.getDate() + 30);
let nowtime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() ;
let htime = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate() ;
this.getdiffdate(nowtime,htime)
},
getdiffdate(stime,etime){
console.log(stime,etime)
var diffdate = new Array();
var i=0;
//开始日期小于等于结束日期,并循环
while(stime<=etime){
diffdate[i] = stime;
//获取开始日期时间戳
var stime_ts = new Date(stime).getTime();
//增加一天时间戳后的日期
var next_date = stime_ts + (24*60*60*1000);
//拼接年月日，这里的月份会返回（0-11），所以要+1
var next_dates_y = new Date(next_date).getFullYear()+'-';
var next_dates_m = (new Date(next_date).getMonth()+1 < 10)?'0'+(new Date(next_date).getMonth()+1)+'-':(new Date(next_date).getMonth()+1)+'-';
var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate();
stime = next_dates_y+next_dates_m+next_dates_d;
//增加数组key
i++;
}
console.log(diffdate);
//处理为数组
console.log(222)
if (options && options.carMsg) {
//对象解码
this.carMsg = JSON.parse(decodeURIComponent(options.carMsg))
this.msg.StartCityId = this.carMsg.StartCityId;
this.msg.StartCityType = this.carMsg.StartCityType;
this.msg.ArriveCityId = this.carMsg.ArriveCityId;
this.msg.ArriveCityType = this.carMsg.ArriveCityType;
this.msg.Q_Date = this.carMsg.Q_Date;
}
this.mainColor = this.$uiConfig.mainColor;
this.gettimeList()
this.init();
this.getSelectCarSiteList()
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
popupchange(e) { //tab事件
this.popupcurrent = e;
},
goscreen(type) { //筛选的弹出
this.screenshow = true;
this.popupcurrent = type;
},
getlistshow(index) { //点击是否展开全部
this.g[index].show = !this.g[index].show
},
gettimeList() {
var date1 = new Date();
var date2 = new Date(date1);
date2.setDate(date1.getDate() + 60);
let nowtime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
let htime = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
this.topdateList = this.getDayAll(nowtime, htime)
this.startDate = nowtime
},
getDayAll(starDay, endDay) { //根据2个时间段获取之间的所有日期
var arr = [];
var dates = [];
// 设置两个日期UTC时间
var db = new Date(starDay);
var de = new Date(endDay);
// 获取两个日期GTM时间
var s = db.getTime() - 24 * 60 * 60 * 1000;
var d = de.getTime() - 24 * 60 * 60 * 1000;
// 获取到两个日期之间的每一天的毫秒数
for (var i = s; i <= d;) {
i = i + 24 * 60 * 60 * 1000;
arr.push(parseInt(i))
}
// 获取每一天的时间 YY-MM-DD
for (var j in arr) {
var time = new Date(arr[j]);
var year = time.getFullYear(time);
var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
var YYMMDD = year + '-' + mouth + '-' + day;
let showweek = time.getDay();
let week = this.getweek(showweek)
if (j == 0) {
week = '今天'
} else if (j == 1) {
week = '明天'
} else if (j == 2) {
week = '后天'
}
let obj = {
showdate: mouth + '/' + day,
date: YYMMDD,
week: week
}
dates.push(obj)
}
return dates
},
init(){
this.request2(
{
url: '/api/AppletCar/GetAppletCarCustomPageList',
data: this.msg
},
res => {
if(res.resultCode==1){
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
setData:function(obj){
let that = this;
let keys = [];
let val,data;
Object.keys(obj).forEach(function(key){
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function(key2,index){
if(index+1 == keys.length){
that.$set(data,key2,val);
}else{
if(!data[key2]){
that.$set(data,key2,{});
}
}
}
);
}
}
}
data = data[key2];
})
});
},
//获取回调的日期数据
getDate(date) {
this.msg.Q_Date = date.startStr.dateStr;
this.showcalendar = false;
this.msg.pageIndex = 1;
this.g = [];
this.init()
},
getclose() {
this.showcalendar = false;
},
getweek(day) { //根据值返回当前时间的星期几
if (day == 1) {
return '周一'
} else if (day == 2) {
return '周二'
} else if (day == 3) {
return '周三'
} else if (day == 4) {
return '周四'
} else if (day == 5) {
return '周五'
} else if (day == 6) {
return '周六'
} else if (day == 0) {
return '周日'
}
},
choicedatelist(x) {
this.msg.Q_Date = x.date;
this.msg.pageIndex = 1;
this.g = [];
this.init()
},
lower(e) {
if (this.msg.pageIndex < this.page_count) {
this.msg.pageIndex++;
this.status = "loading";
this.init();
} else {
this.status = "nomore";
}
},
init() {
uni.showLoading({
title: '加载中...'
})
this.request2({
url: '/api/AppletCar/GetAppletCarCustomPageList',
data: this.msg
},
res => {
uni.hideLoading()
if (res.resultCode == 1) {
let data = res.data.pageData;
data.map(x => { // 添加一个对象
x.show = false
})
this.g = this.g.concat(data);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
},
err => {
uni.hideLoading()
}
);
},
getSelectCarSiteList() {
this.request2({
url: '/api/AppletCar/GetAppletSelectCarSiteList',
data: {
StartCityId: this.msg.StartCityId,
StartCityType: this.msg.StartCityType,
ArriveCityId: this.msg.ArriveCityId,
ArriveCityType: this.msg.ArriveCityType,
Q_Date: this.msg.Q_Date,
StartCityName: '',
ArriveCityName: '',
StartDate: '',
EndDate: '',
}
},
res => {
this.DepartList = res.data.DepartList;
this.ArriveList = res.data.ArriveList;
this.DepartList.unshift('不限')
this.ArriveList.unshift('不限')
},
err => {
uni.hideLoading()
}
);
},
chongzhi(){
this.msg.StartCityName = '';
this.msg.ArriveCityName = '';
this.msg.StartDate = '';
this.msg.EndDate = '';
this.msg.pageIndex = 1;
this.g = [];
this.init();
this.screenshow = false;
this.$forceUpdate()
},
queren(){
this.msg.StartCityName = this.SMsg.depart;
this.msg.ArriveCityName = this.SMsg.Arrive;
this.msg.StartDate = this.SMsg.StartDate;
this.msg.EndDate = this.SMsg.EndDate;
this.msg.pageIndex = 1;
this.g = [];
this.init();
this.screenshow = false
},
getpopupcu1(e) {
let value = e.detail.value[0];
if(value==0){
this.SMsg.depart = ''
}else{
this.SMsg.depart = this.DepartList[value]
}
},
getpopupcu2(e) {
let value = e.detail.value[0];
if(value==0){
this.SMsg.Arrive = ''
}else{
this.SMsg.Arrive = this.ArriveList[value]
}
},
getpopupcu3(e) {
let value = e.detail.value[0];
if(value==0){
this.SMsg.StartDate = ''
this.SMsg.EndDate = ''
}else{
this.SMsg.StartDate = (this.alltime[value]).split('-')[0]
this.SMsg.EndDate = (this.alltime[value]).split('-')[1]
}
},
}
}
</script>
pages/guidecar/components/Calendar.vue 0 → 100644
View file @ d540c46d
<template>
<transition :name="transition">
<div class="calendar-tz" v-if="isShow" :class="isFixed&&'fixed'">
<slot name="header"></slot>
<view style="width: 100%;height: 40px;padding:0 15px ;
display: flex;align-items: center;justify-content: flex-end;position: relative;
">
<u-icon name="close" color="#1C75FF" size="48" @click="closeHandler" />
<!-- //三角形 -->
<view class="sjx"></view>
</view>
<div class="week-number">
<span v-for="(item,index) in weekList" :style="{color:(index==0||index==weekList.length-1)&&themeColor}" :key="index">{{item}}</span>
</div>
<p class="tips" v-if="title">{{title}}</p>
<div class="content" id="scrollWrap">
<div class="con" v-for="(item,index) in calendar" :key="index" :id="item.year+''+item.month">
<h3 v-text="item.year + '年' + item.month + '月'"></h3>
<span class="month-bg" :style="{color:getBetweenColor}">{{item.month}}</span>
<ul class="each-month">
<li class="each-day" v-for="(day,idx) in item.dayList" :key="idx" :class="[addClassBg(day, item.month, item.year)]" :style="{background:themeOpacityBg(day, item.month, item.year)}" @click="chooseDate(day, item.month, item.year)">
<div :class="[addClassName(day, item.month, item.year)]" :style="{background:themeBg(day, item.month, item.year)}">
<p class="day-tip" :style="{color:themeColor}"><i v-text="setTip(day, item.month, item.year,1)"></i></p>
<p class="day">{{day?day:''}}</p>
<p class="recent"><i v-text="setTip(day, item.month, item.year,2)"></i></p>
</div>
</li>
</ul>
</div>
</div>
<slot name="footer"></slot>
</div>
</transition>
</template>
<script>
export default {
props: {
isShow: {//是否显示
type: [Boolean],
default() {
return false;
}
},
isFixed: {//是否定位全屏
type: [Boolean],
default() {
return true;
}
},
transition: {//动画类型slide
type: [String],
default() {
return "";
}
},
title: {//头部的一段文本
type: [String, Object],
default() {
return "";
}
},
mode: {//模式：1普通日历，2酒店，3飞机往返
type: [String, Number],
default() {
return 1;
}
},
startDate: {//开始日期
type: [String, Object, Date]
},
endDate: {//结束日期
type: [String, Object, Date]
},
betweenStart: {//日历可选范围开始
type: [String, Object, Date],
default() {
return "";
}
},
betweenEnd: { //日历可选结束日期
type: [String, Object, Date],
default() {
return "";
}
},
initMonth: {//初始化的月数
type: [String, Number],
default() {
return 6;
}
},
themeColor: {//主题色
type: [String],
default: "#1C75FF"
}
},
data() {
return {
startDates: "",
endDates: "",
betweenStarts: "",
betweenEnds: "",
calendar: [],
weekList: ["日", "一", "二", "三", "四", "五", "六"]
};
},
watch: {
isShow() {
this.init();
},
betweenStart() {
this.init();
},
betweenEnd() {
this.init();
}
},
mounted() {
this.init();
},
computed: {
//设置主题色入住离开之间的背景色
getBetweenColor() {
if (!this.themeColor) return;
var hex = this.themeColor;
if (hex.length == 4) {
hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
}
var str = "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ",0.1)";
return str;
}
},
methods: {
init() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
this.today = new Date(this.year + "/" + this.month + "/" + this.day) * 1;
if (!this.startDate) {
const year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate();
this.startDates = this.resetTime(year + "/" + month + "/" + day);
this.startYear = year;
this.startMonth = month;
} else {
this.startDates = this.resetTime(this.startDate);
var dd = this.startDate.replace(/-/g, "/").split("/");
this.startYear = dd[0];
this.startMonth = dd[1];
}
if (!this.endDate) {
// var temp = this.startDates + 24 * 60 * 60 * 1000;
// var dateTemp = new Date(temp);
// const year = dateTemp.getFullYear(),
// month = dateTemp.getMonth() + 1,
// day = dateTemp.getDate();
// this.endDates = this.resetTime(year + "/" + month + "/" + day);
// this.endYear = year;
// this.endMonth = month;
} else {
this.endDates = this.resetTime(this.endDate);
var dd = this.endDate.replace(/-/g, "/").split("/");
this.endYear = dd[0];
this.endMonth = dd[1];
}
this.betweenStarts = this.resetTime(this.betweenStart);
this.betweenEnds = this.resetTime(this.betweenEnd);
this.createClendar(); //创建日历数据
},
//创建每个月日历数据，传入月份1号前面用null填充
createDayList(month, year) {
const count = this.getDayNum(month, year),
_week = new Date(year + "/" + month + "/1").getDay();
let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
for (let i = 29; i <= count; i++) {
list.push(i);
}
for (let i = 0; i < _week; i++) {
list.unshift(null);
}
return list;
},
//计算传入月份有多少天
getDayNum(month, year) {
let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
dayNum[1] = 29;
}
return dayNum[month - 1];
},
//根据当天和结束日期创建日历数据
createClendar() {
var yearTemp = this.year;
var monthTemp = this.month;
if (!!this.betweenStarts) {
//如果有范围起始日期，可选范围从betweenStart开始
yearTemp = new Date(this.betweenStarts).getFullYear();
monthTemp = new Date(this.betweenStarts).getMonth() + 1;
}
this.calendar = [];
for (let i = 0; i < this.initMonth; i++) {
let year = yearTemp;
let month = monthTemp + i;
let _monthData = {
dayList: [],
month: "",
year: ""
};
var m = Math.ceil(month / 12);
if (m > 0) {
year += m - 1;
} else {
year += m - 1;
}
if (month > 12) {
month = month % 12 == 0 ? 12 : month % 12;
}
if (month <= 0) {
month = 12 + month % 12;
}
_monthData.year = year;
_monthData.month = month;
_monthData.dayList = this.createDayList(month, year);
this.calendar.push(_monthData);
}
//h5默认页面加载到当前日期start-date的位置
if (document) {
this.scrollTop(this.startYear, this.startMonth);
}
},
scrollTop(year, month) {
var id = year + "" + parseInt(month)
setTimeout(() => {
var obj = document.getElementById(id)
if(!obj) return
var wrap = document.getElementById("scrollWrap");
wrap.scrollTop = obj.offsetTop - 40;
}, 0);
},
//添加日历样式
addClassName(day, month, year) {
if (!day) return;
const _date = new Date(year + "/" + month + "/" + day);
let className = [];
// if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
// className.push('weekend')
// }
if (_date * 1 == this.today) {
className.push("today");
}
if (this.mode == 1) {
if (_date * 1 == this.startDates) {
className.push("trip-time");
}
} else {
if (_date * 1 == this.startDates || _date * 1 == this.endDates) {
className.push("trip-time");
}
}
if (this.betweenStarts) {
_date * 1 < this.betweenStarts && className.push("disabled");
} else {
_date * 1 < this.today && className.push("disabled"); //当天和结束日期之外不可选
}
_date * 1 > this.betweenEnds && className.push("disabled");
return className.join(" ");
},
//入住离开的区间背景色
addClassBg(day, month, year) {
if (!day) return;
const _date = this.resetTime(year + "/" + month + "/" + day);
let className = [];
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
className.push("between");
}
return className.join(" ");
},
//theme入住离开的区间背景色
themeOpacityBg(day, month, year) {
if (!this.themeColor) return;
if (!day) return;
const _date = this.resetTime(year + "/" + month + "/" + day);
if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
return this.getBetweenColor;
}
},
//theme获取普通日期选中样式背景
themeBg(day, month, year) {
if (!this.themeColor) return;
const _date = this.resetTime(year + "/" + month + "/" + day);
//正常模式
if (this.mode == 1) {
if (_date == this.startDates) {
return this.themeColor;
}
} else {
//酒店和往返模式
if (_date == this.startDates || _date == this.endDates) {
return this.themeColor;
}
}
},
//清除时间 时 分 秒 毫秒
resetTime(dateStr) {
var date = new Date(dateStr.replace(/-/g, "/"));
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date * 1;
},
//flag==1（返回今天，明天，后天)，flag==2（返回入住，离开，去返)
setTip(day, month, year,flag) {
if (!day) return
var tip = ""
var _date = this.resetTime(year + "/" + month + "/" + day);
if(flag==1){
if (_date == this.today) {
tip = "今天";
} else if (_date - this.today == 24 * 3600 * 1000) {
tip = "明天";
} else if (_date - this.today == 2 * 24 * 3600 * 1000) {
tip = "后天";
}
return tip
}else{
if (this.mode == 2) {
if (_date == this.endDates) {
tip = "离开";
} else if (_date == this.startDates) {
tip = "入住";
}
} else if (this.mode == 3) {
if (_date == this.startDates && !this.endDates) {
tip = "去/返";
} else {
if (_date == this.endDates) {
tip = "返程";
} else if (_date == this.startDates) {
tip = "去程";
}
}
}
return tip;
}
},
//是否是选中当天，或者入住离开当天
isCurrent(day, month, year) {
if (!day) {
return false;
}
const _date = this.resetTime(year + "/" + month + "/" + day);
//正常模式
if (this.mode == 1) {
if (_date == this.startDates) {
return true;
}
} else {
//酒店和往返模式
if (_date == this.startDates || _date == this.endDates) {
return true;
}
}
},
dateFormat(times) {
let date = new Date(times);
let recent = "";
if (times == this.today) {
recent = "今天";
} else if (times - this.today === 24 * 3600 * 1000) {
recent = "明天";
} else if (times - this.today === 2 * 24 * 3600 * 1000) {
recent = "后天";
}
var year = date.getFullYear()
var month = parseInt(date.getMonth() + 1) > 9 ? parseInt(date.getMonth() + 1) : '0' + parseInt(date.getMonth() + 1)
var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
return {
dateStr: year + "-" + month + "-" + day,
week: "周" + this.weekList[date.getDay()],
recent
};
},
chooseDate(day, month, year) {
const _date = this.resetTime(year + "/" + month + "/" + day);
const week = this.weekList[new Date(_date).getDay()];
//判断日期区域是否可点击
if (!day) return;
if (this.betweenStarts) {
if (_date * 1 < this.betweenStarts) return;
} else {
if (_date < this.today) return;
}
if (_date > this.betweenEnds) return;
//判断酒店或者往返模式的选择逻辑
if (this.startDates && this.endDates && _date > this.endDates) {
this.startDates = _date;
this.endDates = "";
} else if (this.endDates && _date > this.endDates) {
this.endDates = _date;
} else if (_date >= this.startDates && _date <= this.endDates) {
this.startDates = _date;
this.endDates = "";
} else if (_date < this.startDates) {
this.startDates = _date;
this.endDates = "";
} else if (_date > this.startDates) {
if (this.mode == 1) {
this.startDates = _date;
} else {
this.endDates = _date;
}
}
const choose = {
startStr: this.dateFormat(this.startDates)
};
if (this.mode == 1) {
this.$emit("callback", choose);
} else if (this.mode == 2 && this.startDates && this.endDates) {
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
choose.endStr = this.dateFormat(this.endDates);
this.$emit("callback", choose);
} else if (this.mode == 3) {
if (this.startDates && this.endDates) {
choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
choose.endStr = this.dateFormat(this.endDates);
} else if (this.startDates && !this.endDates) {
choose.dayCount = 0;
choose.endStr = this.dateFormat(this.startDates);
}
this.$emit("callback", choose);
}
},
closeHandler(){//关闭按钮
this.$emit("closeback",);
}
}
};
</script>
<style lang="less" scoped>
@color: #1C75FF;
.calendar-tz {
width: 100%;
height: 100vh;
background: #fff;
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
border-top-left-radius:8px;border-top-right-radius: 8px;
&.fixed{
position: fixed;
width:100%;
height:100%;
left:0;
top:113px;
z-index: 900;
}
.sjx{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #FFF;
position: absolute;
right: 23px;
top:-7px;
}
.week-number {
background: #fff;
padding: 0 1%;
box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1);
span {
display: inline-block;
text-align: center;
padding: 12px 0;
font-size: 14px;
width: 14.28%;
&:first-child,
&:last-child {
color: @color;
}
}
}
.tips {
padding: 6px 10px;
background: #fff7dc;
font-size: 12px;
color: #9e8052;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content{
-webkit-box-flex: 1;
flex:1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding-bottom: 113rpx;
.con {
color: #333;
padding-top: 10px;
position: relative;
h3 {
width: 100%;
font-weight: normal;
text-align: center;
font-size: 16px;
padding: 10px 0;
}
.month-bg{
position: absolute;
text-align: center;
opacity: 0.4;
left:0;
right:0;
bottom:0;
top:20%;
font-size:220px;
font-weight: bold;
color:#f8f8f8;
}
.each-month {
display: block;
width: 98%;
font-size: 0;
margin: 0 auto;
padding-left: 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
.each-day {
position: relative;
display: inline-block;
text-align: center;
vertical-align: middle;
width: 14.28%;
font-size: 16px;
height: 50px;
margin:2px auto;
div {
display: inline-block;
font-size: 14px;
width:98%;
height:100%;
justify-content: space-around;
display: -webkit-box;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
border-radius: 4px;
}
&.between {
background: rgba(75, 217, 173, 0.1);
}
.day{
font-size: 16px;
}
.day-tip,.recent{
font-size:10px;
height:14px;
i{
font-size:10px;
}
}
.recent {
color: #ccc;
}
.disabled {
color: #ccc !important;
.day-tip{
color: #ccc !important;
}
}
.today {
background: rgba(100,100,100,0.1);
}
.trip-time {
background: @color;
color: #fff !important;
.recent,.day-tip{
color: #fff!important;
}
}
.weekend {
color: @color;
}
}
}
}
}
}
/***右侧进入动画***/
.slide-enter-active,
.slide-leave-active {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
</style>
\ No newline at end of file
pages/guidecar/index.vue
View file @ d540c46d
......@@ -280,10 +280,11 @@
}
}
let carDate = new Date();
this.carMsg.Q_Date = carDate.getFullYear() +'-'+(carDate.getMonth() + 1)+'-'+carDate.getDate();
let carMonth = (carDate.getMonth() + 1)<10?'0'+(carDate.getMonth() + 1):(carDate.getMonth() + 1);
this.carMsg.Q_Date = carDate.getFullYear() +'-'+carMonth+'-'+carDate.getDate();
let carday = carDate.getDay();
this.startDate = carDate.getFullYear() +'-'+(carDate.getMonth() + 1)+'-'+carDate.getDate();//从啥时候开始
this.showcardate = (carDate.getMonth() + 1)+'-'+carDate.getDate();
this.startDate = carDate.getFullYear() +'-'+carMonth+'-'+carDate.getDate();//从啥时候开始
this.showcardate = carMonth+'-'+carDate.getDate();
this.showweek = this.getweek(carday) //得到定制专车的周几
},
......
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