CommunityApp/pages/myFamily/comps/apply-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 v-if="item.auditStatus==0" class="text-warning">待审核</text>
					<text v-if="item.auditStatus==1" class="text-green">已通过</text>
					<text v-if="item.auditStatus==2" class="text-red">未通过</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>
							<text>姓名：{{item.name}}</text>
							<text v-if="item.type==0" class="cu-tag radius line-blue sm margin-left-20">业主</text>
							<text v-if="item.type==1" class="cu-tag radius line-blue sm margin-left-20">家属</text>
							<text v-if="item.type==2" class="cu-tag radius line-blue sm margin-left-20">租客</text>
							<text v-if="item.type==3" class="cu-tag radius line-blue sm margin-left-20">访客</text>
						</view>
						<view>手机：{{item.phone}}</view>
						<view>申请时间：{{item.createTime}}</view>
						<view v-if="item.auditStatus==2">
							<text>审核意见：</text>
							<text class="text-red">{{item.checkOpinion}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		data() {
			return {

			};
		},
		computed: {
			editShow() {
				return item => {
					//旧版本的逻辑，有点看不懂
					if (item.auditStatus != 2) {
						return false
					}
					this.vuex_own_room_list.forEach(val => {
						if (val.id == item.roomId) {
							return true
						} else {
							return false
						}
					})
				};
			},
		},
		onLoad() {

		},
		methods: {
			edit(item) {
				let params = {
					apply_user_id: item.id,
					name: item.name,
					tel: item.phone,
					room_name: item.roomName,
					type: item.type,
					user_id: item['userId'],
					id_card: item.idCard || '',
					sex: item.sex,
					nationality: item.nationality,
					faceUrl: item.faceUrl,
					passport_img_uri: item.passportImgUri || '',
					entry_img_uri: item.entryImgUri
				}
				if (this.vuex_relationshipType == 0) {
					//业主身份操作
					params['operUserType'] = 0
				} else {
					//不是业主身份操作
					params['operUserType'] = item.type
				}
				uni.navigateTo({
					url: "/pages/myFamily/editApplyFamily/editApplyFamily" + this.$u.queryParams(params)
				})
			}
		}
	};
</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>