<template>
|
<el-dialog
|
v-model="dialogFlag"
|
width="700"
|
title="填写报名信息"
|
align-center
|
:show-close="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<el-divider class="m-0"></el-divider>
|
<div class="py-7">
|
<el-row align="middle">
|
<el-col :span="3" style="display: flex; flex-direction: column; align-items: center;">
|
<el-row>
|
<el-tag round :color="active==1?'#0069ff':'#999999'" style="width: 36px;height: 36px;">
|
<el-text class="text-white text-lg">1</el-text>
|
</el-tag>
|
</el-row>
|
<el-row class="mt-1"><el-text :style="{color: active==1?'#0069ff':'#666666'}">填写资料</el-text></el-row>
|
</el-col>
|
<el-col :span="18">
|
<div style="width: 100%;border-top: 1px solid #c3c3c3; margin-top: -10px;"></div>
|
</el-col>
|
<el-col :span="3" style="display: flex; flex-direction: column; align-items: center;">
|
<el-row>
|
<el-tag round :color="active==2?'#0069ff':'#fff'" style="width: 36px;height: 36px;border-color: #999999;">
|
<el-text class="text-lg" :style="{color: active==2?'#fff':'#999999' }">2</el-text>
|
</el-tag>
|
</el-row>
|
<el-row class="mt-1"><el-text :style="{color: active==2?'#0069ff':'#666666'}">确认信息</el-text></el-row>
|
</el-col>
|
</el-row>
|
<el-form ref="form" :model="signupInfo" :rules="rules" class="pb-6">
|
<template v-if="active==1">
|
<contentTitle title="考试信息" />
|
<div class="px-3">
|
<el-form-item>
|
<el-text>评价职业：</el-text>
|
<el-text class="text-black">{{ signupInfo.occupationJob }}</el-text>
|
</el-form-item>
|
<el-form-item>
|
<el-text>评价等级：</el-text>
|
<el-text class="text-black">{{ signupInfo.levelText }}</el-text>
|
</el-form-item>
|
</div>
|
<contentTitle title="考试科目" />
|
<div class="px-3">
|
<el-form-item label="科目" prop="subject">
|
<el-checkbox-group v-model="signupInfo.subject">
|
<el-checkbox
|
v-for="(subject,index) in subjectItems"
|
:key="`subject${index}`"
|
:label="subject.label"
|
:value="subject.value"
|
/>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
<div class="px-3">
|
<el-form-item label="姓名" prop="name" class="flex-1 mr-6">
|
<el-input v-model="signupInfo.name" />
|
</el-form-item>
|
<el-form-item label="性别" prop="gender" class="flex-1 mr-6">
|
<el-radio-group v-model="signupInfo.gender">
|
<el-radio :value="1">男</el-radio>
|
<el-radio :value="2">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="手机号" prop="mobilePhone" class="flex-1 mr-6">
|
<el-input v-model="signupInfo.mobilePhone" />
|
</el-form-item>
|
<el-form-item label="身份证号" prop="idNumber" class="flex-1 mr-6">
|
<el-input v-model="signupInfo.idNumber" />
|
</el-form-item>
|
</div>
|
</template>
|
<template v-else-if="active == 2">
|
<contentTitle title="考试信息" />
|
<div class="px-3">
|
<el-form-item>
|
<el-text>评价职业：</el-text>
|
<el-text class="text-black">{{ signupInfo.occupationJob }}</el-text>
|
</el-form-item>
|
<el-form-item>
|
<el-text>评价等级：</el-text>
|
<el-text class="text-black">{{ signupInfo.levelText }}</el-text>
|
</el-form-item>
|
</div>
|
<contentTitle title="考试科目" />
|
</template>
|
</el-form>
|
</div>
|
<el-divider class="m-0"></el-divider>
|
<template #footer>
|
<el-row justify="end">
|
<el-button @click="close">取消</el-button>
|
<el-button type="primary" @click="lastStep" v-if="active==2">上一步</el-button>
|
<el-button type="primary" @click="nextStep" v-if="active==1">下一步</el-button>
|
<el-button type="primary" @click="confirm" :loading="confirmLoading" v-if="active==2">提交报名</el-button>
|
</el-row>
|
</template>
|
</el-dialog>
|
</template>
|
<script>
|
import contentTitle from '@/views/main/components/contentTitle.vue'
|
export default {
|
components: {
|
contentTitle
|
},
|
data() {
|
return {
|
dialogFlag: false,
|
active: 1,
|
subjectItems: [
|
{ label: '理论知识', value: 'theory' },
|
{ label: '实操技能', value: 'operation' }
|
],
|
signupInfo: {
|
occupationJob: '互联网营销师',
|
levelText: '三级',
|
subject: [],
|
name: '黄婷婷',
|
gender: 2,
|
mobilePhone: '13537710000',
|
idNumber: '445224200000000'
|
},
|
rules: {
|
subject: [ this.$rules.required() ],
|
name: [ this.$rules.required() ],
|
gender: [ this.$rules.required() ],
|
mobilePhone: [ this.$rules.required() ],
|
idNumber: [ this.$rules.required() ],
|
},
|
confirmLoading: false
|
}
|
},
|
props: {
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
currentPlan: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
watch: {
|
modelValue(val) {
|
this.dialogFlag = val
|
},
|
dialogFlag(val) {
|
this.$emit('update:modelValue', val)
|
},
|
},
|
mounted() {
|
|
},
|
methods: {
|
lastStep() {
|
if (this.active == 2) {
|
this.active--
|
}
|
},
|
async nextStep() {
|
if (this.active == 1) {
|
// try {
|
// await this.$refs.form.validateField('code')
|
// } catch(error) {
|
// return
|
// }
|
}
|
this.active++
|
},
|
close() {
|
this.dialogFlag = false
|
},
|
confirm() {
|
this.dialogFlag = false
|
this.active = 1
|
this.$emit('signupSuccess')
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
