fix(支付结果页): 引入vant,并使用vant-icon

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "airwallex-payment-elements": "^1.131.0",
     "pinia": "^3.0.3",
+    "vant": "^4.9.21",
     "vue": "^3.5.18",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1"
@@ -30,6 +31,8 @@
     "eslint": "^9.31.0",
     "eslint-plugin-vue": "~10.3.0",
     "globals": "^16.3.0",
+    "sass-embedded": "^1.92.1",
+    "unplugin-vue-components": "^29.0.0",
     "vite": "^7.0.6",
     "vite-plugin-vue-devtools": "^8.0.0"
   }

src/views/payResult.vue

@@ -34,6 +34,7 @@
 import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 const route = useRoute()
 
 const query = route.query || {}
@@ -50,9 +51,9 @@ const closePage = () => {
 //   store.dispatch('app/setLanguage', selectedLange.value)
 //   sysLange.value = selectedLange.value
 // }
-
+const { t } = useI18n()
 const getI18n = (field) => {
-  return $t(`${field}`)
+  return t(`${field}`)
 }
 
 onMounted(() => {})

vite.config.js

@@ -2,16 +2,21 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     // vueDevTools(),
+    Components({
+      resolvers: [VantResolver()], // 自动注册 Vant 组件
+    }),
   ],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   build: {
@@ -28,16 +33,16 @@ export default defineConfig({
             return `css/[name]-[hash]-${Date.now()}.[ext]`
           }
           return `assets/[name]-[hash]-${Date.now()}.[ext]`
-        }
-      }
-    }
+        },
+      },
+    },
   },
   server: {
     host: '0.0.0.0', // 允许外部访问
-    port: 5173,      // 指定端口
+    port: 5173, // 指定端口
     strictPort: true, // 端口被占用时不会自动选择下一个可用端口
-    open: false,     // 不自动打开浏览器
-    cors: true,      // 启用CORS
+    open: false, // 不自动打开浏览器
+    cors: true, // 启用CORS
     // 代理配置（如果需要）
     proxy: {
       // '/api': {
@@ -45,12 +50,12 @@ export default defineConfig({
       //   changeOrigin: true,
       //   rewrite: (path) => path.replace(/^\/api/, '')
       // }
-    }
+    },
   },
   preview: {
     host: '0.0.0.0', // 预览模式也允许外部访问
     port: 4173,
     strictPort: true,
-    open: false
-  }
+    open: false,
+  },
 })