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="10 * 1024 * 1024"
						@afterRead="afterRead" @oversize="overSize" width="120" height="120" @delete="deletePic">
					</u-upload>

				</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: 150rpx; 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: 150rpx; 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>
		<!-- 新增按钮 -->
		<view class="btn-btn" @click="addNewRoom()">
			<view class="btn">
				确定
			</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://fsy.shengsi.gov.cn/island-cloud-server/oss/file/aliyunUpload',
					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>