155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<template>
|
|
<view class="team-mate-container">
|
|
<view class="flex items-center justify-between">
|
|
<view class="module-title">团队成员</view>
|
|
<view class="flex items-center" @click="toTeamDetail()">
|
|
<view class="mr-5 text-base text-gray">团队详情</view>
|
|
<image class="arrow-icon" src="/static/home/arrow-right-gray.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.svg'" />
|
|
<view class="flex-grow flex flex-col justify-between">
|
|
<view>
|
|
<view class="member-name leading-normal h-24 text-base font-semibold text-dark whitespace-nowrap">
|
|
{{ i.anotherName }}
|
|
</view>
|
|
<view class="member-job 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: 128rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
padding: 0;
|
|
background: rgba(6, 91, 214, 0.10);
|
|
color: #065BD6;
|
|
border-radius: 8rpx;
|
|
margin-top: 10rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.module-title {
|
|
color: #000000;
|
|
font-size: 36rpx;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.member-job {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.member-name {
|
|
color: #333333;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.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> |