CommunityApp/pages/record/card.vue

<template>
	<view class="">
		<u-popup v-model="detailShow" mode="center" width="650" :closeable="true" border-radius="10" negative-top="300">
			<view style="padding: 60rpx 5rpx 10rpx;">
				<u-cell-group>
					<u-cell-item :icon-style="iconStyle" :border-top="false" :arrow="false" icon="account-fill"
						title="访客姓名:" :value="detailData.guestName"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :arrow="false" icon="bookmark-fill" title="身份证号:"
						:value="detailData.guestIdcard"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :arrow="false" icon="phone-fill" title="手机号:"
						:value="detailData.guestTel"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :arrow="false" icon="map-fill" title="访问区域:"
						:value="guestPosition(detailData)"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :arrow="false" icon="clock-fill" title="访问时间:"
						:value="detailData.interviewTime"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :arrow="false" icon="plus-people-fill" title="接待人:"
						:value="detailData.userName"></u-cell-item>
					<u-cell-item :icon-style="iconStyle" :border-bottom="false" :arrow="false" icon="error-circle-fill"
						title="访问目的:" :value="detailData.guestReason"></u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>

		<view @click="showDetail(item)" class="data" v-for="(item, index) in list" :key="index">
			<view class="top">
				<view class="left">
					<view class="title ">
						<text class="text-bold">访客姓名：</text>
						<text>{{item.guestName}}</text>
					</view>
				</view>
				<view class="right">
					<text class="" v-if="item.auditStatus==1">已通过</text>
					<text class="text-orange" v-if="item.auditStatus==0">待审核</text>
					<text class="text-red" v-if="item.auditStatus==2">未通过</text>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<view style="padding: 20rpx 30rpx 0;">
						<view class="content">
							<text class="padding-right-10">访问区域：</text>
							<text>{{guestPosition(item)}}</text>
						</view>
						<view class="content">
							<text class="padding-right-10">联系方式：</text>
							<text>{{item.guestTel}}</text>
							<image @click.stop="call(item.guestTel)" class="call" src="/static/call.png"></image>
						</view>
						<view class="content">
							<text class="padding-right-10">来访目的：</text>
							<text style="line-height: 50rpx;">{{item.guestReason}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<!-- 待审核，显示取消工单 -->
				<view @click.stop="pass(item)" v-if="item.auditStatus==0"
					class="cu-btn  sm round bg-blue margin-right-20">
					审核通过
				</view>
				<view @click.stop="fail(item)" v-if="item.auditStatus==0" class="cu-btn  sm round bg-blue">
					审核不通过
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'card',
		props: {
			list: {
				type: Array,
				default: () => {
					[]
				}
			}
		},
		data() {
			return {
				detailShow:false,
				detailData:{},
				iconStyle:{
					color:"#1887ff"
				},
			};
		},
		onLoad() {

		},
		computed: {
			guestPosition() {
				return data => {
					return `${data.residentialName}-${data.buildingName}-${data.unitName}-${data.roomName}`
				}
			}
		},
		methods: {
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			showDetail(item) {
				this.detailShow=true
				this.detailData=item
			},
			pass(item) {
				this.$emit('pass', item)
			},
			fail(item) {
				this.$emit('fail', item)
			}
		}
	};
</script>

<style lang="scss">
	.bg-blue {
		background-color: #59a5f0;
		color: #FFFFFF;
	}


	.data {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

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

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

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

			.right {
				margin-right: 10rpx;
			}
		}

		.item {
			margin: 5rpx 0 20rpx 0;

			.content {
				// border-bottom: 1rpx dashed #DDDDDD;
				padding: 20rpx 0;

				.call {
					width: 36rpx;
					height: 36rpx;
					margin-left: 40rpx;
					margin-top: 10rpx;
				}
			}
		}

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