ykt-team-wxapp/pages/team/team-detail.vue

<template>
  <view v-if="team" class="p-15">
    <view class="flex items-center">
      <view class="flex-shrink-0 mr-10">
        <group-avatar :size="96" :avatarList="avatarList" />
      </view>
      <view class="flex-grow w-0 leading-noraml">
        <view class="mb-5 text-lg font-semibold text-dark">{{ team.name }}</view>
        <view class="text-base text-gray">
          {{ corpName }}
        </view>
      </view>
    </view>
    <view v-if="team.teamTroduce" class="mt-12 text-base text-dark leading-normal break-all">
      {{ team.teamTroduce }}
    </view>
    <template v-if="teammate.leaders.length">
      <view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">
        团队负责人
      </view>
      <view v-for="i in teammate.leaders" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
        @click="toHomePage(i.userid)">
        <image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
        <view class="w-0 flex-grow leading-normal">
          <view class="flex items-center justify-between">
            <view class="flex-grow w-0">
              <text class="mr-5 text-lg text-dark font-semibold">{{ i.anotherName }}</text>
              <text class="text-base text-dark">医生</text>
            </view>
            <view v-if="friendlyMember[i.userid]"
              class="px-10 leading-normal text-sm border-auto text-primary rounded-full"
              @click.stop="toFriend(i.userid)">
              添加好友
            </view>
          </view>
          <view class="line-clamp-2 text-base text-gray">
            {{ i.memberTroduce || '暂无简介' }}
          </view>
        </view>
      </view>
    </template>

    <template v-if="teammate.members.length">
      <view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">团队成员
      </view>
      <view v-for="i in teammate.members" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
        @click="toHomePage(i.userid)">
        <image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
        <view class="w-0 flex-grow leading-normal">
          <view class="flex items-center justify-between">
            <view class="flex-grow w-0">
              <text class="mr-5 text-lg text-dark font-semibold">{{ i.anotherName }}</text>
              <text class="text-base text-dark">医生</text>
            </view>
            <view v-if="friendlyMember[i.userid]"
              class="px-10 leading-normal text-sm border-auto text-primary rounded-full"
              @click.stop="toFriend(i.userid)">
              添加好友
            </view>
          </view>
          <view class="line-clamp-2 text-base text-gray">
            {{ i.memberTroduce || '暂无简介' }}
          </view>
        </view>
      </view>
    </template>
    <view class="safe-bottom-padding"></view>
  </view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import api from '@/utils/api';

import groupAvatar from '@/components/group-avatar.vue';

const corpId = ref('');
const teamId = ref('');
const team = ref(null);
const corpName = ref('');


const memberList = computed(() => team.value && Array.isArray(team.value.memberList) ? team.value.memberList : [])

const avatarList = computed(() => memberList.value.map(i => i.avatar || '/static/default-avatar.png').filter(Boolean))

const teammate = computed(() => {
  const memberLeaderList = team.value && Array.isArray(team.value.memberLeaderList) ? team.value.memberLeaderList : [];
  return memberList.value.reduce((data, item) => {
    if (memberLeaderList.includes(item.userid)) {
      data.leaders.push(item)
    } else {
      data.members.push(item)
    }
    return data
  }, { leaders: [], members: [] })
})

const friendlyMember = computed(() => {
  const friendlyMembers = team.value && Array.isArray(team.value.friendlyMembers) ? team.value.friendlyMembers : [];
  return friendlyMembers.reduce((data, item) => {
    data[item] = true;
    return data
  }, {})
})

function toFriend(userid) {
  uni.navigateTo({ url: `/pages/team/friend?corpId=${corpId.value}&userid=${userid}` })
}

function toHomePage(userid) {
  uni.navigateTo({ url: `/pages/team/homepage?corpId=${corpId.value}&userid=${userid}&showQrcode=${friendlyMember[userid] ? 'YES' : ''}` })
}

async function getTeam() {
  const res = await api('getTeamData', { teamId: teamId.value, corpId: corpId.value });
  if (res && res.data) {
    team.value = res.data;
  } else {
    toast(res?.message || '获取团队信息失败')
  }
}

onLoad(options => {
  corpId.value = options.corpId;
  teamId.value = options.teamId;
  corpName.value = decodeURIComponent(options.corpName || '');
})
onShow(() => {
  if (teamId.value && corpId.value) {
    getTeam()
  }
});

</script>
<style>
page {
  background: white;
  overflow: auto;
}

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

.avatar {
  width: 120rpx;
  height: 128rpx;
}
</style>