Skip to content

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

Merge branch 'master' of http://gitlab.oytour.com/zk123/jz_travel into master

parents cab978e2 cb108628
Hide whitespace changes
Inline Side-by-side
Showing with 1955 additions and 204 deletions
pages.json
View file @ 3b03bc16
...@@ -591,6 +591,8 @@ ...@@ -591,6 +591,8 @@
"root": "pages/jiuzhai", "root": "pages/jiuzhai",
"pages": [{ "pages": [{
"path":"jz_Line" //九寨-线路 "path":"jz_Line" //九寨-线路
},{
"path":"jz_LineDetail" //九寨-线路详情
}] }]
}, },
//相亲分包 //相亲分包
......
pages/guidecar/bookaCarList.vue
View file @ 3b03bc16
<style scoped lang="scss">
<style scoped lang="scss"> .bookaCarList {
.bookaCarList{ width: 100%;
width: 100%; height: 100vh;
height: 100vh; font-family: PingFang SC;
background: #FFF; background: #FFF;
.box-top{
width: 100%; .mask {
height: 50px; width: 100%;
display: flex; height: 100%;
align-items: center; background: rgba(17, 17, 17, 0.4);
padding: 0 15px; position: fixed;
.box-top-b{ 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%; width: 100%;
height: 45px; height: 40px;
background: #ECF1F4; margin: 30px 0;
border-radius: 23px; padding: 0 28px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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%; width: 100%;
height: 80px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
padding: 0 10px; font-size: 14px;
position: relative; color: #999999;
} }
}
</style> }
<template> </style>
<view class="bookaCarList"> <template>
<view class="box-top"> <view class="bookaCarList">
<view class="box-top-b"> <view class="box-top">
<view class="box-top-b-l"> <view class="box-top-b">
{{carMsg.StartCityName}} <view class="box-top-b-l">
</view> {{carMsg.StartCityName}}
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png" mode="aspectFill" style="width: 20px;height: 20px;"></image> </view>
<view class="box-top-b-l"> <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zhuanghuan.png"
{{carMsg.ArriveCityName}} mode="aspectFill" style="width: 20px;height: 20px;"></image>
</view> <view class="box-top-b-l">
</view> {{carMsg.ArriveCityName}}
</view> </view>
<view class="box-rili"> </view>
<view class="box-rili-scroll"> </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>
</view> <view style="height: calc(100% - 130px);" v-if="g.length > 0">
</template> <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
style="height: 100%;width: 100%">
<script> <view style="padding: 0 15px;">
export default{ <view class="scr-box" v-for="(x,y) in g" :key='y'>
data(){ <view class="scr-box-top">
return{ <view class="s-t-t">
pageTitle: "去订车", <image
msg:{ src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dcchufa.png"
pageIndex:1, mode="aspectFill" style="width: 13px;height: 11px;"></image>
pageSize:20, <span style='margin-left: 5px;'>{{x.StartCityName}}</span>
StartCityId:0, <span style='margin:0 5px;'>-</span>
StartCityType:0, <span>{{x.ArriveCityName}}</span>
ArriveCityId:0, </view>
ArriveCityType:0, <view class="s-c-box" v-if="x.show==false">
Q_Date:'', <view class="s-c-o">
StartCityName:'', <view class="s-c-l">
ArriveCityName:'', <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:'', StartDate:'',
EndDate:'', EndDate:'',
}, }
carMsg:{},
page_count:1,
status: "loadmore",
g: [],
} }
},
},
onLoad(options) { onLoad(options) {
if(options && options.carMsg){ console.log(222)
//对象解码 if (options && options.carMsg) {
this.carMsg = JSON.parse(decodeURIComponent(options.carMsg)) //对象解码
this.msg.StartCityId = this.carMsg.StartCityId; this.carMsg = JSON.parse(decodeURIComponent(options.carMsg))
this.msg.StartCityType = this.carMsg.StartCityType; this.msg.StartCityId = this.carMsg.StartCityId;
this.msg.ArriveCityId = this.carMsg.ArriveCityId; this.msg.StartCityType = this.carMsg.StartCityType;
this.msg.ArriveCityType = this.carMsg.ArriveCityType; this.msg.ArriveCityId = this.carMsg.ArriveCityId;
this.msg.Q_Date = this.carMsg.Q_Date; this.msg.ArriveCityType = this.carMsg.ArriveCityType;
this.msg.Q_Date = this.carMsg.Q_Date;
} }
this.gettimeList() this.mainColor = this.$uiConfig.mainColor;
this.init() this.gettimeList()
uni.setNavigationBarTitle({ this.init();
title: this.pageTitle, this.getSelectCarSiteList()
}); uni.setNavigationBarTitle({
}, title: this.pageTitle,
methods:{ });
gettimeList(){
var date1 = new Date(); },
var date2 = new Date(date1); methods: {
date2.setDate(date1.getDate() + 30);
let nowtime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() ; popupchange(e) { //tab事件
let htime = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate() ; this.popupcurrent = e;
this.getdiffdate(nowtime,htime) },
goscreen(type) { //筛选的弹出
}, this.screenshow = true;
getdiffdate(stime,etime){ this.popupcurrent = type;
console.log(stime,etime) },
var diffdate = new Array(); getlistshow(index) { //点击是否展开全部
var i=0; this.g[index].show = !this.g[index].show
//开始日期小于等于结束日期,并循环 },
while(stime<=etime){ gettimeList() {
diffdate[i] = stime; var date1 = new Date();
var date2 = new Date(date1);
//获取开始日期时间戳 date2.setDate(date1.getDate() + 60);
var stime_ts = new Date(stime).getTime(); let nowtime = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
let htime = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
//增加一天时间戳后的日期 this.topdateList = this.getDayAll(nowtime, htime)
var next_date = stime_ts + (24*60*60*1000); this.startDate = nowtime
//拼接年月日，这里的月份会返回（0-11），所以要+1 },
var next_dates_y = new Date(next_date).getFullYear()+'-'; getDayAll(starDay, endDay) { //根据2个时间段获取之间的所有日期
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 arr = [];
var next_dates_d = (new Date(next_date).getDate() < 10)?'0'+new Date(next_date).getDate():new Date(next_date).getDate(); var dates = [];
// 设置两个日期UTC时间
stime = next_dates_y+next_dates_m+next_dates_d; var db = new Date(starDay);
var de = new Date(endDay);
//增加数组key // 获取两个日期GTM时间
i++; var s = db.getTime() - 24 * 60 * 60 * 1000;
} var d = de.getTime() - 24 * 60 * 60 * 1000;
console.log(diffdate);
//处理为数组 // 获取到两个日期之间的每一天的毫秒数
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(){ setData:function(obj){
this.request2( let that = this;
{ let keys = [];
url: '/api/AppletCar/GetAppletCarCustomPageList', let val,data;
data: this.msg Object.keys(obj).forEach(function(key){
}, keys = key.split('.');
res => { val = obj[key];
if(res.resultCode==1){ data = that.$data;
this.g = this.g.concat(res.data.pageData); keys.forEach(function(key2,index){
this.page_count = res.data.pageCount; if(index+1 == keys.length){
if (this.page_count == 1) { that.$set(data,key2,val);
this.status = "nomore"; }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> </script>
pages/guidecar/components/Calendar.vue 0 → 100644
View file @ 3b03bc16
<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 @ 3b03bc16
...@@ -280,10 +280,11 @@ ...@@ -280,10 +280,11 @@
} }
} }
let carDate = new Date(); 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(); let carday = carDate.getDay();
this.startDate = carDate.getFullYear() +'-'+(carDate.getMonth() + 1)+'-'+carDate.getDate();//从啥时候开始 this.startDate = carDate.getFullYear() +'-'+carMonth+'-'+carDate.getDate();//从啥时候开始
this.showcardate = (carDate.getMonth() + 1)+'-'+carDate.getDate(); this.showcardate = carMonth+'-'+carDate.getDate();
this.showweek = this.getweek(carday) //得到定制专车的周几 this.showweek = this.getweek(carday) //得到定制专车的周几
}, },
......
pages/index/index.vue
View file @ 3b03bc16
...@@ -1220,21 +1220,21 @@ ...@@ -1220,21 +1220,21 @@
}, },
yj(){ yj(){
let obj ={ArriveCityId: 7, // let obj ={ArriveCityId: 7,
ArriveCityName: "九寨沟", // ArriveCityName: "九寨沟",
ArriveCityType: 2, // ArriveCityType: 2,
Q_Date: "2021-5-25", // Q_Date: "2021-5-25",
StartCityId: 262, // StartCityId: 262,
StartCityName: "成都", // StartCityName: "成都",
StartCityType: 1} // StartCityType: 1}
obj = encodeURIComponent(JSON.stringify(obj)) // obj = encodeURIComponent(JSON.stringify(obj))
uni.navigateTo({ // uni.navigateTo({
url: '/pages/guidecar/bookaCarList?carMsg='+obj // url: '/pages/guidecar/bookaCarList?carMsg='+obj
}) // })
// uni.navigateTo({ uni.navigateTo({
// url: '/pages/guidecar/index' url: '/pages/jiuzhai/jz_Line',
// // url: '/pages/blindDate/personal/IDidentification' // url: '/pages/blindDate/personal/IDidentification'
// }) })
} }
}, },
......
pages/jiuzhai/jz_Line.vue
View file @ 3b03bc16
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
} }
.jz_TuDiv { .jz_TuDiv {
width: 280rpx; width: 220rpx;
height: 220rpx; height: 280rpx;
border-radius: 6px; border-radius: 12px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
...@@ -24,9 +24,10 @@ ...@@ -24,9 +24,10 @@
} }
.jz_Right { .jz_Right {
width: 380rpx; width: 432rpx;
margin-top: 5px; margin-top: 5px;
font-size: 14px; font-size: 14px;
position: relative;
} }
.jz_LineName { .jz_LineName {
...@@ -61,14 +62,7 @@ ...@@ -61,14 +62,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.jz_Remark {
width: 100%;
font-size: 13px;
background-color: #f1f0f0;
padding: 10px;
}
.op_remark { .op_remark {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -77,7 +71,7 @@ ...@@ -77,7 +71,7 @@
.jz_ListMain { .jz_ListMain {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #d1d1d1; border-bottom: 1px solid #E2E2E2;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -97,9 +91,6 @@ ...@@ -97,9 +91,6 @@
.jz_Sort { .jz_Sort {
width: 100%; width: 100%;
/* justify-content: space-between;
display: flex;
*/
margin: 20px 0; margin: 20px 0;
} }
...@@ -142,6 +133,16 @@ ...@@ -142,6 +133,16 @@
top: 130px; top: 130px;
z-index: 999; z-index: 999;
} }
.jz_Recommend{
color:#999999;
font-size:24rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top:10px;
line-height: 20px;
}
</style> </style>
<template> <template>
<div class="jz_Line" > <div class="jz_Line" >
...@@ -169,10 +170,10 @@ ...@@ -169,10 +170,10 @@
<template v-else> <template v-else>
<view style="height: calc(100vh - 120px);overflow: hidden;"> <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%' }"> <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"> <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_List">
<view class="jz_TuDiv"> <view class="jz_TuDiv">
<img class="jz_TuBigImg" src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg?x-oss-process=image/resize,l_140" <img class="jz_TuBigImg" aspectFill src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg"
alt="" /> alt="" />
<view class="jz_TuDivBotm"> <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" />成都出发
...@@ -181,21 +182,21 @@ ...@@ -181,21 +182,21 @@
</view> </view>
<view class="jz_Right"> <view class="jz_Right">
<view class="jz_LineName">{{item.title}}</view> <view class="jz_LineName">{{item.title}}</view>
<view class="jz_Recommend">
{{item.productRecommend}}
</view>
<view style="margin:10px 0"> <view style="margin:10px 0">
<img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}<text <img class="jz_calederImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/canlder.png" />{{item.startDate}}<text
class="jz_Canhoubu">不可候补</text> class="jz_Canhoubu">不可候补</text>
</view> </view>
<view style="margin-bottom:10px">航班:<text>无</text>(余位:10)</view> <view style="margin-bottom:10px">航班:<text>无</text>(余位:10)</view>
<view> <view style="color:#FF3166;position: absolute;right:0;bottom:0">
同业价:<text class="jz_redType">{{item.b2BPrice}}</text> <text style="font-size:20rpx;">¥</text>
<text style="margin-left:10px;">统一售价:<text class="jz_redType">{{item.b2CPrice}}</text></text> <text style="font-size:36rpx;">{{item.b2BPrice}}</text>
<text style="font-size:20rpx;">起</text>
</view> </view>
</view> </view>
</view> </view>
<view class="jz_Remark">
<view class="op_remark" style="margin-bottom:10px;">OP备注：1不占床小孩收费1不占床小孩收费1不占床小孩收费1不占床小孩收费</view>
<view class="op_remark">本团卖点：1不占床小孩收费1不占床小孩收费1不占床小孩收费1不占床小孩收费</view>
</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
...@@ -229,9 +230,6 @@ ...@@ -229,9 +230,6 @@
searchKey: '', //搜索数据 searchKey: '', //搜索数据
value1: 1, value1: 1,
isShowDate: false, isShowDate: false,
delMsg: {
tcid: 10964
},
lineList: [{ lineList: [{
label: '出境日本线', label: '出境日本线',
value: 1, value: 1,
...@@ -253,7 +251,6 @@ ...@@ -253,7 +251,6 @@
}, },
created() { created() {
this.getList(); this.getList();
this.getDetails();
}, },
methods: { methods: {
//获取数据 //获取数据
...@@ -273,22 +270,6 @@ ...@@ -273,22 +270,6 @@
null null
); );
}, },
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes",
this.delMsg,
res => {
console.log(res, '详情');
if (res.data.resultCode == 1) {
} else {
}
},
null
);
},
//获取日期 //获取日期
getStratDate(val) { getStratDate(val) {
console.log(val, 'val'); console.log(val, 'val');
...@@ -302,6 +283,12 @@ ...@@ -302,6 +283,12 @@
this.status = "nomore"; this.status = "nomore";
} }
}, },
//跳转至详情
goJzDetail(tcid,configId){
uni.navigateTo({
url: "/pages/jiuzhai/jz_LineDetail?tcid=" + tcid +'&configId='+configId
});
}
}, },
}; };
</script> </script>
pages/jiuzhai/jz_LineDetail.vue 0 → 100644
View file @ 3b03bc16
<style>
.jz_LineDetail {
background-color: #ECF1F4;
}
.jz_TopImg {
width: 100%;
height: 500rpx;
}
.jz_TopPrice{
width:100%;
height:auto;
background-color: #fff;
position: relative;
top:-20px;
border-top-left-radius: 45rpx;
border-top-right-radius: 45rpx;
padding:45rpx;
}
.jz_LineTitle{
font-size:25rpx;
color:#FF3166;
margin-bottom:10px;
}
.jz_MainTitle{
color:#111111;
font-size:36rpx;
font-weight: 800;
line-height: 28px;
}
.jz_Maidian{
color:#999999;
font-size:24rpx;
margin-top:15px;
line-height: 23px;
}
.jz_Price{
font-size:30rpx;
color:#FF3166;
}
.jz_Price_Title{
color:#000000;
margin:10px 0;
font-weight: bold;
}
.jz_Price_Hui{
color:#9cf;
margin-left:8px;
}
.jz_flex{
display:flex;
justify-content: space-between;
}
.jz_TripDays{
width:100%;
height:auto;
padding:45rpx;
margin-top:15px;
background-color: #fff;
}
.trip_JZtype{
display: inline-block;
padding:3px 5px;
border:1px solid #257BF1;
margin-right:10px;
color:#257BF1;
font-size:13px;
border-radius: 3px;
}
.jz_StartList{
width:22%;
height:150rpx;
border-radius: 20rpx;
border:1px solid #E2E2E2;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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:10rpx;
}
.jz_Jinddian{
margin-top:23rpx;
color:#999999;
font-size:23rpx;
}
</style>
<template>
<div class="jz_LineDetail">
<view class="jz_TopImg">
<swiper indicator-dots :autoplay="false" :interval="1000" style="height:100%;">
<block v-for="(item, index) in getCoverImg(dataList.imgCover)" :key="index">
<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.priceList[0].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;justify-content: space-between;">
<view class="jz_StartList">
<view class="jz_StartTop"></view>
</view>
<view class="jz_StartList">
</view>
<view class="jz_StartList">
</view>
<view class="jz_StartList">
</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">
2晚4钻酒店
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>购物
</view>
<view class="jz_ZhaiInner">
无购物
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>景点
</view>
<view class="jz_ZhaiInner">
51个景点，含23个人气景点
</view>
<view class="jz_ZhaiTitle">
<text class="jz_Dian"></text>餐食
</view>
<view class="jz_ZhaiInner">
成人含2早餐2午餐2晚餐 儿童含2早餐2午餐2晚餐
</view>
<view class="jz_Zhankai">展开全部</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 class="jz_TripTitle">
<view class="jz_TripLeft">第01天</view>
<view class="jz_TripRight">2020-03-11</view>
</view>
<view class="jz_RightInner">
<view class="jz_Place">
<view class="jz_ComDian"></view>成都双流国际机场集合
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
1、行程中，若遇天气或航空公司、国外路程塞车之不可抗拒之 因素时，请贵宾们稍加耐心等候。如塞车情形严重，而会影响到 行程或餐食的安排时，为维护旅游品质及贵宾们的权益，我们将 为您斟酌调整并妥善安排旅游行程，敬请贵宾们谅解。 2、本行程设定为团体旅游行程，故为顾及旅客于出游期间之人 身安全及相关问题，于旅游行程期间，恕无法接受脱队之要求； 若因此而无法满足您的旅游需求，建议您另行选购团体自由行或 航空公司套装自由行，不便之处，尚祈谅解。 3、我们为维护旅游品质及贵宾们的权益，在不变更行程内容之 前提下，将依饭店具体确认回复的结果，再综合当地实际交通等 情况，为贵宾们斟酌调整并妥善安排旅游行程、饭店入住之先后 顺序或旅游路线，请以说明会或最后确认的行程说明资料为准。 4、素食：因各地风俗民情不同，国外的素食习惯大多是可以食 用葱、姜、蒜、蛋、奶等，除华侨开设的中华料理餐厅外，多数 仅能以蔬菜、豆腐等食材料理为主；若为饭店内用餐或一般餐厅 使用自助餐，亦多数以蔬菜、渍物、水果等佐以白饭或面食类。
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
早餐自理 午餐自理 晚餐自理
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
本日无酒店安排
</text>
</view>
</view>
<view class="jz_TripTitle">
<view class="jz_TripLeft">第02天</view>
<view class="jz_TripRight">2020-03-12</view>
</view>
<view class="jz_RightInner">
<view class="jz_Place">
<view class="jz_ComDian"></view>
温泉酒店<img class="jz_ArrowImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/arrow_right.png" />地狱谷(红叶名所*)
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
登别地狱谷(火山口遗迹) <text class="jz_Fenzhong">约40分钟</text>
</text>
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Jinddian">
登别的名字来自于古老的阿依努语"ヌプルペッ"，意思是白色浑
浊的河流；地狱谷是登别温泉的泉源，也是登别温泉最著名的景
点，火山地貌景色极为壮观。地狱谷是一个火山喷发的遗址，在
这里，火山气体从灰黄色的岩石表面向外喷出，周围空气中充满
了浓烈的硫磺异味，而且这里寸草不生，故名地狱谷。群山环抱
，烟雾缭绕，再配上当地特产的手持狼牙棒的妖魔鬼怪们，置身
其中，仿佛进入了耳鼻地狱。地狱谷的尽头有一口“间歇泉"每隔
一段时间，泉水就会喷发，这里的泉水温度可有80度。如您能早
起、每天凌晨6点左右，还可以看到初升阳光下的"生紫烟"效果
呢。
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">景点</text>
<text class="jz_CanInner">
登别地狱谷(火山口遗迹) <text class="jz_Fenzhong">约40分钟</text>
</text>
</view>
<view class="jz_ImgDiv">
<img src="http://imgfile.oytour.com/Upload/DMC/20200603030333648.jpg" alt="">
</view>
<view class="jz_Jinddian">
登别的名字来自于古老的阿依努语"ヌプルペッ"，意思是白色浑
浊的河流；地狱谷是登别温泉的泉源，也是登别温泉最著名的景
点，火山地貌景色极为壮观。地狱谷是一个火山喷发的遗址，在
这里，火山气体从灰黄色的岩石表面向外喷出，周围空气中充满
了浓烈的硫磺异味，而且这里寸草不生，故名地狱谷。群山环抱
，烟雾缭绕，再配上当地特产的手持狼牙棒的妖魔鬼怪们，置身
其中，仿佛进入了耳鼻地狱。地狱谷的尽头有一口“间歇泉"每隔
一段时间，泉水就会喷发，这里的泉水温度可有80度。如您能早
起、每天凌晨6点左右，还可以看到初升阳光下的"生紫烟"效果
呢。
</view>
<view class="jz_Place">温馨提示</view>
<view class="jz_Rermark">
1、行程中，若遇天气或航空公司、国外路程塞车之不可抗拒之 因素时，请贵宾们稍加耐心等候。如塞车情形严重，而会影响到 行程或餐食的安排时，为维护旅游品质及贵宾们的权益，我们将 为您斟酌调整并妥善安排旅游行程，敬请贵宾们谅解。 2、本行程设定为团体旅游行程，故为顾及旅客于出游期间之人 身安全及相关问题，于旅游行程期间，恕无法接受脱队之要求； 若因此而无法满足您的旅游需求，建议您另行选购团体自由行或 航空公司套装自由行，不便之处，尚祈谅解。 3、我们为维护旅游品质及贵宾们的权益，在不变更行程内容之 前提下，将依饭店具体确认回复的结果，再综合当地实际交通等 情况，为贵宾们斟酌调整并妥善安排旅游行程、饭店入住之先后 顺序或旅游路线，请以说明会或最后确认的行程说明资料为准。 4、素食：因各地风俗民情不同，国外的素食习惯大多是可以食 用葱、姜、蒜、蛋、奶等，除华侨开设的中华料理餐厅外，多数 仅能以蔬菜、豆腐等食材料理为主；若为饭店内用餐或一般餐厅 使用自助餐，亦多数以蔬菜、渍物、水果等佐以白饭或面食类。
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">餐饮</text>
<text class="jz_CanInner">
早餐自理 午餐自理 晚餐自理
</text>
</view>
<view class="jz_Place">
<view class="jz_ComDian"></view>
<text class="jz_Canyin">酒店</text>
<text class="jz_CanInner">
本日无酒店安排
</text>
</view>
</view>
</view>
</view>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
pageTitle: '线路详情',
msg: {
pageIndex: 1,
pageSize: 15
},
dataList: {}, //数据
delMsg: {
tcid: 0
},
};
},
created() {
},
onLoad(option) {
if (option.tcid) {
this.delMsg.tcid = option.tcid;
this.getDetails();
}
},
methods: {
//获取详情
getDetails() {
this.apipost(
"b2b_get_GetB2BTravelInfoNoDes",
this.delMsg,
res => {
console.log(res, '详情');
if (res.resultCode == 1) {
this.dataList = res.data;
} else {
}
},
null
);
},
//转换图片格式
getCoverImg(imgCover) {
if (imgCover) {
return JSON.parse(imgCover)
}
}
},
};
</script>
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