jobslink-user-clent/pages/recruit/recruit.vue

<template>
	<view class="container">
		<view class="select">请选择</view>
		<view class="select-text">您是个体户招工还是企业招工</view>
		<view class="block" @click="next(0)">
			<img src="../../static/img/zhao_icon1.png" alt="" />
			<view class="block-text">个体户招工</view>
		</view>
		<view class="block" @click="next(1)">
			<img src="../../static/img/zhao_icon2.png" alt="" />
			<view class="block-text" style="background-color: #4171F9;">企业招工</view>
		</view>
	</view>
</template>

<script>
    import {seeIsHaveCodep} from '@/api/userrecruit.js'
    import { mapState } from 'vuex' 
    
	export default {
		data() {
			return {
				
			}
		},
        computed: {
            ...mapState({idNumber: (state) => state.auth.authInfo.idNumber}),
        },
		methods: {
			next(type) {
                switch (type){
                    case 0:
                        this.$store.commit('setEnterprise', type)
                        this.navTo('/pages/recruit/subPage/index?type=none')
                        break;
                    case 1:
                        this.isHaveCode(this.idNumber).then(() => {
                            this.$store.commit('setEnterprise', type)
                            this.navTo('/pages/recruit/subPage/index?type=enterprise')
                        })
                        break;
                }
            },
            isHaveCode(idNumber) {
                return new Promise(async(resolve, reject) => {
                    let resData = await seeIsHaveCodep({idNumber})
                    if(resData.data.code === 200) {
                        resData.data.data && resolve()
                    } else {
                        reject()
                    }
                })
            }
		}
	}
</script>

<style lang="scss">
.container {
	padding: 60rpx;
	.select {
		font-size: 46rpx;
		color: #000;
	}
	.select-text {
		font-size: 28rpx;
		color: #999;
		margin-top: 10rpx;
	}
	.block {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #f3f4f8;
		margin: 40rpx auto;
		position: relative;
		display: flex;
		align-items: center;
		.block-text {
			color: #fff;
			font-size: 26rpx;
			position: absolute;
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: #45D4B6;
			text-align: center;
			line-height: 60rpx;
			right: 20rpx;
			top: 50%;
			margin-top: -30rpx;
		}
		img {
			width: 300rpx;
			margin-left: 50rpx;
		}
	}
	
}
</style>