ks-app-employment-service/packageA/pages/addPosition/addPosition.vue

<template>
    <AppLayout title="添加岗位">
        <template #headerleft>
            <view class="btn">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <view class="main">
            <view class="content-title">
                <view class="title-lf">
                    <view class="lf-h1">想找什么工作？</view>
                    <view class="lf-text">选择想找的工作，我的将在首页为你推荐</view>
                </view>
                <view class="title-ri">
                    <!--    <text style="color: #256bfa">2</text>
                    <text>/2</text> -->
                </view>
            </view>
            <view class="content-list">
                <view class="list-row" v-for="(item, index) in userInfo.jobTitle" :key="index">
                    <text>{{ item }}</text>
                    <image
                        class="row-image button-click"
                        @click="deleteItem(item, index)"
                        src="@/static/icon/delete1.png"
                        mode=""
                    ></image>
                </view>
                <view class="list-row-add button-click" @click="changeJobs">添加求职岗位</view>
            </view>
        </view>
        <SelectJobs ref="selectJobsModel"></SelectJobs>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const selectJobsModel = ref(null);

function deleteItem(item, index) {
    const ids = userInfo.value.jobTitleId
        .split(',')
        .filter((_, vIndex) => vIndex !== index)
        .join(',');
    complete({ jobTitleId: ids });
}

function changeJobs() {
    selectJobsModel.value?.open({
        title: '添加岗位',
        maskClick: true,
        success: (ids, labels) => {
            complete({ jobTitleId: ids });
        },
    });
}

function complete(values) {
    if (!values.jobTitleId.length) {
        return $api.msg('至少添加一份期望岗位');
    }
    $api.createRequest('/app/user/resume', values, 'post').then((resData) => {
        $api.msg('完成');
        getUserResume();
    });
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90rpx;
    height: 90rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.main{
    padding: 81rpx 42rpx 42rpx 42rpx
    .content-list{
        .list-row{
            background: #FFFFFF;
            border-radius: 18rpx 18rpx 18rpx 18rpx;
            border: 3rpx solid #DCDCDC;
            padding: 45rpx 42rpx
            display: flex;
            align-items: center
            justify-content: space-between
            margin-bottom: 42rpx;
            .row-image{
                width: 54rpx;
                height: 54rpx;
            }
        }
        .list-row-add{
            background: #FFFFFF;
            color: #256BFA
            font-size: 42rpx
            font-weight: 500
            border-radius: 18rpx 18rpx 18rpx 18rpx;
            border: 3rpx dashed #256BFA;
            padding: 45rpx 42rpx
            text-align: center
        }
    }
}
.content-title
    display: flex
    justify-content: space-between;
    align-items: center
    margin-bottom: 75rpx
    .title-lf
        font-size: 66rpx;
        color: #000000;
        font-weight: 600;
        .lf-text
            font-weight: 400;
            font-size: 42rpx;
            color: #6C7282;
    .title-ri
        font-size: 54rpx;
        color: #000000;
        font-weight: 600;
</style>