110 lines
3.0 KiB
Vue
110 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import axios from 'axios'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const qrContent = ref('')
|
|
const isLoading = ref(false)
|
|
const scanResult = ref<any>(null)
|
|
|
|
const apiBaseUrl = computed(() => {
|
|
return `http://${window.location.hostname}:8000/api`
|
|
})
|
|
|
|
async function scanQRCode() {
|
|
if (!qrContent.value) {
|
|
ElMessage.error('请输入二维码内容')
|
|
return
|
|
}
|
|
|
|
isLoading.value = true
|
|
scanResult.value = null
|
|
|
|
try {
|
|
const { data } = await axios.post(`${apiBaseUrl.value}/aime_scan`, { qrContent: qrContent.value })
|
|
scanResult.value = data
|
|
if (data.errorID) {
|
|
ElMessage.error(`扫描失败: 错误代码 ${data.errorID}`)
|
|
} else {
|
|
ElMessage.success('二维码扫描成功')
|
|
}
|
|
} catch (e: any) {
|
|
const message = e.response?.data?.detail || e.message
|
|
ElMessage.error(`扫描失败: ${message}`)
|
|
console.error(e)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function clearResult() {
|
|
scanResult.value = null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="aime-db-view">
|
|
<el-card header="AimeDB 二维码扫描" style="width: 100%;">
|
|
<el-form :inline="true" @submit.prevent="scanQRCode">
|
|
<el-form-item label="二维码内容">
|
|
<el-input
|
|
v-model="qrContent"
|
|
placeholder="请输入Aime卡二维码内容"
|
|
clearable
|
|
style="width: 300px;"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
@click="scanQRCode"
|
|
:loading="isLoading"
|
|
>
|
|
扫描
|
|
</el-button>
|
|
<el-button @click="clearResult">清空结果</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-card v-if="scanResult" header="扫描结果" style="margin-top: 20px;">
|
|
<div v-if="scanResult.errorID">
|
|
<el-alert
|
|
title="扫描失败"
|
|
:description="`错误代码: ${scanResult.errorID}`"
|
|
type="error"
|
|
show-icon
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="用户ID">{{ scanResult.userID }}</el-descriptions-item>
|
|
<el-descriptions-item label="Aime卡ID">{{ scanResult.aimeID }}</el-descriptions-item>
|
|
<el-descriptions-item label="访问代码">{{ scanResult.accessCode }}</el-descriptions-item>
|
|
<el-descriptions-item label="芯片ID">{{ scanResult.chipID }}</el-descriptions-item>
|
|
<el-descriptions-item label="返回代码">{{ scanResult.returnCode }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
|
|
<el-divider />
|
|
<h3>原始数据</h3>
|
|
<pre>{{ JSON.stringify(scanResult, null, 2) }}</pre>
|
|
</el-card>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.aime-db-view {
|
|
padding: 20px;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
background-color: #f4f4f5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style> |