Skip to content

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

完成线路订单

parent 8364803b
Show whitespace changes
Inline Side-by-side
Showing with 461 additions and 112 deletions
node_modules/uview-ui/components/u-number-box/u-number-box.vue
View file @ f23a2d23
......@@ -110,27 +110,36 @@
value(val) {
this.inputVal = +val;
},
max(val){
this.newMax=val
console.log(this.newMax,val)
},
inputVal(v1, v2) {
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
if (v1 == '') return;
let value = 0;
// 首先判断是否正整数，并且在min和max之间，如果不是，使用原来值
let tmp = /(^\d+$)/.test(v1) && value[0] != 0;
if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
if (tmp && v1 >= this.min && v1 <= this.newMax) value = v1;
else value = v2;
this.handleChange(value, 'change');
this.$nextTick(() => {
this.inputVal = value;
})
}
},
},
data() {
return {
inputVal: 1 // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
inputVal: 1 ,// 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
newMax:0
};
},
created() {
this.inputVal = +this.value;
uni.setNavigationBarTitle({
title:"订单确认"
})
this.newMax=this.max
},
methods: {
minus() {
......@@ -184,7 +193,7 @@
value = this.calcPlus(this.inputVal, this.step);
}
// 判断是否小于最小值和大于最大值
if (value < this.min || value > this.max) {
if (value < this.min || value > this.newMax) {
return;
}
this.inputVal = value;
......@@ -198,8 +207,8 @@
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
val = +value;
if (val > this.max) {
val = this.max;
if (val > this.newMax) {
val = this.newMax;
} else if (val < this.min) {
val = this.min;
}
......
pages/jiuzhai/jz_LineDetail.vue
View file @ f23a2d23
......@@ -250,7 +250,7 @@
<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
</span>
<view class="jz_TripMain">
<rich-text :nodes="dataList.feature.importantTip"></rich-text>
<rich-text :nodes="dataList.feature.warmTip"></rich-text>
</view>
</view>
<view class="jz_TripDays">
......@@ -281,7 +281,7 @@
<u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
<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">
<u-popup v-model="showOrderPreviwe" mode="bottom" border-radius="20" length="90%" :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>
......@@ -290,17 +290,27 @@
<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>
<u-number-box size="28" :min="1" :max="currentPrice.totalSeat-etCount-etbCount" @change="crChange" 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: 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>
<u-number-box size="28" :min="0" :max="currentPrice.totalSeat-crCount-etbCount" @change="etChange" v-model="etCount"></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-etCount" @change="etbChange" v-model="etbCount"></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;">0-2周岁(不含)</text>
<u-number-box size="28" @change="yeChange" :min="0" :max="crCount" v-model="yeCount"></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>
<text style="font-size:24rpx;color:#111;font-weight: 500;">{{currentPrice.startDate}} 出发 余位：{{currentPrice.totalSeat}}</text>
</view>
<view style="display:flex;align-items: center;">
<button open-type="contact" class="jz_ConButton">
......@@ -328,6 +338,8 @@
showOrderPreviwe:false,
crCount:1,
etCount:0,
yeCount:0,
etbCount:0,
msg: {
pageIndex: 1,
pageSize: 15
......@@ -376,9 +388,10 @@
chosenDateResult(result){
let price=this.dataList.priceList[result.priceObj]
this.currentPrice=price
if(this.crCount+this.etCount>this.currentPrice.totalSeat){
this.crCount=1,
if(this.crCount+this.etCount+this.etbCount>=this.currentPrice.totalSeat){
this.crCount=1
this.etCount=0
this.etbCount=0
}
this.delMsg.tcid=price.tcid
this.delMsg.configId = price.configID;
......@@ -388,6 +401,18 @@
}
this.showDateChosen=false
},
crChange(e){
this.crCount=e.value;
},
etChange(e){
this.etCount=e.value;
},
etbChange(e){
this.etbCount=e.value;
},
yeChange(e){
this.yeCount=e.value;
},
openPicture() {
let imgObj = JSON.stringify(this.dataList.HotelImg);
uni.navigateTo({
......@@ -468,9 +493,10 @@
},
//点击切换
getDayInfo(item){
if(this.crCount+this.etCount>this.currentPrice.totalSeat){
this.crCount=1,
if(this.crCount+this.etCount+this.etbCount>=this.currentPrice.totalSeat){
this.crCount=1
this.etCount=0
this.etbCount=0
}
this.delMsg.tcid = item.tcid;
this.delMsg.configId = item.configID;
......@@ -500,8 +526,14 @@
}
let myCurr = JSON.stringify(myCurrentInfo);
console.log(myCurrentInfo,'myCurrentInfo');
let ren={
crCount:this.crCount,
etCount:this.etCount,
yeCount:this.yeCount,
etbCount:this.etbCount
}
uni.navigateTo({
url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)
url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)+"&ln="+this.dataList.ltName+"&seat="+encodeURIComponent(JSON.stringify(ren))+"&tips="+encodeURIComponent(this.dataList.feature.importantTipText)
});
}
},
......@@ -514,6 +546,10 @@
height: 100vh;
box-sizing: border-box;
}
.jz_LineDetail rich-text{
font-size: 26rpx;
font-weight: 500;
}
.line-flex{
display: flex;
align-items: center;
......
pages/jiuzhai/jz_Reserve.vue
View file @ f23a2d23
<style>
.jz_Reserve{
padding-bottom: 180rpx;
}
.jz_ReserTop {
width: 100%;
min-height: 300rpx;
......@@ -11,13 +14,14 @@
.jz_ReserTitle {
color: #111111;
font-weight: bold;
font-weight: 600;
font-size: 36rpx;
}
.jz_ReserIn {
color: #999999;
color: #111;
font-size: 24rpx;
font-weight: 500;
}
.jz_ReseQue {
......@@ -51,7 +55,7 @@
flex-shrink: 0;
}
.jz_OrderDiv {
/* .jz_OrderDiv {
position: fixed;
width: 90%;
height: 100rpx;
......@@ -66,6 +70,32 @@
box-shadow: 0px 10px 30px 0px rgba(36, 36, 36, 0.2);
border-radius: 16px;
z-index: 999;
} */
.jz_orderbox{
height: 160rpx;
position: fixed;
background-color: #fff;
bottom: 0;
width: 100vw;
left: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
}
.jz_OrderDiv{
width:90%;
height:100rpx;
background-color: #fff;
margin:auto;
padding:20rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
border-radius: 16px;
z-index:999;
}
.jz_OrderReNow {
......@@ -75,25 +105,189 @@
text-align: center;
line-height: 80rpx;
color: #fff;
font-weight: bold;
font-weight: 600;
font-size: 28rpx;
border-radius: 16rpx;
}
.jz_form{
margin-top: 60rpx;
padding:0 45rpx;
}
.jz_form .form-items{
margin-bottom: 20rpx;
display: flex;
align-items: center;
padding-bottom: 20rpx;
border-bottom:1px solid #f5f5f5;
font-size: 28px;
font-weight: 500;
}
.jz_form .form-items:last-child{
border-bottom: none;
}
.jz_form .form-items .label{
font-size: 28rpx;
font-weight: 600;
margin-right: 60rpx;
flex-shrink: 0;
}
.jz_form .form-items .val{
flex:1;
}
.jz_ReserTop .o-timer{
height: 100rpx;
background: #ECF1F4;
border-radius: 20rpx;
padding: 0 40rpx;
margin-bottom: 30rpx;
}
.jz_ReserTop .o-timer .time-item{
font-size: 32rpx;
font-weight: 800;
}
/* .jz_ReserTop .o-timer .time-item:last-child{
text-align: right;
} */
.jz_ReserTop .o-timer .time-split{
font-size: 24rpx;
font-weight: 400;
text-align: center;
margin:0 20rpx;
}
.jz_ReserTop .o-timer .update{
font-size: 24rpx;
font-weight: 400;
text-align: right;
color:#000;
display: flex;
align-items: center;
}
.jz_Reserve .flex{
display: flex;
align-items: center;
}
.jz_Reserve .big-title {
position: relative;
}
.jz_Reserve .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.jz_Reserve .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1F1F1F;
position: relative;
z-index: 2;
}
.jz_Reserve .empty-block{
height: 20rpx;
background: #ECF1F4;
}
.jz_form .form-items .val input{
border:none;
padding: 0;
margin: 0;
outline: none;
height: 38rpx;
line-height: 38rpx;
font-size: 28rpx;
font-weight: 500;
width: 100%;
}
.jz_Reserve .grey{
color:#6E6E6E !important
}
.jz_Reserve .f12 {
font-size:24rpx !important;
}
.jz_Reserve .f11 {
font-size:22rpx !important;
}
.jz_Reserve .f14 {
font-size:28rpx !important;
}
.jz_Reserve .regular {
font-weight: 500 !important;
}
.jz_Reserve .sheshi{
margin-top: 50rpx;
}
.jz_Reserve .sheshi .she-title{
font-size: 28rpx;
font-weight: 800;
}
.jz_Reserve .sheshi .she-content{
margin-top: 24rpx;
}
.jz_Reserve .sheshi .she-content text{
font-size: 24rpx;
font-weight: 500;
color: #4A4A4A;
line-height: 40rpx;
margin-right: 24rpx;
}
</style>
<template>
<view class="jz_Reserve">
<view class="jz_ReserTop">
<view class="o-timer flex">
<view class="time-item">{{getDate(currentPriceInfo.startDate)}} {{getWeek(currentPriceInfo.startDate)}}</view>
<view class="time-split">
<view>{{currentPriceInfo.dayNum}}天</view>
</view>
<view class="time-item" style="font-size: 26rpx;font-weight: 500;flex:1;">
<text v-if="orderMsg.ManNum>0">{{orderMsg.ManNum}}成人</text>
<text v-if="orderMsg.ChirdNoBedNum+orderMsg.ChirdNeedBedNum>0">{{orderMsg.ChirdNoBedNum+orderMsg.ChirdNeedBedNum}}儿童</text>
<text v-if="orderMsg.BabyNum>0">{{orderMsg.BabyNum}}婴儿</text>
</view>
<view class="update" @click="updateUser">
<text style="margin-right: 8rpx;">修改</text>
<u-icon name="arrow" size="20" />
</view>
</view>
<view class="jz_ReserTitle">
{{currentPriceInfo.title}}
</view>
<view class="jz_ReserIn" style="margin:33rpx 0 18rpx 0">
{{currentPriceInfo.startCityName}}出发 {{currentPriceInfo.startDate}}
<!-- {{currentPriceInfo.startCityName}}出发 {{currentPriceInfo.startDate}} -->
{{ltName}}
</view>
<view class="big-title">
<text>{{currentPriceInfo.startCityName}}出发</text>
</view>
<view class="jz_ReseQue">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png" />即时确认：本产品付款后可快速确认，放心期待您的旅行
</view>
</view>
<view class="jz_ReseOrder">
<view class="jz_form">
<view class="form-items">
<view class="label">游客姓名</view>
<view class="val">
<input type="text" v-model="contactName" placeholder="若是多人,输入代表人员即可" />
</view>
</view>
<view class="form-items">
<view class="label">联系电话</view>
<view class="val">
<input type="text" v-model="contactMobile" placeholder="输入电话号码" />
</view>
</view>
</view>
<view class="empty-block"></view>
<!-- <view class="jz_ReseOrder">
<view class="jz_ReDix">
<view class="jz_RedixTitle">成人：</view>
<u-number-box v-model="orderMsg.ManNum" :input-width="300" :input-height="60" @change="changeMan()"></u-number-box>
......@@ -110,7 +304,74 @@
<view class="jz_RedixTitle">婴儿：</view>
<u-number-box v-model="orderMsg.BabyNum" :input-width="300" :input-height="60" @change="changeBabyNum()"></u-number-box>
</view>
</view> -->
<view style="padding:50rpx 40rpx">
<view class="big-title">
<text>费用明细</text>
</view>
<view class="jz_form" style="margin:40rpx 0;padding: 0;">
<view class="form-items">
<view class="label">
在线支付
</view>
<view class="val f14 regular" style="text-align: right;">
<text style="margin-right: 30rpx;">{{total}}人</text>
<text class="red">￥{{price}}</text>
</view>
</view>
<view class="form-items" style="border-bottom: none;">
<view class="label">
明细
</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index">
<view style="flex:1">
<text style="margin-right: 30rpx;">成人</text>
</view>
<view style="text-align: right;">{{orderMsg.ManNum}}人 × ¥{{$utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice}}</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.ChirdNeedBedNum>0">
<view style="flex:1">
<text style="margin-right: 30rpx;">儿童(占床)</text>
</view>
<view style="text-align: right;">{{orderMsg.ChirdNeedBedNum}}人 × ¥{{($utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice)+currentPriceInfo.childNeedPrice}}</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.ChirdNoBedNum>0">
<view style="flex:1">
<text style="margin-right: 30rpx;">儿童(不占床)</text>
</view>
<view style="text-align: right;">{{orderMsg.ChirdNoBedNum}}人 × ¥{{($utils.getretailer()? currentPriceInfo.b2BPrice:currentPriceInfo.b2CPrice)+currentPriceInfo.childNoNeedPrice}}</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.BabyNum>0">
<view style="flex:1">
<text style="margin-right: 30rpx;">婴儿</text>
</view>
<view style="text-align: right;">
{{orderMsg.BabyNum}}人 × ¥{{currentPriceInfo.babyPrice}}</view>
</view>
<view class="flex f12 grey" style="margin-bottom:40rpx;" :key="index" v-if="orderMsg.BabyNum>0&&currentPriceInfo.babyChargePrice>0">
<view style="flex:1">
<text style="margin-right: 30rpx;">婴儿(附加费)</text>
</view>
<view style="text-align: right;">
{{orderMsg.BabyNum}}人 × ¥{{currentPriceInfo.babyChargePrice}}</view>
</view>
</view>
</view>
<view class="empty-block"></view>
<view style="padding:50rpx 40rpx" v-if="tips!=''">
<view class="big-title">
<text>重要提醒</text>
</view>
<view class="sheshi">
<view class="she-content">
<text>{{tips}}</text>
</view>
</view>
</view>
<view class="jz_orderbox">
<view class="jz_OrderDiv">
<view style="color:#FF3166;font-weight:bold;">
<text style="font-size:22rpx;">¥</text>
......@@ -118,7 +379,8 @@
<text style="color:#6E6E6E;font-size:24rpx;">共计{{total}}人</text>
</view>
<view style="display:flex;margin-top:-2px;">
<view class="jz_OrderReNow" @click="goPay()">下单</view>
<view class="jz_OrderReNow" @click="goPay()">立即支付</view>
</view>
</view>
</view>
</view>
......@@ -146,16 +408,48 @@
ESeatNum: 0,
FSeatNum: 0,
sumSeat:0,
userInfo:{}
userInfo:{},
ltName:'',
tips:"",
contactMobile:"",
contactName:""
};
},
created() {},
created() {
uni.setNavigationBarTitle({
title:"订单支付预览"
})
},
onLoad(option) {
if (option.currentPriceInfo) {
this.currentPriceInfo = JSON.parse(decodeURIComponent(option.currentPriceInfo))
let t=JSON.parse(decodeURIComponent(option.seat))
this.orderMsg.ManNum=t.crCount
this.orderMsg.ChirdNeedBedNum=t.etCount
this.orderMsg.ChirdNoBedNum=t.etbCount
this.orderMsg.BabyNum=t.yeCount
this.tips=decodeURIComponent(option.tips)
this.calcMoney();
this.ltName=option.ln
}
},
methods: {
updateUser(){
uni.navigateBack({
delta: 1,
});
},
getWeek(date) {
var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date
return '周'+week;
},
getDate(date){
if(date){
let arr = date.split('-');
return arr[1]+'月'+arr[2]+'日'
}
},
//改变成人
changeMan(e) {
this.orderMsg.ManNum = e.value;
......@@ -202,11 +496,22 @@
},
//去支付
goPay() {
if(this.contactName==''){
uni.showToast({
title: '请输入联系人姓名',
icon: 'none'
});
}else if(this.contactMobile==''){
uni.showToast({
title: '请输入联系人电话',
icon: 'none'
});
}else{
this.userInfo = uni.getStorageSync('mall_UserInfo');
this.basedataObj = uni.getStorageSync('basedata').mall;
var CustomerId = 0;
var ContactName = '';
var ContactMobile = '';
var ContactName = this.contactName;
var ContactMobile = this.contactMobile;
var CustomerType = 3;
var price=0;
if(this.$utils.getretailer()){
......@@ -214,8 +519,6 @@
CustomerType = 1;
price = this.currentPriceInfo.b2BMemberPrice;
}else{
ContactName = this.basedataObj.virtualB2CCustomerName;
ContactMobile = this.basedataObj.virtualB2CCustomerTel;
price = this.currentPriceInfo.b2CMemberPrice;
}
let msg = {
......@@ -285,6 +588,7 @@
);
}
}
}
};
</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