142 lines
3.5 KiB
Vue
142 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
const message = useMessage()
|
|
const userStore = useUserStore()
|
|
const userInfo = userStore.userInfo
|
|
const rules = ref({
|
|
name: [
|
|
{
|
|
required: true,
|
|
validator( 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( 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}(\d|X|x)$)/.test(value)) {
|
|
return new Error('输入正确的身份证号')
|
|
}
|
|
return true
|
|
},
|
|
trigger:'blur'
|
|
},
|
|
],
|
|
})
|
|
|
|
const ruleForm = ref({
|
|
name: '',
|
|
idCard:'',
|
|
userId: userInfo.userId
|
|
})
|
|
const formRef = ref(null)
|
|
const saveInfo = async(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)
|
|
// }
|
|
const res = await request.post('/system/user/updateIdCard',ruleForm.value)
|
|
const data = await userStore.getUserInfo()
|
|
isVisible.value = false
|
|
}
|
|
else {
|
|
}
|
|
})
|
|
}
|
|
|
|
const isVisible = ref(false)
|
|
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 placeholder="请输入姓名" v-model:value="ruleForm.name" @keydown.enter.prevent />
|
|
</n-form-item>
|
|
<n-form-item path="idCard" label="身份证号">
|
|
<n-input placeholder="请输入身份证号" v-model:value="ruleForm.idCard" @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 color-[#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>
|