CommunityApp/pages/myFamily/comps/user-card.vue

<template>
	<view class="">
		<view class="data " v-for="(item, index) in list" :key="index">
			<view class="top">
				<view class="left">
					<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
					<view class="title">
						{{item.residentialName}}-{{item.buildingName}}-{{item.unitName}}-{{item.roomName}}</view>
				</view>
				<view class="right">
					<text class="text-red" v-if="isEmpty(item.memberId)">未绑定</text>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view data-aid="undefined">
						<image v-if="!$isEmpty(item.faceUrl)" mode="aspectFill" :src="item.faceUrl"></image>
						<image v-else="" mode="aspectFill"
							src="https://szsq.nxzhsq.cn/community/miniofile/image/head.png"></image>
					</view>
					<view class="content" data-aid="undefined">
						<view>姓名：{{item.name}}</view>
						<view>手机：{{item.phone}}</view>
						<view>创建时间：{{item.createTime || '未知'}}</view>
						<view v-if="item.type==0">身份：业主</view>
						<view v-if="item.type==1">身份：家属</view>
						<view v-if="item.type==2">身份：租户</view>
						<view v-if="item.type==3">身份：访客</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<!-- 业主可以编辑所有人，其他只可以编辑自己 -->
				<view v-if="showEdit(item)" @click.stop="edit(item)" class="cu-btn line-btn round sm margin-right-sm">
					编辑
				</view>
				<view v-if="isEmpty(item.memberId)&&vuex_member.name==item.name&&vuex_member.phone==item.phone"
					@click.stop="bindRoom(item)" class="cu-btn line-btn round sm margin-right-sm">
					绑定房间
				</view>
				<!-- 小程序审核时，不要出现人脸功能 -->
				<!-- 业主可以激活所有人的人脸，其他只可以操作自己 -->
				<!-- <navigator v-if="showActiveFace(item)" class="cu-btn line-btn round sm margin-right-sm"  @click.stop="activeFace(item)">
					人脸激活
				</navigator> -->
				<!-- 自己不能删除自己，业主可以删除成员，但是也不能删除自己 -->
				<view v-if="vuex_relationshipType==0&&item.type!=0" class="cu-btn bg-btn sm round"
					@click.stop="deleteUserById(item.id)">
					删除
				</view>
			</view>
		</view>

		<!-- 有自己房屋的人才可以显示添加家人的功能按钮 -->
		<view v-if="vuex_relationshipType==0" @click="onTap('add/add')" class=" footer-fixed">
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				添加家人
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		inject:['reload'],
		data() {
			return {
				//小程序的审核状态
				appletType: 0
			};
		},
		created() {
			this.appletType = uni.getStorageSync("appletType")
		},
		computed: {
			showEdit() {
				return item => {
					if (this.isEmpty(item.memberId)) {
						return false
					}
					if (this.vuex_relationshipType == 0) {
						return true
					}
					if (this.vuex_member.name == item.name || this.vuex_member.phone == item.phone) {
						return true
					} else {
						return false
					}
				};
			},
			showActiveFace() {
				//小程序的审核状态为1才显示人脸模块，
				return item => {
					if (this.vuex_appletType == 1) {
						if (this.vuex_relationshipType == 0) {
							return true
						}
						if (this.vuex_member.name == item.name || this.vuex_member.tel == item.tel) {
							return true
						} else {
							return false
						}
					}
					return false
				};
			}
		},
		methods: {
			bindRoom(item){
				this.$dialog.showModal('确定绑定该房间？').then(()=>{
					this.$http.bindRoom(this.vuex_member.id,[item.id]).then(res=>{
						if (res.data.success) {
							this.$u.toast('绑定成功')
							this.reload()
						}else{
							this.$u.toast('操作失败')
						}
					})
				})
			},
			isEmpty(data) {
				if (this.$isEmpty(data) || data == -1) {
					return true
				}
				return false
			},
			edit(item) {
				let params = {
					user_id: item.id,
					name: item.name,
					tel: item.phone,
					room_name: item.roomName,
					type: item.type,
					id_card: item.idCard || '',
					sex: item.sex,
					nationality: item.nationality || '',
					faceUrl: item.faceUrl || '',
					passport_img_uri: item.passportImgUri || '',
					entry_img_uri: item.entryImgUri || '',
					operUserType: item.type
				}
				if (this.vuex_relationshipType == 0) {
					//业主身份操作
					params['operUserType'] = 0
				} else {
					//不是业主身份操作
					params['operUserType'] = item.type
				}
				uni.navigateTo({
					url: "/pages/myFamily/editFamily/editFamily" + this.$u.queryParams(params)
				})
			},
			activeFace(item) {
				let params = {
					room_id: item.roomId,
					user_id: item.id,
					name: item.name,
					tel: item.tel,
					room_name: item.roomName,
					type: item.type,
					id_card: item.idCard || '',
					sex: item.sex,
					nationality: item.nationality || '',
					faceUrl: item.faceUrl || '',
					passport_img_uri: item.passportImgUri || '',
					entry_img_uri: item.entryImgUri || ''
				}
				uni.navigateTo({
					url: "/pages/myFamily/activateFace/activateFace" + this.$u.queryParams(params)
				})
			},
			deleteUserById(id) {
				this.$emit('deleteUserById', id)
			},
			onTap(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.data {
		background-color: #FFFFFF;
		width: 720rpx;
		margin: 10rpx auto;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #d1d1d1;

		.top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx dashed #DEDEDE;
			padding-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;

				.title {
					margin: 0 10rpx;
					font-size: 32rpx;
				}
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 40rpx 0 20rpx 0;

			.left {
				display: flex;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.content {
					padding-left: 30rpx;

					view {
						padding-bottom: 16rpx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			justify-content: flex-end;
			align-items: center;
		}
	}
</style>