DaXingTiJian/weihu/pages/user/list.vue

<template>
	<view class="list_main">
		<view v-if="List.length>0">
			<view class="person_list_wrapper">
				<view class="person_item_wrapper" v-for="(i, k) in List" :key="k">
					<!-- 内容区 -->
					<view class="person_item_inner">
						<view class="person_avatar_wrapper">
							<image v-if="i.leixing == '预约'" src="@/static/images/userm.png"></image>
							<image v-else src="@/static/images/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">时间：<br>{{i.created_at}}</view>
								<view class="person_sex_wrapper">机构：<br>{{i.org_name}}</view>
							</view>
							<view class="person_idnumber_wrapper">{{ i.id_card_num }}</view>
						</view>
					</view>
					<!-- 右上角标签 -->
					<view class="item_top_right">
						<view class="tag-chip" :style="{ backgroundColor: i.leixing === '预约' ? '#81d1ad' : '#d1987c' }">{{i.leixing}}</view>
						<view class="tag-chip" :style="{ backgroundColor: i.type == 1 ? '#6DBFB8' : '#E6B89C' }">{{i.type == 1 ? '健康证' : '老年人'}}</view>
					</view>
					<!-- 右侧垂直居中删除 -->
					<view class="item_right_center">
						<view class="tools_row" @click="delClickFunc(i.id,i.leixing)">
							<uni-icons type="trash" size="20"></uni-icons>
							<view class="tools">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="font-size: 28rpx;color: #666; width: 100%; text-align: center; padding-top: 200rpx;">
			无数据
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import { TiJianGetList, TiJianDel } from "@/api"
	import { onLoad, onShow } from "@dcloudio/uni-app"

	let search = ref('');
	let List = ref([]);

	const GetList = () => {
		List.value = []
		TiJianGetList({ info: search.value }).then(res => {
			if (res.status) {
				List.value = res.data.all_list
			}
		})
	}

	const delClickFunc = (id, leixing) => {
		uni.showModal({
			title: '提示',
			content: '确定删除吗？',
			success: function (res) {
				if (res.confirm) {
					TiJianDel({ id: id, leixing: leixing }).then(res => {
						if (res.status) {
							GetList()
						}
					})
				}
			}
		});
	}

	onShow(() => {})
	onLoad((e) => {
		if (e.info && e.info.length > 0) {
			search.value = e.info
			GetList()
		}
	})
</script>

<style scoped>
	.list_main {
		background-color: #fafafa;
		height: 100vh;
	}

	.person_list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
	}

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

	.person_item_inner {
		display: flex;
		align-items: center;
		padding-right: 120rpx;
	}

	.person_avatar_wrapper {
		width: 105rpx;
		height: 105rpx;
		margin-left: 16rpx;
		flex-shrink: 0;
	}

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

	.person_info_wrapper {
		margin-left: 14rpx;
		width: 450rpx;
	}

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

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

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

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

	/* 右上角标签 */
	.item_top_right {
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
	}

	.tag-chip {
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 14rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		border-radius: 0 12rpx 0 12rpx;
		white-space: nowrap;
	}

	/* 右侧垂直居中 */
	.item_right_center {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.tools_row {
		display: flex;
		align-items: center;
	}

	.tools {
		font-size: 28rpx;
		width: 60rpx;
		color: #666;
	}
</style>