145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<template>
|
||
<business-page-layout title="会员管理" :show-back="true">
|
||
<view class="page">
|
||
<view class="search-bar">
|
||
<input
|
||
class="search-input"
|
||
v-model="keyword"
|
||
placeholder="昵称 / 手机 / 就诊人"
|
||
confirm-type="search"
|
||
@confirm="reload"
|
||
/>
|
||
<view class="search-btn" @click="reload">查询</view>
|
||
</view>
|
||
<view v-if="loading" class="empty">加载中...</view>
|
||
<view v-else-if="!list.length" class="empty">暂无用户</view>
|
||
<view
|
||
v-for="item in list"
|
||
:key="item.id"
|
||
class="card"
|
||
@click="goPatients(item)"
|
||
>
|
||
<view class="user-row">
|
||
<image class="avatar" :src="avatarSrc(item.avatarurl)" mode="aspectFill" />
|
||
<view class="text">
|
||
<text class="name">{{ item.nickname || '—' }}</text>
|
||
<text class="sub">
|
||
ID：{{ item.id || '—' }}
|
||
<template v-if="item.mobile"> · {{ item.mobile }}</template>
|
||
</text>
|
||
</view>
|
||
<text class="chevron">›</text>
|
||
</view>
|
||
<!-- 就诊人标签化：一行多枚、自动换行 -->
|
||
<view v-if="item.patients && item.patients.length" class="patients">
|
||
<view
|
||
v-for="p in item.patients"
|
||
:key="p.up_id"
|
||
class="patient-tag"
|
||
>
|
||
<text class="tag-text">{{ patientTagText(p) }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="patients empty-p">暂无就诊人</view>
|
||
</view>
|
||
</view>
|
||
</business-page-layout>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 会员管理用户列表：就诊人以标签展示；点用户进入就诊人列表页
|
||
*/
|
||
import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue';
|
||
import { getWxUserList, pickProfileItems } from '@/api/userPatientProfile.js';
|
||
|
||
export default {
|
||
components: { BusinessPageLayout },
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
list: [],
|
||
loading: false,
|
||
};
|
||
},
|
||
onShow() {
|
||
this.reload();
|
||
},
|
||
methods: {
|
||
avatarSrc(raw) {
|
||
const s = String(raw || '').trim();
|
||
return s || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/mine/mr_tx.png';
|
||
},
|
||
/** 标签文案：姓名 或 姓名 · 脱敏手机 */
|
||
patientTagText(p) {
|
||
const name = (p && p.name) || '—';
|
||
const mobile = (p && p.mobile) ? String(p.mobile).trim() : '';
|
||
return mobile ? `${name} · ${mobile}` : name;
|
||
},
|
||
async reload() {
|
||
this.loading = true;
|
||
try {
|
||
// 无关键字时不要传 keyword，uni 请求会把 undefined 序列化成字符串 "undefined"
|
||
const params = {
|
||
page: 1,
|
||
pageSize: 50,
|
||
};
|
||
const kw = (this.keyword || '').trim();
|
||
if (kw) {
|
||
params.keyword = kw;
|
||
}
|
||
const wrap = await getWxUserList(params);
|
||
this.list = pickProfileItems(wrap);
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
/** 跳转就诊人列表页 */
|
||
goPatients(item) {
|
||
const userId = Number((item && item.id) || 0);
|
||
if (!userId) {
|
||
uni.showToast({ title: '缺少用户信息', icon: 'none' });
|
||
return;
|
||
}
|
||
const nick = encodeURIComponent((item && item.nickname) || '');
|
||
uni.navigateTo({
|
||
url: `/subPackages/sub_business_shared/user-patient/patients?user_id=${userId}&nickname=${nick}`,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page { padding: 24rpx; }
|
||
.search-bar { display: flex; gap: 12rpx; margin-bottom: 20rpx; }
|
||
.search-input {
|
||
flex: 1; background: #fff; border-radius: 12rpx;
|
||
padding: 16rpx 20rpx; font-size: 26rpx;
|
||
}
|
||
.search-btn {
|
||
background: #6acdbb; color: #fff; padding: 16rpx 28rpx;
|
||
border-radius: 12rpx; font-size: 26rpx;
|
||
}
|
||
.card {
|
||
background: #fff; border-radius: 16rpx; padding: 20rpx 20rpx 16rpx; margin-bottom: 14rpx;
|
||
}
|
||
.user-row { display: flex; align-items: center; gap: 14rpx; }
|
||
.avatar { width: 56rpx; height: 56rpx; border-radius: 50%; background: #e8f5f2; flex-shrink: 0; }
|
||
.text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
||
.name { font-size: 28rpx; color: #111827; font-weight: 500; }
|
||
.sub { font-size: 22rpx; color: #9ca3af; }
|
||
.chevron { font-size: 32rpx; color: #d1d5db; line-height: 1; }
|
||
.patients {
|
||
margin-top: 14rpx; padding-top: 14rpx; border-top: 1rpx solid #eef2f1;
|
||
display: flex; flex-wrap: wrap; gap: 12rpx;
|
||
}
|
||
.patient-tag {
|
||
padding: 6rpx 16rpx; border-radius: 8rpx;
|
||
background: #f0faf7; border: 1rpx solid #6acdbb;
|
||
}
|
||
.tag-text { font-size: 22rpx; color: #1a9b88; line-height: 1.4; }
|
||
.empty-p { font-size: 22rpx; color: #d1d5db; }
|
||
.empty { text-align: center; color: #9ca3af; padding: 80rpx 0; font-size: 28rpx; }
|
||
</style>
|