477 lines
12 KiB
Vue
477 lines
12 KiB
Vue
<template>
|
|
<view class="archive-container">
|
|
<view class="mb-10 flex items-center justify-between">
|
|
<view class="module-title flex-shrink-0 truncate"> 成员档案 </view>
|
|
<view class="flex items-center leading-normal rounded-sm" style="padding-right: 0" @click="toManagePage()">
|
|
<image class="manage-icon mr-5" src="/static/home/archive-manage.png" mode="aspectFit"></image>
|
|
<view style="font-size: 28rpx; color: #065bd6">档案管理</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="customers.length === 0" class="add-archive-card" @click="toManagePage()">
|
|
<view class="add-archive-btn">
|
|
<image class="add-archive-btn-icon" src="/static/home/add-archive-btn.png" mode="aspectFit"></image>
|
|
<text class="add-archive-btn-text">新建档案</text>
|
|
</view>
|
|
<image class="add-archive-bg" src="/static/home/add-archive-bg.png" mode="aspectFit"></image>
|
|
</view>
|
|
<scroll-view scroll-x="true">
|
|
<view class="flex flex-nowrap pb-5">
|
|
<view v-for="i in customers" :key="i._id" class="customer-card flex-shrink-0 mr-15 relative"
|
|
:class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)">
|
|
<!-- 关系标签 -->
|
|
<view v-if="i.relationship" class="relationship-tag"
|
|
:class="i.relationship === '本人' ? 'tag-blue' : 'tag-green'">
|
|
{{ i.relationship }}
|
|
</view>
|
|
<view class="flex flex-col items-center">
|
|
<view class="customer-name text-lg leading-normal font-semibold whitespace-nowrap mb-8"
|
|
:class="current && i._id === current._id ? 'text-primary' : 'text-dark'">
|
|
{{ i.name }}
|
|
</view>
|
|
</view>
|
|
<!-- 选中状态底部条和三角 -->
|
|
<view v-if="current && i._id === current._id" class="active-indicator">
|
|
<view class="active-bar"></view>
|
|
<view class="active-triangle"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view v-if="canAuth" class="px-10 py-5 mt-5 flex items-center bg-danger rounded-sm">
|
|
<view class="mr-5 w-0 flex-grow text-base text-white">
|
|
点击右侧授权按钮, 我们将更精准的为您服务
|
|
</view>
|
|
<view class="px-12 py-5 text-base rounded-sm text-dark bg-white" @click="auth()">
|
|
授权
|
|
</view>
|
|
</view>
|
|
<view v-if="current" class="flex mt-15">
|
|
<view class="info-card-new flex-grow" @click="fillBaseInfo()">
|
|
<view class="info-bg info-bg-base"></view>
|
|
<view class="info-content">
|
|
<view class="flex items-center justify-between mb-8">
|
|
<view class="info-title">个人基本信息</view>
|
|
<image class="arrow-icon-small" src="/static/home/arrow-right-blue.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view v-if="baseInfoError" class="text-sm text-danger">请完善您的个人信息</view>
|
|
<view v-else class="info-subtitle">完善个人信息</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="hasHealthTemp" class="ml-10 info-card-new flex-grow" @click="toHealthList()">
|
|
<view class="info-bg info-bg-health"></view>
|
|
<view class="info-content">
|
|
<view class="flex items-center justify-between mb-8">
|
|
<view class="info-title">健康信息</view>
|
|
<image class="arrow-icon-small" src="/static/home/arrow-right-blue.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="info-subtitle">上传健康档案</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { computed, onMounted, ref, watch } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import useAccount from "@/store/account";
|
|
import api from "@/utils/api";
|
|
import { toast, confirm } from "@/utils/widget";
|
|
|
|
const props = defineProps({
|
|
corpId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
corpUserIds: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
customers: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
team: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:customers"]);
|
|
let loading = false;
|
|
|
|
const { account, externalUserId } = storeToRefs(useAccount());
|
|
const { getExternalUserId } = useAccount()
|
|
const current = ref(null);
|
|
const customers = ref([]);
|
|
|
|
const canAuth = computed(() => {
|
|
if (current.value && props.team && props.team.teamId) {
|
|
const teamIds = Array.isArray(current.value.teamId)
|
|
? current.value.teamId
|
|
: [];
|
|
return !teamIds.includes(props.team.teamId);
|
|
}
|
|
return false;
|
|
});
|
|
const qrcode = computed(() => {
|
|
const qrcodes =
|
|
props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
|
|
return qrcodes[0] || "";
|
|
});
|
|
|
|
const hasHealthTemp = computed(
|
|
() =>
|
|
qrcode.value &&
|
|
Array.isArray(qrcode.value.healthTempList) &&
|
|
qrcode.value.healthTempList.length > 0
|
|
);
|
|
const baseInfo = computed(() =>
|
|
qrcode.value &&
|
|
qrcode.value.teamFileds &&
|
|
Array.isArray(qrcode.value.teamFileds.baseInfo)
|
|
? qrcode.value.teamFileds.baseInfo
|
|
: []
|
|
);
|
|
const baseInfoError = computed(() => current.value && baseInfo.value.some((i) => i.title && !current.value[i.title]));
|
|
|
|
function fillBaseInfo() {
|
|
if (canAuth.value) {
|
|
toast("请先授权本服务团队");
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/archive/edit-archive?teamId=${props.team.teamId}&corpId=${props.corpId}&id=${current.value._id}`,
|
|
});
|
|
}
|
|
}
|
|
|
|
function toHealthList() {
|
|
if (canAuth.value) {
|
|
toast("请先授权本服务团队");
|
|
} else {
|
|
const name = `${current.value.name} ${current.value.relationship || ""}`;
|
|
uni.navigateTo({
|
|
url: `/pages/health/list?teamId=${props.team.teamId}&corpId=${props.corpId
|
|
}&id=${current.value._id}&name=${encodeURIComponent(name)}`,
|
|
});
|
|
}
|
|
}
|
|
|
|
function toggle(i) {
|
|
current.value = i;
|
|
}
|
|
|
|
function toManagePage() {
|
|
const corpUserId = props.corpUserIds && props.corpUserIds[props.team.teamId] ? props.corpUserIds[props.team.teamId] : "";
|
|
uni.navigateTo({
|
|
url: `/pages/archive/archive-manage?corpUserId=${corpUserId}&corpId=${props.corpId}&teamId=${props.team.teamId}`,
|
|
});
|
|
}
|
|
|
|
async function auth() {
|
|
await confirm(`是否授权${props.team.name}提供服务`);
|
|
const corpUserId = await getResponsiblePerson();
|
|
const res = await api("authCustomerToTeam", {
|
|
corpId: props.corpId,
|
|
teamId: props.team.teamId,
|
|
id: current.value._id,
|
|
corpUserId
|
|
});
|
|
if (res && res.success) {
|
|
await toast("授权成功");
|
|
getCustomers();
|
|
} else {
|
|
toast(res?.message || "授权失败");
|
|
}
|
|
}
|
|
|
|
async function getCustomers() {
|
|
if (loading) return;
|
|
loading = true
|
|
const res = await api("getMiniAppCustomers", {
|
|
miniAppId: account.value.openid,
|
|
corpId: props.corpId,
|
|
}, false);
|
|
if (res && res.success) {
|
|
customers.value = res && Array.isArray(res.data) ? res.data : [];
|
|
const customer = customers.value.find(
|
|
(i) => current.value && i._id === current.value._id
|
|
);
|
|
current.value = customer || customers.value[0] || null;
|
|
// 向父组件传递 customers 数据
|
|
emit("update:customers", customers.value);
|
|
} else {
|
|
toast(res.message || "获取档案失败");
|
|
}
|
|
loading = false
|
|
}
|
|
|
|
async function getResponsiblePerson() {
|
|
if (!externalUserId.value) {
|
|
await getExternalUserId(props.corpId)
|
|
}
|
|
const corpUserId = props.corpUserIds && props.corpUserIds[props.team.teamId] ? props.corpUserIds[props.team.teamId] : "";
|
|
const res = await api('getResponsiblePerson', { corpId: props.corpId, teamId: props.team.teamId, corpUserId, externalUserId: externalUserId.value });
|
|
return res && res.data ? res.data : ''
|
|
}
|
|
|
|
onMounted(() => {
|
|
uni.$on("reloadTeamCustomers", getCustomers);
|
|
});
|
|
|
|
watch(
|
|
() => props.corpId,
|
|
(n) => {
|
|
if (n) {
|
|
getCustomers();
|
|
} else {
|
|
customers.value = [];
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
defineExpose({
|
|
getCustomers,
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.archive-container {
|
|
padding: 24rpx 30rpx;
|
|
margin: 0 30rpx;
|
|
background: linear-gradient(181deg, #c2dcff 1.01%, #ffffff 43.31%);
|
|
border-radius: 16rpx;
|
|
box-shadow: inset 0 2rpx 0 0 rgba(255, 255, 255, 0.82),
|
|
0 8rpx 10rpx 0 rgba(60, 169, 145, 0.06);
|
|
}
|
|
|
|
.manage-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.module-title {
|
|
color: #000000;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.customer-card {
|
|
width: 160rpx;
|
|
height: 110rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(180deg, #ffffff 0%, #e6effb 100%);
|
|
border-radius: 12rpx;
|
|
border: 2rpx solid #aecaf2;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.current-customer {
|
|
background: #ffffff;
|
|
border: 2rpx solid #065bd6;
|
|
}
|
|
|
|
.relationship-tag {
|
|
position: absolute;
|
|
top: -2rpx;
|
|
right: -10rpx;
|
|
padding: 4rpx 16rpx;
|
|
font-size: 20rpx;
|
|
line-height: normal;
|
|
color: #fff;
|
|
border-top-left-radius: 16rpx;
|
|
border-bottom-left-radius: 16rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.relationship-tag::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: -8rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 10rpx solid transparent;
|
|
}
|
|
|
|
.tag-blue {
|
|
background: #065bd6;
|
|
}
|
|
|
|
.tag-blue::after {
|
|
border-top: 8rpx solid #003f96;
|
|
}
|
|
|
|
.tag-green {
|
|
background: #1dbf98;
|
|
}
|
|
|
|
.tag-green::after {
|
|
border-top: 8rpx solid #0f8c6d;
|
|
}
|
|
|
|
.active-indicator {
|
|
position: absolute;
|
|
bottom: -2rpx;
|
|
left: -2rpx;
|
|
right: -2rpx;
|
|
height: 10rpx;
|
|
z-index: 5;
|
|
}
|
|
|
|
.active-bar {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #065bd6;
|
|
border-bottom-left-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.active-triangle {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #065bd6;
|
|
margin-top: -8rpx;
|
|
}
|
|
|
|
.mr-15 {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.mt-15 {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.mb-8 {
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.info-card-new {
|
|
position: relative;
|
|
padding: 24rpx;
|
|
border-radius: 16rpx;
|
|
background: linear-gradient(115deg, #f4f9ff 14.74%, #dbeaff 66.11%);
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
overflow: hidden;
|
|
width: 310rpx;
|
|
height: 94rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.info-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-repeat: no-repeat;
|
|
background-position: right bottom;
|
|
background-size: cover;
|
|
opacity: 0.95;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.info-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.info-bg-base {
|
|
background-image: url("/static/home/basic-info-bg.svg");
|
|
}
|
|
|
|
.info-bg-health {
|
|
background-image: url("/static/home/health-info-bg.svg");
|
|
}
|
|
|
|
.info-title {
|
|
color: #213e80;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
line-height: 56rpx;
|
|
}
|
|
|
|
.info-subtitle {
|
|
color: #78808f;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.arrow-icon-small {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.font-medium {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.h-80 {
|
|
height: 160rpx;
|
|
}
|
|
|
|
.h-normal {
|
|
height: 1.5em;
|
|
}
|
|
|
|
.min-w-100 {
|
|
min-width: 200rpx;
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
/* 新建档案卡片样式 */
|
|
.add-archive-card {
|
|
height: 140rpx;
|
|
border-radius: 16rpx;
|
|
background: linear-gradient(95deg, #ecfbff -7.38%, #a5cbff 72.72%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.add-archive-btn {
|
|
margin-left: 24rpx;
|
|
width: 188rpx;
|
|
height: 56rpx;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(90deg, #33a0f9 0%, #065bd6 100%);
|
|
box-shadow: 0 8rpx 8rpx 0 rgba(6, 91, 214, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.add-archive-btn-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.add-archive-btn-text {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.add-archive-bg {
|
|
height: 140rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
</style> |