jobslink-user-clent/pageMy/my/resume/index.vue

<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 < 5" 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.trade }}、{{ item.worktypes }}、{{ item.skills }}
					</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="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 v-if="isShowButton" class="saveWrapper">
			<u-button @click="subMitResume" type="primary" shape="circle" text="保存"></u-button>
		</view>

		<view class="border"></view>

		<u-picker @confirm="pickerButtonFunc" @cancel="showPicker = false" :show="showPicker" :columns="columns"
			keyName="label"></u-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
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';

export default {
	components: {
		mSlideList
	},
	data() {
		return {
			controller: new controller(),
			myResume: {
				city: {},
				education: {},
				wage: "",
				phone: "",
			},
			mySkills: [],
			id: '1298609524179660801',
			// id: '',
			buttonList: [{
				title: '删除',
				background: '#ff3b32',
				clickName: 'remove'
			}],
			showPicker: false,
			showType: "",
			columns: [[]],

			canSubMit: false,
			isShowButton: false,
			isShowBorder: false,
			isShowAddSkill: true
		}
	},
	onShow() {
		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: {
		getResume() {
			myResume().then(res => {
				const data = res.data.data
				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
				}
			});
		},
		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/;


			if (mobileRegex.test(phone) || landlineRegex.test(phone)) {
				// 电话号码格式正确
				console.log(phone, "电话号码格式正确");
				setResume({
					id: this.id, education: education.label, workplace: city.parentLabel + '-' + city.label, telephone: phone, wage
				}).then(res => {
					this.isShowButton = false;
					this.getResume()
				})
			} else {
				// 电话号码格式不正确
				console.log(phone, "电话号码格式不正确");
				this.showToast("电话号码格式不正确");
			}
			return;




		}
	}
}
</script>

<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;
}

.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>