feat: 添加二维码扫描页面,优化用户界面和扫描功能
This commit is contained in:
@@ -93,7 +93,6 @@ function stop() {
|
|||||||
if (videoInst.value) {
|
if (videoInst.value) {
|
||||||
videoInst.value.srcObject = null;
|
videoInst.value.srcObject = null;
|
||||||
}
|
}
|
||||||
emit("close");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSelectImage() {
|
function handleSelectImage() {
|
||||||
@@ -182,7 +181,7 @@ defineExpose({
|
|||||||
>
|
>
|
||||||
|
|
||||||
<div class="absolute left-0 top-0 z-10 p-4 pt-[calc(1rem+var(--ion-safe-area-top,0px))] pl-[calc(1rem+var(--ion-safe-area-left,0px))]">
|
<div class="absolute left-0 top-0 z-10 p-4 pt-[calc(1rem+var(--ion-safe-area-top,0px))] pl-[calc(1rem+var(--ion-safe-area-left,0px))]">
|
||||||
<button class="z-1 flex items-center" @click="stop">
|
<button class="z-1 flex items-center" @click="emit('close')">
|
||||||
<ion-icon :icon="chevronBackOutline" class="text-2xl text-white" />
|
<ion-icon :icon="chevronBackOutline" class="text-2xl text-white" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -226,6 +226,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
path: "/pwa_download",
|
path: "/pwa_download",
|
||||||
component: () => import("@/views/pwa/download.vue"),
|
component: () => import("@/views/pwa/download.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/scan_qr",
|
||||||
|
component: () => import("@/views/scan-qr/index.vue"),
|
||||||
|
meta: { requiresAuth: false },
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
49
src/views/scan-qr/index.vue
Normal file
49
src/views/scan-qr/index.vue
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<script lang='ts' setup>
|
||||||
|
import { toastController } from "@ionic/vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const scanner = useTemplateRef<InstanceType<typeof QrScanner>>("scanner");
|
||||||
|
|
||||||
|
function handleSuccess(value: string) {
|
||||||
|
toastController.create({
|
||||||
|
message: String(value),
|
||||||
|
duration: 2000,
|
||||||
|
position: "bottom",
|
||||||
|
color: "success",
|
||||||
|
}).then(toast => toast.present());
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleError(error: Error) {
|
||||||
|
toastController.create({
|
||||||
|
message: `扫描失败: ${error.message}`,
|
||||||
|
duration: 2000,
|
||||||
|
position: "bottom",
|
||||||
|
color: "danger",
|
||||||
|
}).then(toast => toast.present());
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClose() {
|
||||||
|
if (window.history.length > 1) {
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
router.replace("/");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
scanner.value?.start();
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeRouteLeave(() => {
|
||||||
|
scanner.value?.stop();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ion-page>
|
||||||
|
<QrScanner ref="scanner" @success="handleSuccess" @error="handleError" @close="handleClose" />
|
||||||
|
</ion-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang='css' scoped></style>
|
||||||
@@ -12,9 +12,9 @@ import TradeSettings from "./components/trade-settings.vue";
|
|||||||
import UserInfo from "./components/user-info.vue";
|
import UserInfo from "./components/user-info.vue";
|
||||||
import WalletCard from "./components/wallet-card.vue";
|
import WalletCard from "./components/wallet-card.vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
const { vibrate } = useHaptics();
|
const { vibrate } = useHaptics();
|
||||||
const walletStore = useWalletStore();
|
const walletStore = useWalletStore();
|
||||||
const { open } = useQRScanner();
|
|
||||||
|
|
||||||
async function handleRefresh(event: RefresherCustomEvent) {
|
async function handleRefresh(event: RefresherCustomEvent) {
|
||||||
vibrate();
|
vibrate();
|
||||||
@@ -27,15 +27,7 @@ async function handleRefresh(event: RefresherCustomEvent) {
|
|||||||
// 处理扫描二维码
|
// 处理扫描二维码
|
||||||
async function handleScan() {
|
async function handleScan() {
|
||||||
vibrate();
|
vibrate();
|
||||||
const result = await open({
|
router.push("/scan_qr");
|
||||||
title: "扫描二维码",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (result) {
|
|
||||||
console.log("扫描结果:", result);
|
|
||||||
// TODO: 根据扫描结果进行相应处理
|
|
||||||
// 例如:跳转到对应页面、显示信息等
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user