CommunityApp/pages/bindRoom/bindRoom.vue

<!-- 地址列表 -->
<template>
	<view class="address-wrap">
		<view class="" v-if="$isNotEmpty(houseList)">
			<u-checkbox-group :wrap="true" v-for="(item,index) in houseList" :key="index">
				<view class="card_list" @click="checked(item)">
					<view class="card_list_left">
						<u-icon name="home"></u-icon>
						<text class="padding-left-10">{{item.residentialName}} | {{item.buildingName}} |
							{{item.unitName}} | {{item.roomName}}</text>
					</view>
					<view class="card_list_right">
						<u-checkbox style="float: right;" v-model="item.checked" :name="item.id"></u-checkbox>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<u-empty v-else src="/static/common/empty.png" icon-size="180" marginTop="300"></u-empty>

		<view class="" style="position: fixed;bottom: 80rpx;left: 0;right: 0;margin: auto;width: 270rpx;">
			<u-button size="medium" :customStyle="confirmStyle" type="primary" @click="confirm">确定绑定</u-button>
			<u-button size="medium" :customStyle="cancelStyle" @click="auth">创建新房间</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				houseList: [],
				cancelStyle: {
					marginTop: '20rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					border: '1rpx solid #d0d0d0',
					color:'#171717',
					width:'270rpx'
				},
				confirmStyle: {
					width:'270rpx'
				}
			};
		},
		computed: {},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				this.houseList = uni.getStorageSync("houseList") || []
				this.houseList.forEach(item => {
					item.checked = false
				})
			},
			checked(item) {
				item.checked = !item.checked
				this.$forceUpdate()
			},
			confirm() {
				let memberId = getApp().globalData.member.id
				let checkedList = this.houseList.filter(item => item.checked)
				if (this.$isEmpty(checkedList)) {
					this.$u.toast('至少选择一个房间')
					return
				}
				let ids = checkedList.map(item => item.id)
				this.$http.bindRoom(memberId, ids).then(res => {
					if (res.data.success) {
						uni.removeStorageSync("houseList")
						this.$dialog.showModal('绑定成功', false).then(() => {
							uni.reLaunch({
								url: "../index/index"
							})
						})
					}
				})
			},
			auth() {
				uni.redirectTo({
					url: "../auth/auth"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.card_list {
		background-color: #FFFFFF;
		padding: 30rpx 0rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;

		&_left {}
	}

	// 底部按钮
	.foot_box-wrap {
		height: 140rpx;
		width: 100%;
	}

	.foot_box {
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// border-top: 1rpx solid rgba(#ccc, 0.2);
		// background-color: #fff;

		.sync-wxaddress {
			flex: 1;
			line-height: 80rpx;
			background: #ff9900;
		}

		.add-btn {
			line-height: 80rpx;
			flex: 1;
			background: $base;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>