优化线路下单

pages/jiuzhai/jz_LineDetail.vue

@@ -16,8 +16,8 @@
 								</view>
 							</view>
 							<view class="mi-right">
-								<view style="color:#FFF;margin-bottom: 6rpx;font-size: 22rpx;">团队编号：CTU04210603A</view>
-								<view style="color:#FFF;font-size: 22rpx;">{{dataList.startCityName}}出发 · 精品线路</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>
 						</view>
 					</view>
@@ -35,7 +35,7 @@
 		</view>
 		<view class="jz_TopPrice">
 			<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;margin-left: 30rpx;">2728人出游</text>
 			</view>
@@ -84,7 +84,7 @@
 						<view style="color:#FF3166;font-size:26rpx;">￥{{$utils.getretailer()==true? item.b2BPrice:item.b2CPrice}}</view>
 					</view>
 				</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_StartHoubu" v-if="customerDate.remainNum">
 						<text>余</text>
@@ -266,7 +266,7 @@
 			<view class="jz_OrderDiv">
 				<view style="color:#FF3166;font-weight:bold;">
 					<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>
 				</view>
 				<view style="display:flex;align-items: center;">
@@ -274,12 +274,43 @@
 						<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 class="jz_OrderNow" @click="showOrderPreviwe=true">立即预定</view>
 				</view>
 			</view>
 		</view>
 		<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>
 	</scroll-view>
 </template>
@@ -294,6 +325,9 @@
 			return {
 				pageTitle: '线路详情',
 				showDateChosen:false,
+				showOrderPreviwe:false,
+				crCount:1,
+				etCount:0,
 				msg: {
 					pageIndex: 1,
 					pageSize: 15
@@ -301,7 +335,8 @@
 				dataList: {}, //数据
 				delMsg: {
 					tcid: 0,
-					configId: 0
+					configId: 0,
+					tcnum:''
 				},
 				scenicNum: 0, // 景点数量
 				breakfastNum: 0, //早餐数
@@ -311,7 +346,8 @@
 				titleStyle: {},
 				mainColor: "",
 				detailContent: "",
-				customerDate:{}
+				customerDate:{},
+				currentPrice:{}
 			};
 		},
 		created() {
@@ -338,6 +374,18 @@
 		},
 		methods: {
 			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
 			},
 			openPicture() {
@@ -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 {
 
 						}
@@ -414,8 +468,13 @@
 			},
 			//点击切换
 			getDayInfo(item){
+				if(this.crCount+this.etCount>this.currentPrice.totalSeat){
+					this.crCount=1,
+					this.etCount=0
+				}
 				this.delMsg.tcid = item.tcid;
 				this.delMsg.configId = item.configID;
+				this.currentPrice=item
 				this.getDetails();
 			},
 			openDate(){
@@ -423,8 +482,8 @@
 					if(this.customerDate.tcid==this.delMsg.tcid){
 						this.showDateChosen=true
 					}else{
-						this.delMsg.tcid = customerDate.tcid;
-						this.delMsg.configId = customerDate.configID;
+						this.delMsg.tcid = this.customerDate.tcid;
+						this.delMsg.configId = this.customerDate.configID;
 						this.getDetails();
 					}
 				}else{
@@ -433,7 +492,7 @@
 			},
 			//立即预定
 			goReserce(){
-				let myCurrentInfo = this.dataList.currentPriceInfo;
+				let myCurrentInfo = this.currentPrice;
 				myCurrentInfo.startCityName = this.dataList.startCityName;
 				let imgCover = JSON.parse(this.dataList.imgCover);
 				if(imgCover.length>0){
@@ -455,7 +514,10 @@
 		height: 100vh;
 		box-sizing: border-box;
 	}
-	
+	.line-flex{
+		display: flex;
+		align-items: center;
+	}
 
 	.jz_TopImg {
 		width: 100%;
@@ -881,7 +943,7 @@
 		text-align: center;
 		line-height: 80rpx;
 		color:#fff;
-		font-weight: bold;
+		font-weight: 600;
 		font-size:28rpx;
 		border-radius: 16rpx;
 	}