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
            }) => {
                console.log('detail,', detail)
                // this.skillsId = id
                this.skillsName = `${detail.parentLabel}-${detail.parentTwoLabel}-${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() {

                uni.navigateTo({
                    url: `./skillLevel?id=${this.skillsId}&worktypesId=${this.worktypesId}&maxLayer=3&type=2`
                })
            },
            submit: async function() {
                // console.log(this.tradeName, this.worktypesName, this.skillsName);
                let result = this.worktypesName.split('-');
                let result1 = this.skillsName.split('-');

                // 工种
                await addSkills(this.tradeName, result[0], result[1], 0)
                // 岗位
                await addSkills(this.tradeName, `${result1[0]}、${result1[1]}`, result1[2], 1)
                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>