增加 类型标签

weihu/pages/user/list.vue

@@ -1,13 +1,10 @@
 <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_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>
@@ -21,114 +18,66 @@
 							<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="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>
 		<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"
+	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 => {
-			 
+		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 => {
+					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(() => {
 
-	})
+	onShow(() => {})
 	onLoad((e) => {
-		if(e.info.length>0){
+		if (e.info && e.info.length > 0) {
 			search.value = e.info
 			GetList()
 		}
-		 
 	})
 </script>
 
@@ -146,21 +95,27 @@
 
 	.person_item_wrapper {
 		width: 690rpx;
-		height: 166rpx;
+		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;
-		margin: 20rpx auto 0; 
-		padding-right: 20rpx;
+		padding-right: 120rpx;
 	}
 
 	.person_avatar_wrapper {
 		width: 105rpx;
 		height: 105rpx;
 		margin-left: 16rpx;
+		flex-shrink: 0;
 	}
 
 	.person_avatar_wrapper image {
@@ -203,100 +158,42 @@
 		margin-top: 20rpx;
 	}
 
-	.person_type_wrapper {
+	/* 右上角标签 */
+	.item_top_right {
 		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;
+	.tag-chip {
+		height: 40rpx;
+		line-height: 40rpx;
+		padding: 0 14rpx;
+		font-size: 22rpx;
 		font-weight: 500;
-		color: #F6FDFD;
+		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%);
+	}
 
-	.add_button_wrapper {
-		position: fixed;
+	.tools_row {
 		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{
 
+	.tools {
 		font-size: 28rpx;
 		width: 60rpx;
 		color: #666;
 	}
-	.tools_row{
-		margin-left: 20rpx;
-		display: flex;
-	}
 </style>

weihu/unpackage/dist/build/web/index.html

@@ -14,7 +14,7 @@
     <title>MemberMngr</title>
     <!--preload-links-->
     <!--app-context-->
-    <script type="module" crossorigin src="/weihu/assets/index-DohXUphv.js"></script>
+    <script type="module" crossorigin src="/weihu/assets/index-BkkBIOib.js"></script>
     <link rel="stylesheet" crossorigin href="/weihu/assets/index-Ru9h2ort.css">
   </head>
   <body>