109 lines
2.9 KiB
Vue
109 lines
2.9 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
:show-close="true"
|
||
width="4.8rem"
|
||
class="dislike-dialog"
|
||
:close-on-click-modal="true"
|
||
>
|
||
<!-- 弹窗标题 -->
|
||
<div class="dislike-dialog__title">为了给您推荐更适合岗位，请告诉我们不匹配的原因：</div>
|
||
|
||
<!-- 原因选项列表 — 单选 -->
|
||
<div class="dislike-dialog__options">
|
||
<label
|
||
v-for="option in dislikeOptions"
|
||
:key="option.value"
|
||
class="dislike-dialog__option"
|
||
:class="{ 'dislike-dialog__option--active': dislikeReason === option.value }"
|
||
>
|
||
<el-radio v-model="dislikeReason" :value="option.value">{{ option.label }}</el-radio>
|
||
</label>
|
||
</div>
|
||
|
||
<!-- 补充描述输入框 -->
|
||
<el-input
|
||
v-model="dislikeDetail"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="请描述您的原因"
|
||
class="dislike-dialog__textarea"
|
||
/>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="dislike-dialog__footer">
|
||
<button class="dislike-dialog__btn dislike-dialog__btn--cancel" @click="visible = false">取消</button>
|
||
<button class="dislike-dialog__btn dislike-dialog__btn--submit" @click="handleDislikeSubmit">提交</button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import { dislikeJob } from '@/api/jobs'
|
||
|
||
const props = defineProps<{
|
||
modelValue: boolean
|
||
jobId: string | null
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', value: boolean): void
|
||
(e: 'disliked'): void
|
||
}>()
|
||
|
||
const visible = computed({
|
||
get: () => props.modelValue,
|
||
set: (val: boolean) => emit('update:modelValue', val),
|
||
})
|
||
|
||
/** 不感兴趣的原因（单选，0-5） */
|
||
const dislikeReason = ref<number | undefined>(undefined)
|
||
|
||
/** 不感兴趣的补充描述 */
|
||
const dislikeDetail = ref('')
|
||
|
||
/** 不感兴趣原因选项列表（与接口 reason 0-5 对应） */
|
||
const dislikeOptions = [
|
||
{ value: 0, label: '对公司不感兴趣' },
|
||
{ value: 1, label: '对岗位不感兴趣' },
|
||
{ value: 2, label: '对行业不感兴趣' },
|
||
// { value: 3, label: '技能不符合' },
|
||
{ value: 4, label: '地点不合适' },
|
||
{ value: 5, label: '其他' },
|
||
]
|
||
|
||
/** 是否正在提交 */
|
||
const submitting = ref(false)
|
||
|
||
/** 提交不感兴趣反馈 */
|
||
async function handleDislikeSubmit() {
|
||
if (dislikeReason.value === undefined) {
|
||
ElMessage.warning('请选择一个原因')
|
||
return
|
||
}
|
||
if (!props.jobId) return
|
||
submitting.value = true
|
||
try {
|
||
const res = await dislikeJob(props.jobId, dislikeReason.value)
|
||
if (res.code === '0') {
|
||
ElMessage.success('反馈已提交，感谢您的反馈')
|
||
visible.value = false
|
||
emit('disliked')
|
||
}
|
||
} catch (e) {
|
||
console.error('提交不感兴趣反馈失败', e)
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
/** 弹窗打开时重置表单 */
|
||
function resetForm() {
|
||
dislikeReason.value = undefined
|
||
dislikeDetail.value = ''
|
||
}
|
||
|
||
defineExpose({ resetForm })
|
||
</script>
|