hotelHomestayWx/pages/house/createOrder.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="新增订单" :showIcon="true"></c-nav-bar>
		<view class="box box1">
			<view class="tit">预订信息</view>
			<u-cell-group :border="false" customStyle="margin:0 -30rpx">
				<u-cell>
					<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>
					<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 box1">
			<view class="tit">房间信息</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}}
						<!-- <u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx" :disabled="true"
							placeholder="" v-model="dataForm.arriveDate"></u--input> -->
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" class="label">离店日期</text>
					<view slot="title" class="title">
						{{dataForm.leaveDate}}
						<!-- <u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx" :disabled="true"
							placeholder="" v-model="dataForm.leaveDate"></u--input> -->
					</view>
				</u-cell>
				<u-cell isLink="true">
					<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 isLink="true">
					<text slot="icon" class="label">房间类型</text>
					<view slot="title" class="title">
						{{dataForm.houseBaseId}}
					</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>
					<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="index" class=""
					v-for="(item, index) in dataForm.detailFormList[0].otherData" :key="index" @click="click2(index)"
					: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="goodsInfo"
					v-for="(item, index) in dataForm.flowRecord" :key="index" @click="click3(index)" :options="options">
					<view class="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)">直接入住</text>
				<text @click="confirmOrder(1)">提交订单</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 {
				titleStyle: {
					fontSize: '34rpx',
					fontWeight: "bold",
				},
				showLaiyuan: false,
				checkInTypeShow: false,
				passengerDefault: [0],
				passengerDefault2: [0],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				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: this.$store.state.moduleHouse.homestayId,
					houseBaseId: 0,
					houseBaseName: '',
					leaveDate: "",
					num: 0,
					orderStatus: null,
					remarks: "",
				},
				checkInType: [
					[{
							label: '正常入住',
							val: 1
						}, {
							label: '自用房',
							val: 2
						},
						{
							label: '免费入住',
							val: 3
						}
					]
				],
				roomId: '',
				laiyuan: [[]]
			}
		},
		onLoad(opt) {
			this.getLaiyuan();
			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();
			}
		},
		methods: {
			//添加早餐
			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;
							for (let i = 0; i < this.dataForm.detailFormList[0].breakfastData.length; i++) {
								this.totalMOney += parseFloat(this.dataForm.detailFormList[0].breakfastData[i]
									.price);
							}
							for (let i = 0; i < this.dataForm.detailFormList[0].otherData.length; i++) {
								this.totalMOney += parseFloat(this.dataForm.detailFormList[0].otherData[i]
									.defaultPrice);
							}
						}
					}
				})
			},
			//添加收款
			addpay() {
				uni.navigateTo({
					url: '/pages/house/payAdd?money=' + this.dataForm.detailFormList[0].roomAmount + '&list=' +
						JSON.stringify(this.dataForm.flowRecord),
					events: {
						addSuccess: data => {
							if (data.data.amount != 0) {
								this.dataForm.flowRecord.push(data.data)
								// if(data.data.flowType==1){ //收款
								// 	this.totalMOney+=parseFloat(data.data.amount);
								// }else{
								// 	this.totalMOney=parseFloat(data.data.amount);
								// }
							}
						}
					}
				})
			},
			confirmOrder(orderStatus) {
				//orderStatus//预约入住 1，直接入住2
				this.dataForm.orderStatus = orderStatus
				this.$api.post('/merchant/hotel/order/placeOrder', this.dataForm).then(res => {
					if (res.data.code == 0) {
						this.$showToast('下单成功');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/orderList/orderList'
							})
						}, 1500)
					}
				})
			},
			click(index) {
				console.log(index)
				this.dataForm.detailFormList[0].breakfastData.splice(index, 1);
			},
			click2(index) {
				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(){//详情信息
				
			},
			// 房型列表
			getInfo() {
				this.$api.post('/merchant/hotel/order/getRoomInfoList', this.roomId).then(res => {
					console.log(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.dataForm.leaveDate = res.data.data.leaveDate;
						this.dataForm.houseBaseId = res.data.data.houseBaseId;
						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() {
				this.dataForm.detailFormList[0].checkInType = e.value[0].val;
				this.dataForm.detailFormList[0].checkInTypeName = e.value[0].guestSource;
				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: 9;
		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;

				&: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;
		}

	}
</style>