YingXingAI/pages/AlumniCircle/userDetail/userDetail.vue

813 lines
23 KiB
Vue
Raw Normal View History

2025-06-30 14:43:02 +08:00
<template>
<view>
<u-navbar back-text="" title="个人主页"></u-navbar>
<!-- 用户信息详情 -->
<view class="user-detail">
<!-- 背景图 -->
<view class="user-bg">
<image :src="mybg"></image>
</view>
<!-- 详细信息 -->
<view class="user-detail-info">
<view class="user-detail-top">
<!-- 头像 私信 关注 -->
<view class="user-avatar-box">
<view class="user-detail-info-avatar">
<u-avatar class="image_2" size="144" :src="$u.http.config.imgUrl + userInfo.baseData.head">
</u-avatar>
</view>
<view class="user-operate">
<u-button shape="circle" v-if="userInfo.carewState&&vuex_user.id !== userId" :type="userInfo.carewState.includes('未关注') ? 'primary' : 'default'" @click="onFollow">{{
userInfo.carewState.includes('未关注')?'关注':userInfo.carewState }}</u-button>
<view class="user-message" @click="GoChat" v-if="vuex_user.id !== userId">
<image src="/static/common/img/homepage/message.png"></image>
</view>
<view v-else style="height: 96rpx;"></view>
</view>
</view>
<!-- 用户姓名 -->
<view class="user-name">
<text>{{ attestation.name||userInfo.baseData.name || "-" }}</text>
<image v-if="userInfo.isCertifyStatus" src="/static/common/img/homepage/frame.png"></image>
</view>
<!-- 用户学校信息 -->
<view class="user-school" v-if="baseShow === true && otherUserType === 0">
<text>{{ findRow.schoolName || "-" }}</text>
<!-- 学院 -->
<text v-if="findRow.college">{{
findRow.college
}}</text>
<text class="text_2" style="margin-right: 0.05rem" v-if="findRow.major">{{ findRow.major }}</text>
<!-- 年级 -->
<text class="text_2" v-if="findRow.startYear">{{
findRow.startYear + "级"
}}</text>
</view>
<!-- 用户地址 先不放开 -->
<view class="user-identity"> </view>
<!-- 获赞 粉丝 关注 -->
<!-- <view class="user-like">
<view class="likes" v-for="(item, index) in userlikes" :key="index">
<text class="like-num">{{ item.num }}</text>
<text class="like-name">{{ item.name }}</text>
</view>
</view> -->
<view class="user-tabs">
<view class="user-tabs-item" :class="{ 'tabs-active': swiperCurrent == index }"
v-for="(item, index) in userTabs" :key="index" @click="tabsChange(index)">
<image :src="swiperCurrent == index ? item.selectedImage : item.image"></image>
<text>{{ item.name }}</text>
</view>
</view>
</view>
<view class="content">
<view class="release-content" v-if="swiperCurrent == 0">
<information :list="userList" @onStar="onStar" type="1" :schoolId="schoolId" route="2" :flag="type" :borderRadius="true">
</information>
</view>
<view class="user-info" v-if="swiperCurrent == 1">
<view class="userinfo-box" v-if="userInfo">
<view class="userinfo-title">
<text>基本信息</text>
</view>
<view class="userinfo-detail">
<view class="justify-between detail-row">
<text class="detail-title">手机号码</text>
<text class="detail-content">{{ userInfo.baseData.phone }}</text>
</view>
<view class="justify-between detail-row">
<text class="detail-title">年龄</text>
<text class="detail-content">{{
userInfo.baseData.age
}}</text>
</view>
<view class="justify-between detail-row">
<text class="detail-title">现居地</text>
<text class="detail-content">{{
userInfo.baseData.address
}}</text>
</view>
<view class="justify-between detail-row">
<text class="detail-title">工作领域</text>
<text class="detail-content">{{
userInfo.baseData.workField
}}</text>
</view>
</view>
</view>
<!-- 教育经历 -->
<view class="" v-if="userInfo && otherUserType === 0">
<view class="userinfo-title"><text class="">教育经历</text>
</view>
<view class="userinfo-detail">
<view class="detail-row school-row" v-for="(item, index) in userInfo.edcationList"
v-if="item.certifyStatus == 1 || true" :key="index">
<view class="detail-row-item">
<image :src="$u.http.config.imgUrl + item.schoolLogo.slice(1)" />
<view class="school-info">
<view class="school-name">
<view class="text_24">{{ item.schoolName }}</view>
<view class="text_25 status-box" :class="item.certifyStatus == 0
? 'color2'
: item.certifyStatus == 1
? 'color1'
: 'color3'
">{{ certifyArr[item.certifyStatus] }}</view>
</view>
<view class="professional-info">
<view>{{ item.startYear }}</view>
<view class="text_27">{{ item.major }}</view>
<view class="text_28">{{ item.educationStr }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 任职院校 -->
<view class="" v-if="userInfo && otherUserType === 1">
<view class="userinfo-title"><text class="text_21">任职院校</text>
</view>
<view class="userinfo-detail">
<view class="detail-row school-row" v-for="(item, index) in userInfo.edcationList"
v-if="item.certifyStatus == 1 || true" :key="index">
<view class="detail-row-item">
<image :src="$u.http.config.imgUrl + item.logo.slice(1)" class="image_17" />
<view class="school-info">
<view class="school-name">
<text class="text_24">{{ item.school }}</text>
<text class="text_25 status-box" :class="item.certifyStatus == 0
? 'color2'
: item.certifyStatus == 1
? 'color1'
: 'color3'
">{{ certifyArr[item.certifyStatus] }}</text>
</view>
<view class="flex-row group_20">
<text>{{ item.schoolJob }}</text>
<!-- <text>{{item.startYear}}年入学</text> -->
<!-- <text class="text_27">{{item.major}}</text> -->
<!-- <text class="text_28">{{item.educationStr}}</text> -->
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import information from "../../../components/Information.vue";
import release from "@/static/common/img/homepage/released.png";
import releaseSelected from "@/static/common/img/homepage/released-selected.png";
import person from "@/static/common/img/homepage/person.png";
import personSelected from "@/static/common/img/homepage/person-selected.png";
import mybg1 from '@/static/common/img/my/mybg1.png'
import mybg2 from '@/static/common/img/my/mybg2.png'
import mybg3 from '@/static/common/img/my/mybg3.png'
import mybg4 from '@/static/common/img/my/mybg4.png'
import mybg5 from '@/static/common/img/my/mybg5.png'
import mybg6 from '@/static/common/img/my/mybg6.png'
import mybg7 from '@/static/common/img/my/mybg7.png'
import mybg8 from '@/static/common/img/my/mybg8.png'
import mybg9 from '@/static/common/img/my/mybg9.png'
import mybg10 from '@/static/common/img/my/mybg10.png'
import mybg11 from '@/static/common/img/my/mybg11.png'
import mybg12 from '@/static/common/img/my/mybg12.png'
import mybg13 from '@/static/common/img/my/mybg13.png'
import mybg14 from '@/static/common/img/my/mybg14.png'
import mybg15 from '@/static/common/img/my/mybg15.png'
import mybg16 from '@/static/common/img/my/mybg16.png'
import mybg17 from '@/static/common/img/my/mybg17.png'
import mybg18 from '@/static/common/img/my/mybg18.png'
import mybg19 from '@/static/common/img/my/mybg19.png'
import mybg20 from '@/static/common/img/my/mybg20.png'
export default {
components: {
information: information,
},
data() {
return {
userId: "",
swiperCurrent: 0,
current: 0,
schoolId: "",
type: "",
userList: [],
navList: [
{
name: "个人信息",
},
{
name: "Ta的发布",
},
],
certifyArr: {
0: "未认证",
1: "已认证",
2: "审核中",
},
userInfo: {},
word: "",
otherUserType: true,
attestation: {},
// 基础信息
findRow: {},
// 企业信息
qyRow: {},
// 企业与基础信息切换
baseShow: true,
// 企业按钮是否存在
qyShow: false,
userlikes: [
{
num: 200,
name: "获赞",
},
{
num: 200,
name: "粉丝",
},
{
num: 200,
name: "关注",
},
],
userTabs: [
{
image: release,
selectedImage: releaseSelected,
name: "发布",
},
{
image: person,
selectedImage: personSelected,
name: "个人信息",
},
],
mybg1,
mybg2,
mybg3 ,
mybg4 ,
mybg5 ,
mybg6 ,
mybg7 ,
mybg8 ,
mybg9 ,
mybg10,
mybg11,
mybg12,
mybg13,
mybg14,
mybg15,
mybg16,
mybg17,
mybg18,
mybg19,
mybg20,
mybg: '',
};
},
computed: {
randomBg() {
const bgArray = [
this.mybg1, this.mybg2, this.mybg3, this.mybg4, this.mybg5,
this.mybg6, this.mybg7, this.mybg8, this.mybg9, this.mybg10,
this.mybg11, this.mybg12, this.mybg13, this.mybg14, this.mybg15,
this.mybg16, this.mybg17, this.mybg18, this.mybg19, this.mybg20
];
const randomIndex = Math.floor(Math.random() * bgArray.length);
return bgArray[randomIndex];
}
},
created() {
this.mybg = this.randomBg;
},
onLoad(e) {
if (!e.id) {
uni.switchTab({
url: "../../main/index/index",
});
return;
}
this.type = e.type;
this.userId = e.id;
this.word = e.word;
// this.getDetail();
// this.getUserSchool();
},
onShow() {
this.getDetail();
this.mybg = this.randomBg;
// 改为在getDetail中调接口
/* if (this.current == 0) {
setTimeout(() => {
this.getUserHelp();
}, 500);
} */
},
methods: {
lookQY() {
console.log(7777777);
},
getUserHelp() {
console.log('this.findRow--------------',this.findRow);
const data = {
userId: this.userId,
schoolId:this.findRow.schoolId,
pageIndex: 1,
pageSize: 10,
};
this.$u.apiList.Publishs(data).then((res) => {
this.userList = res.items;
});
// 改成只能看本校的
/* this.$u.apiList.UserHelp(data).then((res) => {
this.userList = res.items;
}); */
},
getDetail() {
this.$u.api
.getUserInfo({
userId: this.userId,
})
.then((res) => {
console.log('res-----',res);
this.userInfo = res;
this.attestation = Object.assign(this.attestation, res.attestation);
this.otherUserType = res.userType;
// console.log(this.userInfo, 1)
this.findRow = res.edcationList[0];
if (res.qyAttestation) {
this.qyShow = true;
this.qyRow = res.qyAttestation;
}
// 获取个人信息、拿到学校id之后 再查发布需要学校id
this.getUserHelp();
});
},
// 去聊天
GoChat() {
uni.navigateTo({
url:
"../../message/dialogBox/dialogBox?id=" + this.userId + "&chatType=0",
});
},
// tabs通知swiper切换
tabsChange(index) {
if (index == 0) {
this.getUserHelp();
}
this.swiperCurrent = index;
},
// swiper-item左右移动通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问速切题快换swiper不会触发dx的连续变化需要在结束时重置状态
// swiper滑动结束分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
onFollow() {
const data = {
userId: this.vuex_user.id,
carewId: this.userId,
};
this.$u.apiList.InsertOrDelFollow(data).then((res) => {
this.getDetail();
});
},
getUserSchool() {
this.$u.apiList.GetUserSchool().then((res) => {
// 学生时
if ([0,2].includes(this.vuex_user.userType)) {
this.schoolId = res.items.schoolId;
}
// 教师时
if (this.vuex_user.userType === 1) {
this.schoolId = res.jzgItems.schoolId;
}
});
},
async onStar(val) {
console.log("收藏--");
// 判断当前学校是否认证,未认证不可收藏
const req = {
userId: this.vuex_user.id,
};
const result = await this.$u.apiList.MyPage(req);
console.log(JSON.parse(JSON.stringify(result)), "result");
const edcationList = result.edcationList;
if (!edcationList.length) {
return this.$refs.uToast.show({
title: "认证后可进行收藏操作",
type: "none",
});
}
// const findRow = edcationList.find((x) => x.isSelected === true);
const findRow = edcationList[0];
if ([0, 2].includes(findRow.certifyStatus)) {
return this.$refs.uToast.show({
title: "认证后可进行收藏操作",
type: "none",
});
}
// return
const data = {
id: val.id,
type: val.type,
};
this.$u.apiList
.LikeCollect(data)
.then((res) => {
if (val.type == 0) {
if (val.isCllect) {
val.isCllect = false;
val.collectCount -= 1;
this.$refs.uToast.show({
title: "取消收藏成功",
type: "success",
});
} else {
val.isCllect = true;
val.collectCount += 1;
this.$refs.uToast.show({
title: "收藏成功",
type: "success",
});
}
} else if (val.type == 1) {
if (val.isCllect) {
val.isCllect = false;
val.collectCount -= 1;
this.$refs.uToast.show({
title: "取消收藏成功",
type: "success",
});
} else {
val.isCllect = true;
val.collectCount += 1;
this.$refs.uToast.show({
title: "收藏成功",
type: "success",
});
}
}
})
.catch((err) => {
this.$refs.uToast.show({
title: "收藏失败",
type: "error",
});
});
},
//返回上一级
router() {
if (this.type == 0) {
uni.switchTab({
url: "../../message/msgList/msgList",
});
} else if (this.type == 1) {
uni.navigateTo({
url:
"../../message/dialogBox/dialogBox?id=" +
this.userId +
"&chatType=0&type=0",
});
} else if (this.type == 2) {
this.$u.route({
url: "pages/AlumniCircle/Alumni/Alumni",
});
} else if (this.type == 3) {
let url = "pages/main/search/search";
if (this.word) {
url = "pages/main/search/search?word=" + this.word;
}
this.$u.route({
url: url,
});
} else if (this.type == 4) {
uni.navigateBack({
delta: 1,
});
} else {
uni.switchTab({
url: "pages/main/index/index",
});
}
},
// scroll-view到底部加载更多
onreachBottom() { },
},
};
</script>
<style lang="scss" scoped>
.user-detail {
position: relative;
background: #f6f8fa;
width: 100%;
min-height: 100vh;
}
.user-bg {
position: absolute;
width: 100%;
height: 320rpx;
overflow: hidden;
image {
width: 100%;
object-fit: cover;
}
}
.user-detail-info {
width: 100%;
position: absolute;
top: 320rpx;
.user-detail-top {
padding: 0 48rpx;
background: #fff;
}
.user-avatar-box {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
.user-operate {
display: flex;
flex-direction: row-reverse;
align-items: center;
width: 300rpx;
justify-content: space-between;
padding-top: 20rpx;
.user-message {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
background: #f6f8f9;
display: flex;
align-items: center;
justify-content: center;
image {
width: 48rpx;
height: 48rpx;
}
}
}
}
.user-detail-info-avatar {
width: 154rpx;
height: 154rpx;
border-radius: 50%;
background-color: #fefcff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -50rpx;
left: 48rpx;
}
}
.user-name {
margin-top: 15rpx;
margin-bottom: 16rpx;
font-size: 32rpx;
font-weight: 800;
color: #1f2232;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
margin-left: 10rpx;
}
}
.user-school {
text {
display: inline-block;
background: #f6f8f9;
height: 60rpx;
line-height: 60rpx;
padding: 0 10rpx;
margin-right: 16rpx;
font-size: 24rpx;
margin-bottom: 16rpx;
}
}
.user-like {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30rpx 30rpx;
.likes {
display: flex;
flex-direction: column;
align-items: center;
.like-num {
font-weight: 800;
font-size: 36rpx;
color: #1f2232;
}
.like-name {
font-weight: 500;
font-size: 24rpx;
color: #616977;
}
}
}
.user-tabs {
display: flex;
flex-direction: row;
justify-content: space-between;
.user-tabs-item {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 4rpx solid #fff;
padding-bottom: 20rpx;
color: #8697ac;
font-weight: bold;
image {
width: 48rpx;
height: 48rpx;
margin-right: 20rpx;
}
}
.tabs-active {
border-bottom: 4rpx solid #48adde;
text {
color: #3cb5fb;
}
}
}
.user-info {
padding: 32rpx;
}
.userinfo-title {
font-weight: bold;
font-size: 32rpx;
color: rgba(0, 0, 0, 0.9);
height: 60rpx;
}
.userinfo-box {
margin-bottom: 32rpx;
}
.userinfo-detail {
padding:10rpx 32rpx;
background: #fff;
border-radius: 32rpx;
border: 3rpx solid;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)) 3 3;
.detail-row {
height: 106rpx;
line-height: 106rpx;
border-bottom: 2rpx solid #F6F8F9;
&:last-child {
border-bottom: none;
}
.detail-title {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.9);
}
.detail-content {
font-size: 28rpx;
color: rgba(0, 0, 0, 0.6);
}
image {
width: 102rpx;
height: 102rpx;
}
.detail-row-item {
height: 106rpx;
display: flex;
flex-direction: row;
align-items: center;
image {
margin-right: 30rpx;
}
}
.school-info {
display: flex;
flex-direction: column;
height: 102rpx;
.school-name {
// height: 50%;
height: 51rpx;
line-height: 51rpx;
font-weight: bold;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.9);
view {
display: inline-block;
}
}
.professional-info {
height: 51rpx;
line-height: 51rpx;
view {
display: inline-block;
margin-right: 20rpx;
font-size: 24rpx;
color: #8697AC;
}
}
}
}
.school-row {
// line-height: 126rpx;
height: 126rpx;
display: flex;
align-items: center;
}
.status-box{
width: 100rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 12rpx;
font-size: 24rpx;
margin-left: 20rpx;
font-weight: normal;
display: inline-block;
&.color1 {
background-color: #3cb4fb;
color: #fff;
}
&.color2 {
background-color: #ffeceb;
color: #ff453a;
}
&.color3 {
background-color: #FFB800;
color: #fff;
}
}
}
</style>