hotelHomestayWx/pages/my/houseList.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="房间列表" :showIcon="true"></c-nav-bar>
		<view class="body">
			<!-- 房型信息 -->

			<view class="typeInfo">
				<view class="titleInfo">
					<text style="font-size: 32rpx; font-weight: 700;">房型信息</text>
				</view>
				<view class="cellBox">
					<text style="font-size: 30rpx; margin-right: 30rpx;">房型名称</text>
					<input v-model="form.name" type="text" placeholder="请输入房型"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view>
				<view class="bigRoom">
					<text style="font-size: 30rpx;color: black; margin-right: 90rpx;">简称</text>
					<input v-model="form.shortName" type="text" placeholder="请输入简称"
						style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
				</view>
			</view>
			<!-- 	<view class="shelves">
				<view style="margin-left: 30rpx;">
					<text style="font-size: 30rpx; ">是否上架</text>
				</view>
				<view style="margin-right: 30rpx;">
					<u-switch v-model="checked" size="50" active-color="#07C160"> </u-switch>
				</view>
			</view> -->
			<!-- 图片上传
			 -->
			<view class="uploadPic">
				<view style=" margin-left: 30rpx;">
					<text style="font-size: 32rpx; font-weight: 700; ">封面图片({{fileList.length}}/1)</text>

				</view>
				<view style="margin-top: 20rpx; margin-left: 30rpx; color: #777; font-size: 24rpx;">
					<text>仅能上传1张，需展示房间内容</text>
				</view>
				<view class="pic">
					<!-- 图片 -->
					<u-upload :fileList="fileList" multiple :maxCount="1" :maxSize="1 * 1024 * 1024"
						@afterRead="afterRead" @oversize="overSize" width="120" height="120" @delete="deletePic">
					</u-upload>

				</view>

			</view>
			<!-- 价格信息 -->
			<!-- <view class="priceInfo"> -->
			<!-- 标题 -->
			<!-- <view class="titleInfo">
					<text style="font-size: 32rpx; font-weight: 700; margin-left: 10rpx;">价格信息</text>
				</view> -->
			<!-- 周末周日区分 -->
			<!-- <view class="week">
					<view class="weekend">
						<view>
							<text style="font-size: 30rpx; ">区分平日周末</text>
						</view>
						<view>
							<u-switch v-model="weekedChecked" size="50" active-color="#07C160"></u-switch>
						</view>
					</view>
				</view> -->
			<!-- 平日价格 -->
			<!-- <view class="priceBoxWeek" v-if="!weekedChecked">
					<view class="weekendBox" @scroll="scroll">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">固定房价</text>
						</view>
						<view style="display: flex; align-items: center; height: 50rpx;">
							<text style="font-size: 30rpx;">￥</text>
							<input v-model="form.price" placeholder="请输入价格"
								style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- 每日价格 -->
			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周一</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.mondayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周二</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.tuesdayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周三</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.wednesdayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- 	<view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周四</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.thursdayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周五</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.fridayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox">
						<view>
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周六</text>
						</view>
						<view style="display: flex; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.saturdayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;" />
						</view>
					</view>
				</view> -->

			<!-- <view class="priceBoxWeek" v-if="weekedChecked">
					<view class="weekendBox" style=" border-bottom: 1rpx solid #fff;">
						<view style="margin-top: 10rpx;">
							<text style="font-size: 30rpx; margin-right: 90rpx; ">周日</text>
						</view>
						<view style="display: flex; margin-top: 10rpx; align-items: center;">
							<text style="font-size: 30rpx;">￥</text> <input v-model="form.sundayPrice" type="text"
								placeholder="请输入价格" style="width: 210rpx;height: 42rpx; font-size: 30rpx;
								 " />
						</view>
					</view>
				</view> -->
			<!-- </view> -->
			<!-- 房间列表 -->
			<view class="everyHouseList" style="padding-top: 20rpx;">
				<view class="HouseListTitleInfo">
					<text style="font-size: 32rpx; font-weight: 700;">房间列表</text>
					<text style="font-size: 24rpx; color: #777;">共{{form.roomFloor.length}}个房间</text>
				</view>
				<!-- 房间号 -->
				<view class="priceBoxWeek" v-for="(room,index) in form.roomFloor" :key="index" @scroll="scroll">
					<view class="weekendBox" style="display: flex; justify-content: space-between; align-items: center">
						<view style="display: flex; align-items: center;height:54rpx ">
							<view style="font-size: 30rpx;"> 楼层：</view>
							<input style="width: 70rpx; margin-bottom: 5rpx; font-size: 28rpx; height: 50rpx;"
								v-model="room.floor" />
						</view>
						<view style="display: flex;  align-items: center;">
							<view style="font-size: 30rpx;"> 房间号：</view>
							<input style=" width: 70rpx; margin-bottom: 5rpx; font-size: 28rpx; height: 50rpx;"
								v-model="room.roomNumber" />
						</view>
						<view style="display: flex; margin-top: 10rpx;" @click="delRoom(index)">
							<u-icon name="trash"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="submit" @click="addRoom">
				<u-icon name="plus-circle" color=" #1372FF"></u-icon>
				<text style="color: #1372FF; font-size: 30rpx;">添加房间</text>
			</view>
			<!-- 新增按钮 -->
			<!-- 	<view class="btn-btn" @click="addNewRoom()">
				<view class="btn">
					确定
				</view>
			</view> -->
		</view>
		<!-- 新增按钮 -->
		<view class="btn-btn" @click="addNewRoom()">
			<view class="btn">
				确定
			</view>
		</view>

	</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				weekedChecked: false,
				action: '', //图片服务器地址
				fileList: [],

				form: {
					price: '',
					homestayId: '',
					mondayPrice: '',
					tuesdayPrice: '',
					wednesdayPrice: '',
					thursdayPrice: '',
					fridayPrice: '',
					saturdayPrice: '',
					sundayPrice: '',
					name: '',
					shortName: '',
					isPutaway: '',
					roomFloor: [{
						floor: '',
						roomNumber: ''
					}],
					cover: ''
				},
			}

		},
		onLoad({
			id,
			houseBaseId
		}) {
			this.form.homestayId = id
			// console.log(houseBaseId)
			this.id = houseBaseId
			// console.log(this.id)
			this.getTypeInfo()

		},
		methods: {
			scroll(e) {
				console.log('-----++++', e);
				uni.hideKeyboard()
			},

			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				const result = await this.uploadFilePromise(event.file[0].url);
				//图片路径
				console.log(result)
			},
			// 图片大小超出最大允许大小
			overSize(e) {
				uni.$u.toast('上传图片大小不能超过10MB!')
			},
			//上传图片
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
						filePath: url,
						name: 'file',
						header: {
							token: wx.getStorageSync('access_token')
						},
						success: (res) => {
							console.log(res)
							let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							this.fileList.push({
								url: data.data.url
							})
							this.form.cover = data.data.url;
							resolve(data.data.url)
						}
					});
				})
			},
			// 添加&编辑房屋
			addNewRoom() {

				// console.log(this.form)
				if (!this.id) {
					if (this.checked === true) {
						this.form.isPutaway = 1
					} else {
						this.form.isPutaway = 0
					}
					this.$api.post('/merchant/hotel/mine/addHouseBase', this.form).then(res => {
						// console.log(res)
						if (res.data.code === 0) {
							this.$showToast('修改成功');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/my/roomType'
								})
							}, 1500)
						}
					})
					console.log('这是')
				} else {
					// console.log('这是修改')
					// if(this.)
					if (this.checked === true) {
						this.form.isPutaway = 1
					} else {
						this.form.isPutaway = 0
					}
					this.$api.put('/merchant/hotel/mine/updHouseBase', this.form).then(res => {
						// console.log('修改成功')
						if (res.data.code === 0) {
							this.$showToast('修改成功')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/my/roomType'
								})
							}, 1500)
						}
					})

				}


			},
			// 添加房间
			addRoom() {
				const newRoom = {
					floor: '',
					roomNumber: ''
				}
				this.form.roomFloor.push(newRoom)
			},
			// 删除房间
			delRoom(index) {
				this.form.roomFloor.splice(index, 1)
			},

			// 获取当前房型信息
			getTypeInfo() {
				if (this.id) {
					this.$api.get(`/merchant/hotel/mine/getHouseBaseInfo/${this.id}`).then((res) => {
						// console.log(res)
						if (res.data.code === 0) {
							this.form = res.data.data
							this.fileList.push({
								url: res.data.data.cover
							})
							if (this.form.isPutaway == 1) {
								this.checked = true
							} else {
								this.checked = false
							}
						}
					})

				} else {
					return
				}
			}
		}

	}
</script>

<style lang="scss">
	.btn-btn {
		width: 100%;
		height: 136rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx 0 0;
		// margin: 0 auto;
		z-index: 999999;
		// margin-top: 30rpx;
		// margin-left: 30rpx;
	}

	.btn {
		margin: 0 auto;
		width: 690rpx;
		height: 96rpx;
		background-color: #1372FF;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		border-radius: 48rpx;
	}

	.uicon-close {
		font-size: 30rpx !important;
		top: 8rpx !important;
	}

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

	.body {
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.typeInfo {
		background-color: #fff;
		width: 100%;
		// height: 145px;
		border-radius: 5px;
		padding-top: 15px;
		padding-left: 7px;
		padding-right: 15px;
		box-sizing: border-box;
	}

	.titleInfo {
		// margin-top: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
	}

	.cellBox {
		margin-left: 20rpx;
		display: flex;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #E1E1E1;
	}

	.bigRoom {
		margin-left: 20rpx;
		width: 100%;
		height: 102rpx;
		display: flex;
		// justify-content: center;
		align-items: center;

	}

	.shelves {
		width: 695rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
	}

	.uploadPic {
		padding-top: 28rpx;
		width: 690rpx;
		// height: 293rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.pic {
		// margin-left: 30rpx;
		// margin-top: 20rpx;
		// width: 190rpx;
		// height: 120rpx;
		margin: 20rpx 30rpx;
		padding-bottom: 20rpx;
	}

	// .custom-upload-button{
	// 	width: 190rpx;
	// 	height: 120rpx;

	// }
	.priceInfo {
		width: 690rpx;
		// height: 908rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding-top: 30rpx;
	}

	.week {

		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.weekend {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #E1E1E1;
		padding-bottom: 30rpx;
	}

	.everyDay {
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: 100%;
		// background-color: pink;
		height: 102rpx;
		display: flex;
		align-items: center;
	}

	.days {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #E1E1E1;
		padding-bottom: 30rpx;
	}

	.priceBoxWeek {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;

	}

	.weekendBox {
		width: 630rpx;
		display: flex;
		align-items: center;
		// margin-right: 90rpx;
		// justify-content: space-between;
		border-bottom: 1rpx solid #E1E1E1;
		height: 102rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.everyHouseList {
		// padding-right: 30rpx;
		width: 690rpx;
		// height: 908rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		// padding-top: 30rpx;
	}

	.HouseListTitleInfo {
		margin-right: 30rpx;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.submit {
		margin-top: 20rpx;
		border-radius: 10rpx;
		width: 690rpx;
		height: 102rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.addSubmit {
		width: 100%;
		position: fixed;
		/* 固定定位 */
		bottom: 20rpx;
		/* 底部对齐 */
		left: 0;
		/* 可选：左对齐 */
		// width: 690rpx;
		/* 可选：宽度为 100% */
		height: 96rpx;
		margin-left: 30rpx;
		// padding-top: 20rpx;
		margin-top: 30rpx;
		background-color: #1372FF;
		border-radius: 48rpx;
	}

	.uploadPicPic {
		position: relative;
		top: -96rpx;
	}

	.u-upload__deletable[data-v-69e2a36e] {
		width: 0 !important;
	}
</style>