hotelHomestayWx/pages/my/houseList.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
			<c-nav-bar title="房型信息" :showIcon="false" :titleStyle="titleStyle"></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;"/>
				</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;"/>
				</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; ">封面图片(0/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>
						
							<img  src="https://img.51miz.com/Element/00/77/24/47/cd39208d_E772447_a1d65d72.png" style="width: 190rpx; height: 120rpx;" />			
					</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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周一</text>
							</view>
							<view style="display: flex;">
								<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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周二</text>
							</view>
							<view style="display: flex;">
								<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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周三</text>
							</view>
							<view style="display: flex;">
								<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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周四</text>
							</view>
							<view style="display: flex;">
								<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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周五</text>
							</view>
							<view style="display: flex;">
								<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">
						<view class="weekendBox">
							<view >
								<text style="font-size: 30rpx; margin-right: 90rpx; " >周六</text>
							</view>
							<view style="display: flex;">
								<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">
						<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;">
								<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;">共8个房间</text>
			 	</view>
				 <!-- 房间号 -->
				 <view class="priceBoxWeek" v-for="(room,index) in form.roomFloor" :key="index">
				 	<view class="weekendBox" style="display: flex; justify-content: space-between;">						
						<view style="display: flex;">
							<text style="font-size: 30rpx;"> 楼层：</text><input style="width: 70rpx; margin-bottom: 5rpx; font-size: 28rpx;" v-model="room.floor" type="text" />
						</view>
						<view style="display: flex;">
								<text style="font-size: 30rpx;" > 房间号：</text><input style="width: 70rpx; margin-bottom: 5rpx; font-size: 28rpx;"  v-model="room.roomNumber" type="text" />
						</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="addSubmit" @click="addNewRoom">
				 
			 	<text style="line-height: 96rpx; margin-left:310rpx; font-size: 32rpx; color: #fff;">确定</text>
			 </view>
		</view>
			
			</view>
</template>

<script>
	export default{
		data(){
			return{
				
				weekedChecked:false,
				action: 'https://i.ringzle.com/island-cloud-server',//图片服务器地址
							fileList: [
								{
									url: '',
								}
							],
							id:'',//houseBaseId				
					checked:true,
				form:{
					isPutAway:'',
					homestayId:'',
					mondayPrice:'',
					tuesdayPrice:'',
					wednesdayPrice:'',
					thursdayPrice:'',
					fridayPrice:'',
					saturdayPrice:'',
					sundayPrice:'',
					name:'',
					shortName:'',
					roomFloor:[
					{	floor:'',
						roomNumber:''}
					]
					
				},
					
				
			}
			
		},
		onLoad({id,houseBaseId}){
			this.form.homestayId=id
			// console.log(houseBaseId)
			this.id=houseBaseId
			// console.log(this.id)
			this.getTypeInfo()
			
		},
		computed:{
			
		},
		methods:{
			change(status) {
							console.log(status);
						},
			// 添加&编辑房屋
			addNewRoom(){
					if(this.checked===true){
						this.form.isPutAway=1
					}else{
						this.form.isPutAway=0
					}
					// console.log(this.form)
				if(!this.id){
					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.)
					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				
					}
				})
					
				}else{
					return
				}
			}
		}
		
	}
</script>

<style lang="scss"> 
	.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: 650rpx;
		height: 290rpx;
		border-radius: 10rpx;
		padding-top: 30rpx;
		padding-left: 15rpx;
		padding-right: 30rpx;
	}
	.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;
		// background-color: pink;
	}
	// .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;
		height: 102rpx;
	   padding-left: 30rpx;
	  padding-right: 30rpx;
	}
	.weekendBox{
	width: 630rpx;
	display: flex;
	margin-top: 20rpx;
	// margin-right: 90rpx;
	// justify-content: space-between;
	border-bottom: 1rpx solid #E1E1E1;
	padding-bottom: 32rpx;
	}
	.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{
		  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>