审核列表

src/apis/modules/certifications.js

@@ -1,13 +1,7 @@
 import request from '@/utils/request'
 
-//获取banner列表
+//获取审核列表
 export const getCertificationsList = (params) => request.basic.get('/api/v1/certifications', params)
 
-//获取单个banner
+// 审核接口
-export const getBanner = (id) => request.basic.get(`/api/v1/banners/${id}`)
+export const updateCertifications = (id, data) => request.basic.put(`/api/v1/certifications/${id}`, data)
-//创建banner
-export const createBanner = (data) => request.basic.post('/api/v1/banners', data)
-//更新banner
-export const updateBanner = (id, data) => request.basic.put(`/api/v1/banners/${id}`, data)
-//删除banner
-export const deleteBanner = (id) => request.basic.delete(`/api/v1/banners/${id}`)

src/views/certification/certificationList/components/EditDialog.vue

@@ -5,32 +5,16 @@
             <a-card class="mb-8-2">
                 <a-row :gutter="24">
                     <a-col :span="24">
-                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
+                        <a-form-item label="审核结果" name="check">
-                            <a-input v-model:value="formData.name"></a-input>
+                            <a-radio-group v-model:value="formData.check" :options="[
-                        </a-form-item>
+                                { label: '通过', value: true },
-                    </a-col>
+                                { label: '不通过', value: false },
-
+                            ]" />
-                    <a-col :span="24">
-                        <a-form-item :label="$t('pages.system.role.form.sequence')" name="sequence">
-                            <a-input :defaultValue="0" type="number" v-model:value="formData.sequence"></a-input>
                         </a-form-item>
                     </a-col>
                     <a-col :span="24">
-                        <a-form-item :label="$t('pages.system.role.form.status')" name="status">
+                        <a-form-item label="审核不通过理由" name="fail_reason">
-                            <a-radio-group v-model:value="formData.status" :options="[
+                            <a-textarea v-model:value="formData.fail_reason" :disabled="formData.check === true" />
-                                { label: $t('pages.system.role.form.status.enabled'), value: 'enabled' },
-                                { label: $t('pages.system.role.form.status.disabled'), value: 'disabled' },
-                            ]"></a-radio-group>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="24">
-                        <a-form-item :label="'描述'">
-                            <a-textarea v-model:value="formData.description"></a-textarea>
-                        </a-form-item>
-                    </a-col>
-                    <a-col :span="24">
-                        <a-form-item :label="'上传图片'" name="permissions">
-                            <GxUpload :fileNumber="1" />
                         </a-form-item>
                     </a-col>
                 </a-row>
@@ -40,119 +24,103 @@
 </template>
 
 <script setup>
-import { cloneDeep } from 'lodash-es'
 import { message } from 'ant-design-vue'
-import { ref, watch } from 'vue'
+import { ref, computed } from 'vue'
-import { config } from '@/config'
 import apis from '@/apis'
 import { useForm, useModal } from '@/hooks'
-import GxUpload from '@/components/GxUpload/index.vue'
-const emit = defineEmits(['ok'])
 import { useI18n } from 'vue-i18n'
+
+const emit = defineEmits(['ok'])
+const { t } = useI18n()
+
 const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
-const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const { formData, formRef, resetForm } = useForm()
-const { t } = useI18n() // 解构出t方法
+
 const cancelText = ref(t('button.cancel'))
 const okText = ref(t('button.confirm'))
-formData.value.enabled='enabled'
+
-formRules.value = {
+// 初始化表单数据
-    name: { required: true, message: t('pages.system.role.form.name.placeholder') },
+formData.value = {
-    code: { required: true, message: t('pages.system.role.form.code.placeholder') },
+    check: true,
-    status: { required: true, message: t('pages.system.role.form.status.placeholder') },
+    fail_reason: '',
+    id: null,
 }
 
-/**
+// 动态校验规则：使用 validator
- * 新建
+const validateFailReason = (rule, value, callback) => {
- */
+    if (formData.value.check === false) {
-function handleCreate() {
+        if (!value || value.trim() === '') {
-    showModal({
+            callback(new Error('请选择不通过时，必须填写不通过理由'))
-        type: 'create',
+        } else {
-        title: t('pages.system.role.add'),
+            callback()
-    })
+        }
+    } else {
+        // 通过时不需要校验
+        callback()
+    }
 }
 
+// 表单规则
+const formRules = computed(() => ({
+    check: [{ required: true, message: '请选择审核结果' }],
+    fail_reason: [{ validator: validateFailReason, trigger: 'blur' }],
+}))
+
 /**
- * 编辑
+ * 编辑（审核）
  */
-async function handleEdit(record = {}) {
+async function handleEdit(id) {
     showModal({
         type: 'edit',
-        title: t('pages.system.role.edit'),
+        title: '用户审核',
     })
-
+    formData.value.id = id
-    const { data, success } = await apis.role.getRole(record.id).catch()
+    // 可选：如果需要回显原数据，可在此处调用 API 获取详情并赋值
-    if (!success) {
+    // 比如：formData.value = await fetchCertificationDetail(id)
-        message.error(t('component.message.error.save'))
-        hideModal()
-        return
-    }
-    let menus = []
-    if (data.menus) {
-        for (let item of data.menus) {
-            menus.push(item.menu_id)
-        }
-    }
-    checkedKeys.value = menus
-    formRecord.value = data
-    formData.value = cloneDeep(data)
 }
 
 /**
  * 确定
  */
-function handleOk() {
+async function handleOk() {
-    formRef.value
-        .validateFields()
-        .then(async (values) => {
     try {
+        await formRef.value.validateFields()
         showLoading()
-                const params = {...values}
+
-                let result = null
+        const params = {
-                switch (modal.value.type) {
+            check: formData.value.check,
-                    case 'create':
+            fail_reason: formData.value.check ? null : formData.value.fail_reason?.trim(),
-                        result = await apis.banner.createBanner(params).catch(() => {
-                            throw new Error()
-                        })
-                        break
-                    case 'edit':
-                        result = await apis.banner.updateBanner(formData.value.id, params).catch(() => {
-                            throw new Error()
-                        })
-                        break
         }
+
+        const result = await apis.certifications.updateCertifications(formData.value.id, params)
+
         hideLoading()
-                if (config('http.code.success') === result?.success) {
+        if (result?.success) {
+            message.success('操作成功')
             hideModal()
             emit('ok')
         }
     } catch (error) {
         hideLoading()
+        // validateFields 失败会抛出异常，但已被 catch，无需额外处理
     }
-        })
-        .catch(() => {
-            hideLoading()
-        })
 }
 
-/**
- * 取消
- */
 function handleCancel() {
     hideModal()
 }
 
-/**
- * 关闭后
- */
 function onAfterClose() {
     resetForm()
-    hideLoading()
+    // 重置表单数据（可选）
+    formData.value = {
+        check: true,
+        fail_reason: '',
+        id: null,
+    }
 }
 
 defineExpose({
-    handleCreate,
     handleEdit,
 })
 </script>
-
-<style lang="less" scoped></style>

src/views/certification/certificationList/index.vue

@@ -12,11 +12,13 @@
 
                     <a-col :span="6">
                         <a-form-item label="认证状态" name="status">
-
                             <a-select v-model:value="searchFormData.status" placeholder="请选择认证状态">
+                                <a-select-option value="">全部</a-select-option>
                                 <a-select-option v-for="item in authenticationDict.options" :key="item.value"
                                     :value="item.value">
+                                    <a-tag :color="getStatusColor(item.value)" style="margin: 0; border: none;">
                                         {{ item.label }}
+                                    </a-tag>
                                 </a-select-option>
                             </a-select>
                         </a-form-item>
@@ -61,20 +63,21 @@
                 <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
                     :scroll="{ x: 1000 }" @change="onTableChange">
                     <template #bodyCell="{ column, record }">
-                        <!-- <template v-if="'action' === column.key">
+                        <template v-if="column.key === 'certificationStatus'">
-                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                            <!-- 认证状态标签 -->
+                            <a-tag :color="getStatusColor(record.certificationStatus)" class="status-tag">
+                                {{ authenticationDict.getLabel(record.certificationStatus) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="column.key === 'action'">
+                            <x-action-button @click="handleEdit(record)">
                                 <a-tooltip>
-                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <template #title>用户审核</template>
                                     <edit-outlined />
                                 </a-tooltip>
                             </x-action-button>
-                            <x-action-button @click="handleRemove(record)">
+                        </template>
-                                <a-tooltip>
-                                    <template #title> {{ $t('pages.system.delete') }}</template>
-                                    <delete-outlined style="color: #ff4d4f" />
-                                </a-tooltip>
-                            </x-action-button>
-                        </template> -->
                     </template>
                 </a-table>
             </a-card>
@@ -85,8 +88,9 @@
 </template>
 
 <script setup>
-import { message, Modal } from 'ant-design-vue'
+import { h } from 'vue'
-import { ref } from 'vue'
+import { message, Modal, Tag } from 'ant-design-vue'
+import { ref, computed } from 'vue'
 import apis from '@/apis'
 import { formatUtcDateTime } from '@/utils/util'
 import { config } from '@/config'
@@ -100,11 +104,54 @@ import { authenticationDict, authenticationTypeDict } from '@/enums/dict'
 defineOptions({
     name: 'systemRole',
 })
-const { t } = useI18n() // 解构出t方法
+const { t } = useI18n()
+
+// 状态颜色映射 - 基于你的配置
+const statusColorMap = {
+    PENDING_CERTIFICATION: 'warning',
+    CERTIFICATION_DFFILED: 'processing',
+    CERTIFICATION_PASSED: 'success',
+    CERTIFICATION_FAILED: 'error',
+}
+
+// 状态标签样式映射
+const statusStyleMap = {
+    PENDING_CERTIFICATION: {
+        bgColor: '#fff7e6',
+        borderColor: '#ffd591',
+        textColor: '#fa8c16'
+    },
+    CERTIFICATION_DFFILED: {
+        bgColor: '#e6f4ff',
+        borderColor: '#91caff',
+        textColor: '#1677ff'
+    },
+    CERTIFICATION_PASSED: {
+        bgColor: '#f6ffed',
+        borderColor: '#b7eb8f',
+        textColor: '#52c41a'
+    },
+    CERTIFICATION_FAILED: {
+        bgColor: '#fff2f0',
+        borderColor: '#ffccc7',
+        textColor: '#ff4d4f'
+    }
+}
+
 const columns = [
-    // { title: '序号', dataIndex: 'id', width: 200 },
+    {
-    { title: '用户名', dataIndex: 'userName', width: 150 },
+        title: '用户名',
-    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
+        dataIndex: 'userName',
+        width: 150,
+        ellipsis: true
+    },
+    {
+        title: '手机号',
+        dataIndex: 'phone',
+        key: 'phone',
+        width: 150,
+        ellipsis: true
+    },
     {
         title: '认证类型',
         dataIndex: 'certificationType',
@@ -116,12 +163,82 @@ const columns = [
         title: '认证状态',
         dataIndex: 'certificationStatus',
         key: 'certificationStatus',
-        width: 120,
+        width: 140,
-        customRender: ({ text }) => authenticationDict.getLabel(text) || text,
+        filters: authenticationDict.options.map( item => ({
+            text: item.label,
+            value: item.value
+        })),
+        onFilter: (value, record) => record.certificationStatus === value,
+        customRender: ({ text }) => {
+            const style = statusStyleMap[text] || {}
+            return h(
+                'div',
+                {
+                    class: 'status-tag-wrapper',
+                    style: { display: 'inline-flex', alignItems: 'center' }
+                },
+                [
+                    // 状态圆点
+                    h('span', {
+                        class: 'status-dot',
+                        style: {
+                            width: '8px',
+                            height: '8px',
+                            borderRadius: '50%',
+                            backgroundColor: style.textColor || '#d9d9d9',
+                            marginRight: '6px',
+                            display: 'inline-block'
+                        }
+                    }),
+                    // 状态标签
+                    h(Tag, {
+                        color: getStatusColor(text),
+                        style: {
+                            margin: 0,
+                            fontSize: '12px',
+                            lineHeight: '20px',
+                            padding: '0 8px',
+                            backgroundColor: style.bgColor || '#fafafa',
+                            borderColor: style.borderColor || '#d9d9d9',
+                            color: style.textColor || '#00000073',
+                            borderRadius: '10px',
+                            fontWeight: 500
+                        }
+                    }, authenticationDict.getLabel(text) || text)
+                ]
+            )
+        }
+    },
+    {
+        title: '提交时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        width: 180,
+        sorter: true,
+        customRender: ({ text }) => formatUtcDateTime(text)
+    },
+    {
+        title: t('button.action'),
+        key: 'action',
+        fixed: 'right',
+        width: 100,
+        align: 'center'
     },
-    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
 ]
 
+// 获取状态颜色
+const getStatusColor = (status) => {
+    return statusColorMap[status] || 'default'
+}
+
+// 带样式的下拉选项
+const styledStatusOptions = computed(() => {
+    return authenticationDict.options.map(item => ({
+        ...item,
+        color: getStatusColor(item.value)
+    }))
+})
+
 const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
     usePagination()
 const { resetForm } = useForm()
@@ -157,32 +274,14 @@ async function getPageList() {
 }
 
 /**
- * 移除
+ * 编辑按钮点击
  */
-function handleRemove({ id }) {
+function handleEdit({ id, certificationStatus }) {
-    Modal.confirm({
+    if (certificationStatus !== 'CERTIFICATION_DFFILED') {
-        title: t('pages.system.role.delTip'),
+        message.warning('该用户认证状态不是已提交，不能操作')
-        content: t('button.confirm'),
+        return
-        okText: t('button.confirm'),
-        onOk: () => {
-            return new Promise((resolve, reject) => {
-                ; (async () => {
-                    try {
-                        const { success } = await apis.role.delRole(id).catch(() => {
-                            throw new Error()
-                        })
-                        if (config('http.code.success') === success) {
-                            resolve()
-                            message.success(t('component.message.success.delete'))
-                            await getPageList()
     }
-                    } catch (error) {
+    editDialogRef.value?.handleEdit(id)
-                        reject()
-                    }
-                })()
-            })
-        },
-    })
 }
 
 /**
@@ -207,8 +306,6 @@ function handleResetSearch() {
  * 搜索
  */
 function handleSearch() {
-    // resetForm()
-    // resetPagination()
     getPageList()
 }
 
@@ -220,4 +317,78 @@ async function onOk() {
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.status-tag {
+    font-size: 12px;
+    line-height: 20px;
+    padding: 0 8px;
+    border-radius: 10px;
+    font-weight: 500;
+    transition: all 0.3s;
+
+    &:hover {
+        opacity: 0.8;
+        transform: translateY(-1px);
+    }
+}
+
+.status-tag-wrapper {
+    .status-dot {
+        transition: all 0.3s;
+    }
+
+    // "已提交"状态的闪烁动画
+    &[data-status="CERTIFICATION_DFFILED"] .status-dot {
+        animation: blink 1.5s infinite;
+    }
+
+    // "待认证"状态的呼吸动画
+    &[data-status="PENDING_CERTIFICATION"] .status-dot {
+        animation: pulse 2s infinite;
+    }
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.align-right {
+    text-align: right;
+
+    .ant-space {
+        justify-content: flex-end;
+    }
+}
+
+// 表格样式优化
+:deep(.ant-table-thead > tr > th) {
+    font-weight: 600;
+    background-color: #fafafa;
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+    background-color: #f6f8fa;
+}
+</style>