hotelHomestayWx/pages/house/createOrder.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="!dataForm.id?'新增订单':!orderStatus?'编辑订单':'办理入住'" :showIcon="true"></c-nav-bar>
		<view class="box box1">
			<view class="tit">预订信息</view>
			<u-cell-group :border="false" customStyle="margin:0 -30rpx">
				<u-cell customStyle="height:88rpx">
					<text>*</text>
					<text slot="icon" class="label">姓名</text>
					<view slot="title" class="title">
						<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
							placeholder="请输入姓名" v-model="dataForm.guestName"></u--input>
					</view>
				</u-cell>
				<u-cell customStyle="height:88rpx">
					<text slot="icon" class="label">手机号码</text>
					<view slot="title" class="title">
						<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
							placeholder="请输入手机号码" v-model="dataForm.guestPhone"></u--input>
					</view>
				</u-cell>
				<u-cell :isLink="true" @click="showLaiyuan=true">
					<text slot="icon" class="label">订单来源</text>
					<view slot="title" class="title">
						{{dataForm.guestSourceName||''}}
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="tit tit2">入住登记<u-icon @click="goStayCheck()" name="plus-circle" label="添加入住人"
					labelColor="#1372FF" labelSize="24" color="1372FF" size="30"></u-icon></view>
			<view class="perItem" v-for="(item,index) in dataForm.detailFormList[0].checkInPersonList" :key="index">
				<text>{{item.checkInName}}</text>
				<text style="margin-left: 40px;">{{item.idCard}}</text>
				<u-icon name="close-circle-fill" color="#ddd" size="30" @click="delPer(index)"></u-icon>
			</view>
		</view>
		<view class="box box1">
			<view class="tit">房间信息</view>
			<view class="dateBetween">
				<view class="start" v-if="dataForm.arriveDate">
					<text>入住日期</text>
					<text class="txt">{{dataForm.arriveDate.substring(5,10)}}</text>
				</view>
				<view class="dateNum">共{{dataForm.num}}晚</view>
				<view class="end" v-if="dataForm.leaveDate">
					<text>离店日期</text>
					<text @click="showPick()" class="txt">{{dataForm.leaveDate.substring(5,10)}}</text>
					<u-datetime-picker :show="leaveDateShow"  mode="date" ref="picker"
						@cancel="leaveDateShow=false"
						@confirm="credentialsConfirmtime" :defaultIndex="credentialsDefaulttime"></u-datetime-picker>
				</view>
			</view>
			<u-cell-group :border="false" customStyle="margin:0 -30rpx">
				<!-- <u-cell>
					<text slot="icon" class="label">入住日期</text>
					<view slot="title" class="title">
						{{dataForm.arriveDate}}
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" class="label">离店日期</text>
					<view slot="title" class="title">
						{{dataForm.leaveDate}}
					</view>
				</u-cell> -->
				<!-- <u-cell>
					<text slot="icon" class="label">共几晚</text>
					<view slot="title" class="title">
						{{dataForm.num}}
					</view>
				</u-cell> -->
				<u-cell isLink="true" @click="checkInTypeShow=true">
					<text slot="icon" class="label">入住类型</text>
					<view slot="title" class="title">
						{{dataForm.detailFormList[0].checkInTypeName}}
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" class="label">房间类型</text>
					<view slot="title" class="title">
						{{dataForm.houseBaseName}}
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" class="label">房间号</text>
					<view slot="title" class="title">
						{{dataForm.detailFormList[0].roomNumber}}
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" class="label">房价</text>
					<view slot="title" class="title">
						{{dataForm.detailFormList[0].roomAmount}}
					</view>
				</u-cell>
				<u-cell customStyle="height:88rpx">
					<text slot="icon" class="label">备注</text>
					<view slot="title" class="title">
						<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
							type="textarea" placeholder="请输入" v-model="dataForm.remarks" height="200"></u--input>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="tit tit2"><text>消费信息</text> <u-icon @click="addBreast()" name="plus-circle" label="添加消费"
					labelColor="#1372FF" labelSize="24" color="1372FF" size="30"></u-icon></view>
			<u-swipe-action>
				<u-swipe-action-item :show="item.show" :index="index" class=""
					v-for="(item, index) in dataForm.detailFormList[0].breakfastData" :key="index" @click="click(index)"
					:options="options">
					<view class="goodsInfo item">
						<view class="title-wrap">
							<text class="title u-line-2">{{item.breakfastName}}/{{item.num}}/{{item.price}}</text>
						</view>
					</view>
				</u-swipe-action-item>
				<u-swipe-action-item :show="item.show" :index="index2" class=""
					v-for="(item, index2) in dataForm.detailFormList[0].otherData" :key="index2" @click="click2(index2)"
					:options="options">
					<view class="goodsInfo item">
						<view class="title-wrap">
							<text class="title u-line-2">{{item.projectName}}/{{item.num}}/{{item.defaultPrice}}</text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view class="box">
			<view class="tit tit2"><text>收款信息</text> <u-icon @click="addpay()" name="plus-circle" label="添加收款"
					labelColor="#1372FF" labelSize="24" color="1372FF" size="30"></u-icon></view>
			<u-swipe-action>
				<u-swipe-action-item :show="item.show" :index="index" class=""
					v-for="(item, index) in dataForm.flowRecord" :key="index" @click="click3(index)" :options="options">
					<view class="goodsInfo item">
						<view class="title-wrap">
							<text
								class="title u-line-2">{{item.flowTypeName}}/{{item.payTypeName}}/{{item.amount}}</text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view class="footer">
			<view class="total"><text>订单金额：</text><text>￥{{totalMOney}}</text></view>
			<view class="btns">
				<text @click="confirmOrder(2)" v-if="today==1">直接入住</text>
				<text @click="confirmOrder(1)" v-if="!orderStatus">保存</text>
				<!-- 新增和编辑时由此按钮 -->
			</view>
		</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="showLaiyuan" :columns="laiyuan" title="来源选择"
			keyName="guestSource" :defaultIndex="passengerDefault" @cancel="showLaiyuan=false;"
			@confirm="passengerConfirm"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="checkInTypeShow" :columns="checkInType" title="入住类型选择"
			keyName="label" :defaultIndex="passengerDefault2" @cancel="checkInTypeShow=false;"
			@confirm="passengerConfirm2"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				credentialsDefaulttime:[10,1,0],
				titleStyle: {
					fontSize: '34rpx',
					fontWeight: "bold",
				},
				showLaiyuan: false,
				checkInTypeShow: false,
				passengerDefault: [0],
				passengerDefault2: [0],
				leaveDateShow: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				orderStatus: '',
				totalMOney: 0, //订单总金额
				dataForm: {
					arriveDate: "",
					detailFormList: [{
						breakfastAmount: 0,
						checkInPersonList: [],
						checkInType: 0,
						checkInTypeName: '',
						id:0,
						otherAmount: 0,
						roomAmount: 0,
						roomIds: "",
						breakfastData: [],
						otherData: [],
						roomNumber: "",
					}],
					flowRecord: [],
					guestName: "",
					guestPhone: "",
					guestSourceId: null,
					guestSourceName: null,
					homestayId: uni.getStorageSync('homestayId'),
					houseBaseId: 0,
					houseBaseName: '',
					leaveDate: "",
					num: 0,
					orderStatus: null,
					remarks: "",
				},
				checkInType: [
					[{
							label: '正常入住',
							val: 1
						}, {
							label: '自用房',
							val: 2
						},
						{
							label: '免费入住',
							val: 3
						}
					]
				],
				flowTypeNames:['微信','支付宝','云闪付'],
				roomId: '',
				laiyuan: [
					[]
				],
				currentDate: '',
				today: ''
			}
		},
		onReady() {
			// 微信小程序需要用此写法
		},
		onLoad(opt) {
			this.getLaiyuan();
			if (opt.roomId) {
				this.roomId = opt.roomId.split(',');
			}
			if (opt.id) { //编辑
				if (opt.orderStatus) {
					this.orderStatus = opt.orderStatus;
				}
				this.dataForm.id = opt.id;
				this.getInfo2()
			} else {
				//新增获取简单信息
				this.getInfo();
			}
			// 当前日期
			let myDate = new Date();
			let year = myDate.getFullYear();
			let mon = myDate.getMonth() + 1;
			let day = myDate.getDate();
			mon = mon > 9 ? mon : '0' + mon;
			day = day > 9 ? day : '0' + day;
			this.currentDate = year + '-' + mon + '-' + day;
		},
		methods: {
			showPick(){
				this.leaveDateShow=true;
				this.$refs.picker.innerValue=new Date().getTime()
			},
			//i计算天数
			getDaysBetween(dateString1,dateString2){
			    var  startDate =Date.parse(dateString1);
			    var  endDate =Date.parse(dateString2);
			    if (startDate>endDate){
			        return 0;
			    }
			    if (startDate==endDate){
			        return 1;
			    }
			    var days=(endDate - startDate)/(1*24*60*60*1000);
				this.dataForm.num=days;
			    //return  days;
			},
			credentialsConfirmtime(e) {
				// 创建一个Date对象并传入时间戳
				const date = new Date(e.value);
				// 使用Date对象的方法获取年、月、日、小时、分钟和秒
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				// 格式化时间
				const formattedTime = `${year}-${month}-${day}`;
			
				this.dataForm.leaveDate = formattedTime;
				this.getDaysBetween(this.dataForm.arriveDate,this.dataForm.leaveDate);
				this.leaveDateShow = false;
			},
			compareDate(data) {
				let data2=data.substring(0,10);
				if (
					new Date(data2).getTime() < new Date(this.currentDate).getTime()
				) {
					this.today = -1;
				}
				if (
					new Date(data2).getTime() == new Date(this.currentDate).getTime()
				) {
					this.today = 1;
				}
				if (
					new Date(data2).getTime() > new Date(this.currentDate).getTime()
				) {
					this.today = 2;
				}
			},
			//添加入住人
			goStayCheck() {
				let list = JSON.stringify(this.dataForm);
				uni.navigateTo({
					url: '/pages/house/stayCheck?orderInfo=' + list,
					events: {
						addSuccess: data => {
							this.dataForm.detailFormList[0].checkInPersonList = data.data || [];
						}
					},
				})
			},
			//添加早餐
			addBreast() {
				let list = JSON.stringify(this.dataForm.detailFormList[0].breakfastData);
				let list2 = JSON.stringify(this.dataForm.detailFormList[0].otherData)
				uni.navigateTo({
					url: '/pages/house/breast?list1=' + list + '&list2=' + list2,
					events: {
						addSuccess: data => {
							this.dataForm.detailFormList[0].breakfastData = data.data1.filter((item) => item
								.num && item
								.num != 0);
							this.dataForm.detailFormList[0].otherData = data.data2.filter((item) => item.num &&
								item.num !=
								0);
							this.totalMOney = this.dataForm.detailFormList[0].roomAmount;
							this.dataForm.detailFormList[0].breakfastAmount = 0;
							this.dataForm.detailFormList[0].otherAmount = 0;
							for (let i = 0; i < this.dataForm.detailFormList[0].breakfastData.length; i++) {
								this.totalMOney += parseFloat(this.dataForm.detailFormList[0].breakfastData[i]
									.price) * this.dataForm.detailFormList[0].breakfastData[i].num;
								this.dataForm.detailFormList[0].breakfastAmount += parseFloat(this.dataForm
									.detailFormList[0].breakfastData[i]
									.price) * this.dataForm.detailFormList[0].breakfastData[i].num;
							}
							for (let i = 0; i < this.dataForm.detailFormList[0].otherData.length; i++) {
								this.totalMOney += parseFloat(this.dataForm.detailFormList[0].otherData[i]
									.defaultPrice) * this.dataForm.detailFormList[0].otherData[i].num;
								this.dataForm.detailFormList[0].otherAmount += parseFloat(this.dataForm
									.detailFormList[0].otherData[i]
									.defaultPrice) * this.dataForm.detailFormList[0].otherData[i].num;
							}
						}
					}
				})
			},
			//添加收款
			addpay() {
				uni.navigateTo({
					url: '/pages/house/payAdd?money=' + this.totalMOney + '&list=' +
						JSON.stringify(this.dataForm.flowRecord),
					events: {
						addSuccess: data => {
							if (data.data.amount != 0) {
								this.dataForm.flowRecord = this.dataForm.flowRecord || [];
								this.dataForm.flowRecord.push(data.data)
								// if(data.data.flowType==1){ //收款
								// 	this.totalMOney+=parseFloat(data.data.amount);
								// }else{
								// 	this.totalMOney=parseFloat(data.data.amount);
								// }
							}
						}
					}
				})
			},
			delPer(index) {
				this.dataForm.detailFormList[0].checkInPersonList.splice(index, 1)
			},
			confirmOrder(orderStatus) {
				if(!this.dataForm.guestName){
					this.$showToast('请输入姓名');
					return
				}
				if(!this.$u.test.mobile(this.dataForm.guestPhone)){
					this.$showToast('请输入正确手机号');
					return
				}
				if(!this.dataForm.guestSourceName){
					this.$showToast('请选择来源');
					return
				}
				if(!this.dataForm.detailFormList[0].checkInPersonList||this.dataForm.detailFormList[0].checkInPersonList.length==0){
					this.$showToast('请添加入住人');
					return
				}
				//orderStatus//预约入住 1，直接入住2
				if (orderStatus) {
					this.dataForm.orderStatus = orderStatus;
				}
				let url = '';
				if (this.dataForm.id) {
					url = '/merchant/hotel/order/updOrder'
					if (this.orderStatus) {
						this.dataForm.orderStatus = this.orderStatus;
					}
				} else {
					url = '/merchant/hotel/order/placeOrder'
				}
				this.$api.post(url, this.dataForm).then(res => {
					if (res.data.code == 0) {
						this.$showToast('操作成功');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pagesMy/orderList/orderList'
							})
						}, 1500)
					}
				})
			},
			click(index) {
				this.dataForm.detailFormList[0].breakfastAmount -= this.dataForm.detailFormList[0].breakfastData[index]
					.price * this.dataForm.detailFormList[0].breakfastData[index].num;
				this.totalMOney -= this.dataForm.detailFormList[0].breakfastData[index].price * this.dataForm
					.detailFormList[0].breakfastData[index].num;
				this.dataForm.detailFormList[0].breakfastData.splice(index, 1);
			},
			click2(index) {
				this.dataForm.detailFormList[0].otherAmount -= this.dataForm.detailFormList[0].otherData[index]
					.defaultPrice * this.dataForm.detailFormList[0].otherData[index].num;
				this.totalMOney -= this.dataForm.detailFormList[0].otherData[index].defaultPrice * this.dataForm
					.detailFormList[0].otherData[index].num;
				this.dataForm.detailFormList[0].otherData.splice(index, 1);
			},
			click3(index) {
				this.dataForm.flowRecord.splice(index, 1);
			},
			getLaiyuan() {
				this.$api.get("/merchant/hotel/room/state/getSourceDownBox", {
						homestayId: this.dataForm.homestayId,
					})
					.then((res) => {
						if (res.data.code == 0) {
							this.laiyuan = [res.data.data];
						}
					});
			},
			getInfo2() { //详情信息
				this.$api.get('/merchant/hotel/order/getOrderDetail/' + this.dataForm.id).then(res => {
					if (res.data.code == 0) {
						this.dataForm = {
							...this.dataForm,
							...res.data.data,
						};
						this.compareDate(this.dataForm.arriveDate);
						this.dataForm.detailFormList[0].checkInType = res.data.data.detailFormList[0].checkInType;
						this.dataForm.detailFormList[0].checkInTypeName = this.checkInType[0].filter((item => item
							.val ==this.dataForm.detailFormList[0].checkInType))[0].label;
						this.totalMOney = this.dataForm.orderAmount;
						this.dataForm.flowRecord.forEach((i,index)=>{
							let flowTypeName=i.flowType==1?'收款':'退款';
							var payTypeName='微信';
							if(i.payType){
								payTypeName=this.flowTypeNames[i.payType-1];
							}
							
							this.$set(this.dataForm.flowRecord[index],'flowTypeName',flowTypeName)
							this.$set(this.dataForm.flowRecord[index],'payTypeName',payTypeName)
						})
					}
				})
			},
			// 房型列表
			getInfo() {
				this.$api.post('/merchant/hotel/order/getRoomInfoList', this.roomId).then(res => {
					if (res.data.code == 0) {
						this.dataForm.detailFormList[0].roomIds = res.data.data.roomIds;
						this.dataForm.detailFormList[0].roomNumber = res.data.data.roomNumber;
						this.dataForm.detailFormList[0].checkInType = res.data.data.checkInType;
						this.dataForm.detailFormList[0].checkInTypeName = this.checkInType[0].filter((item => item
							.val == res.data.data.checkInType))[0].label;
						this.dataForm.detailFormList[0].roomAmount = res.data.data.roomAmount;
						this.dataForm.arriveDate = res.data.data.arriveDate;
						this.compareDate(this.dataForm.arriveDate);
						this.dataForm.leaveDate = res.data.data.leaveDate;
						this.dataForm.houseBaseId = res.data.data.houseBaseId;
						this.dataForm.houseBaseName = res.data.data.houseBaseName;
						this.dataForm.num = res.data.data.num;
						this.totalMOney = res.data.data.roomAmount;
						
					}
				})
			},
			//  来源
			passengerConfirm(e) {
				this.dataForm.guestSourceId = e.value[0].id;
				this.dataForm.guestSourceName = e.value[0].guestSource;
				this.showLaiyuan = false;
			},
			//入住类型
			passengerConfirm2(e) {
				this.dataForm.detailFormList[0].checkInType = e.value[0].val;
				this.dataForm.detailFormList[0].checkInTypeName = e.value[0].label;
				this.checkInTypeShow = false;
			}
		}
	}
</script>
<style>
	.u-swipe-action-item__right__button__wrapper__text {
		font-size: 28rpx !important;
	}
</style>
<style lang="scss" scoped>
	.u-swipe-action-item__right__button__wrapper {
		height: 36px
	}

	.u-swipe-action-item__right__button__wrapper__text {
		font-size: 28rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		left: 0;
		z-index: 99;
		padding: 30rpx;
		box-sizing: border-box;

		.total {
			text {
				color: #1372FF;
				font-size: 32rpx;

				&:first-child {
					color: #333;
				}
			}
		}

		.btns {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			text {
				display: inline-block;
				width: 48%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 34rpx;
				border-radius: 48rpx;
				border: 1rpx solid #D1D1D1;
				color: #999;
				margin:0 3%;
				flex: 1;

				&:last-child {
					background-color: #1372FF;
					color: #fff;
				}
			}
		}

	}

	.u-cell__body {
		padding: 0 !important;
	}

	.page {
		background: #F3F4F4;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
	}



	.box {
		background-color: #fff;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		width: 96%;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;

		.label {
			color: #333;
			font-size: 30rpx;
		}

		&.box1 {
			padding: 0 30rpx;

			.title {
				text-align: right;
			}
		}

		.title {
			color: #999;
		}
	}

	.tit,
	.tit2 {
		font-size: 32rpx;
		font-weight: bold;
		padding-top: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.tit2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodsInfo.item {
		padding: 20rpx 0;

		text {
			font-size: 30rpx;
		}

	}

	.perItem {
		display: flex;
		align-items: center;
		padding: 26rpx 0;
		border-bottom: 1rpx solid #E1E1E1;
		&:last-child{
			border: 0;
		}
		text {
			font-size: 30rpx;
			color: #333;

			&:nth-of-type(2) {
				flex: 1;
				margin: 0 10rpx;
			}
		}
	}

	.dateBetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 30rpx;
		border-bottom: 1rpx solid #E1E1E1;

		.start,
		.end {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			text {
				&.txt {
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}

		.dateNum {
			text-align: center;
			border-radius: 30rpx;
			display: inline-block;
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			color: #333;
			background-color: #F9FAFC;
		}
	}
</style>