<template>
|
<ContentScrollView :paddingH="false">
|
<nut-form :model-value="form" ref="formRef" :rules="rules">
|
<nut-form-item label="证书类型:" class="bole-form-item" prop="type">
|
<ChooseInputWithPicker
|
v-model="form.type"
|
placeholder="请选择证书类型"
|
:value-enum="TaskStatusText"
|
/>
|
</nut-form-item>
|
<nut-form-item label="证书编号:" class="bole-form-item" prop="certificateNumber">
|
<nut-input v-model="form.certificateNumber" type="number" placeholder="请输入"> </nut-input>
|
</nut-form-item>
|
<nut-form-item
|
label="永久证书:"
|
class="bole-form-item permanent-certificate"
|
prop="isPermanentCertificate"
|
>
|
<nut-switch v-model="form.isPermanentCertificate" />
|
</nut-form-item>
|
<nut-form-item label="开始日期:" class="bole-form-item" prop="startDate">
|
<ChooseInputWithDatePicker v-model="form.startDate"></ChooseInputWithDatePicker>
|
</nut-form-item>
|
<nut-form-item label="结束日期:" class="bole-form-item" prop="endDate">
|
<ChooseInputWithDatePicker v-model="form.endDate"></ChooseInputWithDatePicker>
|
</nut-form-item>
|
<nut-form-item label="发证单位:" class="bole-form-item" prop="certificateNumber">
|
<nut-input v-model="form.certificateNumber" placeholder="请输入"> </nut-input>
|
</nut-form-item>
|
<div class="certificate-upload">
|
<div class="certificate-upload-title">上传证书</div>
|
<nut-form-item
|
label="证书正面照片（请确保证书号、头像照片等清晰可见）"
|
class="bole-form-item"
|
prop="photo"
|
label-position="top"
|
>
|
<Uploader v-model:file-list="form.photo" :maximum="1" class="bole-uploader"> </Uploader>
|
</nut-form-item>
|
<nut-form-item
|
label="证书反面照片（或其他有内容页）"
|
class="bole-form-item"
|
prop="photo"
|
label-position="top"
|
>
|
<Uploader v-model:file-list="form.photo" :maximum="1" class="bole-uploader"> </Uploader>
|
</nut-form-item>
|
</div>
|
</nut-form>
|
</ContentScrollView>
|
<PageFooter>
|
<PageFooterBtn type="primary" @click="handleConfirm">保存</PageFooterBtn>
|
</PageFooter>
|
</template>
|
|
<script setup lang="ts">
|
import { useUser } from '@/hooks';
|
import { ChooseInputWithPicker, ChooseInputWithDatePicker } from '@12333/components';
|
import { TaskStatusText, TaskStatus } from '@/constants';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
|
defineOptions({
|
name: 'InnerPage',
|
});
|
|
const { userDetail } = useUser();
|
|
const form = reactive({
|
type: TaskStatus.All,
|
certificateNumber: '',
|
startDate: '',
|
endDate: '',
|
isPermanentCertificate: false,
|
photo: [],
|
});
|
|
const rules = reactive<FormRules>({
|
type: [{ required: true, message: '请输入手机号' }],
|
startDate: [{ required: true, message: '请选择开始日期' }],
|
endDate: [{ required: true, message: '请选择结束日期' }],
|
photo: [{ required: true, message: '请上传证书正面照' }],
|
});
|
const formRef = ref<any>(null);
|
function handleConfirm() {
|
if (!formRef.value) return;
|
formRef.value.validate().then(({ valid, errors }: any) => {
|
if (valid) {
|
confirm();
|
}
|
});
|
}
|
|
function confirm() {}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.mineCertificateAddOrEdit-page-wrapper {
|
.nut-form .nut-cell.bole-form-item:not(.alignTop),
|
page .nut-form .nut-cell.bole-form-item:not(.alignTop) {
|
align-items: flex-start !important;
|
}
|
|
.permanent-certificate {
|
--nut-form-item-body-slots-text-align: right;
|
}
|
|
.certificate-upload {
|
.certificate-upload-title {
|
font-size: 28px;
|
padding: 26px 32px 0;
|
}
|
|
.nut-form-item__label {
|
padding-right: 0;
|
font-size: 24px;
|
width: 98%;
|
}
|
}
|
}
|
</style>
|
