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://i.ringzle.com/file/20240313/f3d301b3bc4544ffaf5a0d96a761dd00.png" mode="">
					</image>
				</view>
				<view class="text">
					批量操作
				</view>
			</view>
		</view>
		<!-- 房型选择 -->
		<view class="type" v-for="item in roomType" :key="item.houseBaseId">
			<view class="left" v-if="Selected==true">
				<view class="image">
					<image @tap="selectPerson(item,index)"
						:src="selectedTags.includes(item)?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
					</image>
				</view>
			</view>
			<view class="right" @click="goEditTypeInfo(item.houseBaseId)">
				<view class="top">
					<text style="font-size: 30rpx; color: #333;">{{item.name}}</text>
					<u-icon name="arrow-right"></u-icon>
				</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="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
					</image> -->
						<image
							:src="selectedTags.length>0?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
						</image>
					</view>
					<view class="text">
						已选：{{selectedTags.length}}
					</view>
				</view>
				<view class="right">
					<!-- 	<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" iconSize="24" v-model="fromData.comboType"
						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">
						<u--input placeholder="请选择" border="none" fontSize='26' v-model="value"
							@change="change"></u--input>
					</view>
					<view class="hander-three-icon">
						<u-icon name="arrow-right"></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="value"
							@change="change"></u--input>
					</view>
					<view class="hander-three-icon">
						<u-icon name="close-circle-fill"></u-icon>
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				homestayId: uni.getStorageSync('homestayId') || 0,
				roomType: [],
				isSelect: false,
				Selected: false,
				showPricing: false,
				selectedTags: [],
				ids: [],
				from: {},
				tabIndex: 0,

			}
		},
		onLoad() {
			// console.log(this.homestayId)
			this.getHomestayId()
		},
		methods: {
			selectType(type) {
				console.log(type);
				this.typeIndex = type;
				// this.fromData.comboType = type
			},
			piliangxiajia() {
				this.$api.post('/merchant/hotel/repast/batchPutAway', this.from).then(res => {
					this.selectedTags = [];
					this.Selected = false;
					this.getHomestayId(); //获取商品列表
				})
			},
			selectPerson(e, i) {
				console.log(e, i);
				if (this.selectedTags.includes(e)) {
					this.selectedTags = this.selectedTags.filter(t => t !== e);
					this.ids.splice(i, 1)
					console.log('1111');
				} else {
					console.log('2222');
					this.selectedTags.push(e);
					this.ids.push(e.houseBaseId)
					this.from = {
						idList: this.ids,
						status: e.status == 1 ? 0 : 1
					}
				}
			},

			close() {
				this.showPricing = false
			},
			open() {},
			Pricing() {
				console.log('11111111');
				this.showPricing = true
			},
			// 批量显示
			showList() {
				this.Selected = !this.Selected
			},
			// 获取房型列表信息
			getHomestayId() {
				this.$api.get(`/merchant/hotel/mine/getHouseBaseList/${this.homestayId}`, {
					homestayId: this.homestayId
				}).then((res) => {
					// console.log(res)
					this.roomType = res.data.data

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

<style lang="scss">
	.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: 65vh;
		padding: 46rpx 20rpx 0;

		.hander-one {
			display: flex;
			justify-content: space-between;

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

			}

			.del {}
		}

		.hander-two {
			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 {
			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 {
			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: 30rpx;
				height: 30rpx;

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

	.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: 38rpx;
					height: 38rpx;
					margin: 0 10rpx;

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

			}

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

				.right-btn {
					// 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>