256 lines
7.5 KiB
Vue
256 lines
7.5 KiB
Vue
<template>
|
||
<view class="archive-container">
|
||
<view class="mb-10 flex items-center justify-between">
|
||
<view class="flex-shrink-0 text-lg font-semibold truncate text-dark">
|
||
成员档案
|
||
</view>
|
||
<view class="flex items-center px-10 leading-normal text-base text-primary rounded-sm" @click="toManagePage()">
|
||
<image class="manage-icon mr-5" src="/static/home/档案管理.png" mode="aspectFit"></image>
|
||
<view>档案管理</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="customers.length === 0" class="flex items-center justify-center h-80 border-dashed text-dark rounded">
|
||
<uni-icons type="plusempty" size="16" color="#999"></uni-icons>
|
||
<view class="text-base text-dark">新建档案</view>
|
||
</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 min-w-100 mr-10 p-10 rounded-lg relative"
|
||
:class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)">
|
||
<view class="flex flex-col items-center">
|
||
<view class="text-base leading-normal font-semibold whitespace-nowrap mb-5"
|
||
:class="current && i._id === current._id ? 'text-primary' : 'text-dark'">
|
||
{{ i.name }}
|
||
</view>
|
||
<view class="flex items-center">
|
||
<image v-if="i.sex" class="sex-icon mr-5"
|
||
:src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
|
||
mode="aspectFit"></image>
|
||
<view class="text-base leading-normal"
|
||
:class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
|
||
{{ i.age > 0 ? i.age + '岁' : '' }}
|
||
</view>
|
||
</view>
|
||
<view v-if="i.relationship" class="relationship-tag flex-shrink-0 px-5 rounded-sm text-sm leading-normal"
|
||
:class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
|
||
{{ i.relationship }}
|
||
</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-10">
|
||
<view class="info-card flex-grow mr-10" @click="fillBaseInfo()">
|
||
<image class="info-bg" src="/static/home/个人基本信息bg.svg" mode="aspectFit"></image>
|
||
<view class="info-content">
|
||
<view class="flex items-center justify-between mb-5">
|
||
<view class="text-lg text-dark">个人基本信息</view>
|
||
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="text-base text-gray">完善个人信息</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-card flex-grow" @click="toHealthList()">
|
||
<image class="info-bg" src="/static/home/健康信息bg.svg" mode="aspectFit"></image>
|
||
<view class="info-content">
|
||
<view class="flex items-center justify-between mb-5">
|
||
<view class="text-lg text-dark">个人健康信息</view>
|
||
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="text-base text-gray">填写健康信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { computed, 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: ''
|
||
},
|
||
customers: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
team: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:customers']);
|
||
|
||
const { account } = storeToRefs(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
|
||
})
|
||
|
||
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 ? `(${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() {
|
||
uni.navigateTo({ url: `/pages/archive/archive-manage?corpId=${props.corpId}&teamId=${props.team.teamId}` })
|
||
}
|
||
|
||
async function auth() {
|
||
await confirm(`是否授权${props.team.name}提供服务`);
|
||
const res = await api('authCustomerToTeam', { corpId: props.corpId, teamId: props.team.teamId, id: current.value._id });
|
||
if (res && res.success) {
|
||
await toast('授权成功');
|
||
getCustomers()
|
||
} else {
|
||
toast(res?.message || '授权失败');
|
||
}
|
||
}
|
||
|
||
async function getCustomers() {
|
||
const res = await api('getMiniAppCustomers', { miniAppId: account.value.openid, corpId: props.corpId });
|
||
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 || '获取档案失败');
|
||
}
|
||
}
|
||
|
||
watch(() => props.corpId, n => {
|
||
if (n) {
|
||
getCustomers()
|
||
} else {
|
||
customers.value = [];
|
||
}
|
||
}, { immediate: true });
|
||
|
||
</script>
|
||
<style scoped>
|
||
.archive-container {
|
||
padding: 24rpx 30rpx;
|
||
margin: 0 30rpx;
|
||
background: linear-gradient(to bottom, #C2DCFF 0%, #FFFFFF 100%);
|
||
border-radius: 32rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.manage-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.customer-card {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.current-customer {
|
||
background: linear-gradient(135deg, #E3F2FF 0%, #FFFFFF 100%);
|
||
border: 2rpx solid #065BD6;
|
||
box-shadow: 0 4rpx 12rpx rgba(6, 91, 214, 0.2);
|
||
}
|
||
|
||
.sex-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.relationship-tag {
|
||
margin-top: 8rpx;
|
||
border: 1rpx solid currentColor;
|
||
}
|
||
|
||
.info-card {
|
||
position: relative;
|
||
padding: 20rpx;
|
||
border-radius: 16rpx;
|
||
background: white;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
overflow: hidden;
|
||
min-height: 160rpx;
|
||
}
|
||
|
||
.info-bg {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
opacity: 0.8;
|
||
z-index: 0;
|
||
}
|
||
|
||
.info-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.arrow-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.h-80 {
|
||
height: 160rpx;
|
||
}
|
||
|
||
.h-normal {
|
||
height: 1.5em;
|
||
}
|
||
|
||
.min-w-100 {
|
||
min-width: 200rpx;
|
||
}
|
||
|
||
.rounded-lg {
|
||
border-radius: 16rpx;
|
||
}
|
||
</style> |