招聘会模块
This commit is contained in:
639
components/jobfair/signDialog.vue
Normal file
639
components/jobfair/signDialog.vue
Normal file
@@ -0,0 +1,639 @@
|
||||
<template>
|
||||
<view class="job-dialog">
|
||||
<view class="header-title">
|
||||
<image :src="`${imgBaseUrl}/jobfair/xb.png`" mode=""></image>
|
||||
<text>招聘会报名</text>
|
||||
</view>
|
||||
<view class="dialog-content">
|
||||
<view class="detail-item" v-if="type == 2">
|
||||
<view class="gw-label">选择展区展位：</view>
|
||||
<!-- 展位状态说明 -->
|
||||
<view class="status-description">
|
||||
<view class="status-title">
|
||||
<text>展位状态说明：</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<view class="status-color available"></view>
|
||||
<text class="status-text">未被占用</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<view class="status-color occupied"></view>
|
||||
<text class="status-text">已被占用</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<view class="status-color pending"></view>
|
||||
<text class="status-text">待审核占用</text>
|
||||
</view>
|
||||
<view class="status-item">
|
||||
<view class="status-color selected"></view>
|
||||
<text class="status-text">当前选中</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="gw-value">
|
||||
<view class="cd-detail" v-for="(item, index) in areaAndBoothList" :key="index">
|
||||
<view class="cd-name">{{ item.jobFairAreaName }}</view>
|
||||
<view class="cd-con">
|
||||
<view class="cd-con-item" :class="getBoothStatusClass(booth)"
|
||||
v-for="(booth, boothIndex) in item.boothList" :key="boothIndex"
|
||||
@click="selectBooth(booth, item.jobFairAreaId)">
|
||||
<text>{{ booth.jobFairBoothName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="gw-label">请选择招聘岗位：</view>
|
||||
<view class="gw-value">
|
||||
<view class="checkbox-group">
|
||||
<view class="checkbox-item job-item" v-for="(item, index) in jobList" :key="index"
|
||||
:class="{ 'checked': checkList.includes(item) }" @click="toggleJobSelection(item)">
|
||||
<view class="item-checkbox">
|
||||
<view class="checkbox-icon" :class="{ 'checked': checkList.includes(item) }">
|
||||
<text v-if="checkList.includes(item)">✓</text>
|
||||
</view>
|
||||
<view class="job-info">
|
||||
<view class="job-name">{{ item.jobTitle }}</view>
|
||||
<view class="salary">{{ item.salaryRange }}元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="gw-label">请上传招聘海报：</view>
|
||||
<view class="gw-value">
|
||||
<view v-if="imageUrl">
|
||||
<image v-if="imageUrl" :src="publicUrl + '/file/file/minio' + imageUrl" class="avatar"
|
||||
mode="aspectFit" />
|
||||
<button type="warn" class="del-icon" @click="imageUrl = ''" size="mini">删除</button>
|
||||
</view>
|
||||
<view v-else>
|
||||
<button @click="chooseImage" class="avatar-uploader transparent-btn" type="default">
|
||||
<view class="avatar-uploader-icon">+</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<button style="background: #409EFF;color: #fff;" @click="submitForm">提交</button>
|
||||
<button type="default" @click="closeDialog">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import config from "@/config.js"
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick,
|
||||
watch,
|
||||
inject
|
||||
} from 'vue';
|
||||
|
||||
const emit = defineEmits(['closePopup']);
|
||||
import {
|
||||
createRequest
|
||||
} from '@/utils/request.js';
|
||||
const {
|
||||
$api
|
||||
} = inject('globalFunction');
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 招聘会类型1线上 2线下
|
||||
signType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 报名角色 ent企业 person个人
|
||||
signRole: {
|
||||
type: String,
|
||||
default: 'ent'
|
||||
},
|
||||
// 招聘会id
|
||||
jobFairId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
// 监听props变化
|
||||
watch(() => props.signType, (newVal) => {
|
||||
type.value = newVal;
|
||||
});
|
||||
|
||||
// 响应式数据
|
||||
const checkList = ref([]);
|
||||
const imageUrl = ref('');
|
||||
const type = ref('');
|
||||
const id = ref('');
|
||||
const jobList = ref([]);
|
||||
const userId = ref('');
|
||||
const areaAndBoothList = ref([]);
|
||||
const jobFairAreaId = ref(null);
|
||||
const jobFairBoothId = ref(null);
|
||||
const avatarUploader = ref(null);
|
||||
|
||||
// 配置
|
||||
const publicUrl = config.LCBaseUrl;
|
||||
const imgBaseUrl = config.imgBaseUrl
|
||||
const uploadUrl = config.LCBaseUrl + "/file/file/upload";
|
||||
|
||||
// 方法
|
||||
const selectBooth = (booth, jobFairAreaIdVal) => {
|
||||
if (booth.status == 0) {
|
||||
jobFairBoothId.value = booth.jobFairBoothId;
|
||||
jobFairAreaId.value = jobFairAreaIdVal;
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
if (type.value == "2") {
|
||||
if (!jobFairBoothId.value || !jobFairAreaId.value) {
|
||||
uni.showToast({
|
||||
title: '请选择展区展位',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (checkList.value.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择招聘岗位',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!imageUrl.value) {
|
||||
uni.showToast({
|
||||
title: '请上传招聘海报',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
$api.myRequest("/system/user/login/user/info", {}, "GET", 10100, {
|
||||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`
|
||||
}).then((userInfo) => {
|
||||
let data = {}
|
||||
if (type.value == "2") {
|
||||
data = {
|
||||
jobFairId: id.value,
|
||||
enterpriseId: userInfo.info.userId,
|
||||
jobInfoList: checkList.value,
|
||||
poster: imageUrl.value,
|
||||
jobFairAreaId: jobFairAreaId.value,
|
||||
jobFairBoothId: jobFairBoothId.value,
|
||||
code: userInfo.info.entCreditCode
|
||||
};
|
||||
} else {
|
||||
data = {
|
||||
jobFairId: id.value,
|
||||
enterpriseId: userInfo.info.userId,
|
||||
jobInfoList: checkList.value,
|
||||
poster: imageUrl.value,
|
||||
code: userInfo.info.entCreditCode
|
||||
};
|
||||
}
|
||||
$api.myRequest("/jobfair/public/job-fair-sign-up-enterprise/sign-up", data, "post", 9100, {
|
||||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '报名成功',
|
||||
icon: 'success'
|
||||
});
|
||||
closeDialog();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '报名失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
checkList.value = [];
|
||||
imageUrl.value = '';
|
||||
jobFairBoothId.value = null;
|
||||
jobFairAreaId.value = null;
|
||||
emit('closePopup')
|
||||
};
|
||||
|
||||
const handleAvatarSuccess = (response) => {
|
||||
imageUrl.value = response.data.url;
|
||||
uni.showToast({
|
||||
title: '海报上传成功',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
const showDialog = (dialogType, dialogId) => {
|
||||
type.value = dialogType;
|
||||
id.value = dialogId;
|
||||
nextTick(() => {
|
||||
getJobList();
|
||||
if (type.value === "2") {
|
||||
getAreaAndBoothInfo();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 展区展位列表
|
||||
const getAreaAndBoothInfo = () => {
|
||||
const data = {
|
||||
jobFairId: props.jobFairId,
|
||||
}
|
||||
$api.myRequest("/jobfair/public/jobfair/area-and-booth-info-by-job-fair-id", data, "GET", 9100, {
|
||||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`
|
||||
}).then((resData) => {
|
||||
areaAndBoothList.value = resData.data || [];
|
||||
});
|
||||
};
|
||||
|
||||
// 岗位列表
|
||||
const getJobList = () => {
|
||||
$api.myRequest("/system/user/login/user/info", {}, "GET", 10100, {
|
||||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`
|
||||
}).then((userInfo) => {
|
||||
const data = {
|
||||
jobFairId: id.value,
|
||||
enterpriseId: userInfo.info.userId,
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
code: userInfo.info.entCreditCode
|
||||
}
|
||||
$api.myRequest("/jobfair/public/job-info/list", data, "GET", 9100, {
|
||||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`
|
||||
}).then((resData) => {
|
||||
jobList.value = resData.data.list || [];
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const getBoothStatusClass = (booth) => {
|
||||
const s = booth.status || 0;
|
||||
if (s == 1) return "cd-con-item-checked";
|
||||
if (s == 2) return "cd-con-item-review";
|
||||
if (jobFairBoothId.value && jobFairBoothId.value == booth.jobFairBoothId)
|
||||
return "cd-con-item-mychecked";
|
||||
return "";
|
||||
};
|
||||
|
||||
// 选择图片
|
||||
const chooseImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uploadImage(tempFilePath);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 上传图片
|
||||
const uploadImage = (tempFilePath) => {
|
||||
uni.uploadFile({
|
||||
url: uploadUrl,
|
||||
filePath: tempFilePath,
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
try {
|
||||
const response = JSON.parse(uploadFileRes.data);
|
||||
handleAvatarSuccess(response);
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: '上传失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传失败:', err);
|
||||
uni.showToast({
|
||||
title: '上传失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 切换岗位选择
|
||||
const toggleJobSelection = (item) => {
|
||||
const index = checkList.value.indexOf(item);
|
||||
if (index > -1) {
|
||||
checkList.value.splice(index, 1);
|
||||
} else {
|
||||
checkList.value.push(item);
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
showDialog
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
type.value = props.signType;
|
||||
if (props.jobFairId) {
|
||||
id.value = props.jobFairId;
|
||||
getJobList();
|
||||
if (props.signType == 2) {
|
||||
getAreaAndBoothInfo();
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听jobFairId变化
|
||||
watch(() => props.jobFairId, (newVal) => {
|
||||
if (newVal) {
|
||||
id.value = newVal;
|
||||
getJobList();
|
||||
if (type.value === 2) {
|
||||
getAreaAndBoothInfo();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.del-icon {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.btn-box button {
|
||||
padding: 0 80rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
border: 2rpx solid #0983ff;
|
||||
border-radius: 12rpx;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 400rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 56rpx;
|
||||
color: #007AFF;
|
||||
line-height: 200rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.job-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 0 20rpx;
|
||||
height: calc(100% - 17vh);
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 2rpx solid #b5d3ff;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.job-item {
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
.checkbox-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox-icon.checked {
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.job-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.detail-item .gw-label {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail-item .gw-value {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-name {
|
||||
background: #d3e8ff;
|
||||
color: #0076d9;
|
||||
font-size: 40rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-name::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 10rpx;
|
||||
height: 100%;
|
||||
background: #349cfc;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-con {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 30rpx 40rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-con .cd-con-item {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #67CFA7;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 20rpx;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-con .cd-con-item-review {
|
||||
background-color: #F8BB92;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-con .cd-con-item-checked {
|
||||
background: #F6A1A1;
|
||||
}
|
||||
|
||||
.detail-item .gw-value .cd-detail .cd-con .cd-con-item-mychecked {
|
||||
background: #79BEFE;
|
||||
}
|
||||
|
||||
.item-checkbox {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.job-name {
|
||||
font-size: 32rpx;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.salary {
|
||||
font-size: 32rpx;
|
||||
color: #ff6e27;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 40rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-title image {
|
||||
width: 14rpx;
|
||||
height: 33rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 400rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
/* 展位状态说明样式 */
|
||||
.status-description {
|
||||
margin-top: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 16rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
width: 43%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.status-color {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.status-color.available {
|
||||
background-color: #67CFA7;
|
||||
border: 2rpx solid #ddd;
|
||||
}
|
||||
|
||||
.status-color.occupied {
|
||||
background-color: #F6A1A1;
|
||||
}
|
||||
|
||||
.status-color.pending {
|
||||
background-color: #F8BB92;
|
||||
}
|
||||
|
||||
.status-color.selected {
|
||||
background-color: #79BEFE;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
/* 透明按钮样式 */
|
||||
.transparent-btn {
|
||||
background: transparent !important;
|
||||
border: 2rpx dashed #0983ff !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user