<template>
|
<ContentView>
|
<div class="user-home-page-top-view">
|
<div class="user-home-page-avatar">
|
<UserInfoAvatar
|
:src="userSimpleInfo.avatarUrl ? setOSSLink(userSimpleInfo.avatarUrl) : ''"
|
:name="userSimpleInfo.contact ?? ''"
|
:company="userSimpleInfo.enterpriseName ?? ''"
|
></UserInfoAvatar>
|
<template v-if="userDetail && userId !== userDetail.userId">
|
<nut-button
|
type="primary"
|
v-if="userTotalInfo.isFollow"
|
plain
|
class="follow-btn"
|
@click="handleFollowUser()"
|
>已关注</nut-button
|
>
|
<nut-button type="primary" v-else class="follow-btn" @click="handleFollowUser()"
|
>关注</nut-button
|
>
|
</template>
|
</div>
|
<div class="user-home-page-info-wrapper">
|
<div class="user-home-page-info">
|
<div class="user-home-page-info-item" v-if="userSimpleInfo?.phoneNumber">
|
<img :src="IconPhone" class="user-home-page-info-item-icon" />
|
<div class="user-home-page-info-item-text">{{ userSimpleInfo?.phoneNumber ?? '' }}</div>
|
</div>
|
<div class="user-home-page-info-item" v-if="userSimpleInfo?.userInfoEmailAddress">
|
<img :src="IconEmail" class="user-home-page-info-item-icon" />
|
<div class="user-home-page-info-item-text">
|
{{ userSimpleInfo?.userInfoEmailAddress ?? '' }}
|
</div>
|
</div>
|
<div class="user-home-page-info-item" v-if="address">
|
<img :src="IconAddress" class="user-home-page-info-item-icon" />
|
<div class="user-home-page-info-item-text">{{ address }}</div>
|
</div>
|
</div>
|
<img
|
v-if="!!userSimpleInfo?.wxQrCodeUrl"
|
:src="setOSSLink(userSimpleInfo?.wxQrCodeUrl)"
|
class="user-home-page-qrcode"
|
/>
|
</div>
|
</div>
|
</ContentView>
|
<div class="user-home-tabs-wrapper">
|
<ProTabs v-model="tab" name="user-home-tabs" class="user-home-tabs" flexTitle fullHeight>
|
<ProTabPane title="动态" pane-key="1">
|
<FriendView :userId="userId" />
|
</ProTabPane>
|
<ProTabPane title="供人" pane-key="3">
|
<UserResourceList :userId="userId" />
|
</ProTabPane>
|
<ProTabPane title="招聘" pane-key="4">
|
<UserOrderList :userId="userId" />
|
</ProTabPane>
|
</ProTabs>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ProTabs, ProTabPane } from '@12333/components';
|
import IconPhone from '@/assets/user/icon-phone.png';
|
import IconEmail from '@/assets/user/icon-email.png';
|
import IconAddress from '@/assets/user/icon-address.png';
|
import { useUser, useFollowUser, useUserTotalInfo, useUserSimpleInfo } from '@/hooks';
|
import Taro from '@tarojs/taro';
|
import { RouterPath } from '@/constants';
|
import { Message, setOSSLink, filterJoin } from '@12333/utils';
|
import FriendView from '../../friendCircle/components/FriendView/FriendView.vue';
|
import UserOrderList from './UserOrderList.vue';
|
import UserResourceList from './UserResourceList.vue';
|
|
defineOptions({
|
name: 'InnerPage',
|
});
|
|
const router = Taro.useRouter();
|
|
const userId = router.params?.userId ?? '';
|
|
const tab = ref('1');
|
|
const { userTotalInfo, refetch } = useUserTotalInfo({
|
userId: userId,
|
});
|
|
const { userSimpleInfo } = useUserSimpleInfo({
|
userId: userId,
|
});
|
|
const { userDetail } = useUser();
|
|
const isSelf = computed(() => userDetail.value?.userId == userId);
|
|
const { followUser, unFollowUser } = useFollowUser({
|
onFollowSuccess: () => {
|
Message.success('已关注');
|
refetch({ type: 'inactive' });
|
},
|
onUnFollowSuccess: () => {
|
Message.success('已取消关注');
|
refetch({ type: 'inactive' });
|
},
|
});
|
|
const handleFollowUser = async () => {
|
try {
|
if (userTotalInfo.value.isFollow) {
|
await unFollowUser({
|
userId: userDetail.value?.userId,
|
followUserId: userId,
|
});
|
} else {
|
await followUser({
|
userId: userDetail.value?.userId,
|
followUserId: userId,
|
});
|
}
|
} catch (error) {}
|
};
|
|
function goChatRoom() {
|
Taro.navigateTo({
|
url: `${RouterPath.chatRoom}?chatId=${userId}`,
|
});
|
}
|
|
const address = computed(() =>
|
filterJoin(
|
[
|
userSimpleInfo.value.provinceName ?? '',
|
userSimpleInfo.value.cityName ?? '',
|
userSimpleInfo.value.countyName ?? '',
|
],
|
''
|
)
|
);
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.user-page-wrapper {
|
.user-home-page-top-view {
|
.user-home-page-avatar {
|
display: flex;
|
margin-bottom: 36px;
|
align-items: center;
|
|
.follow-btn {
|
height: 56px;
|
}
|
}
|
}
|
|
.user-home-page-info-wrapper {
|
display: flex;
|
margin-bottom: 40px;
|
|
.user-home-page-info {
|
flex: 1;
|
min-width: 0;
|
margin-right: 12px;
|
|
.user-home-page-info-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 6px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.user-home-page-info-item-icon {
|
width: 32px;
|
height: 32px;
|
margin-right: 16px;
|
}
|
|
.user-home-page-info-item-text {
|
font-weight: 400;
|
font-size: 28px;
|
color: #ffffff;
|
line-height: 40px;
|
flex: 1;
|
min-width: 0;
|
@include ellipsis;
|
}
|
}
|
}
|
|
.user-home-page-qrcode {
|
width: 144px;
|
height: 144px;
|
border-radius: 8px;
|
margin-right: 28px;
|
}
|
}
|
|
.user-home-tabs-wrapper {
|
background: #f9f9fb;
|
flex: 1;
|
min-height: 0;
|
border-radius: 40px 40px 0px 0px;
|
|
.user-home-tabs {
|
border-radius: 40px 40px 0px 0px;
|
|
.pro-tabs__titles_wrapper {
|
margin-bottom: 24px;
|
}
|
}
|
}
|
}
|
</style>
|
