Commit a0689155 authored by 罗超's avatar 罗超

优化线路下单

parent 9ff6a26b
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</view> </view>
</view> --> </view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;"> <view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>选择日期</text> <text>{{title}}</text>
</view> </view>
<view class="week"> <view class="week">
<view></view> <view></view>
...@@ -71,12 +71,12 @@ ...@@ -71,12 +71,12 @@
</view> </view>
</view> </view>
</view> </view>
<view class="submit"> <view class="submit" v-if="!immediately">
<button class="sub-btn" :disabled="!isSub" @click="submit"> <button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text> <text v-if="isSub">确定</text>
<text v-if="!isSub">请选择入住日期</text> <text v-if="!isSub">选择出行时间</text>
</button> </button>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
...@@ -91,32 +91,44 @@ ...@@ -91,32 +91,44 @@
type: Array, type: Array,
default: [] default: []
}, },
defaultDate:{
type:String,
default:''
},
title:{
type:String,
default:'选择日期'
},
immediately:{
type:Boolean,
default:false
}
}, },
computed: { computed: {
//房间是否能预订 //房间是否能预订
isSub() { isSub() {
if (this.priceStauts.length > 0) { // if (this.priceStauts.length > 0) {
for (var i = this.start[0]; i <= this.end[0]; i++) { // for (var i = this.start[0]; i <= this.end[0]; i++) {
if (i == this.start[0]) { // if (i == this.start[0]) {
for (var j = this.start[1]; j < this.date[i].length; j++) { // for (var j = this.start[1]; j < this.date[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false // if (this.priceStauts[i][j] == -1) return false
} // }
} else if (this.end[0] == this.start[0]) { // } else if (this.end[0] == this.start[0]) {
for (var j = this.start[1]; j < this.end[1]; j++) { // for (var j = this.start[1]; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false // if (this.priceStauts[i][j] == -1) return false
} // }
} else if (i == this.end[0]) { // } else if (i == this.end[0]) {
for (var j = 0; j < this.end[1]; j++) { // for (var j = 0; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false // if (this.priceStauts[i][j] == -1) return false
} // }
} else { // } else {
for (var j = 0; j < this.priceStauts[i].length; j++) { // for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false // if (this.priceStauts[i][j] == -1) return false
} // }
} // }
} // }
} // }
return this.start.length == 2 && this.end.length == 2 ? true : false return this.start.length == 2
}, },
//计算日历里的节假日 //计算日历里的节假日
resDate() { resDate() {
...@@ -156,11 +168,12 @@ ...@@ -156,11 +168,12 @@
endWeek: '', //离开时间的周几 endWeek: '', //离开时间的周几
day: 0, //多少晚 day: 0, //多少晚
priceStauts: [], //价格状态 priceStauts: [], //价格状态
lastNot: [0, 10] //前置的无房操作 lastNot: [0, 10], //前置的无房操作
userDefaultDate:""
}; };
}, },
mounted () { mounted () {
console.log("进入了....") this.userDefaultDate=this.defaultDate
uni.getSystemInfo({ uni.getSystemInfo({
success: res => { success: res => {
this.dayWidth = res.windowWidth; this.dayWidth = res.windowWidth;
...@@ -171,79 +184,20 @@ ...@@ -171,79 +184,20 @@
var dateTime=new Date(); var dateTime=new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1); dateTime=dateTime.setDate(dateTime.getDate()+1);
this.nowDay = new Date(dateTime).getDate(); this.nowDay = new Date(dateTime).getDate();
/*默认入住离店日期,今日入住明日离店,此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作 if(this.userDefaultDate!=''){
*不推荐使用本地缓存,下边只是使用缓存的示例 this.start = this.setDefaultDate(this.userDefaultDate);
*/ }
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));
}
})
this.priceStauts=this.initPrice() this.priceStauts=this.initPrice()
console.log(this.priceStauts,this.priceList)
//如果需要日期的价格,-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: { watch: {
//离店日期 defaultDate(newVal){
end(newVal) { this.userDefaultDate=newVal
if (this.end.length != 0) { if(this.userDefaultDate!=''){
//计算选择离店日期 this.start = this.setDefaultDate(this.userDefaultDate);
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;
} }
this.priceStauts=this.initPrice()
}, },
//入住日期 //入住日期
start(newVal) { start(newVal) {
...@@ -304,7 +258,7 @@ ...@@ -304,7 +258,7 @@
let d=(j+1)>9?(j+1):"0"+(j+1) let d=(j+1)>9?(j+1):"0"+(j+1)
if(x.startDate==`${year}-${m}-${d}`){ if(x.startDate==`${year}-${m}-${d}`){
isexsit=true isexsit=true
days.push(x.b2BPrice) days.push(this.$utils.getretailer()? x.b2BPrice:x.b2CPrice)
} }
}) })
if(!isexsit){ if(!isexsit){
...@@ -405,6 +359,20 @@ ...@@ -405,6 +359,20 @@
//选择入住离开 //选择入住离开
selectDay(line, index) { selectDay(line, index) {
if(this.priceStauts[line][index]==0){
uni.showToast({
title: '抱歉,此日期没有行程哦',
icon: 'none'
});
}else{
this.start=[line,index]
}
if(this.immediately){
this.submit()
}
return;
if (line == 0 && index + 1 < this.nowDay) return; if (line == 0 && index + 1 < this.nowDay) return;
//如果有入住情况和价格则需要进行一些列的判断 //如果有入住情况和价格则需要进行一些列的判断
if (this.priceStauts.length > 0) { if (this.priceStauts.length > 0) {
...@@ -543,7 +511,10 @@ ...@@ -543,7 +511,10 @@
}, },
//确定入住离店事件提交 //确定入住离店事件提交
submit() { submit() {
let m=this.date[this.start[0]].month
m=m>9?m:"0"+m;
let d=this.isFestival(this.start[0], this.start[1], true)
d=d>9?d:"0"+d;
var obj = { var obj = {
/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival( /* 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]), this.start[0], this.start[1]),
...@@ -557,93 +528,18 @@ ...@@ -557,93 +528,18 @@
endWeek: this.endWeek, endWeek: this.endWeek,
day: this.day */ day: this.day */
startWeek: this.startWeek, startWeek: this.startWeek,
endWeek: this.endWeek, start: this.date[this.start[0]].year + this.type + m + this.type + d,
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + startDay: m + '-' + d
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
}; };
let tempPrice={}
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页 this.priceList.forEach((x,i)=>{
*不推荐使用本地缓存,下面是缓存的示例 console.log(x.startDate,obj.start)
*/ if(obj.start==x.startDate){
uni.setStorage({ obj.priceObj=i
key: 'Time', }
data: JSON.stringify(obj)
}) })
this.$emit("finish",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
// })
}, },
} }
}; };
......
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
</view> </view>
</view> </view>
<view class="mi-right"> <view class="mi-right">
<view style="color:#FFF;margin-bottom: 6rpx;font-size: 22rpx;">团队编号:CTU04210603A</view> <view style="color:#FFF;margin-bottom: 6rpx;font-size: 22rpx;">团队编号:{{delMsg.tcnum}}</view>
<view style="color:#FFF;font-size: 22rpx;">{{dataList.startCityName}}出发 · 精品线路</view> <view style="color:#FFF;font-size: 22rpx;">{{dataList.startCityName}}集合出发 · 精品线路</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</view> </view>
<view class="jz_TopPrice"> <view class="jz_TopPrice">
<view class="jz_LineTitle"> <view class="jz_LineTitle">
<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{$utils.getretailer()==true? dataList.currentPriceInfo.b2BPrice:dataList.currentPriceInfo.b2CPrice}}</text> <text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{$utils.getretailer()==true? currentPrice.b2BPrice:currentPrice.b2CPrice}}</text>
<text style="color:#999999;font-size:24rpx;font-weight: 400;"> /人起</text> <text style="color:#999999;font-size:24rpx;font-weight: 400;"> /人起</text>
<text style="color:#999999;font-size:24rpx;font-weight: 400;margin-left: 30rpx;">2728人出游</text> <text style="color:#999999;font-size:24rpx;font-weight: 400;margin-left: 30rpx;">2728人出游</text>
</view> </view>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<view style="color:#FF3166;font-size:26rpx;">{{$utils.getretailer()==true? item.b2BPrice:item.b2CPrice}}</view> <view style="color:#FF3166;font-size:26rpx;">{{$utils.getretailer()==true? item.b2BPrice:item.b2CPrice}}</view>
</view> </view>
</template> </template>
<view class="jz_StartList" :class="{'active':delMsg.tcid==customerDate.tcid}" @click="openDate"> <view class="jz_StartList" v-if="dataList.priceList.length>3" :class="{'active':delMsg.tcid==customerDate.tcid}" @click="openDate">
<view class="jz_StartTop" v-if="customerDate.startDate">{{customerDate.startDate?getMonth(customerDate.startDate):""}} </view> <view class="jz_StartTop" v-if="customerDate.startDate">{{customerDate.startDate?getMonth(customerDate.startDate):""}} </view>
<view class="jz_StartHoubu" v-if="customerDate.remainNum"> <view class="jz_StartHoubu" v-if="customerDate.remainNum">
<text></text> <text></text>
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
<view class="jz_OrderDiv"> <view class="jz_OrderDiv">
<view style="color:#FF3166;font-weight:bold;"> <view style="color:#FF3166;font-weight:bold;">
<text style="font-size:22rpx;">¥</text> <text style="font-size:22rpx;">¥</text>
<text style="font-size:40rpx;">{{$utils.getretailer()==true? dataList.currentPriceInfo.b2BPrice:dataList.currentPriceInfo.b2CPrice}}</text> <text style="font-size:40rpx;">{{$utils.getretailer()==true? currentPrice.b2BPrice:currentPrice.b2CPrice}}</text>
<text style="font-size:22rpx;">/起</text> <text style="font-size:22rpx;">/起</text>
</view> </view>
<view style="display:flex;align-items: center;"> <view style="display:flex;align-items: center;">
...@@ -274,12 +274,43 @@ ...@@ -274,12 +274,43 @@
<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" /> <img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
<view style="color:#111111;font-size: 22rpx;">客服</view> <view style="color:#111111;font-size: 22rpx;">客服</view>
</button> </button>
<view class="jz_OrderNow" @click="goReserce()">立即预定</view> <view class="jz_OrderNow" @click="showOrderPreviwe=true">立即预定</view>
</view> </view>
</view> </view>
</view> </view>
<u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true"> <u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult" :priceList="dataList.priceList"></canlendar> <canlendar @finish="chosenDateResult" :defaultDate="currentPrice.startDate" :priceList="dataList.priceList"></canlendar>
</u-popup>
<u-popup v-model="showOrderPreviwe" mode="bottom" border-radius="20" length="80%" :safe-area-inset-bottom="true">
<view style="width: 100%;height: 100%;display: flex;flex-direction: column;">
<view style="flex: 1;width: 100%;height: 1rpx;">
<canlendar @finish="chosenDateResult" :immediately="true" :defaultDate="currentPrice.startDate" :priceList="dataList.priceList" title="确定日期和人数"></canlendar>
</view>
<view style="background: #ECF1F4;padding:20rpx 0;">
<view class="line-flex" style="padding:30rpx;background: #FFF;">
<text style="font-size: 28rpx;color:#111;font-weight: 500;">成人</text>
<text style="font-size:22rpx;color:#999;margin-left: 30rpx;flex:1;">18周岁以上</text>
<u-number-box size="28" :min="1" :max="currentPrice.totalSeat-etCount" v-model="crCount"></u-number-box>
</view>
<view class="line-flex" style="padding:30rpx;background: #FFF;">
<text style="font-size: 28rpx;color:#111;font-weight: 500;">儿童</text>
<text style="font-size:22rpx;color:#999;margin-left: 30rpx;flex:1;">2-18周岁(不含)</text>
<u-number-box size="28" :min="0" :max="currentPrice.totalSeat-crCount" v-model="etCount"></u-number-box>
</view>
</view>
<view class="jz_OrderDiv" style="box-shadow: none;width: 100%;padding:20rpx;">
<view>
<text style="font-size:24rpx;color:#111;font-weight: 400;">{{currentPrice.startDate}} 出发</text>
</view>
<view style="display:flex;align-items: center;">
<button open-type="contact" class="jz_ConButton">
<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
<view style="color:#111111;font-size: 22rpx;">客服</view>
</button>
<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
</view>
</view>
</view>
</u-popup> </u-popup>
</scroll-view> </scroll-view>
</template> </template>
...@@ -294,6 +325,9 @@ ...@@ -294,6 +325,9 @@
return { return {
pageTitle: '线路详情', pageTitle: '线路详情',
showDateChosen:false, showDateChosen:false,
showOrderPreviwe:false,
crCount:1,
etCount:0,
msg: { msg: {
pageIndex: 1, pageIndex: 1,
pageSize: 15 pageSize: 15
...@@ -301,7 +335,8 @@ ...@@ -301,7 +335,8 @@
dataList: {}, //数据 dataList: {}, //数据
delMsg: { delMsg: {
tcid: 0, tcid: 0,
configId: 0 configId: 0,
tcnum:''
}, },
scenicNum: 0, // 景点数量 scenicNum: 0, // 景点数量
breakfastNum: 0, //早餐数 breakfastNum: 0, //早餐数
...@@ -311,7 +346,8 @@ ...@@ -311,7 +346,8 @@
titleStyle: {}, titleStyle: {},
mainColor: "", mainColor: "",
detailContent: "", detailContent: "",
customerDate:{} customerDate:{},
currentPrice:{}
}; };
}, },
created() { created() {
...@@ -338,6 +374,18 @@ ...@@ -338,6 +374,18 @@
}, },
methods: { methods: {
chosenDateResult(result){ chosenDateResult(result){
let price=this.dataList.priceList[result.priceObj]
this.currentPrice=price
if(this.crCount+this.etCount>this.currentPrice.totalSeat){
this.crCount=1,
this.etCount=0
}
this.delMsg.tcid=price.tcid
this.delMsg.configId = price.configID;
this.getDetails();
if(result.priceObj>2){
this.customerDate=price
}
this.showDateChosen=false this.showDateChosen=false
}, },
openPicture() { openPicture() {
...@@ -384,6 +432,12 @@ ...@@ -384,6 +432,12 @@
} }
}) })
}) })
this.currentPrice=this.dataList.currentPriceInfo
this.dataList.priceList.forEach(x=>{
if(x.tcid==this.delMsg.tcid){
this.delMsg.tcnum=x.tcnum
}
})
} else { } else {
} }
...@@ -414,8 +468,13 @@ ...@@ -414,8 +468,13 @@
}, },
//点击切换 //点击切换
getDayInfo(item){ getDayInfo(item){
if(this.crCount+this.etCount>this.currentPrice.totalSeat){
this.crCount=1,
this.etCount=0
}
this.delMsg.tcid = item.tcid; this.delMsg.tcid = item.tcid;
this.delMsg.configId = item.configID; this.delMsg.configId = item.configID;
this.currentPrice=item
this.getDetails(); this.getDetails();
}, },
openDate(){ openDate(){
...@@ -423,8 +482,8 @@ ...@@ -423,8 +482,8 @@
if(this.customerDate.tcid==this.delMsg.tcid){ if(this.customerDate.tcid==this.delMsg.tcid){
this.showDateChosen=true this.showDateChosen=true
}else{ }else{
this.delMsg.tcid = customerDate.tcid; this.delMsg.tcid = this.customerDate.tcid;
this.delMsg.configId = customerDate.configID; this.delMsg.configId = this.customerDate.configID;
this.getDetails(); this.getDetails();
} }
}else{ }else{
...@@ -433,7 +492,7 @@ ...@@ -433,7 +492,7 @@
}, },
//立即预定 //立即预定
goReserce(){ goReserce(){
let myCurrentInfo = this.dataList.currentPriceInfo; let myCurrentInfo = this.currentPrice;
myCurrentInfo.startCityName = this.dataList.startCityName; myCurrentInfo.startCityName = this.dataList.startCityName;
let imgCover = JSON.parse(this.dataList.imgCover); let imgCover = JSON.parse(this.dataList.imgCover);
if(imgCover.length>0){ if(imgCover.length>0){
...@@ -455,7 +514,10 @@ ...@@ -455,7 +514,10 @@
height: 100vh; height: 100vh;
box-sizing: border-box; box-sizing: border-box;
} }
.line-flex{
display: flex;
align-items: center;
}
.jz_TopImg { .jz_TopImg {
width: 100%; width: 100%;
...@@ -881,7 +943,7 @@ ...@@ -881,7 +943,7 @@
text-align: center; text-align: center;
line-height: 80rpx; line-height: 80rpx;
color:#fff; color:#fff;
font-weight: bold; font-weight: 600;
font-size:28rpx; font-size:28rpx;
border-radius: 16rpx; border-radius: 16rpx;
} }
......
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