ykt-team-wxapp/pages/home/team-mate.vue

<template>
  <view class="team-mate-container">
    <view class="flex items-center justify-between">
      <view class="text-lg font-semibold text-dark">团队成员</view>
      <view class="flex items-center" @click="toTeamDetail()">
        <view class="mr-5 text-base text-gray">团队详情</view>
        <image class="arrow-icon" src="/static/home/右箭头-灰色.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="mt-10">
      <scroll-view scroll-x="true">
        <view class="flex flex-nowrap pb-5">
          <view v-for="i in teamates" :key="i.userid"
            class="member-card flex flex-shrink-0 min-w-120 mr-15 p-15"
            @click="toHomePage(i)">
            <image class="flex-shrink-0 avatar mr-10" :src="i.avatar || '/static/default-avatar.png'" />
            <view class="flex-grow flex flex-col justify-between">
              <view>
                <view class="leading-normal h-24 text-base font-semibold text-dark whitespace-nowrap">
                  {{ i.anotherName }}
                </view>
                <view class="max-w-100 h-21 leading-normal text-sm text-gray truncate">
                  {{ memberJob[i.userid] }}
                </view>
              </view>
              <view v-if="i.canAddFriend" class="add-friend-btn text-sm leading-none text-center text-primary"
                @click.stop="toQrcode(i)">
                添加好友
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script setup>
import { computed, watch } from 'vue'
import useJob from '@/hooks/useJob';
const props = defineProps({
  team: {
    type: Object,
    default: () => ({})
  }
})

const { memberJob, memberList } = useJob();

const teamates = computed(() => {
  const friendlyMembers = props.team && Array.isArray(props.team.friendlyMembers) ? props.team.friendlyMembers : [];
  const memberList = props.team && Array.isArray(props.team.memberList) ? props.team.memberList : [];
  return memberList.map(i => ({ ...i, canAddFriend: friendlyMembers.includes(i.userid) }))
})

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

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

function toTeamDetail() {
  uni.navigateTo({ url: `/pages/team/team-detail?teamId=${props.team.teamId}&corpId=${props.team.corpId}&corpName=${encodeURIComponent(props.team.corpName)}` })
}

watch(teamates, val => {
  console.log(val)
  memberList.value = val;
}, { immediate: true })

</script>
<style scoped>
.team-mate-container {
  margin: 0 30rpx;
  margin-top: 24rpx;
}

.arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

.member-card {
  background: white;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}

.member-card:active {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 120rpx;
  height: 128rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

.add-friend-btn {
  width: 144rpx;
  padding: 10rpx 0;
  background: #EAF2FF;
  color: #2F6BFF;
  border-radius: 12rpx;
  margin-top: 10rpx;
  font-weight: 500;
}

.h-24 {
  min-height: 48rpx;
}

.h-21 {
  min-height: 42rpx;
}

.min-w-120 {
  min-width: 260rpx;
}

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

.mr-15 {
  margin-right: 24rpx;
}
</style>