增加 类型标签

main
岩仔88 4 weeks ago
parent c74658b8b6
commit de8c7d970e

@ -1,13 +1,10 @@
<template> <template>
<view class="list_main"> <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 v-if="List.length>0">
<view class="person_list_wrapper"> <view class="person_list_wrapper">
<view class="person_item_wrapper" v-for="(i, k) in List" :key="k"> <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"> <view class="person_avatar_wrapper">
<image v-if="i.leixing == '预约'" src="@/static/images/userm.png"></image> <image v-if="i.leixing == '预约'" src="@/static/images/userm.png"></image>
<image v-else src="@/static/images/userw.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 class="person_idnumber_wrapper">{{ i.id_card_num }}</view>
</view> </view>
</view> </view>
<!-- 右上角标签 -->
<view style="display: flex; width: 300rpx;" > <view class="item_top_right">
<view class="person_type_wrapper" :style="{ backgroundColor: i.leixing === '预约' ? '#81d1ad' : '#d1987c' }">{{i.leixing}}</view> <view class="tag-chip" :style="{ backgroundColor: i.leixing === '预约' ? '#81d1ad' : '#d1987c' }">{{i.leixing}}</view>
<view style="display: flex; justify-content: end; width: 100%; padding-right: 20rpx;"> <view class="tag-chip" :style="{ backgroundColor: i.type == 1 ? '#6DBFB8' : '#E6B89C' }">{{i.type == 1 ? '健康证' : '老年人'}}</view>
<view class="tools_row" @click="delClickFunc(i.id,i.leixing)"> </view>
<uni-icons type="trash" size="20"></uni-icons> <!-- 右侧垂直居中删除 -->
<view class="tools">删除</view> <view class="item_right_center">
</view> <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> </view>
</view> </view>
<view v-else style="font-size: 28rpx;color: #666; width: 100%; text-align: center; padding-top: 200rpx;"> <view v-else style="font-size: 28rpx;color: #666; width: 100%; text-align: center; padding-top: 200rpx;">
无数据 无数据
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref } from "vue"
ref import { TiJianGetList, TiJianDel } from "@/api"
} from "vue" import { onLoad, onShow } from "@dcloudio/uni-app"
import {
TiJianGetList,TiJianDel
} from "@/api"
import {
onLoad,
onShow
} from "@dcloudio/uni-app"
let search = ref(''); let search = ref('');
let List = ref([]); let List = ref([]);
const GetList = () => { const GetList = () => {
List.value=[] List.value = []
TiJianGetList({ TiJianGetList({ info: search.value }).then(res => {
info: search.value
}).then(res => {
if (res.status) { if (res.status) {
List.value = res.data.all_list
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({ const delClickFunc = (id, leixing) => {
url:'/pages/user/person_edit?personid=' + id
})
}
const delClickFunc=(id,leixing)=>{
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定删除吗?', content: '确定删除吗?',
success: function (res) { success: function (res) {
if (res.confirm) { if (res.confirm) {
TiJianDel({ TiJianDel({ id: id, leixing: leixing }).then(res => {
id: id, if (res.status) {
leixing:leixing GetList()
}).then(res => { }
if (res.status) { })
GetList()
}
})
} else if (res.cancel) {
console.log('用户点击取消');
} }
} }
}); });
} }
const PersonClick=(person)=>{
uni.navigateTo({ onShow(() => {})
url:'/pages/fenzhen/fenzhen_paidui?id_number='+person.id_number onLoad((e) => {
}) if (e.info && e.info.length > 0) {
} search.value = e.info
onShow(() => {
})
onLoad((e)=>{
if(e.info.length>0){
search.value=e.info
GetList() GetList()
} }
}) })
</script> </script>
@ -146,21 +95,27 @@
.person_item_wrapper { .person_item_wrapper {
width: 690rpx; width: 690rpx;
height: 166rpx; min-height: 166rpx;
background: #ffffff; background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04); box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 15rpx; border-radius: 15rpx;
position: relative; position: relative;
margin: 20rpx auto 0;
padding: 20rpx;
box-sizing: border-box;
}
.person_item_inner {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 20rpx auto 0; padding-right: 120rpx;
padding-right: 20rpx;
} }
.person_avatar_wrapper { .person_avatar_wrapper {
width: 105rpx; width: 105rpx;
height: 105rpx; height: 105rpx;
margin-left: 16rpx; margin-left: 16rpx;
flex-shrink: 0;
} }
.person_avatar_wrapper image { .person_avatar_wrapper image {
@ -203,100 +158,42 @@
margin-top: 20rpx; margin-top: 20rpx;
} }
.person_type_wrapper { /* 右上角标签 */
.item_top_right {
position: absolute; position: absolute;
width: 100rpx;
height: 46rpx;
background: #c0c0c0;
border-radius: 0rpx 15rpx 0rpx 15rpx;
right: 0; right: 0;
top: 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; display: flex;
font-size: 34rpx;
}
.name {}
.tel {
color: #999;
font-size: 26rpx;
margin-top: 10rpx;
} }
.yue { .tag-chip {
height: 100rpx; height: 40rpx;
line-height: 100rpx; line-height: 40rpx;
font-size: 34rpx; padding: 0 14rpx;
margin-left: 20rpx; font-size: 22rpx;
color: #FF8A5B; font-weight: 500;
} color: #ffffff;
text-align: center;
.tags { border-radius: 0 12rpx 0 12rpx;
height: 100rpx; white-space: nowrap;
line-height: 100rpx;
font-size: 34rpx;
margin-left: 20rpx;
} }
.search_input { /* 右侧垂直居中 */
background-color: #fff; .item_right_center {
border-radius: 20rpx; position: absolute;
height: 80rpx; right: 10rpx;
margin: 10rpx 0rpx 10rpx 20rpx; top: 50%;
padding-left: 30rpx; transform: translateY(-50%);
width: 500rpx;
} }
.search_button { .tools_row {
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; display: flex;
justify-content: center;
align-items: 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; font-size: 28rpx;
width: 60rpx; width: 60rpx;
color:#666; color: #666;
}
.tools_row{
margin-left: 20rpx;
display: flex;
} }
</style> </style>

@ -14,7 +14,7 @@
<title>MemberMngr</title> <title>MemberMngr</title>
<!--preload-links--> <!--preload-links-->
<!--app-context--> <!--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"> <link rel="stylesheet" crossorigin href="/weihu/assets/index-Ru9h2ort.css">
</head> </head>
<body> <body>

Loading…
Cancel
Save