164 lines
3.7 KiB
Vue
164 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import type { FormItemRule } from "naive-ui";
|
|
import { ref } from "vue";
|
|
|
|
const message = useMessage();
|
|
const userStore = useUserStore();
|
|
const userInfo = userStore.userInfo;
|
|
const isVisible = ref(false);
|
|
|
|
const rules = ref({
|
|
name: [
|
|
{
|
|
required: true,
|
|
validator(rule: FormItemRule, value: string) {
|
|
if (!value) {
|
|
return new Error("请填写姓名");
|
|
} else if (!/^[\u4E00-\u9FA5·]{2,16}$/.test(value)) {
|
|
return new Error("输入正确的姓名");
|
|
}
|
|
return true;
|
|
},
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
idCard: [
|
|
{
|
|
required: true,
|
|
validator(rule: FormItemRule, value: string) {
|
|
if (!value) {
|
|
return new Error("请填身份证号");
|
|
} else if (
|
|
!/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}([\dX])$)/i.test(
|
|
value
|
|
)
|
|
) {
|
|
return new Error("输入正确的身份证号");
|
|
}
|
|
return true;
|
|
},
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
});
|
|
|
|
const ruleForm = ref({
|
|
name: "",
|
|
idCard: "",
|
|
userId: userInfo.userId,
|
|
});
|
|
const formRef = ref(null);
|
|
async function saveInfo(e: MouseEvent) {
|
|
e.preventDefault();
|
|
formRef.value?.validate(async (errors) => {
|
|
if (!errors) {
|
|
// try{
|
|
// const res = await request.post('/system/user/updateIdCard',ruleForm.value)
|
|
// if(res.code === 200){
|
|
// const data = await userStore.getUserInfo()
|
|
// message.success('认证成功')
|
|
// ruleForm.value.name = ''
|
|
// ruleForm.value.idCard = ''
|
|
// onCloseModel()
|
|
// }
|
|
// }catch(err) {
|
|
// console.log('err',err)
|
|
// }
|
|
try {
|
|
const res = await request.post("/system/user/updateIdCard", ruleForm.value);
|
|
if (res.code === 200) {
|
|
await userStore.getUserInfo();
|
|
isVisible.value = false;
|
|
} else {
|
|
message.warning(res.msg);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onCloseModel() {
|
|
isVisible.value = false;
|
|
ruleForm.value.name = "";
|
|
ruleForm.value.idCard = "";
|
|
}
|
|
defineExpose({
|
|
isVisible,
|
|
});
|
|
// 生命周期钩子
|
|
onMounted(() => {
|
|
// initFormData()
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NModal
|
|
v-model:show="isVisible"
|
|
:on-after-leave="onCloseModel"
|
|
preset="card"
|
|
style="width: 400px"
|
|
:mask-closable="false"
|
|
>
|
|
<n-form ref="formRef" :model="ruleForm" :rules="rules">
|
|
<n-form-item path="name" label="姓名">
|
|
<n-input
|
|
v-model:value="ruleForm.name"
|
|
placeholder="请输入姓名"
|
|
@keydown.enter.prevent
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item path="idCard" label="身份证号">
|
|
<n-input
|
|
v-model:value="ruleForm.idCard"
|
|
placeholder="请输入身份证号"
|
|
@keydown.enter.prevent
|
|
/>
|
|
</n-form-item>
|
|
</n-form>
|
|
<div class="flex justify-center items-center">
|
|
<button
|
|
class="w-1/2 flex justify-center mx-1 bg-[#213df5] py-3 rounded-lg align-middle text-[#fff] border-0 cursor-pointer"
|
|
@click="saveInfo"
|
|
>
|
|
实名认证
|
|
</button>
|
|
</div>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form {
|
|
/* cursor: pointer; */
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.form-item label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-item input {
|
|
width: 200px;
|
|
padding: 5px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.form-item button {
|
|
padding: 5px 10px;
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
</style>
|