Files
2024-10-09 10:14:51 +08:00

820 lines
28 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="background-color: #fff;">
<view class="head" @click="goUserBase">
<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
<image v-else src="../../../static/img/head.svg" mode=""></image>
<view class="name">
<view class="userName">
{{ auth.authInfo.realName }}
</view>
<view class="userInfo">
个人基本信息
</view>
</view>
<image src="../../../static/img/right.svg" mode=""></image>
</view>
<view class="title">
<view class="title_text">
我的职业技能
</view>
<image v-if="mySkills.length < 2" src="../../../static/img/add.gray.svg" mode="" @click="goAdd"></image>
</view>
<view class="listBody">
<m-slide-list @controller-reg="controller.reg" @controller-moving="controller.moving"
@controller-opened="controller.opened" @controller-closed="controller.closed"
@remove="removeSkills(item.id, index)" v-for="(item, index) in mySkills" :key="item.id"
:button="buttonList">
<view class="list">
<view class="list_text">
{{ item.worktypes }}{{ item.skills }}
</view>
<view>
<image src="../../../static/img/left_right.png" mode=""></image>
</view>
</view>
</m-slide-list>
</view>
<!-- <view class="jobcontent" @click="goSetCity">
<view class="jobinfo">
<view
v-bind:class="['jobAddress', { 'input-error': !myResume.city.id && !myResume.city.workplace && isShowBorder }]">
您想工作的地点
</view>
<view v-bind:class="['jobText']">
{{ myResume.city !== "{}" ? myResume.city.id ? getCity(myResume.city.id) : myResume.city.workplace : '请选择'
}}
</view>
</view>
<image src="../../../static/img/right.svg" mode=""></image>
</view> -->
<view class="jobcontent" @click="areaModal.addressShow = true">
<view class="jobinfo">
<view
v-bind:class="['jobAddress', { 'input-error': !myResume.city.id && !myResume.city.workplace && isShowBorder }]">
我想工作的地点
</view>
<view v-bind:class="['jobText']">
{{ myResume.city !== "{}" ? myResume.city.id ? getCity(myResume.city.id) : myResume.city.workplace :
'请选择'
}}
</view>
</view>
<image src="../../../static/img/right.svg" mode=""></image>
</view>
<view class="jobcontent" @click="showPickerFunc('education')">
<view class="jobinfo">
<view v-bind:class="['jobAddress', { 'input-error': !myResume.education.label && isShowBorder }]">
我的学历
</view>
<view v-bind:class="['jobText']">
{{ myResume.education !== "{}" ? myResume.education.label : '请选择' }}
</view>
</view>
<image src="../../../static/img/right.svg" mode=""></image>
</view>
<view class="jobcontent" @click="showPickerFunc('wage')">
<view class="jobinfo">
<view v-bind:class="['jobAddress', { 'input-error': !myResume.wage && isShowBorder }]">
我的期望薪资
</view>
<view v-bind:class="['jobText']">
{{ myResume.wage ? myResume.wage : '请选择' }}
</view>
</view>
<image src="../../../static/img/right.svg" mode=""></image>
</view>
<view class="jobcontent">
<view class="jobinfo">
<view v-bind:class="['jobAddress', { 'input-error': !myResume.phone && isShowBorder }]">
我的联系方式
</view>
<u--input :value="myResume.phone" @focus="setPhoneFunc1" @change="setPhoneFunc" type="number"
placeholder="请输入您的电话" border="none" clearable></u--input>
</view>
</view>
<view class="workexperience">
工作经历
<view class="workexperience-right" @click="cardaddshow = true; gzInfo = {}">+</view>
</view>
<view class="border"></view>
<view class="card" v-for="(item, index) in gzList" :key="index" @click="updataGz(item)"
@longtap="removeGz(item)">
<view class="card-title">
{{item.name}}
<view class="card-right">{{item.stime}}-{{item.etime}}</view>
</view>
<view class="card-subTitle">
<view class="card-sub1">{{item.work}}</view>
<view class="card-sub1">{{item.department}}</view>
</view>
<view class="card-content">
{{item.content}}
</view>
</view>
<custom-popup :content-h="100" :visible="cardaddshow" :hide="0" @onClose="cardaddshow = false; gzInfo = {}">
<view class="s-header">
<view class="heade-lf" @click="cardaddshow = false; gzInfo = {}">取消</view>
<view class="heade-ri" @click="confimPopup1">确认</view>
</view>
<u--form style="padding: 6px 14px;" labelPosition="left" :model="gzInfo" ref="form1">
<u-form-item label="企业名称:" labelWidth="80" prop="name" borderBottom>
<u--input v-model="gzInfo.name" placeholder="请输入企业名称"></u--input>
</u-form-item>
<u-form-item label="工作岗位:" labelWidth="80" prop="work" borderBottom>
<u--input v-model="gzInfo.work" placeholder="请输入工作岗位"></u--input>
</u-form-item>
<u-form-item label="开始时间" labelWidth="80" prop="stime" borderBottom
@click="showStime = true; hideKeyboard()" ref="item1">
<u--input v-model="gzInfo.stime" disabledColor="#ffffff" placeholder="请选择开始时间"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="结束时间" labelWidth="80" prop="etime" borderBottom
@click="showEtime = true; hideKeyboard()" ref="item2">
<u--input v-model="gzInfo.etime" disabledColor="#ffffff" placeholder="请选择结束时间"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="部门:" labelWidth="80" prop="department" borderBottom>
<u--input v-model="gzInfo.department" placeholder="请输入部门"></u--input>
</u-form-item>
<u-form-item label="工作内容:" labelWidth="70" prop="content" borderBottom>
<u--textarea v-model="gzInfo.content" placeholder="请输入工作内容"></u--textarea>
</u-form-item>
</u--form>
</custom-popup>
<view v-if="isShowButton" class="saveWrapper">
<u-button @click="subMitResume" type="primary" shape="circle" text="保存"></u-button>
</view>
<u-picker @confirm="pickerButtonFunc" @cancel="showPicker = false" :show="showPicker" :columns="columns"
keyName="label"></u-picker>
<u-toast ref="uToast"></u-toast>
<u-datetime-picker :show="showStime" :value="birthday" mode="date" closeOnClickOverlay @confirm="stimeConfirm"
@cancel="stimeClose" @close="stimeClose"></u-datetime-picker>
<u-datetime-picker :show="showEtime" :value="birthday" mode="date" closeOnClickOverlay @confirm="etimeConfirm"
@cancel="etimeClose" @close="etimeClose"></u-datetime-picker>
<!-- 省市 -->
<data-picker :show="areaModal.addressShow" @confirm='confirmAddress' @cancel='areaModal.addressShow = false'
@close='areaModal.addressShow = false' :defaultNames="areaModal.defaultNames" :indexs="areaModal.indexs"
:defaultIds="areaModal.defaultIds" :showToolbar="false" :showBottombar="true"
:labelName="areaModal.labelName"></data-picker>
</view>
</template>
<script>
import {
GoLogin
} from '@/untils/AxiosUtils.js';
import {
mapGetters
} from 'vuex'
import {
mySkills,
myResume,
removeSkills,
setCity,
setLearn,
setResume
} from '@/api/resume.js';
import mSlideList from '@/components/mark-slide-list/mark-slide-list.vue';
import controller from '@/components/mark-slide-list/controller';
import customPopup from '@/components/custom-popup/custom-popup.vue'
import {
cloneDeep,
forIn
} from 'lodash';
const validateForm = {
name: '请输入企业名称',
work: '请输入工作岗位',
stime: '请输入开始时间',
etime: '请选择结束时间',
department: '请输入部门',
content: '请输入工作内容',
}
export default {
components: {
mSlideList,
customPopup
},
data() {
return {
controller: new controller(),
cardaddshow: false,
showStime: false,
showEtime: false,
gzInfo: {},
gzList: [],
myResume: {
city: {},
education: {},
wage: "",
phone: "",
},
mySkills: [],
id: undefined,
// id: '',
buttonList: [{
title: '删除',
background: '#ff3b32',
clickName: 'remove'
}],
showPicker: false,
showType: "",
columns: [
[]
],
canSubMit: false,
isShowButton: false,
isShowBorder: false,
isShowAddSkill: true,
birthday: Number(new Date()),
areaModal: {
address: '',
addressShow: false,
title: 'Hello',
// indexs: [0, 0, 8],
// defaultIds: [1, 110000, 110106],
defaultNames: ['北京市', '北京市', '东城区'],
labelName: "areaName"
},
}
},
onShow() {
if (!this.$api.haslogin()) {
GoLogin()
return
}
this.getSkill()
},
created() {
this.getResume()
},
computed: {
...mapGetters(['userInfo', 'auth'])
},
watch: {
myResume: {
handler: function(newVal, oldVal) {
if (newVal.city && newVal.education && newVal.wage && newVal.phone) {
this.canSubMit = true;
} else {
this.canSubMit = false;
}
},
deep: true
}
},
methods: {
removeGz(item) {
const that = this
uni.showModal({
content: '删除该条工作经历?',
success(res) {
if (res.confirm) {
that.isShowButton = true
that.gzList = that.gzList.filter((vItem) => item.id !== vItem.id)
}
},
})
},
updataGz(item) {
this.cardaddshow = true
this.gzInfo = item
},
confimPopup1() {
const copy = cloneDeep(this.gzInfo)
const keys = Object.keys(validateForm)
console.log(keys, copy)
for (let i = 0; i < keys.length; i++) {
if (!copy[keys[i]]) {
return this.$api.msg(validateForm[keys[i]])
}
}
if (copy.id) {
this.gzList = this.gzList.map((item) => {
if (item.id === copy.id) {
return copy
} else {
return item
}
})
} else {
copy.id = Date.now()
this.gzList.push(copy)
}
this.isShowButton = true
this.cardaddshow = false
},
stimeClose() {
this.showStime = false
},
stimeConfirm(e) {
this.showStime = false
this.gzInfo.stime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
},
etimeClose() {
this.showStime = false
},
etimeConfirm(e) {
this.showEtime = false
this.gzInfo.etime = uni.$u.timeFormat(e.value, 'yyyy.mm.dd')
},
hideKeyboard() {
uni.hideKeyboard()
},
getResume() {
myResume().then(res => {
const data = res.data.data
if (data.workExperience) {
this.gzList = JSON.parse(data.workExperience)
}
this.myResume = {
city: {
workplace: data.workplace
},
education: {
label: data.education
},
wage: data.wage,
phone: data.telephone
}
this.isShowButton = false;
if (data && data.id) {
this.id = data.id
console.log(this.id, '-----------------------------');
}
});
},
getSkill() {
mySkills().then(res => {
this.mySkills = res.data.data;
})
},
goWantSkill: function() {
uni.$off('getWantSkill')
uni.$once('getWantSkill', (cb) => {
cb(this.myResume.learnSkill)
})
uni.$off('setWantSkill')
uni.$once('setWantSkill', ({
skill,
done
}) => {
setLearn(this.id, skill).then(res => {
uni.navigateBack()
}).catch(() => {
done && done()
})
this.getResume()
})
uni.navigateTo({
url: './setWskill?id=' + this.id
})
},
goSetCity: function() {
uni.$off('setCity')
uni.$on('setCity', ({
detail
}) => {
console.log(detail, '---------------');
this.isShowButton = true
this.myResume.city = detail
// setCity(this.id, detail.parentLabel + '-' + detail.label).then(res => {
// this.myResume.cityId = detail.id
// this.getResume()
// })
})
uni.navigateTo({
url: `/pages/setCity/setCity?maxLayer=2`
})
},
goAdd: function() {
uni.navigateTo({
url: './addSkill'
})
},
goUserBase: function() {
uni.navigateTo({
url: '../userBase'
})
},
getCity: function(val) {
if (val) {
let areas = this.$store.getters.getAreaParents(val)
if (areas.length) {
return areas[0].label + '-' + areas[1].label
}
}
},
removeSkills: function(id, index) {
removeSkills(id).then(res => {
uni.showToast({
title: '操作成功',
icon: 'none'
});
this.mySkills.splice(index, 1)
})
},
showPickerFunc(type) {
this.showType = type;
switch (type) {
case "education":
this.columns = [
[{
label: 'MBA/EMBA',
value: 0
}, {
label: '博士',
value: 1
}, {
label: '硕士',
value: 2
}, {
label: '本科',
value: 3
},
{
label: '大专',
value: 4
}, {
label: '高中',
value: 5
}, {
label: '中专/中技',
value: 6
}, {
label: '初中及以下,',
value: 7
},
{
label: '不限',
value: 8
}
]
]
break;
case "wage":
this.columns = [
['10-15元/小时', '16-20元/小时', '21-25元/小时', '26-30元/小时', '30元/小时以上', '100-150元/天',
'151-200元/天', '201-250元/天', '251-300元/天', "300元/天以上", "2000元以下/月",
"2000-5000元/月", "5000-8000元/月",
"8000-10000元/月", "10000-15000元/月", "15000-20000元/月", "20000-25000元/月",
"25000-30000元/月", "30000元以上/月", "面议、暂无要求"
]
]
break;
default:
break;
}
this.isShowButton = true;
this.showPicker = true;
},
pickerButtonFunc(e) {
console.log(e, this.myResume, this.myResume[this.showType]);
this.myResume[this.showType] = e.value[0];
this.showPicker = false;
},
setPhoneFunc(e) {
this.myResume.phone = e;
},
setPhoneFunc1(e) {
this.isShowButton = true;
},
showToast(text) {
this.$refs.uToast.show({
type: 'error',
icon: false,
title: '失败主题',
message: text,
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
})
},
subMitResume() {
console.log(this.myResume);
this.isShowBorder = true;
if (!this.canSubMit) return;
const {
city,
education,
phone,
wage
} = this.myResume
// 中国大陆手机号码正则表达式
const mobileRegex = /\b(1[3-9]\d{9})\b/;
// 中国大陆座机号码正则表达式
const landlineRegex = /\b(0\d{2,3}-\d{7,8}(-\d{1,4})?)\b/;
const workList = JSON.stringify(this.gzList)
if (mobileRegex.test(phone) || landlineRegex.test(phone)) {
// 电话号码格式正确
console.log(phone, "电话号码格式正确");
setResume({
id: this.id,
education: education.label,
workplace: city.workplace ? city.workplace : city.parentLabel + '-' + city.label,
telephone: phone,
wage,
workExperience: workList
}).then(res => {
this.isShowButton = false;
this.getResume()
this.$store.dispatch('getResumeInfo')
this.$api.msg('保存成功')
})
} else {
// 电话号码格式不正确
console.log(phone, "电话号码格式不正确");
this.showToast("电话号码格式不正确");
}
return;
},
confirmAddress(val) {
console.log(val);
var valArr = val.value;
// this.areaModal.address = [...new Set(val.value)].join(' / ')
this.isShowButton = true
this.myResume.city.workplace = [...new Set(val.value)].join('/')
console.log(this.areaModal.address);
this.areaModal.addressShow = false
},
}
}
</script>
<style lang="scss" scoped>
.s-header {
display: flex;
justify-content: space-between;
text-align: center;
font-size: 13px;
padding: 10px 14px 0 14px;
.heade-lf {
line-height: 24px;
width: 38px;
height: 24px;
border-radius: 4px;
border: 1px solid #666666;
color: #666666;
}
.heade-ri {
line-height: 24px;
width: 38px;
height: 24px;
border-radius: 4px;
border: 1px solid #57ff36;
background-color: #57ff36;
color: #FFFFFF;
}
}
.workexperience {
font-weight: bold;
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.workexperience-right {
border-radius: 50%;
width: 16px;
height: 16px;
line-height: 13px;
text-align: center;
font-size: 20px;
color: #666666;
border: 1px solid #666666;
}
}
.card {
display: flex;
flex-direction: column;
padding: 14px;
.card-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
.card-right {
font-size: 12px;
color: #666666;
position: relative;
padding: 0 10px;
text-wrap: nowrap;
}
.card-right::after {
position: absolute;
content: '';
right: 0;
top: 5px;
width: 6px;
height: 6px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
transform: rotate(45deg);
}
.card-right:active {
color: #e8e8e8;
}
}
.card-subTitle {
margin-top: 6px;
display: flex;
justify-content: flex-start;
font-size: 12px;
color: #666666;
.card-sub1 {
margin-right: 10px;
}
}
.card-content {
margin-top: 4px;
font-size: 13px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #666666;
text-indent: 2em;
border-bottom: 1rpx solid #f2f2f2;
}
}
.card:active {
background-color: #f2f2f2;
}
</style>
<style>
.border {
margin-left: 30rpx;
width: 720rpx;
border: 1rpx solid #f2f2f2;
/* height: 1rpx;
background-color: #ddd; */
}
.jobText {
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #666666;
}
.jobAddress {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #999999;
}
.nochoose {
/* color: #ccc; */
}
.jobcontent {
padding: 30rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 63rpx;
border: 1px solid #fff;
}
.jobcontent image {
width: 40rpx;
height: 40rpx;
}
.listBody {}
.list_text {
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #666666;
background: #ffffff;
overflow-y: auto;
/* white-space: nowrap; */
overflow-wrap: break-word;
word-wrap: break-word;
}
.list image {
width: 40rpx;
height: 40rpx;
margin-left: auto;
}
.list {
padding: 0 15px 0 30rpx;
height: 126rpx;
/* line-height: 126rpx; */
background: #fff;
border-bottom: 1px solid #f2f2f2;
display: flex;
align-items: center;
justify-content: space-between;
}
.title image {
width: 40rpx;
height: 40rpx;
}
.title {
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #999999;
display: flex;
padding: 25rpx 30rpx;
/* padding-top: 30rpx; */
background-color: #fff;
align-items: center;
justify-content: space-between;
border: 1rpx solid #f2f2f2;
}
.userInfo {
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #999999;
}
.name {
margin-left: 20rpx;
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #333333;
line-height: 50rpx;
}
.head image:last-child {
width: 40rpx;
height: 40rpx;
margin-left: auto;
}
.head image {
width: 100rpx;
height: 100rpx;
}
page {
background-color: #FFFFFF;
}
.head {
padding: 30rpx;
width: 690rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
}
.saveWrapper {
width: 80%;
padding: 20rpx;
margin: 0 auto;
padding-bottom: 60rpx;
}
.input-error {
color: red;
}
</style>