PC增加实名认证功能

src/packages/pc/views/account/certification/index.vue

@@ -1,97 +0,0 @@
-<!-- 账户管理-实名认证 -->
-<!-- <template>
-    <app-view class="g-form account-certification">
-        <template #header>
-            <app-navbar title="实名认证" />
-        </template>
-        <Form ref="formRef" class="g-form__container" @submit="onSubmit">
-            <CellGroup inset>
-                <Field v-model="formData.username" name="username" label="姓名" placeholder="请输入用户姓名"
-                    :rules="formRules.username" />
-                <Field name="cardtype" label="证件类型" :rules="formRules.cardtype" is-link>
-                    <template #input>
-                        <app-select v-model="formData.cardtype" placeholder="请选择证件类型" :options="enums" />
-                    </template>
-                </Field>
-                <Field v-model="formData.cardnum" name="cardnum" label="证件号码" placeholder="请输入证件号码"
-                    :rules="formRules.cardnum" />
-                <Field name="cardfrontphotourl" label="证件正面照片" :rules="formRules.cardfrontphotourl">
-                    <template #input>
-                        <app-uploader @success="b_afterRead" />
-                    </template>
-                </Field>
-                <Field name="cardbackphotourl" label="证件反面照片" :rules="formRules.cardbackphotourl">
-                    <template #input>
-                        <app-uploader @success="f_afterRead" />
-                    </template>
-                </Field>
-            </CellGroup>
-        </Form>
-        <img src="../../../assets/images/certification.png" />
-        <template #footer>
-            <div class="g-form__footer">
-                <Button type="primary" @click="formRef?.submit" round block>提交实名认证</Button>
-            </div>
-        </template>
-    </app-view>
-</template> -->
-
-<script lang="ts" setup>
-// import { ref, PropType, computed } from 'vue'
-// import { ElMessage, FormInstance, FormRules } from 'element-plus'
-// import { getCertificateTypeList } from "@/constants/account";
-// import { addAuthReq } from '@/business/user'
-// import AppUpload from '@pc/components/base/upload/index.vue'
-// import AppDrawer from '@pc/components/base/drawer/index.vue'
-
-// const show = ref(true)
-// const refresh = ref(false)
-// const formRef = ref<FormInstance>()
-// const { formData, formSubmit } = addAuthReq()
-
-/// 获取对应的证件枚举类型
-// const enums = computed(() => { return getCertificateTypeList().map(obj => { return { label: obj.label, value: obj.value } }) })
-
-// const b_afterRead = (filePath: string) => {
-//     formData.cardfrontphotourl = filePath
-// }
-
-// const f_afterRead = (filePath: string) => {
-//     formData.cardbackphotourl = filePath
-// }
-
-// 表单验证规则
-// const formRules: FormRules = {
-//     username: [{
-//         required: true,
-//         message: '请输入用户姓名',
-//     }],
-//     cardnum: [{
-//         required: true,
-//         message: '请输入证件号码',
-
-//     }],
-//     cardbackphotourl: [{
-//         required: true,
-//         message: '请上传证件背面照片',
-//     }],
-//     cardfrontphotourl: [{
-//         required: true,
-//         message: '请上传证件正面照片',
-//     }],
-// }
-
-// const onCancel = (isRefresh = false) => {
-//     show.value = false
-//     refresh.value = isRefresh
-// }
-
-// const onSubmit = () => {
-//     formSubmit().then(() => {
-//         ElMessage.success('实名认证提交请求成功')
-//         onCancel(true)
-//     }).catch((err) => {
-//         ElMessage.error('实名认证提交请求失败：' + err)
-//     })
-// }
-</script>

src/packages/pc/views/account/sign/components/certification/index.vue

@@ -0,0 +1,91 @@
+<!-- 账户管理-实名认证 -->
+<template>
+    <app-drawer title="实名认证" v-model:show="show" :width="500" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" class="el-form--vertical" label-width="100px" :rules="formRules">
+            <el-form-item prop="username" label="姓名">
+                <el-input placeholder="请输入用户姓名" v-model="formData.username" name="username" :rules="formRules.username" />
+            </el-form-item>
+            <el-form-item prop="cardnum" label="证件号码">
+                <el-input placeholder="请输入证件号码" v-model="formData.cardnum" name="cardnum" :rules="formRules.cardnum" />
+            </el-form-item>
+            <el-form-item label="证件类型" prop="cardtype">
+                <el-select v-model="formData.cardtype">
+                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in enums"
+                        :key="index" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="证件正面照片">
+                <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="b_afterRead" :rules="formRules.cardfrontphotourl" />
+            </el-form-item>
+            <el-form-item label="证件反面照片">
+                <app-upload :file-types="['image']" type-message="请选择正确的图片类型" @change="f_afterRead" :rules="formRules.cardbackphotourl" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)" plain>取消</el-button>
+            <el-button type="primary" @click="onSubmit">提交</el-button>
+        </template>
+    </app-drawer>
+</template>  
+
+<!-- 账户管理-签约账号管理-解约 -->
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { getCertificateTypeList } from "@/constants/account";
+import { addAuthReq } from '@/business/user'
+import AppUpload from '@pc/components/base/upload/index.vue'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const show = ref(true)
+const refresh = ref(false)
+const formRef = ref<FormInstance>()
+const { formData, formSubmit, loading } = addAuthReq()
+
+/// 获取对应的证件枚举类型
+const enums = computed(() => { return getCertificateTypeList().map(obj => { return { label: obj.label, value: obj.value } }) })
+
+const b_afterRead = (filePath: string) => {
+    formData.cardfrontphotourl = filePath
+}
+
+const f_afterRead = (filePath: string) => {
+    formData.cardbackphotourl = filePath
+}
+
+// 表单验证规则
+const formRules: FormRules = {
+    username: [{
+        required: true,
+        message: '请输入用户姓名',
+    }],
+    cardnum: [{
+        required: true,
+        message: '请输入证件号码',
+
+    }],
+    cardbackphotourl: [{
+        required: true,
+        message: '请上传证件背面照片',
+    }],
+    cardfrontphotourl: [{
+        required: true,
+        message: '请上传证件正面照片',
+    }],
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    formSubmit().then(() => {
+        ElMessage.success('实名认证提交请求成功')
+        onCancel(true)
+    }).catch((err) => {
+        ElMessage.error('实名认证提交请求失败：' + err)
+    })
+}
+</script>

src/packages/pc/views/account/sign/index.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent, onActivated } from 'vue'
 import { useComponent } from '@/hooks/component'
 import { useComposeTable } from '@pc/components/base/table'
 import { useRequest } from '@/hooks/request'
@@ -36,17 +36,21 @@ import { useDataFilter } from '@/hooks/datatable'
 import { queryBankAccountSign } from '@/services/api/bank'
 import { getSignStatusName, SignStatus } from '@/constants/bank'
 import { getCertificateTypeCodeName } from '@/constants/account'
+import { queryUserAccount } from '@/services/api/account'
+import { AuthStatus } from '@/constants/account'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['cancel', defineAsyncComponent(() => import('./components/cancel/index.vue'))],
     ['sign', defineAsyncComponent(() => import('./components/sign/index.vue'))],
+    ['certification', defineAsyncComponent(() => import('./components/certification/index.vue'))], // 实名认证
 ])
 
 const { rowKey, expandKeys, rowClick, selectedRow } = useComposeTable<Model.BankAccountSignRsp>({ rowKey: 'applyexchticket' })
 const { filterOptons } = useDataFilter<Model.BankAccountSignReq>()
 const { loading, dataList, run } = useRequest(queryBankAccountSign, {})
+const authStatus = shallowRef(AuthStatus.Uncertified) // 实名认证状态
 
 const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
     run()
@@ -64,7 +68,18 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'signstatus', label: '状态' },
 ])
 
-filterOptons.buttonList = [
+filterOptons.buttonList = authStatus.value === AuthStatus.Certified ? [
     { lable: '添加签约账户', className: 'el-button--primary', onClick: () => openComponent('sign') },
+] : [
+    { lable: '实名认证', className: 'el-button--warning', onClick: () => openComponent('certification') },
 ]
+
+onActivated(() => {
+    if (authStatus.value !== AuthStatus.Certified) {
+        // 获取用户账号信息
+        queryUserAccount().then((res) => {
+            authStatus.value = res.data.hasauth
+        })
+    }
+})
 </script>

src/packages/pc/views/footer/capital/summary/index.vue

@@ -9,8 +9,8 @@
         <!-- 展开行 -->
         <template #expand>
             <div class="buttonbar">
-                <el-button type="danger" size="small" @click="openComponent('deposit')">充值</el-button>
-                <el-button type="primary" size="small" @click="openComponent('withdraw')">提现</el-button>
+                <el-button type="danger" size="small" @click="doInOutMoney('deposit')">充值</el-button>
+                <el-button type="primary" size="small" @click="doInOutMoney('withdraw')">提现</el-button>
             </div>
         </template>
         <template #footer>
@@ -21,12 +21,16 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent, onActivated } from 'vue'
 import { useAccountStore } from '@/stores'
 import { useComponent } from '@/hooks/component'
 import { useComposeTable } from '@pc/components/base/table'
-import AppTable from '@pc/components/base/table/index.vue'
 import { getTradeStatusName } from '@/constants/order'
+import { AuthStatus } from '@/constants/account'
+import { queryBankAccountSign } from '@/services/api/bank'
+import { queryUserAccount } from '@/services/api/account'
+import AppTable from '@pc/components/base/table/index.vue'
+import { ElMessage } from 'element-plus'
 
 const componentMap = new Map<string, unknown>([
     ['deposit', defineAsyncComponent(() => import('./deposit/index.vue'))], // 充值
@@ -48,4 +52,31 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'outamount', label: '今日出金', decimal: 2 },
     { prop: 'tradestatus', label: '状态' },
 ])
+
+const authStatus = shallowRef(AuthStatus.Uncertified) // 实名认证状态
+/// 进行出入金操作判断
+const doInOutMoney = (code: string) => {
+    if (authStatus.value === AuthStatus.Certified) {
+        queryBankAccountSign().then((res) => {
+                const { signstatus } = res.data[0] ?? {}
+                /// 只有已签约的情况下才可以进行出入金
+                if (signstatus && signstatus === 4) {
+                    openComponent(code)
+                } else {
+                    ElMessage({ showClose: true, message: '请先添加签约账户信息！', })
+                }
+            })
+    } else {
+        ElMessage({ showClose: true, message: '请先实名认证，再进行该操作！' })
+    }
+}
+
+onActivated(() => {
+    if (authStatus.value !== AuthStatus.Certified) {
+        // 获取用户账号信息
+        queryUserAccount().then((res) => {
+            authStatus.value = res.data.hasauth
+        })
+    }
+})
 </script>