完成线路订单

node_modules/uview-ui/components/u-number-box/u-number-box.vue

@@ -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

@@ -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

 <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>