CommunityApp/comps/bindHome.vue

<template>
	<view class="">
		<u-popup v-model="show" mode="center" width="80%" :border-radius="10" >
			<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 style="display: flex;justify-content: center;padding-top: 50rpx;">
					<u-button v-if="type==1" :customStyle="createStyle" @click="createRoom">创建新房间</u-button>
					<u-button v-else :customStyle="cancelStyle" @click="cancel">暂不绑定</u-button>
					<u-button :customStyle="confirmStyle" @click="confirm">确认绑定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		props:['type'],
		data() {
			return {
				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: {
			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 = {
					phone: this.vuex_member.phone,
					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
			},
			cancel(){
				uni.setStorageSync('cancelBind',true)
				this.show=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('绑定成功')
					}else{
						this.$u.toast('操作失败')
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>

</style>