diff --git a/src/views/camel-oil-info/token/components/input-verification-modal.vue b/src/views/camel-oil-info/token/components/input-verification-modal.vue new file mode 100644 index 0000000..6a95f3f --- /dev/null +++ b/src/views/camel-oil-info/token/components/input-verification-modal.vue @@ -0,0 +1,160 @@ + + + + + diff --git a/src/views/camel-oil-info/token/index.vue b/src/views/camel-oil-info/token/index.vue index 9577367..7d4160f 100644 --- a/src/views/camel-oil-info/token/index.vue +++ b/src/views/camel-oil-info/token/index.vue @@ -104,6 +104,31 @@ @@ -171,6 +203,7 @@ import { onMounted, reactive, ref } from 'vue'; import { Notification, TableColumnData } from '@arco-design/web-vue'; import AddEditModal from './components/add-edit-modal.vue'; import TokenDrawer from './components/token-drawer.vue'; +import InputVerificationModal from './components/input-verification-modal.vue'; import { ApiTokenListGetPageSizeEnum, KamiApiCamelOilV1TokenInfo @@ -243,7 +276,7 @@ const columns: TableColumnData[] = [ dataIndex: 'operations', slotName: 'operations', fixed: 'right', - width: 250 + width: 380 } ]; @@ -258,12 +291,17 @@ const { loading, setLoading } = useLoading(true); const renderData = ref([]); const formModel = ref(generateFormModel()); +// 重新发送验证码的加载状态管理 +const resendLoadingIds = ref(new Set()); + const state = reactive({ addEditModalVisible: false, editModalVisible: false, tokenDrawerVisible: false, + inputVerificationModalVisible: false, currentTokenData: null as KamiApiCamelOilV1TokenInfo | null, - currentEditData: null as KamiApiCamelOilV1TokenInfo | null + currentEditData: null as KamiApiCamelOilV1TokenInfo | null, + currentVerificationToken: null as KamiApiCamelOilV1TokenInfo | null }); const fetchData = async (params: any = { current: 1, pageSize: 50 }) => { @@ -335,6 +373,16 @@ const showTokenDrawer = (record: KamiApiCamelOilV1TokenInfo) => { ); }; +const showInputVerificationModal = (record: KamiApiCamelOilV1TokenInfo) => { + console.log('showInputVerificationModal called with record:', record); + state.currentVerificationToken = record; + state.inputVerificationModalVisible = true; + console.log( + 'inputVerificationModalVisible set to true, currentVerificationToken:', + state.currentVerificationToken + ); +}; + const deleteToken = async (tokenId: number) => { try { await jdV2TokenClient.apiTokenDeletePost({ @@ -366,6 +414,10 @@ const handleEditModalSuccess = () => { fetchData({ ...pagination }); }; +const handleInputVerificationSuccess = () => { + fetchData({ ...pagination }); +}; + const statusMapper = (status: number): { text: string; color: string } => { switch (status) { case 0: @@ -407,6 +459,42 @@ const download = () => { }); }; +/** + * 重新发送验证码 + * @param record Token记录 + */ +const resendVerificationCode = async (record: KamiApiCamelOilV1TokenInfo) => { + if (!record.id) return; + + try { + // 添加到加载状态 + resendLoadingIds.value.add(record.id); + + await jdV2TokenClient.apiTokenResendVerificationCodePost({ + kamiApiCamelOilV1ResendVerificationCodeReq: { + tokenId: record.id + } + }); + + Notification.success({ + content: '验证码已重新发送', + closable: true + }); + + // 刷新列表数据 + fetchData({ ...pagination }); + } catch (err) { + console.error('重新发送验证码失败:', err); + Notification.error({ + content: '重新发送验证码失败,请稍后重试', + closable: true + }); + } finally { + // 移除加载状态 + resendLoadingIds.value.delete(record.id); + } +}; + onMounted(() => { fetchData(); });