DaXingTiJian/weihu/pages/user/list.vue

<template>
	<view class="list_main">
		<!-- <view style="display: flex;justify-content: space-between;">
			<input class="input search_input" v-model="search" placeholder-style="color:#ccc;" placeholder="搜索" />
			<view class="search_button"  @click="GetList()">搜索</view>
		</view> -->
		<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 style="display: flex;align-items: center;"  >
						<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 style="display: flex; width: 300rpx;"   >
						<view class="person_type_wrapper"  :style="{ backgroundColor: i.leixing === '预约' ? '#81d1ad' : '#d1987c' }">{{i.leixing}}</view>
						<view style="display: flex; justify-content: end; width: 100%; padding-right: 20rpx;">
							<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>
		<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
			}
			console.log(List.value)
		})
	}
	const goto = (id) => {
		let userlist_type = sessionStorage.getItem('userlist_type')
		let url = null;
		if (userlist_type == 'expend') {
			url = '/pages/user/expend?member_id=' + id
		}
		if (userlist_type == 'recharge') {
			url = '/pages/user/recharge?member_id=' + id
		}
		uni.navigateTo({
			url: url
		})
	}
	const addClickFunc=()=>{
		uni.navigateTo({
			url:'/pages/user/person_edit'
		})
	}
	const editClickFunc=(id)=>{
		uni.navigateTo({
			url:'/pages/user/person_edit?personid=' + id
		})
	}
	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() 
					 	}
					 })
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	
	}
	const PersonClick=(person)=>{
		uni.navigateTo({
			url:'/pages/fenzhen/fenzhen_paidui?id_number='+person.id_number
		})
	}
	onShow(() => {
		
	})
	onLoad((e)=>{
		if(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;
		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; 
		padding-right: 20rpx;
	}

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

	.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;
	}

	.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;
	}

	.list_left {
		color: #333;
		width: 280rpx;
		display: flex;
		font-size: 34rpx;

	}

	.name {}

	.tel {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.yue {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		margin-left: 20rpx;
		color: #FF8A5B;
	}

	.tags {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		margin-left: 20rpx;
	}

	.search_input {
		background-color: #fff;
		border-radius: 20rpx;
		height: 80rpx;
		margin: 10rpx 0rpx 10rpx 20rpx;
		padding-left: 30rpx;
		width: 500rpx;
	}

	.search_button {
		height: 80rpx;
		line-height: 80rpx;
		margin: 10rpx 20rpx 10rpx 0rpx;
		background-color: #79e8e3;
		text-align: center;
		width: 180rpx;
		border-radius: 20rpx;
	}
	.add_button_text_wrapper {
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		text-align: center;
	}
	
	 
	.add_button_wrapper {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.tools{
		
		font-size: 28rpx;
		width: 60rpx;
		color:#666;
	}
	.tools_row{
		margin-left: 20rpx;
		display: flex;
	}
</style>