CommunityApp/comps/bindHome.vue

<template>
	<view class="">
		<u-popup v-model="show" mode="center" width="80%" :border-radius="10" @close="close">
			<view style="padding:30rpx 0rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="center text-center padding-bottom-30">
					<text>绑定房间</text>
				</view>
				<view class="flex-sub" style="margin: 20rpx 0;">
					<u-checkbox-group>
						<u-cell-group>
							<u-cell-item @click="check(item)" v-for="(item,index) in roomList" :key="index"
								:icon-style="item.checked?iconStyle:''" :icon="item.checked?'home-fill':'home'"
								:arrow="false" icon-size="30" :title="item.address">
								<u-checkbox slot="right-icon" v-model="item.checked" :name="item.id"></u-checkbox>
							</u-cell-item>
						</u-cell-group>
					</u-checkbox-group>
				</view>
				
				<view class="text-sm"
					style="display: flex;padding: 5rpx 32rpx 38rpx">
					<u-checkbox v-model="checked" size="26" name="checked" :label-disabled="true">
						<text style="font-size: 28rpx;">不再提示</text>
					</u-checkbox>
				</view>
			
				<view style="display: flex;justify-content: center">
					<u-button v-if="type==1" :customStyle="createStyle" @click="createRoom">创建新房间</u-button>
					<u-button v-else :customStyle="cancelStyle" @click="show=false" >暂不绑定</u-button>
					<u-button :customStyle="confirmStyle" @click="confirm">确认绑定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		props: ['type'],
		data() {
			return {
				checked: false,
				show: false,
				roomList: [],
				iconStyle: {
					'color': '#2f7ff5'
				},
				createStyle: {
					backgroundColor: '#ff9900',
					height: '70rpx',
					lineHeight: '70rpx',
					width: '210rpx',
					fontSize: '28rpx',
					color: '#FFFFFF',
					marginLeft: '15rpx',
					borderRadius: '0'
				},
				cancelStyle: {
					height: '70rpx',
					lineHeight: '70rpx',
					width: '210rpx',
					fontSize: '28rpx',
					border: '1rpx solid #afb0b3',
					marginRight: '15rpx',
					borderRadius: '0'
				},
				confirmStyle: {
					backgroundColor: '#2f7ff5',
					height: '70rpx',
					lineHeight: '70rpx',
					width: '210rpx',
					fontSize: '28rpx',
					color: '#FFFFFF',
					marginLeft: '15rpx',
					borderRadius: '0'
				}
			};
		},
		created() {
			this.initData()
		},
		methods: {
			close(){
				if (this.checked) {
					uni.setStorageSync('cancelBind', true)
				}
			},
			check(item) {
				item.checked = !item.checked
				this.$forceUpdate()
			},
			async initData() {
				let cancelBind = uni.getStorageSync('cancelBind') || false
				if (cancelBind || this.$isEmpty(this.vuex_member)) {
					return
				}
				let params = {
					idCard: this.vuex_member.idcard,
					name: this.vuex_member.name,
				}
				let list = (await this.$http.getHouseUserCondition(params)).data.data
				this.roomList = list.filter(item => this.isEmpty(item.memberId))
				this.roomList.forEach(item => {
					item.checked = false
					item.address = item.residentialName + "-" + item.buildingName + "-" + item.unitName + "-" +
						item.roomName
				})
				if (this.$isNotEmpty(this.roomList)) {
					this.show = true
				}
			},
			isEmpty(data) {
				if (this.$isEmpty(data) || data == -1) {
					return true
				}
				return false
			},
			confirm() {
				let checkList = this.roomList.filter(item => item.checked)
				let ids = checkList.map(item => item.id)
				if (this.$isEmpty(ids)) {
					this.$u.toast('至少选择一项')
					return
				}
				let params = {
					memberId: this.vuex_member.id,
					ids
				}
				this.$http.bindRoom(this.vuex_member.id, ids).then(res => {
					this.show = false
					if (res.data.success) {
						this.$u.toast('绑定成功')
						this.$emit('reload')
					} else {
						this.$u.toast('操作失败')
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>