1345 lines
37 KiB
Vue
1345 lines
37 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<u-navbar
|
||
:border-bottom="false"
|
||
title="个人资料"
|
||
:custom-back="back"
|
||
></u-navbar>
|
||
<view v-if="step == 0" class="flex-col group_2">
|
||
<!-- <h3 class="text_3">个人资料设置</h3> -->
|
||
<view class="flex-col items-center group_1">
|
||
<u-avatar
|
||
:mode="shape"
|
||
:src="headerImg"
|
||
@click="chooseAvatar"
|
||
size="260"
|
||
/>
|
||
<text class="text_4">请上传头像</text>
|
||
</view>
|
||
<view class="flex-col group_5 input-box">
|
||
<u-input
|
||
type="text"
|
||
:maxlength="8"
|
||
v-model="form.userName"
|
||
placeholder="请输入用户名称"
|
||
class="text-wrapper view"
|
||
/>
|
||
</view>
|
||
<view class="flex-col input-box" style="margin-top: 16px">
|
||
<u-input
|
||
type="text"
|
||
:maxlength="8"
|
||
v-model="form.name"
|
||
placeholder="请输入真实的姓名"
|
||
class="text-wrapper view"
|
||
/>
|
||
</view>
|
||
<view class="flex-col group_3">
|
||
<text class="text_7" style="margin-bottom: 26px">性别</text>
|
||
<u-radio-group
|
||
v-model="form.sex"
|
||
placement="row"
|
||
name="sexGroup"
|
||
width="50%"
|
||
>
|
||
<u-radio
|
||
v-for="(item, index) in sexOptions"
|
||
:key="index"
|
||
:name="item.value"
|
||
>
|
||
{{ item.label }}
|
||
</u-radio>
|
||
</u-radio-group>
|
||
<!-- <view
|
||
class="flex-col items-center group_6"
|
||
@click="form.sex = '男'"
|
||
:class="{ on: form.sex === '男' }"
|
||
>
|
||
<image src="/static/common/img/male.png" class="image_4" />
|
||
<text class="text_8">男</text>
|
||
</view>
|
||
<view
|
||
class="flex-col items-center group_4"
|
||
@click="form.sex = '女'"
|
||
:class="{ on: form.sex === '女' }"
|
||
>
|
||
<image src="/static/common/img/female.png" class="image_4" />
|
||
<text class="text_9">女</text>
|
||
</view> -->
|
||
</view>
|
||
<u-button
|
||
shape="circle"
|
||
class="button text-wrapper_1"
|
||
type="primary"
|
||
@click="next"
|
||
>下一步</u-button
|
||
>
|
||
</view>
|
||
<u-navbar
|
||
:custom-back="back"
|
||
v-if="step == 1"
|
||
:border-bottom="false"
|
||
:background="background"
|
||
>
|
||
</u-navbar>
|
||
<view v-if="step == 1" class="flex-col group_3 userList">
|
||
<h3 class="text_3">填写学校信息</h3>
|
||
<view class="flex-col group_4">
|
||
<view class="justify-between list-item group_5">
|
||
<text class="text_8">学历</text>
|
||
<view class="item-right">
|
||
<view class="input-cover" @click="educationalShow = true"></view>
|
||
<u-input
|
||
v-model="form.educationStr"
|
||
placeholder="请选择学历"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<u-action-sheet
|
||
:list="educationalList"
|
||
v-model="educationalShow"
|
||
@click="educationalSelect"
|
||
>
|
||
</u-action-sheet>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="justify-between list-item">
|
||
<text class="text_8">学校</text>
|
||
<view class="item-right">
|
||
<view class="input-cover" @click="shoolShow = true"></view>
|
||
<u-input
|
||
v-model="shoolName"
|
||
placeholder="请选择学校"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
<u-select
|
||
v-model="shoolShow"
|
||
:default-value="defaultTime"
|
||
mode="single-column"
|
||
title="学校选择"
|
||
:list="shoolList"
|
||
@confirm="shoolSelect"
|
||
>
|
||
</u-select>
|
||
</view>
|
||
</view>
|
||
<view class="justify-between list-item">
|
||
<text class="text_8">学院</text>
|
||
<view class="item-right">
|
||
<view class="input-cover" @click="collegeShow = true"></view>
|
||
<u-input
|
||
v-model="form.college"
|
||
placeholder="请选择学院"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<u-select
|
||
v-model="collegeShow"
|
||
mode="single-column"
|
||
:list="CollegeList"
|
||
@confirm="selectCpllege"
|
||
></u-select>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="justify-between list-item">
|
||
<text class="text_8">专业</text>
|
||
<view class="item-right">
|
||
<view class="input-cover" @click="majorShow = true"></view>
|
||
<u-input
|
||
v-model="form.major"
|
||
placeholder="请选择专业"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<u-select
|
||
v-model="majorShow"
|
||
mode="single-column"
|
||
:list="MajorList"
|
||
@confirm="selectMajor"
|
||
></u-select>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="justify-between list-item">
|
||
<text class="text_8">时间</text>
|
||
<view class="item-right">
|
||
<view class="input-cover" @click="timeShow = true"></view>
|
||
<u-input
|
||
v-model="showTime"
|
||
placeholder="请选择时间"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<u-select
|
||
v-model="timeShow"
|
||
:default-value="defaultTime"
|
||
mode="mutil-column"
|
||
title="在校时间"
|
||
:list="timeList"
|
||
@confirm="confirm"
|
||
>
|
||
</u-select>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="isGraduate">
|
||
<h3 class="text_3">就业信息</h3>
|
||
<view class="flex-col group_4">
|
||
<view class="justify-between list-item">
|
||
<text class="text_8">行业领域</text>
|
||
<view class="item-right">
|
||
<view
|
||
class="input-cover"
|
||
@click="workAreaPopupShow = true"
|
||
></view>
|
||
<u-input
|
||
v-model="selectedWorkArea"
|
||
placeholder="请选择行业"
|
||
inputAlign="right"
|
||
disabled
|
||
/>
|
||
<u-select
|
||
v-model="workAreaPopupShow"
|
||
mode="single-column"
|
||
title="行业领域"
|
||
:list="WorkAreaList"
|
||
@confirm="workAreaSelect"
|
||
>
|
||
</u-select>
|
||
<image
|
||
src="/static/common/img/row_right.png"
|
||
class="right-img"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<u-button
|
||
shape="circle"
|
||
class="button text-wrapper_1"
|
||
type="primary"
|
||
@click="complete"
|
||
>完成</u-button
|
||
>
|
||
</view>
|
||
|
||
<view v-if="step == 2" class="flex-col preference-page">
|
||
<u-navbar title="推荐偏好" :border-bottom="false" :custom-back="back" />
|
||
|
||
<view class="selected-count">
|
||
已选择（{{ selectedPreferences.length }}/10）
|
||
<text class="desc"
|
||
>您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-个人信息中修改。</text
|
||
>
|
||
</view>
|
||
|
||
<view class="selected-tags">
|
||
<view
|
||
v-for="item in selectedPreferences"
|
||
:key="item.lableName"
|
||
class="tag selected"
|
||
>
|
||
{{ item.lableName }}
|
||
<image
|
||
class="close-btn"
|
||
src="/static/common/img/handDelete.png"
|
||
@click.stop="removePreference(item)"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="all-tags">
|
||
<view class="title">行业领域</view>
|
||
<view class="tags-list">
|
||
<view
|
||
v-for="(item, index) in industryList"
|
||
:key="item.lableId"
|
||
class="industry-tag"
|
||
:class="{ selected: selectedIndustryId === item.lableId }"
|
||
@click="handleIndustrySelect(index)"
|
||
>{{ item.lableName }}</view
|
||
>
|
||
</view>
|
||
<view class="title">行业方向</view>
|
||
<view class="tags-list industry-tag-list">
|
||
<view
|
||
v-for="item in industryDirectionList"
|
||
:key="item.lableName"
|
||
class="industry-tag"
|
||
:class="{ selected: selectedPreferences.includes(item) }"
|
||
@click="togglePreference(item)"
|
||
>{{ item.lableName }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="line-shadow"></view>
|
||
<view class="btn-box">
|
||
<u-button shape="circle" class="button" type="primary" @click="nextStep"
|
||
>下一步</u-button
|
||
>
|
||
</view>
|
||
</view>
|
||
<view v-if="step == 3" class="flex-col preference-page">
|
||
<u-navbar title="推荐偏好" :border-bottom="false" :custom-back="back" />
|
||
<view class="selected-count">
|
||
已选择（{{ selectedInterests.length }}/10）
|
||
<text class="desc"
|
||
>您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-个人信息中修改。</text
|
||
>
|
||
</view>
|
||
|
||
<view class="selected-tags">
|
||
<view
|
||
v-for="item in selectedInterests"
|
||
:key="item.lableId"
|
||
class="tag selected"
|
||
>
|
||
{{ item.lableName }}
|
||
<image
|
||
class="close-btn"
|
||
src="/static/common/img/handDelete.png"
|
||
@click.stop="removeInterest(item)"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="all-tags">
|
||
<view class="title">兴趣爱好</view>
|
||
<view class="tags-list">
|
||
<view
|
||
v-for="item in interestList"
|
||
:key="item.lableId"
|
||
class="tag"
|
||
:class="{ selected: selectedInterests.includes(item) }"
|
||
@click="toggleInterest(item)"
|
||
>{{ item.lableName }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="line-shadow"></view>
|
||
<view class="btn-box">
|
||
<u-button
|
||
shape="circle"
|
||
class="button"
|
||
type="primary"
|
||
@click="finishPreference"
|
||
>完成</u-button
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<u-top-tips :z-index="999" ref="uTips" :navbar-height="0"></u-top-tips>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headerImg from "@/static/common/img/headerImg.png";
|
||
export default {
|
||
data() {
|
||
return {
|
||
step: 0,
|
||
headerImg: headerImg,
|
||
shoolName: "",
|
||
showTime: "",
|
||
form: {
|
||
userId: "", //用户id
|
||
name: "", //名字
|
||
userName: "", //用户名
|
||
sex: "男", //性别
|
||
path: "", //头像
|
||
educationStr: "", //学历
|
||
schoolId: "", //学校
|
||
college: "", //学院
|
||
major: "", //专业
|
||
startYear: "", //开始时间
|
||
endYear: "", //结束时间,
|
||
collegeId: "", //学院id
|
||
majorId: "", //专业id
|
||
list: [],
|
||
},
|
||
studentId: '', //在校生id
|
||
sexOptions: [
|
||
{ label: "男生", value: "男" },
|
||
{ label: "女生", value: "女" },
|
||
],
|
||
background: {
|
||
backgroundColor: "#f6f8fa",
|
||
},
|
||
value: "",
|
||
defaultTime: "",
|
||
show: false,
|
||
educationalShow: false,
|
||
educationalList: [
|
||
//学历选择列表
|
||
{
|
||
text: "大专",
|
||
},
|
||
{
|
||
text: "本科",
|
||
},
|
||
{
|
||
text: "硕士研究生",
|
||
},
|
||
{
|
||
text: "博士研究生",
|
||
},
|
||
],
|
||
shoolShow: false,
|
||
shoolList: [], //学校选择
|
||
CollegeList: [], //学院选择
|
||
MajorList: [], //专业选择
|
||
timeShow: false,
|
||
timeList: [], //时间选择
|
||
collegeShow: false,
|
||
majorShow: false,
|
||
isGraduate: false,
|
||
workAreaPopupShow: false, //就业领域选择
|
||
selectedWorkArea: "",
|
||
selectedWorkAreaId: "",
|
||
WorkAreaList: [],
|
||
selectedPreferences: [],
|
||
industryList: [], // 行业领域列表
|
||
selectedIndustry: [], // 行业领域选择
|
||
industryDirectionList: [], // 行业方向列表
|
||
selectedIndustryDirection: [], // 行业方向选择
|
||
labelList: [], // 原始标签数据
|
||
interestList: [],
|
||
selectedInterests: [],
|
||
shape: "square",
|
||
selectedIndustryName: '', // 当前选中的行业领域名称
|
||
selectedIndustryId: null, // 当前选中的行业领域ID，初始化为null以避免匹配任何id
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
// this.GetLableList();
|
||
// this.GetInterestLable()
|
||
this.getWorkFile();
|
||
// 监听从裁剪页发布的事件，获得裁剪结果
|
||
uni.$on("uAvatarCropper", (path) => {
|
||
this.headerImg = path;
|
||
let file = this.common.base64toFile(path, new Date().getTime());
|
||
if (file.type.indexOf("image") < 0) {
|
||
// this.$tips("请选择图片", "error");
|
||
this.$refs.uToast.show({
|
||
title: "请选择图片",
|
||
type: "error",
|
||
});
|
||
return false;
|
||
}
|
||
uni.uploadFile({
|
||
url: this.$u.http.config.baseUrl + "/app/User/File",
|
||
file: file,
|
||
fileType: "image",
|
||
header: {
|
||
Authorization: "Bearer " + this.vuex_token,
|
||
},
|
||
complete: (res) => {
|
||
this.form.path = JSON.parse(res.data).data;
|
||
},
|
||
});
|
||
});
|
||
|
||
if (this.vuex_user.id) {
|
||
this.form.userId = this.vuex_user.id;
|
||
} else {
|
||
this.$u.route({
|
||
url: "/pages/login/login/login",
|
||
});
|
||
}
|
||
|
||
if (this.vuex_userInfo.realName) {
|
||
this.form.name = this.vuex_userInfo.realName;
|
||
}
|
||
|
||
this.getShool();
|
||
var arr1 = [],
|
||
arr2 = [];
|
||
var isyear = new Date().getFullYear();
|
||
for (var i = 1990; i <= isyear + 10; i++) {
|
||
if (i <= isyear) {
|
||
arr1.push({
|
||
value: i,
|
||
label: i,
|
||
});
|
||
}
|
||
arr2.push({
|
||
value: i,
|
||
label: i,
|
||
});
|
||
}
|
||
this.timeList.push(arr1);
|
||
this.timeList.push(arr2);
|
||
this.defaultTime = [arr1.length - 1, arr2.length - 7];
|
||
this.echoFn();
|
||
},
|
||
|
||
methods: {
|
||
nextStep() {
|
||
this.step = 3;
|
||
this.GetInterestLable();
|
||
console.log("下一步");
|
||
},
|
||
async GetInterestLable() {
|
||
const res = await this.$u.apiList.GetInterestLable();
|
||
console.log("获取标签", res);
|
||
this.interestList = res;
|
||
},
|
||
toggleInterest(item) {
|
||
// 先判断是否已达到最大选择数量
|
||
if (this.selectedInterests.length >= 10) {
|
||
this.$refs.uToast.show({
|
||
title: "最多选择10个",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 从 interestList 中查找待移除的标签
|
||
const interestIndex = this.interestList.findIndex(
|
||
(i) => i.lableId === item.lableId
|
||
);
|
||
|
||
if (interestIndex > -1) {
|
||
// 移除标签
|
||
this.interestList.splice(interestIndex, 1);
|
||
// 添加到已选择列表
|
||
this.selectedInterests.push(item);
|
||
}
|
||
},
|
||
removeInterest(item) {
|
||
// 从已选择列表中移除
|
||
const selectedIndex = this.selectedInterests.findIndex(
|
||
(i) => i.lableId === item.lableId
|
||
);
|
||
if (selectedIndex > -1) {
|
||
this.selectedInterests.splice(selectedIndex, 1);
|
||
// 添加回 interestList
|
||
this.interestList.push(item);
|
||
}
|
||
},
|
||
togglePreference(item) {
|
||
// 先判断是否已达到最大选择数量
|
||
if (this.selectedPreferences.length >= 10) {
|
||
this.$refs.uToast.show({
|
||
title: "最多选择10个",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 从 industryDirectionList 中查找待移除的标签
|
||
const directionIndex = this.industryDirectionList.findIndex(
|
||
(i) => i.lableId === item.lableId
|
||
);
|
||
if (directionIndex > -1) {
|
||
// 移除标签
|
||
this.industryDirectionList.splice(directionIndex, 1);
|
||
// 添加到已选择列表
|
||
this.selectedPreferences.push(item);
|
||
}
|
||
},
|
||
removePreference(item) {
|
||
// 从已选择列表中移除
|
||
const selectedIndex = this.selectedPreferences.findIndex(
|
||
(i) => i.lableId === item.lableId
|
||
);
|
||
if (selectedIndex > -1) {
|
||
this.selectedPreferences.splice(selectedIndex, 1);
|
||
|
||
// 获取当前选中的行业领域（根据lableId）
|
||
const currentIndustry = this.labelList.find(
|
||
(i) => i.lableId === this.selectedIndustryId // ***修改：使用lableId查找***
|
||
);
|
||
if (currentIndustry && currentIndustry.list) {
|
||
// 如果删除的标签属于当前行业领域，则添加回列表
|
||
const originalItem = currentIndustry.list.find(
|
||
(i) => i.lableId === item.lableId
|
||
);
|
||
if (originalItem) {
|
||
this.industryDirectionList.push(originalItem);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// 回填个人信息 如果已经存在教师身份，学生身份未认证时
|
||
async echoFn() {
|
||
const res = await this.$u.apiList.SelectUserTypeApi();
|
||
console.log(res, "res---");
|
||
const jzgFlag = res.jzgFlag;
|
||
const studentFlag = res.studentFlag;
|
||
if (studentFlag === false && jzgFlag === true) {
|
||
this.form.name = this.vuex_user.name;
|
||
this.form.userName = this.vuex_user.userName
|
||
this.form.sex = this.vuex_user.sex;
|
||
this.headerImg = this.$u.http.config.baseUrl + this.vuex_user.head;
|
||
this.shape = 'circle'
|
||
this.form.path = this.vuex_user.head;
|
||
}
|
||
},
|
||
//完成信息填写
|
||
async complete() {
|
||
var data = this.form;
|
||
if (data.educationStr == "") {
|
||
// return this.$tips("请选择学历", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请选择学历",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (data.schoolId == "") {
|
||
// return this.$tips("请选择学校", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请选择学校",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (data.college == "") {
|
||
// return this.$tips("请填写学院", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请填写学院",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (data.major == "") {
|
||
// return this.$tips("请填写专业", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请填写专业",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (data.startYear == "" && data.endYear == "") {
|
||
// return this.$tips("请选择在校时间", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请选择在校时间",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (new Date(data.startYear) - new Date(data.endYear) > 0) {
|
||
// return this.$tips("请选择正确的在校时间", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请选择正确的在校时间",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (this.isGraduate) {
|
||
console.log("跳转标签设置");
|
||
if (this.selectedWorkAreaId == "") {
|
||
this.$refs.uToast.show({
|
||
title: "请选择行业领域",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
this.step = 2;
|
||
console.log("form---", this.form);
|
||
this.GetLableList();
|
||
return;
|
||
} else {
|
||
this.step = 3;
|
||
this.GetInterestLable()
|
||
}
|
||
// data.userType = 0;
|
||
// // 按照之前逻辑 真实姓名传参给 userName
|
||
// data.userName = this.form.name;
|
||
// // 新增用户名
|
||
// data.name = this.form.userName;
|
||
// data.list = this.selectedWorkAreaId
|
||
// ? [{ lableId: this.selectedWorkAreaId }]
|
||
// : [];
|
||
// data.workFieldId = this.WorkAreaList[0].value;
|
||
// console.log(data, "data--");
|
||
// const res = await this.$u.api.saveUserInfo(data);
|
||
|
||
// const req = {
|
||
// userId: this.vuex_user.id,
|
||
// educationId: res,
|
||
// };
|
||
// const result = await this.$u.apiList.SelectEducation(req);
|
||
// console.log(result, "result--");
|
||
// this.$u.vuex("vuex_token", result.token);
|
||
// this.$u.vuex("vuex_glyType", result.glyType);
|
||
// this.$u.vuex("vuex_user", result.user);
|
||
// this.$u.api.getUser().then(() => {
|
||
// this.vuex_user.isFill = true;
|
||
// uni.switchTab({
|
||
// url: "../../main/index/index",
|
||
// });
|
||
// });
|
||
},
|
||
// 获取学校
|
||
getShool() {
|
||
this.$u.api.GetAllSchool().then((res) => {
|
||
for (let i = 0; i < res.length; i++) {
|
||
this.shoolList.push({
|
||
label: res[i].schoolName + "",
|
||
value: res[i].id + "",
|
||
});
|
||
}
|
||
});
|
||
|
||
setTimeout(() => {
|
||
if (this.vuex_userInfo.schoolName) {
|
||
this.shoolName = this.vuex_userInfo.schoolName.name;
|
||
this.form.schoolId = this.vuex_userInfo.schoolName.id;
|
||
this.getColleg(this.form.schoolId);
|
||
|
||
// console.log(this.vuex_userInfo.schoolName.id);
|
||
// console.log('this.form',this.form);
|
||
}
|
||
}, 300);
|
||
},
|
||
//获取学院
|
||
getColleg(id) {
|
||
const data = {
|
||
schoolid: id,
|
||
};
|
||
this.$u.apiList.GetCollegeList(data).then((res) => {
|
||
this.CollegeList = [];
|
||
for (let i = 0; i < res.length; i++) {
|
||
this.CollegeList.push({
|
||
label: res[i].name + "",
|
||
value: res[i].id + "",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取学院专业
|
||
getMajor(id) {
|
||
const data = {
|
||
schoolid: this.form.schoolId,
|
||
collegeid: id,
|
||
};
|
||
this.$u.apiList.GetMajorList(data).then((res) => {
|
||
this.MajorList = [];
|
||
for (let i = 0; i < res.length; i++) {
|
||
this.MajorList.push({
|
||
label: res[i].name + "",
|
||
value: res[i].id + "",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 学历选择
|
||
educationalSelect(index) {
|
||
this.form.educationStr = this.educationalList[index].text;
|
||
},
|
||
// 时间选择
|
||
confirm(e) {
|
||
this.showTime = e[0].value + " - " + e[1].value;
|
||
this.form.startYear = e[0].value + "";
|
||
this.form.endYear = e[1].value + "";
|
||
|
||
// 判断是否为毕业生
|
||
const currentYear = new Date().getFullYear();
|
||
if (parseInt(e[1].value) < currentYear) {
|
||
this.isGraduate = true;
|
||
} else {
|
||
this.isGraduate = false;
|
||
}
|
||
},
|
||
// 学校选择
|
||
shoolSelect(e) {
|
||
this.form.college = "";
|
||
this.form.collegeId = "";
|
||
this.form.major = "";
|
||
this.form.majorId = "";
|
||
this.shoolName = e[0].label;
|
||
this.form.schoolId = e[0].value;
|
||
this.getColleg(this.form.schoolId);
|
||
},
|
||
//学院选择
|
||
selectCpllege(e) {
|
||
this.form.major = "";
|
||
this.form.majorId = "";
|
||
this.form.college = e[0].label;
|
||
this.form.collegeId = e[0].value;
|
||
this.getMajor(this.form.collegeId);
|
||
},
|
||
//选择专业
|
||
selectMajor(e) {
|
||
this.form.major = e[0].label;
|
||
this.form.majorId = e[0].value;
|
||
},
|
||
// 头像裁剪
|
||
chooseAvatar() {
|
||
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
|
||
this.shape = "circle";
|
||
this.$u.route({
|
||
// 关于此路径，请见下方"注意事项"
|
||
url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
|
||
// 内部已设置以下默认参数值，可不传这些参数
|
||
params: {
|
||
// 输出图片宽度，高等于宽，单位px
|
||
destWidth: 200,
|
||
// 裁剪框宽度，高等于宽，单位px
|
||
rectWidth: 200,
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: "jpg",
|
||
shape: "circle", // 新增：设置为圆形裁剪
|
||
},
|
||
});
|
||
},
|
||
back() {
|
||
if (this.step > 0) {
|
||
if (this.step === 3 && !this.isGraduate) {
|
||
// 如果不是毕业生，从 step 3 直接返回到 step 1
|
||
this.step = 1;
|
||
} else {
|
||
this.step--;
|
||
}
|
||
} else {
|
||
uni.navigateBack(); // 当 step 为 0 时，返回上一页
|
||
}
|
||
},
|
||
next() {
|
||
const data = this.form;
|
||
if (!data.path) {
|
||
// return this.$tips("请上传头像", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请上传头像",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (!data.name) {
|
||
// return this.$tips("请填写真实姓名", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请填写真实姓名",
|
||
type: "error",
|
||
});
|
||
}
|
||
if (!data.userName) {
|
||
// return this.$tips("请填写真实姓名", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请填写用户名",
|
||
type: "error",
|
||
});
|
||
}
|
||
var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");
|
||
if (!reg.test(data.name)) {
|
||
// this.$tips("请输入正确的真实姓名", "error");
|
||
this.$refs.uToast.show({
|
||
title: "请输入正确的真实姓名",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
if (!data.sex) {
|
||
// return this.$tips("请选择性别", "error");
|
||
return this.$refs.uToast.show({
|
||
title: "请选择性别",
|
||
type: "error",
|
||
});
|
||
}
|
||
this.step = 1;
|
||
console.log(this.form, "this.form--");
|
||
},
|
||
getWorkFile() {
|
||
this.$u.apiList.GetWorkFile().then((res) => {
|
||
this.studentId = res.find(item => item.workFieldName === '在校生').id;
|
||
this.WorkAreaList = res.map((item) => {
|
||
return {
|
||
label: item.workFieldName,
|
||
value: item.id,
|
||
};
|
||
}).filter(item => item.label !== '在校生' && item.label !== '教师' && item.label !== '未知');
|
||
});
|
||
console.log('WorkAreaList----',this.WorkAreaList)
|
||
},
|
||
workAreaSelect(e) {
|
||
console.log("选择行业领域", e);
|
||
this.selectedWorkArea = e[0].label;
|
||
this.selectedWorkAreaId = e[0].value;
|
||
let param = { WorkFileId: e[0].value };
|
||
this.$u.apiList.GetLableList(param).then((res) => {
|
||
this.labelList = res;
|
||
console.log("res----", res);
|
||
});
|
||
},
|
||
GetLableList() {
|
||
let param = { WorkFileId: this.selectedWorkAreaId };
|
||
this.$u.apiList.GetLableList(param).then((res) => {
|
||
this.labelList = res;
|
||
// industryList 存储完整的对象数组
|
||
this.industryList = res;
|
||
|
||
// 默认选中第一个行业领域并显示其方向
|
||
if (res.length > 0) {
|
||
this.selectedIndustryId = res[0].lableId; // ***修改：使用lableId***
|
||
this.selectedIndustryName = res[0].lableName; // 存储名称
|
||
|
||
if (res[0].list) {
|
||
this.industryDirectionList = res[0].list;
|
||
} else {
|
||
this.industryDirectionList = [];
|
||
}
|
||
} else {
|
||
this.selectedIndustryId = null; // 如果没有数据，清空选中状态为null
|
||
this.selectedIndustryName = ''; // 清空名称
|
||
this.industryDirectionList = []; // 清空行业方向列表
|
||
}
|
||
});
|
||
},
|
||
// 处理行业领域选择
|
||
handleIndustrySelect(index) {
|
||
const clickedIndustryItem = this.industryList[index]; // 获取完整对象
|
||
|
||
// 更新选中的行业领域ID和名称
|
||
this.selectedIndustryId = clickedIndustryItem.lableId; // ***修改：使用lableId***
|
||
this.selectedIndustryName = clickedIndustryItem.lableName;
|
||
|
||
// 获取已选择的标签ID列表
|
||
const selectedIds = this.selectedPreferences.map((item) => item.lableId);
|
||
|
||
if (clickedIndustryItem && clickedIndustryItem.list) {
|
||
// 过滤掉已选择的标签
|
||
this.industryDirectionList = clickedIndustryItem.list.filter(
|
||
(item) => !selectedIds.includes(item.lableId)
|
||
);
|
||
} else {
|
||
this.industryDirectionList = [];
|
||
}
|
||
},
|
||
// 完成偏好设置
|
||
async finishPreference() {
|
||
if (
|
||
this.selectedPreferences.length === 0 &&
|
||
this.selectedInterests.length === 0
|
||
) {
|
||
this.$refs.uToast.show({
|
||
title: "请至少选择一个标签",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 构建标签列表，只包含当前选中的标签
|
||
const preferenceList = this.selectedPreferences.map((item) => ({
|
||
lableId: item.lableId,
|
||
}));
|
||
|
||
const interestList = this.selectedInterests.map((item) => ({
|
||
lableId: item.lableId,
|
||
}));
|
||
|
||
this.form.list = [...preferenceList, ...interestList];
|
||
this.form.userType = this.isGraduate ? 2 : 0;
|
||
this.form.workFieldId = this.isGraduate ? this.selectedWorkAreaId : this.studentId; //在校生id
|
||
// 调用保存接口
|
||
const res = await this.$u.api.saveUserInfo(this.form);
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
educationId: res,
|
||
};
|
||
const result = await this.$u.apiList.SelectEducation(req);
|
||
this.$u.vuex("vuex_token", result.token);
|
||
this.$u.vuex("vuex_glyType", result.glyType);
|
||
this.$u.vuex("vuex_user", result.user);
|
||
|
||
this.$u.api.getUser().then(() => {
|
||
this.vuex_user.isFill = true;
|
||
uni.switchTab({
|
||
url: "../../main/index/index",
|
||
});
|
||
});
|
||
// 保存成功后跳转到首页
|
||
} catch (error) {
|
||
this.$refs.uToast.show({
|
||
title: "保存失败，请重试",
|
||
type: "error",
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page {
|
||
background-color: rgb(255, 255, 255);
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
|
||
.group_2 {
|
||
padding: 0.49rem 0.29rem 1.15rem;
|
||
overflow-y: auto;
|
||
|
||
.text_3 {
|
||
align-self: center;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.18rem;
|
||
font-family: PingFang;
|
||
line-height: 0.17rem;
|
||
}
|
||
|
||
.group_1 {
|
||
margin-top: 0.15rem;
|
||
|
||
.text_4 {
|
||
margin-top: 0.15rem;
|
||
color: rgb(153, 153, 153);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
|
||
.group_5 {
|
||
margin-top: 0.4rem;
|
||
|
||
.text_5 {
|
||
align-self: flex-start;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.15rem;
|
||
font-family: PingFang;
|
||
line-height: 0.14rem;
|
||
}
|
||
|
||
.view {
|
||
// border-bottom: solid 0.005rem rgb(153, 153, 153);
|
||
}
|
||
|
||
.text-wrapper {
|
||
// margin-top: 0.16rem;
|
||
}
|
||
}
|
||
.input-box {
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 100rpx;
|
||
background: #f6f8f9;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 32rpx;
|
||
// height: 1.35rem;
|
||
position: relative;
|
||
|
||
.image_4 {
|
||
filter: drop-shadow(0px 0.015rem 0.03rem rgba(102, 102, 102, 0.23));
|
||
width: 0.68rem;
|
||
height: 0.68rem;
|
||
}
|
||
|
||
.text_7 {
|
||
color: rgb(51, 51, 51);
|
||
font-size: 32rpx;
|
||
font-family: PingFang;
|
||
line-height: 32rpx;
|
||
font-weight: bold;
|
||
// position: absolute;
|
||
// left: 0;
|
||
// top: 0;
|
||
}
|
||
|
||
.group_4.on,
|
||
.group_6.on {
|
||
image {
|
||
border: 2px solid #5ac0ff;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.group_6 {
|
||
position: absolute;
|
||
left: 0.4rem;
|
||
top: 0.4rem;
|
||
|
||
.text_8 {
|
||
margin-top: 0.15rem;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
|
||
.group_4 {
|
||
position: absolute;
|
||
right: 0.4rem;
|
||
top: 0.4rem;
|
||
|
||
.text_9 {
|
||
margin-top: 0.15rem;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.14rem;
|
||
font-family: PingFang;
|
||
line-height: 0.13rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
padding: 0.15rem 0 0.14rem;
|
||
/* background-image: linear-gradient(90deg,
|
||
rgb(135, 230, 254) 0%,
|
||
rgb(91, 192, 254) 52%,
|
||
rgb(46, 155, 255) 100%);
|
||
box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
|
||
background: #3cb5fb;
|
||
border-radius: 0.23rem;
|
||
}
|
||
|
||
.button {
|
||
margin: 66rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.userList {
|
||
// padding-left: 0.16rem;
|
||
// padding-top: 0.3rem;
|
||
background: #f6f8fa;
|
||
height: 100vh;
|
||
.text-wrapper_1 {
|
||
padding: 0.15rem 0 0.14rem;
|
||
/* background-image: linear-gradient(90deg,
|
||
#87e6fe 0%,
|
||
#5bc0fe 52%,
|
||
#2e9bff 100%);
|
||
box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
|
||
background: #3cb5fb;
|
||
border-radius: 0.23rem;
|
||
}
|
||
|
||
.button {
|
||
margin: 0.6rem 0.15rem 0;
|
||
}
|
||
|
||
.text_3 {
|
||
// align-self: center;
|
||
margin-top: 40rpx;
|
||
margin-left: 50rpx;
|
||
color: rgb(51, 51, 51);
|
||
font-size: 0.18rem;
|
||
font-family: PingFang;
|
||
line-height: 0.17rem;
|
||
}
|
||
|
||
.group_4 {
|
||
margin: 40rpx auto;
|
||
background: #fff;
|
||
width: calc(100% - 80rpx);
|
||
padding: 20rpx;
|
||
border-radius: 32rpx;
|
||
|
||
.list-item {
|
||
padding: 0.05rem 0.1rem 0.05rem;
|
||
border-bottom: 2rpx solid #f6f8f9;
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.text_8 {
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
font-family: PingFang;
|
||
line-height: 0.35rem;
|
||
// margin-right: 0.15rem;
|
||
}
|
||
.item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
width: calc(100% - 150rpx);
|
||
position: relative;
|
||
}
|
||
|
||
.input-cover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.right-img {
|
||
width: 12rpx;
|
||
height: 24rpx;
|
||
margin-left: 10rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.text_26 {
|
||
color: #000;
|
||
font-size: 0.17rem;
|
||
font-family: PingFang;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.group_5 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
::v-deep .u-input__input {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-navbar-placeholder {
|
||
background: #f6f8fa;
|
||
// display: none;
|
||
height: 40rpx !important;
|
||
}
|
||
|
||
.preference-page {
|
||
background: #fff;
|
||
height: calc(100vh - 300rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.selected-count {
|
||
padding: 24rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
line-height: 48rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
.desc {
|
||
display: block;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 40rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.selected-tags {
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24rpx 24rpx;
|
||
|
||
.tag {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #3cb5fb;
|
||
color: #fff;
|
||
border-radius: 64rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
// max-width: 200rpx;
|
||
margin-right: 0;
|
||
margin-bottom: 0;
|
||
box-sizing: border-box;
|
||
justify-content: flex-start;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 28rpx;
|
||
margin-right: 8rpx;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
}
|
||
.line {
|
||
width: 100%;
|
||
height: 4rpx;
|
||
background: #f6f8f9;
|
||
margin-top: 24rpx;
|
||
margin-bottom: 44rpx;
|
||
}
|
||
.line-shadow {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
margin-top: 56rpx;
|
||
}
|
||
.all-tags {
|
||
padding: 0 24rpx;
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.tags-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24rpx 24rpx;
|
||
margin-bottom: 32rpx;
|
||
align-content: flex-start;
|
||
.tag {
|
||
background: #f6f8f9;
|
||
color: #333;
|
||
border-radius: 200rpx;
|
||
padding: 20rpx 32rpx;
|
||
font-size: 28rpx;
|
||
&.selected {
|
||
background: #3cb5fb;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.industry-tag {
|
||
background: #f0f4f8;
|
||
color: #333;
|
||
border-radius: 200rpx;
|
||
padding: 20rpx 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
line-height: 28rpx;
|
||
box-sizing: border-box;
|
||
height: 64rpx;
|
||
&.selected {
|
||
background: #3cb5fb;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.industry-tag-list {
|
||
height:776rpx;
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
.btn-box {
|
||
position: fixed;
|
||
bottom: 62rpx;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0 24rpx;
|
||
}
|
||
.button {
|
||
margin: 48rpx 0 0 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|