ykt-team-wxapp/pages/home/customer-archive.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: "",
  },
  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;
});
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(() => {
  const requiredTitles = baseInfo.value
    .map((i) => i.title);
  return current.value && requiredTitles.some((i) => !current.value[i]);
});

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 || "获取档案失败");
  }
}

onMounted(() => {
  uni.$on("reloadTeamCustomers", getCustomers);
});

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(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>