ks-app-employment-service/pages/login/login.vue

<template>
    <view class="container">
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        <tabcontrolVue :current="tabCurrent">
            <!-- tab0 -->
            <template v-slot:tab0>
                <view class="login-content">
                    <image class="logo" src="../../static/logo.png"></image>
                    <view class="logo-title">就业</view>
                </view>
                <view class="btns">
                    <button class="wxlogin" @click="loginTest">登录</button>
                    <!-- <button open-type="getUserInfo" @getuserinfo="getuserinfo" class="wxlogin">登录</button> -->
                    <view class="wxaddress">青岛市公共就业和人才服务中心</view>
                </view>
            </template>
            <!-- tab1 -->
            <template v-slot:tab1>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的性别1/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_justmiddle fl_1 fl_alstart">
                        <view class="tabtwo-sex" @click="changeSex(1)">
                            <image class="sex-img" src="../../static/icon/woman.png"></image>
                            <view class="mar_top5">女</view>
                            <view v-if="fromValue.sex === 1" class="dot doted"></view>
                            <view v-else class="dot"></view>
                        </view>
                        <view class="tabtwo-sex" @click="changeSex(0)">
                            <image class="sex-img" src="../../static/icon/man.png"></image>
                            <view class="mar_top5">男</view>
                            <view v-if="fromValue.sex === 0" class="dot doted"></view>
                            <view v-else class="dot"></view>
                        </view>
                    </view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab2 -->
            <template v-slot:tab2>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的年龄断段2/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_deri fl_almiddle">
                        <!-- <view class="agebtn agebtned">30岁以下</view> -->
                        <view
                            class="agebtn"
                            :class="{ agebtned: item.value === fromValue.age }"
                            v-for="item in state.ageList"
                            :key="item.value"
                            @click="changeAge(item.value)"
                        >
                            {{ item.label }}
                        </view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab3 -->
            <template v-slot:tab3>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的学历3/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="eduction-content">
                        <view
                            class="eductionbtn"
                            :class="{ eductionbtned: item.value === fromValue.education }"
                            v-for="item in oneDictData('education')"
                            @click="changeEducation(item.value)"
                            :key="item.value"
                        >
                            {{ item.label }}
                        </view>
                    </view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab4 -->
            <template v-slot:tab4>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">您期望的薪资范围4/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="salary">
                        <picker-view
                            indicator-style="height: 140rpx;"
                            :value="state.salayData"
                            @change="bindChange"
                            class="picker-view"
                        >
                            <picker-view-column>
                                <view class="item" v-for="(item, index) in state.lfsalay" :key="index">
                                    <view class="item-child" :class="{ 'item-childed': state.salayData[0] === index }">
                                        {{ item }}k
                                    </view>
                                </view>
                            </picker-view-column>
                            <view class="item-center">至</view>
                            <picker-view-column>
                                <view class="item" v-for="(item, index) in state.risalay" :key="index">
                                    <view class="item-child" :class="{ 'item-childed': state.salayData[2] === index }">
                                        {{ item }}k
                                    </view>
                                </view>
                            </picker-view-column>
                        </picker-view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab5 -->
            <template v-slot:tab5>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="eduction-content">
                        <!-- <view class="eductionbtn eductionbtned">市南区</view> -->
                        <view
                            class="eductionbtn"
                            :class="{ eductionbtned: item.value === fromValue.area }"
                            v-for="item in oneDictData('area')"
                            :key="item.value"
                            @click="changeArea(item.value)"
                        >
                            {{ item.label }}
                        </view>
                        <!-- <view class="eductionbtn">不限区域</view> -->
                    </view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab6 -->
            <template v-slot:tab6>
                <view class="tabtwo sex-two">
                    <view class="tabtwo-top mar_top25 mar_le25">
                        <view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="sex-content fl_1">
                        <expected-station @onChange="changeJobTitleId" :station="state.station"></expected-station>
                    </view>
                    <button class="nextstep confirmStep" @click="complete">完成</button>
                    <!-- <navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
                        <button class="nextstep confirmStep" @click="complete">完成</button>
                    </navigator> -->
                </view>
            </template>
        </tabcontrolVue>
    </view>
</template>

<script setup>
import tabcontrolVue from './components/tabcontrol.vue';
import { reactive, inject, watch, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { statusBarHeight } = inject('deviceInfo');
const { $api, navTo } = inject('globalFunction');
const { loginSetToken, getUserResume } = useUserStore();
const { getDictSelectOption, oneDictData } = useDictStore();
// status
const tabCurrent = ref(0);
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
    station: [],
    stationCateLog: 1,
    ageList: [],
    lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
    risalay: JSON.parse(JSON.stringify(salay)),
    salayData: [0, 0, 0],
});
const fromValue = reactive({
    sex: 1,
    age: '0',
    education: '4',
    salaryMin: 2000,
    salaryMax: 2000,
    area: 0,
    jobTitleId: '',
});

onLoad((parmas) => {
    getDictSelectOption('age').then((data) => {
        state.ageList = data;
    });
    getTreeselect();
});

// 选择薪资
function bindChange(val) {
    state.salayData = val.detail.value;
    const copyri = JSON.parse(JSON.stringify(salay));
    const [lf, _, ri] = val.detail.value;
    state.risalay = copyri.slice(lf, copyri.length);
    fromValue.salaryMin = copyri[lf] * 1000;
    fromValue.salaryMax = state.risalay[ri] * 1000;
}
function changeSex(sex) {
    fromValue.sex = sex;
}
function changeAge(age) {
    fromValue.age = age;
}
function changeEducation(education) {
    fromValue.education = education;
}
function changeArea(area) {
    fromValue.area = area;
}
function changeJobTitleId(jobTitleId) {
    fromValue.jobTitleId = jobTitleId;
}
// 行为
// function changeStationLog(item) {
//     state.stationCateLog = item.value;
// }
function nextStep() {
    tabCurrent.value += 1;
}
// function handleScroll(event) {
//     console.log('滚动条滚动', event.detail.scrollTop);
//     console.log(Math.round(event.detail.scrollTop / 75));
//     // this.activeIndex = Math.round(event.detail.scrollTop / 75);
// }

// 获取职位
function getTreeselect() {
    $api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
        state.station = resData.data;
    });
}

// 登录
function loginTest() {
    const params = {
        username: 'test',
        password: 'test',
    };
    $api.createRequest('/app/login', params, 'post').then((resData) => {
        $api.msg('模拟帐号密码测试登录成功');
        loginSetToken(resData.token).then((resume) => {
            if (resume.data.jobTitleId) {
                // 设置推荐列表，每次退出登录都需要更新
                useUserStore().initSeesionId();
                uni.reLaunch({
                    url: '/pages/index/index',
                });
            } else {
                nextStep();
            }
        });
    });
}

function complete() {
    $api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
        $api.msg('完成');
        getUserResume();
        uni.reLaunch({
            url: '/pages/index/index',
        });
    });
}
</script>

<style lang="stylus" scoped>

.container
    background: linear-gradient(#4778EC, #002979);
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    position: fixed;

.login-content
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    .logo
        width: 266rpx;
        height: 182rpx;
    .logo-title
        font-size: 88rpx;
        color: #FFFFFF;
        width: 180rpx;
.btns
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0)
    .wxlogin
        width: 562rpx;
        height: 140rpx;
        border-radius: 70rpx;
        background-color: #13C57C;
        color: #FFFFFF;
        text-align: center;
        line-height: 140rpx;
        font-size: 70rpx;
    .wxaddress
        color: #BBBBBB;
        margin-top: 70rpx;
        text-align: center;
//  2
.tabtwo
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 40rpx);
.tabtwo-top
    margin: 222rpx  0 0 0;
    width: 100%;
.tabtwo-sex
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 40rpx;
    margin: 200rpx 60rpx 0 60rpx;
    .sex-img
        width: 184rpx;
        height: 184rpx;
.dot
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
    background: #d1d1d6;
    position: relative;
.dot:before
    content: '';
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #1e4baa;
.doted
    background: #13C57C;
.doted:after{
    content: '';
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
    background: #13C57C;
}
.agebtn
    width: 630rpx;
    height: 108rpx;
    border-radius: 20rpx;
    background: #d9d9d9;
    text-align: center;
    line-height: 108rpx;
    font-size: 40rpx;
    margin-top: 50rpx;
    color: #606060;
.agebtned
    background: #13C57C;
    color: #FFFFFF;
.nextstep
    width: 630rpx;
    height: 98rpx;
    border-radius: 20rpx;
    background: #13C57C;
    text-align: center;
    line-height: 98rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin-bottom: 150rpx;
.confirmStep
    margin-bottom: 50rpx;
.eduction-content
    width: fit-content;
    display: grid;
    grid-template-columns: 300rpx 300rpx;
    grid-gap: 20rpx;
    margin-top: 50rpx;
    .eductionbtn
        width: 300rpx;
        height: 108rpx;
        border-radius: 20rpx;
        background: #d9d9d9;
        text-align: center;
        line-height: 108rpx;
        font-size: 36rpx;
        color: #606060;
    .eductionbtned
        background: #13C57C;
        color: #FFFFFF;
.salary
    width: fit-content;
    display: grid;
    grid-template-columns: 640rpx;
    grid-gap: 20rpx;
    margin-top: 50rpx;
    .picker-view {
        width: 100%;
        height: 600rpx;
        margin-top: 20rpx;
        .uni-picker-view-mask{
            background: rgba(0,0,0,0);
        }
    }
    .item {
        .item-child{
            line-height: 90rpx;
            font-size: 38rpx;
            color: #606060;
            text-align: center;
            background: #D9D9D9;
            border-radius: 20rpx;
            margin: 20rpx 10rpx 20rpx 10rpx;
        }
        .item-childed{
             line-height: 105rpx;
            margin: 10rpx 5rpx 10rpx 5rpx;
            background: #13C57C;
            color: #FFFFFF;
        }
    }
    .item-center{
        width: 40rpx;
        line-height: 600rpx;
        width: 51rpx;
        height: 47rpx;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    .uni-picker-view-indicator:after{
        border: 0
    }
    .uni-picker-view-indicator:before{
        border: 0
    }
    .center-text
        color: #FFFFFF;
        text-align: center;
        line-height: 400rpx;
    .salary-content
        width: 300rpx;
        height: 380rpx;
        .salary-content-item
            height: 104rpx;
            line-height: 104rpx;
            margin: 20rpx 10rpx 20rpx 10rpx;
            border-radius: 20rpx;
            background: #d9d9d9;
            text-align: center;
            font-size: 38rpx;
        .salary-content-item-selected
            margin: 10rpx 5rpx 10rpx 5rpx;
            background: #13C57C;
            color: #FFFFFF;
.sex-two
    padding-left: 0;
    padding-right: 0;
    background: #4678ec;
.sex-content
    border-radius: 20rpx;
    width: 100%;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    display: flex;
    overflow: hidden;
    height: 100%
</style>