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

<template>
  <full-page :pageStyle="pageStyle">
    <view v-if="team" class="detail-wrapper">
      <view class="linear-bg">
        <view class="flex items-center pt-15 px-15">
          <view class="flex-shrink-0 mr-10">
            <group-avatar classType="square" :size="128" :avatarList="avatarList" />
          </view>
          <view class="w-0 flex-grow">
            <view class="name-title font-semibold text-dark truncate">{{ team.name }}</view>
            <view class="corp-title text-gray truncate">{{ corpName }}</view>
          </view>
        </view>
        <view class="mt-15 px-15 leading-normal text-base text-blue">
          {{ team.teamTroduce }}
        </view>
        <view class="pt-15"></view>
        <image v-if="teammate.leaders.length" class="block mx-auto icon-role" src="/static/teamleader.svg">
        </image>
        <view v-for="i in teammate.leaders" :key="i._id" class="mt-15 flex flex-col items-center">
          <view class="ablum text-center p-10 flex flex-col items-center rounded-sm"
            :class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
            <image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
            <view class="w-full h-name text-base text-dark font-semibold truncate">{{ i.anotherName }}</view>
            <view class="w-full h-job text-sm text-gray truncate">
              {{ memberJob[i.userid] }}
            </view>
            <view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
              可加好友
            </view>
          </view>
          <view class="mt-15 border-box w-full px-15 leading-normal text-base text-blue">
            个人介绍: {{ i.memberTroduce || '暂无介绍' }}
          </view>
        </view>
        <image v-if="teammate.members.length" class="block mt-30 mx-auto icon-role" src="/static/teammate.svg"></image>
        <view class="mt-15 px-15 flex flex-wrap" :class="teammate.members.length === 1 ? 'justify-center' : ''">
          <view v-for="i in teammate.members" :key="i._id"
            class="ablum ablum--member text-center p-10 flex flex-col items-center rounded-sm"
            :class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
            <image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
            <view class="h-name w-full text-base text-dark font-semibold truncate px-10">{{ i.anotherName }}</view>
            <view class="h-job w-full text-sm text-gray truncate px-10">
              {{ memberJob[i.userid] }}
            </view>
            <view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
              可加好友
            </view>
          </view>
        </view>
      </view>
    </view>
  </full-page>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useJob from '@/hooks/useJob';
import api from '@/utils/api';

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

const pageStyle = "background: linear-gradient(180deg, #065BD6 15.05%, #F6FAFA 95.37%) 0 0/100% 562rpx no-repeat, #F6FAFA;";

const corpId = ref('');
const teamId = ref('');
const team = ref(null);
const corpName = ref('');
const { memberJob, memberList: list } = useJob();

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.value[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()
  }
});

watch(memberList, n => {
  list.value = n
}, { immediate: true })

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

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

.avatar {
  width: 216rpx;
  height: 240rpx;
}

.pre-wrap {
  white-space: pre-wrap;
}

.detail-wrapper {
  transform: translateY(40rpx);
  background: #F5FAFF;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  min-height: calc(100vh - 40rpx);
  padding-bottom: 80rpx;
  overflow: hidden;
}

.name-title {
  height: 64rpx;
  line-height: 64rpx;
  font-size: 44rpx;
}

.corp-title {
  height: 44rpx;
  line-height: 44rpx;
  font-size: 28rpx;
}

.text-blue {
  color: #516276;
}

.linear-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
}

.icon-role {
  margin-top: 50rpx;
  margin-bottom: 38rpx;
  width: 280rpx;
  height: 60rpx;
}

.ablum {
  width: 336rpx;
  box-sizing: border-box;
  border: 1rpx solid #9BB7D8;
}

.ablum-pb {
  position: relative;
  padding-bottom: 64rpx;
}

.ablum--member {
  width: 332rpx;
}

.ablum--member:nth-child(2n) {
  margin-left: 24rpx;
}

.ablum--member:nth-child(n+3) {
  margin-top: 30rpx;
}

.mt-5 {
  margin-top: 10rpx;
}

.friend-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
  background: #065BD6;
}

.mt-30 {
  margin-top: 60rpx;
}

.h-name {
  height: 20px;
  line-height: 20px;
}

.h-job {
  height: 17px;
  line-height: 17px;
}
</style>