CommunityApp/pages/demo/myfamily.vue

<template>
	<view class="">
		<u-popup v-model="show" mode="center" width="80%" :border-radius="10" negative-top="200">
			<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.roomName">
								<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 :customStyle="cancelStyle">暂不绑定</u-button>
					<u-button :customStyle="confirmStyle">确认绑定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				show: true,
				roomList: [{
					checked: false,
					roomName: '常春藤小区-4栋-1单元-101',
					id: 1
				}, {
					checked: false,
					roomName: '常春藤小区-4栋-1单元-102',
					id: 2
				}],
				iconStyle: {
					'color': '#2f7ff5'
				},
				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
			},
			initData(){
				let params={
					phone:this.vuex_member.phone,
					name:this.vuex_member.name,
				}
				console.log(params);
				return
				this.$http.getHouseUserCondition(params).then(res=>{
					let list=res.data.data
					console.log(list);
				})
			},
		}
	};
</script>

<style lang="scss" scoped>

</style>