ykt-wxapp/pages/home/customer-archive.vue

<template>
  <view class="px-15 py-12 mb-10 bg-white shadow-lg">
    <view class="mb-10 flex items-center justify-between">
      <view class="flex-shrink-0 text-lg font-semibold truncate">
        成员档案
      </view>
      <view class="px-10 leading-normal border-dashed-auto text-base text-primary rounded-sm" @click="toManagePage()">
        档案管理
      </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="flex-shrink-0 min-w-100 mr-10 p-10 rounded relative border-primary"
          :class="current && i._id === current._id ? 'bg-primary current-customer' : ''" @click="toggle(i)">
          <view class="flex justify-between mb-5">
            <view class="text-base leading-normal font-semibold whitespace-nowrap"
              :class="current && i._id === current._id ? 'text-white' : 'text-dark'">
              {{ i.name }}
            </view>
            <view v-if="i.relationship" class="flex-shrink-0 px-5 rounded-sm border-auto text-sm leading-normal"
              :class="current && i._id === current._id ? 'text-white' : 'text-gray'">
              {{ i.relationship }}
            </view>
          </view>
          <view class="text-base leading-normal h-normal"
            :class="current && i._id === current._id ? 'text-white' : 'text-gray'">
            {{ i.sex }} {{ i.age > 0 ? i.age + '岁' : '' }}
          </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">
        授权
      </view>
    </view>
    <view v-if="current" class="flex mt-10">
      <view class="flex-grow p-10 rounded bg-gray mr-10" @click="fillBaseInfo()">
        <view class="flex items-center justify-between mb-5">
          <view class="text-lg">个人基本信息</view>
          <uni-icons color="#999" type="arrowright"></uni-icons>
        </view>
        <!-- <view v-if="formError.base" class="text-sm text-danger">
          请完善您的个人信息 v-else
        </view> -->
        <view class="text-base text-gray">基础信息填写</view>
      </view>
      <!-- v-if="healthTempList && healthTempList.length" -->
      <view class="flex-grow p-10 rounded bg-gray" @click="toHospitalList()">
        <view class="flex items-center justify-between mb-5">
          <view class="text-lg">个人住院信息</view>
          <uni-icons color="#999" type="arrowright"></uni-icons>
        </view>
        <view class="text-base text-gray">住院信息列表</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 } from '@/utils/widget';

const props = defineProps({
  corpId: {
    type: String,
    default: ''
  },
  customers: {
    type: Array,
    default: () => []
  },
  team: {
    type: Object,
    default: () => ({})
  }
})

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}`,
      complete: console.log
    })
  }
}

function toggle(i) {
  current.value = i;
}

function toManagePage() {
  uni.navigateTo({ url: `/pages/archive/archive-manage?corpId=${props.corpId}&teamId=${props.team.teamId}` })
}

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 : [];
  } else {
    toast(res.message || '获取档案失败');
  }
}

watch(() => props.corpId, n => {
  if (n) {
    getCustomers()
  } else {
    customers.value = [];
  }
}, { immediate: true });

watch(customers, n => {
  if (n.length && !(current.value && n.some(i => i._id === current.value._id))) {
    toggle(n[0]);
  } else {
    current.value = null;
  }
})

</script>
<style scoped>
.h-80 {
  height: 160rpx;
}

.h-normal {
  height: 1.5em;
}

.min-w-100 {
  min-width: 200rpx;
}

.current-customer::after {
  bottom: -1px;
  left: calc(50% - 10px);
  border: 10px solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: white;
}
</style>