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

<template>
	<view style="background-color: #fefefe;">
		<view class="titles">
			添加职业技能
		</view>
		<view class="slo">
			添加职业技能，获得个性化的职位推荐
		</view>
		<view class="jobcontent" @click="goAddind">
			<view class="jobinfo">
				<view class="jobAddress">
					我所属的行业
				</view>
				<view v-if="tradeName" class="jobText">{{ tradeName }}</view>
				<view v-else class="jobText nochoose">请选择</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="border"></view>
		<view class="jobcontent" @click="skill">
			<view class="jobinfo">
				<view class="jobAddress">
					我具备的工种
				</view>
				<view v-if="worktypesName" class="jobText">{{ worktypesName }}</view>
				<view v-else class="jobText nochoose">请选择</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="border"></view>
		<view class="jobcontent" @click="skillLevel">
			<view class="jobinfo">
				<view class="jobAddress">
					我从事的岗位
				</view>
				<view v-if="skillsName" class="jobText">{{ skillsName }}</view>
				<view v-else class="jobText nochoose">请选择</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="border"></view>
		<view class="btn">
			<view v-if="skillsName" class="bottombtn" @click="submit">确定</view>
			<view v-else class="bottombtn disabledBtn">确定</view>
		</view>
	</view>
</template>

<script>
import {
	addSkills
} from '@/api/resume.js'

export default {
	data() {
		return {
			tradeId: '',
			tradeName: '',
			worktypesId: '',
			worktypesName: '',
			skillsId: '',
			skillsName: '',
		}
	},
	onLoad(query) {
		uni.$off('setInd')
		uni.$on('setInd', ({
			id,
			name
		}) => {
			this.tradeId = id
			this.tradeName = name
			this.worktypesId = ''
			this.worktypesName = ''
			this.skillsId = ''
			this.skillsName = ''
		})
		uni.$off('setworkTypes')
		uni.$on('setworkTypes', ({
			detail
		}) => {
			console.log(detail, "id,name");
			// this.worktypesId = id
			this.worktypesName = detail.parentLabel + "-" + detail.label
			// this.skillsId = ''
			// this.skillsName = ''
		})
		uni.$off('setSkill')
		uni.$on('setSkill', ({
			detail
		}) => {
			// this.skillsId = id
			this.skillsName = detail.parentLabel + "-" + detail.label
		})
	},
	methods: {
		goAddind: function () {
			uni.navigateTo({
				url: './addInd?id=' + this.tradeId
			})
		},
		skill: function () {
			if (this.tradeId) {
				uni.navigateTo({
					url: `./skill?id=${this.worktypesId}&tradeId=${this.tradeId}&maxLayer=2&type=1`
				})
			} else {
				uni.showToast({
					title: '请先选择从事的行业',
					icon: 'none'
				});
			}
		},
		skillLevel: function () {
			if (!this.tradeId) {
				uni.showToast({
					title: '请先选择从事的行业',
					icon: 'none'
				});
			} else if (!this.worktypesName) {
				uni.showToast({
					title: '请先选择具备的技能',
					icon: 'none'
				});
			} else {
				uni.navigateTo({
					url: `./skillLevel?id=${this.skillsId}&worktypesId=${this.worktypesId}&maxLayer=2&type=2`
				})
			}
		},
		submit: function () {
			console.log(this.tradeName, this.worktypesName, this.skillsName);
			let result = this.worktypesName.split('-');
			let result1 = this.skillsName.split('-');
			console.log(result, result1);
			
			// 工种
			addSkills(this.tradeName, result[0], result[1], 0).then(res => {
				uni.navigateBack()
			})
			// 岗位
			addSkills(this.tradeName, result1[0], result1[1], 1).then(res => {
				uni.navigateBack()
			})
		}
	}
}
</script>

<style>
.slo {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #999999;

	padding: 0 30rpx;
	padding-top: 10rpx;
}

.titles {
	font-family: PingFangSC-Medium;
	font-size: 36rpx;
	color: #333333;
	padding: 0 30rpx;
	padding-top: 30rpx;
}

.border {
	margin-left: 30rpx;
	width: 720rpx;
	border-bottom: 2rpx solid #ddd;
	opacity: 0.6;
}

.jobText {
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #666666;
}

.nochoose {
	color: #ccc;
}

.jobAddress {
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #999999;
}

.jobcontent {
	padding: 30rpx;

	background: #fefefe;
	display: flex;
	/* align-items: center; */
	align-items: flex-end;
	justify-content: space-between;
	line-height: 63rpx;
}

.jobcontent image {
	width: 40rpx;
	height: 40rpx;
	margin-bottom: 5px;

}

.listBody {}

.list_text {
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #666666;
}

.list image {
	width: 40rpx;
	height: 40rpx;
	margin-left: auto;
}

.list {
	padding: 0 30rpx;
	height: 126rpx;
	background: #fefefe;
	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: 10rpx 30rpx;
	background-color: #fefefe;
	align-items: center;
	justify-content: space-between;
}

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

.head {
	padding: 30rpx;
	width: 690rpx;
	background-color: #fefefe;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.bottombtn {
	background-color: #1b66ff;
	color: #fff;
	text-align: center;
	border-radius: 10rpx;
	font-family: PingFangSC-Medium;
	font-size: 32rpx;
	height: 90rpx;
	line-height: 90rpx;
}

.btn {
	background-color: #fefefe;
	width: 690rpx;
	padding: 30rpx;
	padding-bottom: 80rpx;
	position: fixed;
	bottom: 0;
	left: 0;
}

.disabledBtn {
	background-color: #c8c9cc;
}
</style>