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="skillsId " 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', ({
				id,
				name
			}) => {
				this.worktypesId = id
				this.worktypesName = name
				this.skillsId = ''
				this.skillsName = ''
			})
			uni.$off('setSkill')
			uni.$on('setSkill', ({
				id,
				name
			}) => {
				this.skillsId = id
				this.skillsName = name
			})
		},
		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}`
					})
				} else {
					uni.showToast({
						title: '请先选择从事的行业',
						icon: 'none'
					});
				}
			},
			skillLevel: function() {
				if (!this.tradeId) {
					uni.showToast({
						title: '请先选择从事的行业',
						icon: 'none'
					});
				} else if (!this.worktypesId) {
					uni.showToast({
						title: '请先选择具备的技能',
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: `./skillLevel?id=${this.skillsId}&worktypesId=${this.worktypesId}`
					})
				}
			},
			submit: function() {
				addSkills(this.tradeName, this.worktypesName, this.skillsName).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>