hainan_2024/h5/pages/user/pick/pick.vue

<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$image,
		$response
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	const person_list = ref([]);

	let popup = ref(null);
	let unitList = ref([]); // 单位列表
	const getPersonList = async () => {
		uni.showLoading()
		const response = await $api("GetPersonList");
		uni.hideLoading()
		$response(response, () => {
			person_list.value = response.data.list;
		});
	};

	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			getPersonList();
		}
	};
	const choosePersonClick = async (info) => {
		uni.showLoading()
		const response = await $api('FenzhenCheck', {
			id_number: info.id_number
		})
		uni.hideLoading()
		$response(response, () => {
			if (response.data.list.length > 0) {
				let id = 0
				for (let i in response.data.list) {
					let datetime = `${response.data.list[i].appointment_date} ${response.data.list[i].appointment_time}`
					if (id === 0 && (new Date(datetime) / 1) > (new Date() / 1)) {
						id = response.data.list[i].id
						break
					}
				}
				if (id === 0) {
					id = response.data.list[response.data.list.length - 1].id
				}
				uni.navigateTo({
					url: `/pages/user/fenzhen/fenzhen?id=${id}`
				})
			} else {
				uni.$lu.toast('暂无体检信息')
			}
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			getPersonList();
		}
	});
</script>
<template>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="person_list_wrapper">
			<view class="person_item_wrapper" v-for="(i, k) in person_list" :key="k" @click="choosePersonClick(i)">
				<view class="person_avatar_wrapper">
					<image v-if="i.sex === 1" src="@/static/assets/userm.png"></image>
					<image v-else src="@/static/assets/userw.png"></image>
				</view>
				<view class="person_info_wrapper">
					<view class="person_text_wrapper">
						<view class="person_name_wrapper">{{ i.name }}</view>
						<view class="person_sex_wrapper">{{ i.sex === 1 ? "男" : "女" }}性</view>
					</view>
					<view class="person_idnumber_wrapper">{{ i.id_number }}</view>
				</view>
				<view v-if="!!i.relation" class="person_type_wrapper">{{
          i.relation
        }}</view>
				<view class="person_type_wrapper">本人</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.person_list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
	}

	.person_item_wrapper {
		width: 690rpx;
		height: 166rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin: 20rpx auto 0;
	}

	.person_avatar_wrapper {
		width: 105rpx;
		height: 105rpx;
		margin-left: 47rpx;
	}

	.person_avatar_wrapper image {
		width: 105rpx;
		height: 105rpx;
		display: inline-block;
		object-fit: contain;
	}

	.person_info_wrapper {
		margin-left: 38rpx;
	}

	.person_text_wrapper {
		display: flex;
		align-items: end;
	}

	.person_name_wrapper {
		font-weight: 500;
		font-size: 32rpx;
		color: #0e0e0e;
		line-height: 1;
	}

	.person_sex_wrapper {
		font-size: 24rpx;
		color: #9e9e9e;
		line-height: 1;
		margin-left: 10rpx;
	}

	.person_idnumber_wrapper {
		font-size: 26rpx;
		color: #0e0e0e;
		line-height: 1;
		margin-top: 20rpx;
	}

	.person_type_wrapper {
		position: absolute;
		width: 100rpx;
		height: 46rpx;
		background: #c0c0c0;
		border-radius: 0rpx 15rpx 0rpx 15rpx;
		right: 0;
		top: 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 46rpx;
		text-align: center;
	}

	.person_choose_wrapper {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		width: 130rpx;
		height: 50rpx;
		background: #239ea3;
		border-radius: 25rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #ffffff;
		line-height: 50rpx;
		text-align: center;
	}
</style>