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

<template>
  <view class="mt-12 px-15 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>
      <uni-icons type="right" color="#999"></uni-icons>
    </view>
  </view>
  <view class="px-15 mt-10">
    <scroll-view scroll-x="true">
      <view class="flex flex-nowrap pb-5 border-b">
        <view v-for="i in teamates" :key="i.userid"
          class="flex flex-shrink-0 min-w-120 p-10 mr-10 rounded-sm border-auto text-primary bg-white"
          @click="toHomePage(i)">
          <image class="flex-shrink-0 avatar mr-5" :src="i.avatar || '/static/default-avatar.png'" />
          <view class="flex-grow flex flex-col">
            <view class="leading-normal h-24 text-lg font-semibold text-dark whitespace-nowrap">
              {{ i.anotherName }}
            </view>
            <view class="max-w-100 h-21 leading-normal text-base text-gray truncate">
              {{ memberJob[i.userid] }}
            </view>
            <view v-if="i.canAddFriend" class="w-80 text-base leading-none border text-center text-dark rounded-full"
              @click.stop="toQrcode(i)">
              添加好友
            </view>
          </view>
        </view>
      </view>
    </scroll-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>
.avatar {
  width: 120rpx;
  height: 128rpx;
}

.h-24 {
  height: 48rpx;
}

.h-21 {
  height: 42rpx;
}

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

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

.w-80 {
  width: 160rpx;
}
</style>