hotelHomestayWx/pages/my/roomType.vue

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

		<!-- 房型数量 -->
		<view class="typeNum">
			<view class="left" style="font-size: 24rpx; color: #777;">
				共{{roomType.length}}个房型
			</view>
			<view class="right" @click="showList">
				<view class="image">
					<image src="https://fsy.shengsi.gov.cn/file/20240719/182376dafb3044bdafc8e3ba1ac24edc.png" mode="">
					</image>
				</view>
				<view class="text">
					批量定价
				</view>
			</view>
		</view>
		<!-- 房型选择 -->
		<view class="type" v-for="item,index in roomType" :key="item.houseBaseId">
			<view class="left" v-if="Selected==true" @tap="selectPerson(item,index)">
				<view class="image">
					<image
						:src="selectedTags.includes(item)?'https://fsy.shengsi.gov.cn/file/20240719/2e65479a06344b2e96afa565abebce9d.png':'https://fsy.shengsi.gov.cn/file/20240719/c5b1633b713a44d3b75395a2946afc76.png'">
					</image>
				</view>
			</view>
			<view class="right" @click="goEditTypeInfo(item.houseBaseId)">
				<view class="top">
					<view style="font-size: 30rpx; color: #333; ">{{item.name}}（
						{{item.isPutaway==1?'已上架':'已下架'}}）
					</view>
					<!-- <u-icon name="arrow-right"></u-icon>	 -->
					<!-- <view class="xgfj">
						修改房价
					</view> -->
				</view>
				<view class="under">
					<text style="font-size: 24rpx; color: #777;">{{item.shortName}}</text>
					<!-- <text style="font-size: 24rpx; color: #777;">{{item.roomCount}}间</text> -->
				</view>
			</view>
		</view>


		<!-- 批量按钮 -->
		<view class="btn-btn" v-if="Selected==true">
			<view class="bottom-btn">
				<view class="left">
					<view class="image">
						<image
							:src="selectedTags.length>0?'https://fsy.shengsi.gov.cn/file/20240719/2e65479a06344b2e96afa565abebce9d.png':'https://fsy.shengsi.gov.cn/file/20240719/c5b1633b713a44d3b75395a2946afc76.png'">
						</image>
					</view>
					<view class="text">
						已选：{{selectedTags.length}}
					</view>
				</view>
				<view class="right">
					<view class="right-btn" @click="piliangshangjia()">
						批量上架
					</view>
					<view class="right-btn" @click="piliangxiajia()">
						批量下架
					</view>
					<view class="right-btn" @click="Pricing()">
						批量定价
					</view>
				</view>
			</view>
		</view>
		<!-- 新增按钮 -->
		<view class="btn-btn" @click="addType(id)" v-else>
			<view class="btn">
				新增
			</view>
		</view>

		<u-popup :show="showPricing" @close="close" @open="open">
			<view class="pop-pop">
				<view class="hander-one">
					<view class="">
					</view>
					<view class="text">
						批量定价
					</view>
					<view class="del" @click="close">
						<u-icon name="close" color=""></u-icon>
					</view>
				</view>
				<view class="hander-two">
					<view class="hander-two-text">
						每天价格
					</view>

					<u-radio-group @change="selectType" size="32" v-model="typeIndex" iconSize="24" placement="row"
						activeColor='#1372FF'>
						<u-radio labelSize='30' label="固定设置" :name='1'></u-radio>
						<u-radio labelSize='30' label="按天设置" :name='2' v-if="tabIndex==0"></u-radio>
					</u-radio-group>

				</view>
				<view class="hander-three">
					<view class="hander-three-text">
						开始日期
					</view>
					<view class="hander-three-input" @click="showTimeOne">
						<u--input placeholder="请选择" border="none" disabledColor='#fff' fontSize='26'
							v-model="valueTimeOne" disabled='false'></u--input>
					</view>
					<view class="hander-three-icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="hander-three" style="margin-top:30rpx ;">
					<view class="hander-three-text">
						结束日期
					</view>
					<view class="hander-three-input" @click="showTimeTwo">
						<u--input placeholder="请选择" border="none" disabledColor='#fff' fontSize='26'
							v-model="valueTimeTwo" disabled='false'></u--input>
					</view>
					<view class="hander-three-icon">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="hander-four" v-if="typeIndex==1">
					<view class="hander-three-text" style="">
						<view class="">
							价格
						</view>
						<view class="">
							￥
						</view>
					</view>
					<view class="hander-three-input">
						<u--input placeholder="请输入价格" fontSize='26' border="none" v-model="fromData.price"
							@change="change"></u--input>
					</view>
					<view class="hander-three-icon" @click="delPrice">
						<u-icon name="close-circle-fill"></u-icon>
					</view>
				</view>
				<view class="" v-else>
					<view class="hander-four">
						<view class="hander-three-text" style="">
							<view class="">
								周五-周六
							</view>
							<view class="">
								￥
							</view>
						</view>
						<view class="hander-three-input">
							<u--input placeholder="请输入价格" fontSize='26' border="none"
								v-model="fromData.friToSatdayPrice" @change="change"></u--input>
						</view>
						<view class="hander-three-icon">
							<u-icon name="close-circle-fill"></u-icon>
						</view>
					</view>
					<view class="hander-four">
						<view class="hander-three-text" style="">
							<view class="">
								周日-周四
							</view>
							<view class="">
								￥
							</view>
						</view>
						<view class="hander-three-input">
							<u--input placeholder="请输入价格" fontSize='26' border="none"
								v-model="fromData.sunToThursdayPrice" @change="change"></u--input>
						</view>
						<view class="hander-three-icon">
							<u-icon name="close-circle-fill"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn-btn" @click='addTime()'>
					<view class="btn">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar> -->
		<!-- 选择入驻时间 -->
		<u-calendar class="u-time" confirmDisabledText="确定" title="开始时间" :show="showOne" :mode="mode"
			@confirm="confirmOne" @close="closeDate" :closeOnClickOverlay="true"></u-calendar>

		<u-calendar class="u-time" confirmDisabledText="确定" title="结束时间" :show="showTwo" :mode="mode"
			@confirm="confirmTwo" @close="closeDate" :closeOnClickOverlay="true"></u-calendar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				homestayId: uni.getStorageSync('homestayId') || 0,
				roomType: [],
				isSelect: false,
				Selected: false,
				showPricing: false,
				showOne: false,
				showTwo: false,
				selectedTags: [],
				ids: [],
				from: {},
				tabIndex: 0,
				typeIndex: 1,
				mode: '',
				valueTimeOne: '',
				valueTimeTwo: '',
				labelName: 0,
				fromData: {
					homestayId: '',
					houseBaseIdList: [],
					friToSatdayPrice: '',
					sunToThursdayPrice: '',
					price: '',
					rentDateEnd: '',
					rentDateStart: '',

				}
			}
		},
		onLoad() {
			this.getHomestayId()
		},
		methods: {
			delPrice() {
				this.fromData.price = ''
			},
			showTimeOne() {
				this.showOne = true
				this.mode = 'single'
			},
			showTimeTwo() {
				this.showTwo = true
				this.mode = 'single'
			},
			addTime() {
				this.fromData.homestayId = uni.getStorageSync('homestayId')
				this.$api.post('/merchant/hotel/room/state/batchDefineRoomPrice', this.fromData).then(res => {
					if (res.data.code == 0) {
						this.$showToast('定价成功')
						setTimeout(() => {
							this.showPricing = false
							this.fromData ={
								homestayId: '',
								houseBaseIdList: [],
								friToSatdayPrice: '',
								sunToThursdayPrice: '',
								price: '',
								rentDateEnd: '',
								rentDateStart: '',

							}
							this.getHomestayId()
							this.valueTimeOne = ''
							this.valueTimeTwo = ''
							this.labelName = '0'
							this.Selected = false
							this.selectedTags = []
						}, 1000)

					} else this.$showToast(res.data.msg)
				})
			},
			confirmOne(e) {
				this.showOne = false
				if (this.typeIndex == 1) {
					this.valueTimeOne = e[0]
				} else if (this.typeIndex == 2) {
					this.valueTimeOne = e[0]
				}
				this.fromData.rentDateStart = e[0]
				this.showTwo = true
				this.mode = 'single'
			},
			confirmTwo(e) {
				this.showTwo = false
				if (this.typeIndex == 1) {
					this.valueTimeTwo = e[0]
				} else if (this.typeIndex == 2) {
					this.valueTimeTwo = e[0]
				}
				this.fromData.rentDateEnd = e[0]
			},
			closeDate() {
				this.showOne = false
				this.showTwo = false

			},
			selectType(type) {
				this.typeIndex = type;
			},

			// 下架
			piliangxiajia() {
				if (this.fromData.houseBaseIdList.length != 0) {
					let obj = {
						isPutaway: 0,
						idList: this.fromData.houseBaseIdList
					}
					this.$api.post('/merchant/hotel/room/state/updPutawayState', obj).then(res => {
						if (res.data.code == 0) {
							this.$showToast('下架成功')
							setTimeout(() => {
								this.showPricing = false
								this.getHomestayId()
								this.Selected = false
								this.selectedTags = []
								this.fromData.houseBaseIdList = []
							}, 1000)
						} else this.$showToast(res.data.msg)

					})
				} else this.$showToast('请选择房型')
			},

			// 上架
			piliangshangjia() {
				if (this.fromData.houseBaseIdList.length != 0) {
					let obj = {
						isPutaway: 1,
						idList: this.fromData.houseBaseIdList
					}
					this.$api.post('/merchant/hotel/room/state/updPutawayState', obj).then(res => {
						if (res.data.code == 0) {
							this.$showToast('上架成功')
							setTimeout(() => {
								this.showPricing = false
								this.getHomestayId()
								this.Selected = false
								this.selectedTags = []
								this.fromData.houseBaseIdList = []
							}, 1000)
						} else this.$showToast(res.data.msg)
					})
				} else this.$showToast('请选择房型')
			},

			selectPerson(e, i) {
			  if (!e || typeof e !== 'object') return;
			  
			  const index = this.selectedTags.findIndex(t => t === e);
			  if (index > -1) {
			    this.selectedTags = this.selectedTags.filter(t => t !== e);
			    this.ids.splice(index, 1);
			    if (e.houseBaseId) {
			      const idIndex = this.fromData.houseBaseIdList.indexOf(e.houseBaseId);
			      if (idIndex > -1) {
			        this.fromData.houseBaseIdList.splice(idIndex, 1);
			      }
			    }
			  } else {
			    this.selectedTags = [...this.selectedTags, e];
			    if (e.houseBaseId) {
			      this.fromData.houseBaseIdList = [...this.fromData.houseBaseIdList, e.houseBaseId];
			    }
			  }
			},

			close() {
				this.showPricing = false
			},
			open() {},
			Pricing() {
				if (this.fromData.houseBaseIdList.length != 0) {
					this.showPricing = true
				} else this.$showToast('请选择房型')
			},
			// 批量显示
			showList() {
				this.Selected = !this.Selected
				// this.selectedTags = []
			},
			// 获取房型列表信息
			getHomestayId() {
				this.$api.get(`/merchant/hotel/mine/getHouseBaseList/${this.homestayId}`, {
					homestayId: this.homestayId
				}).then((res) => {
					this.roomType = res.data.data

					// let roomSymbleName=this.roomType.name
				})
			},
			// 新增房型
			addType(id) {
				uni.navigateTo({
					url: `/pages/my/houseList?id=${this.homestayId}`
				})
			},
			// 修改房型信息
			goEditTypeInfo(houseBaseId) {
				uni.navigateTo({
					url: `/pages/my/houseList?houseBaseId=${houseBaseId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.uicon-close {
		font-size: 35rpx !important;
		z-index: 99999 !important;
	}

	.u-popup__content__close--top-right {
		width: 40rpx !important;
		height: 40rpx !important;
		z-index: 99999 !important;
	}



	.u-popup__content {
		z-index: 99999 !important;
	}




	.u-radio__text {
		margin-right: 35rpx !important;
	}

	.u-reset-button,
	.u-button--active {
		width: 100% !important;
	}

	// .data-v-b73440ae {
	// 	height: 500rpx !important;
	// }

	// .u-slide-up-enter-active {
	// 	height: 55vh !important;
	// }

	.u-time {
		height: 75vh !important;
	}

	.u-calendar-month__days__day {
		height: 130rpx !important;
	}

	.u-square {
		background-color: #fff !important;
	}

	.u-input__content {
		margin-top: 22rpx !important;
	}

	.uicon-arrow-right,
	.uicon-close-circle-fill {
		margin-top: 32rpx !important;
		margin-right: 20rpx !important;
	}

	.pop-pop {
		height: 800rpx;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: 200rpx;


		.hander-one {
			padding: 46rpx 20rpx 0;
			display: flex;
			justify-content: space-between;

			.text {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;

			}

			.del {}
		}

		.hander-two {
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			.hander-two-text {
				font-size: 30rpx;
				color: #333333;
				font-weight: Regular;
				margin-right: 30rpx;
			}

			.hander-two-image {
				display: flex;
				align-items: center;

				.image {
					margin: 0 10rpx;
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.hander-three {
			padding: 0 20rpx;
			margin: 0 20rpx;
			display: flex;
			border: 1rpx solid #CCCCCC;
			border-radius: 16rpx;
			justify-content: space-between;
			height: 102rpx;
			line-height: 102rpx;

			.hander-three-text {
				width: 200rpx;
				text-align: left;
				display: flex;
				justify-content: space-between;
				margin: 0 20rpx;
			}

			.hander-three-input {
				width: 55%;
			}

			.hander-three-icon {
				height: 102rpx;
				line-height: 102rpx;
			}
		}


		.hander-four {
			padding: 0 20rpx;
			margin: 30rpx 20rpx 0;
			// margin-top: 30rpx;
			display: flex;
			border-radius: 16rpx;
			justify-content: space-between;
			border: 1rpx solid #CCCCCC;
			height: 102rpx;
			line-height: 102rpx;

			.hander-three-text {
				width: 200rpx;
				text-align: center;
				display: flex;
				justify-content: space-between;
				margin: 0 20rpx;
			}

			.hander-three-input {
				width: 55%;
			}

			.hander-three-icon {
				height: 102rpx;
				line-height: 102rpx;
			}
		}



	}

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

	.typeNum {
		// width: 100%;
		height: 73rpx;
		display: flex;
		justify-content: space-between;
		padding: 23rpx 24rpx;
		align-items: center;

		// .left {}

		.right {
			display: flex;
			align-items: center;

			.image {
				margin: 0 10rpx;
				width: 30rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				font-size: 28rpx;
				font-weight: Regular;
				color: #333333;
			}
		}
	}

	.type {
		margin: 0 auto;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		width: 86%;
		// height: 114rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;

		.left {
			height: 114rpx;
			line-height: 114rpx;
			margin-right: 20rpx;

			.image {
				margin: 0 10rpx;
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right {
			width: 100%;
		}

	}

	.top {
		display: flex;
		justify-content: space-between;


	}

	.under {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;


	}


	// .xgfj {
	// 	width: 115rpx;
	// 	background: aqua;
	// 	height: 50rpx;
	// 	border-radius: 13rpx;
	// 	line-height: 50rpx;
	// 	padding: 0rpx 4rpx;
	// 	margin-top: 28rpx;
	// }

	.btn-btn {
		width: 100%;
		height: 136rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx 0 0;
		// margin: 0 auto;
		z-index: 9;

		// margin-top: 30rpx;
		// margin-left: 30rpx;
		.bottom-btn {
			display: flex;
			justify-content: space-between;
			margin: 0 24rpx;

			.left {
				width: 25%;
				display: flex;
				align-items: center;


				.image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

			.right {
				width: 75%;
				display: flex;
				justify-content: space-evenly;

				.right-btn {
					margin: 0 20rpx;
					// width: 148rpx;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #1372FF;
					border-radius: 16rpx;
					font-size: 26rpx;
					color: #fff;
					font-weight: Regular;
					text-align: center;
				}
			}
		}
	}

	.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;
	}
</style>