1105 lines
29 KiB
Vue
1105 lines
29 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<u-navbar :border-bottom="false" title="个人资料"></u-navbar>
|
||
|
||
<view v-if="step == 0" class="flex-col group_2">
|
||
<view class="flex-col items-center group_1">
|
||
<u-avatar
|
||
mode="square"
|
||
: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"
|
||
:value="item.value"
|
||
>
|
||
{{ item.label }}
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</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">
|
||
<u-input
|
||
v-model="form.educationStr"
|
||
placeholder="请选择学历"
|
||
inputAlign="right"
|
||
@click="educationalShow = true"
|
||
/>
|
||
<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">
|
||
<u-input
|
||
v-model="shoolName"
|
||
placeholder="请选择学校"
|
||
inputAlign="right"
|
||
@click="shoolShow = true"
|
||
/>
|
||
<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">
|
||
<u-input
|
||
v-model="form.college"
|
||
placeholder="请选择学院"
|
||
@click="collegeShow = true"
|
||
inputAlign="right"
|
||
/>
|
||
<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">
|
||
<u-input
|
||
v-model="form.major"
|
||
placeholder="请选择专业"
|
||
@click="majorShow = true"
|
||
inputAlign="right"
|
||
/>
|
||
<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">
|
||
<u-input
|
||
v-model="showTime"
|
||
placeholder="请选择时间"
|
||
inputAlign="right"
|
||
@click="timeShow = true"
|
||
/>
|
||
<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>
|
||
<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">
|
||
<u-input
|
||
v-model="selectedWorkArea"
|
||
placeholder="请选择行业"
|
||
inputAlign="right"
|
||
@click="workAreaPopupShow = true"
|
||
/>
|
||
<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>
|
||
<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" />
|
||
|
||
<view class="selected-count">
|
||
已选择（{{ selectedPreferences.length }}/10）
|
||
<text class="desc"
|
||
>您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-常用工具-推荐偏好中修改。</text
|
||
>
|
||
</view>
|
||
|
||
<view class="selected-tags">
|
||
<view
|
||
v-for="item in selectedPreferences"
|
||
:key="item"
|
||
class="tag selected"
|
||
>
|
||
{{ item }}
|
||
<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 in industryList"
|
||
:key="item"
|
||
class="industry-tag"
|
||
:class="{ selected: selectedPreferences.includes(item) }"
|
||
@click="togglePreference(item)"
|
||
>{{ item }}</view
|
||
>
|
||
</view>
|
||
<view class="title" style="margin-top: 32rpx">行业方向</view>
|
||
<view class="tags-list">
|
||
<view
|
||
v-for="item in industryDirectionList"
|
||
:key="item"
|
||
class="industry-tag"
|
||
:class="{ selected: selectedPreferences.includes(item) }"
|
||
@click="togglePreference(item)"
|
||
>{{ item }}</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" />
|
||
|
||
<view class="selected-count">
|
||
已选择（{{ selectedPreferences.length }}/10）
|
||
<text class="desc"
|
||
>您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-常用工具-推荐偏好中修改。</text
|
||
>
|
||
</view>
|
||
|
||
<view class="selected-tags">
|
||
<view
|
||
v-for="item in selectedPreferences"
|
||
:key="item"
|
||
class="tag selected"
|
||
>
|
||
{{ item }}
|
||
<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 in preferenceList"
|
||
:key="item"
|
||
class="tag"
|
||
:class="{ selected: selectedPreferences.includes(item) }"
|
||
@click="togglePreference(item)"
|
||
>{{ item }}</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: "", //名字
|
||
sex: "男", //性别
|
||
path: "", //头像
|
||
educationStr: "", //学历
|
||
schoolId: "", //学校
|
||
college: "", //学院
|
||
major: "", //专业
|
||
startYear: "", //开始时间
|
||
endYear: "", //结束时间,
|
||
collegeId: "", //学院id
|
||
majorId: "", //专业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,
|
||
workAreaPopupShow: false, //就业领域选择
|
||
selectedWorkArea: "",
|
||
WorkAreaList: [],
|
||
preferenceList: [
|
||
"跑步健身",
|
||
"足球",
|
||
"电竞游戏",
|
||
"旅行徒步",
|
||
"摄影摄像",
|
||
"剧本杀",
|
||
"编程极客",
|
||
"看书",
|
||
"唱歌",
|
||
"绘画手作",
|
||
"美食探店",
|
||
"cosplay",
|
||
"篮球",
|
||
"写作创作",
|
||
"咖啡茶艺",
|
||
"玄学星座",
|
||
"实习内推",
|
||
"脱单",
|
||
"活动组队",
|
||
"失物招领",
|
||
"副业兼职",
|
||
"二手交易",
|
||
"游戏陪玩",
|
||
"技能学习",
|
||
"情感洞",
|
||
"宠物生活",
|
||
"面试分享",
|
||
"校园热点",
|
||
"校园问答",
|
||
"公益志愿",
|
||
"跑腿互助",
|
||
"校友人脉",
|
||
"租房合租",
|
||
"留学互助",
|
||
"创业孵化",
|
||
"拼车出行",
|
||
"商业合作",
|
||
],
|
||
industryList: ["生物", "制药", "化工", "医疗"],
|
||
industryDirectionList: [
|
||
"生物学研究人员",
|
||
"医药研发",
|
||
"生物信息工程师",
|
||
"药品生产",
|
||
"药品注册",
|
||
"医药项目经理",
|
||
"细胞培养员",
|
||
"药理毒理研究院",
|
||
"药物合成",
|
||
],
|
||
selectedPreferences: [],
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.step = 1;
|
||
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",
|
||
// });
|
||
}
|
||
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: {
|
||
getWorkFile() {
|
||
this.$u.apiList.GetWorkFile().then((res) => {
|
||
this.WorkAreaList = res.map((item) => {
|
||
return {
|
||
label: item.workFieldName,
|
||
value: item.id,
|
||
};
|
||
});
|
||
});
|
||
},
|
||
// 回填个人信息 如果已经存在教师身份，学生身份未认证时
|
||
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.userName;
|
||
this.form.sex = this.vuex_user.sex;
|
||
this.headerImg = this.$u.http.config.baseUrl + this.vuex_user.head;
|
||
this.form.path = this.vuex_user.head;
|
||
}
|
||
},
|
||
//完成信息填写
|
||
async complete() {
|
||
console.log("完成----")
|
||
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(data.list == "") {
|
||
return this.$refs.uToast.show({
|
||
title:'请选择行业领域',
|
||
type:'error'
|
||
})
|
||
}
|
||
// console.log(data,'data-')
|
||
// return
|
||
data.userType = 2;
|
||
data.userName = this.form.name;
|
||
console.log(data, "data--");
|
||
// return
|
||
const res = await this.$u.api.saveUserInfo(data);
|
||
console.log(res, "res--");
|
||
const req = {
|
||
userId: this.vuex_user.id,
|
||
educationId: res,
|
||
};
|
||
const result = await this.$u.apiList.SelectEducation(req);
|
||
console.log(result, "result--");
|
||
// return
|
||
this.$u.vuex("vuex_token", result.token);
|
||
this.$u.vuex("vuex_glyType", result.glyType);
|
||
this.$u.vuex("vuex_user", result.user);
|
||
// return
|
||
// this.$u.api.getUser().then(() => {
|
||
// this.vuex_user.isFill = true;
|
||
// uni.switchTab({
|
||
// url: "../../main/index/index",
|
||
// });
|
||
// });
|
||
this.step = 2;
|
||
},
|
||
// 获取学校
|
||
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 + "",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//获取学院
|
||
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 + "";
|
||
},
|
||
// 学校选择
|
||
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;
|
||
},
|
||
workAreaSelect(e) {
|
||
console.log("选择行业领域", e);
|
||
this.form.List=e[0].value
|
||
this.selectedWorkArea=e[0].label
|
||
},
|
||
// 头像裁剪
|
||
chooseAvatar() {
|
||
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
|
||
this.$u.route({
|
||
// 关于此路径，请见下方"注意事项"
|
||
url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
|
||
// 内部已设置以下默认参数值，可不传这些参数
|
||
params: {
|
||
// 输出图片宽度，高等于宽，单位px
|
||
destWidth: 200,
|
||
// 裁剪框宽度，高等于宽，单位px
|
||
rectWidth: 200,
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: "jpg",
|
||
},
|
||
});
|
||
},
|
||
back() {
|
||
this.step = 0;
|
||
},
|
||
next() {
|
||
console.log(this.form, "this.form--");
|
||
var 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",
|
||
});
|
||
}
|
||
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;
|
||
},
|
||
togglePreference(item) {
|
||
const idx = this.selectedPreferences.indexOf(item);
|
||
if (idx > -1) {
|
||
this.selectedPreferences.splice(idx, 1);
|
||
} else {
|
||
if (this.selectedPreferences.length >= 10) {
|
||
this.$refs.uToast.show({
|
||
title: "最多选择10个",
|
||
type: "error",
|
||
});
|
||
return;
|
||
}
|
||
this.selectedPreferences.push(item);
|
||
}
|
||
},
|
||
nextStep() {
|
||
this.step = 3;
|
||
},
|
||
finishPreference() {
|
||
// 这里可以保存选择的偏好，或跳转页面
|
||
// 例如：this.$u.api.savePreference(this.selectedPreferences)
|
||
// uni.switchTab({ url: "../../main/index/index" });
|
||
this.$refs.uToast.show({
|
||
title: "已保存偏好",
|
||
type: "success",
|
||
});
|
||
},
|
||
removePreference(item) {
|
||
const idx = this.selectedPreferences.indexOf(item);
|
||
if (idx > -1) {
|
||
this.selectedPreferences.splice(idx, 1);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</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);
|
||
}
|
||
.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;
|
||
min-height: 100vh;
|
||
// padding: 0 24rpx;
|
||
|
||
.selected-count {
|
||
padding: 0 24rpx;
|
||
margin: 24rpx 0 30rpx 0;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
.desc {
|
||
display: block;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.selected-tags {
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 24rpx;
|
||
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: 2rpx;
|
||
background: #f6f8f9;
|
||
}
|
||
.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;
|
||
margin-top: 48rpx;
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.tags-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24rpx 24rpx;
|
||
|
||
.tag {
|
||
background: #f0f4f8;
|
||
color: #333;
|
||
border-radius: 200rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
max-width: 152rpx;
|
||
// margin-right: 24rpx;
|
||
// margin-bottom: 24rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
&.selected {
|
||
background: #3cb5fb;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.industry-tag {
|
||
background: #f0f4f8;
|
||
color: #333;
|
||
border-radius: 200rpx;
|
||
padding: 32rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
max-width: 152rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
&.selected {
|
||
background: #3cb5fb;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn-box {
|
||
padding: 0 24rpx;
|
||
}
|
||
.button {
|
||
margin: 48rpx 0 0 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|