dev

package-lock.json

@@ -8,7 +8,10 @@
       "name": "diypay",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.2.45"
+        "lodash": "^4.17.21",
+        "qrcode.vue": "^3.3.3",
+        "vue": "^3.2.45",
+        "vue-lodash": "^2.1.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.0.0",
@@ -1036,6 +1039,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
@@ -1276,6 +1284,14 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "dev": true
     },
+    "node_modules/qrcode.vue": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
+      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1528,6 +1544,14 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-lodash": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/vue-lodash/-/vue-lodash-2.1.2.tgz",
+      "integrity": "sha512-6QsNC7/XjrK4xKxFhh6Ppvcrfm0uAeR/lFsySsMgfEFUWkvRztcAIS3MsqAI4bBnAaLo9ou+8tUfJ8d+yrljQg==",
+      "peerDependencies": {
+        "vue": ">= 2.0.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -9,7 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.45"
+    "lodash": "^4.17.21",
+    "qrcode.vue": "^3.3.3",
+    "vue": "^3.2.45",
+    "vue-lodash": "^2.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/components/diypay.vue

@@ -1,72 +1,70 @@
 <template>
     <!-- https://s1.hdslb.com/bfs/static/account-vip/static/img/code_fail.f41d4f5.png-->
-  <div class="flex justify-center items-center h-screen">
+  <div class="flex flex-col justify-center items-center h-screen">
-    <div class="w-1/3">
+    <div class="w-96 rounded-lg shadow-lg p-8">
-      <h2 class="text-center text-2xl mb-4">请选择支付方式</h2>
+      <h1 class="text-3xl font-bold mb-6">请输入支付金额</h1>
-      <div class="flex justify-center">
+      <div class="flex-blok justify-center items-center mb-6">
-        <button
+        <input type="number" class="w-full py-2 px-4 border border-gray-400 rounded-md mr-2" v-model="amount" placeholder="请输入金额" />
-          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded mr-2"
+        
-          @click="payWith('alipay')"
+        <div class="mt-8">
-        >
+          <p class="mb-2 text-gray-400">选择支付方式</p>
-          支付宝
+          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md" @click="submitPayment('Alipay')">支付宝支付</button>
-        </button>
+          <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md ml-2" @click="submitPayment('WeChat Pay')">微信支付</button>
-        <button
-          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded"
-          @click="payWith('wechat')"
-        >
-          微信支付
-        </button>
-      </div>
-      <div class="w-full h-64 mt-8">
-        <img v-if="!qrcode" src="https://s1.hdslb.com/bfs/static/account-vip/static/img/code_fail.f41d4f5.png" class="w-full h-full object-contain" />
-        <img v-else :src="qrcode" class="w-full h-full object-contain" />
-        <div v-if="qrcode" class="absolute inset-0 flex justify-center items-center">
-          <div class="bg-white p-4 rounded-lg shadow-md">
-            <img :src="qrcode" class="w-64 h-64 object-contain" />
-            <p class="text-sm mt-2">请在{{ countdown }}秒内完成支付</p>
-          </div>
         </div>
       </div>
+      <div v-if="qrCode">
+        <img class="mb-4" :src="qrCode" />
+        <p v-if="showRefresh" class="text-center text-blue-500 cursor-pointer" @click="refreshQRCode">点击刷新二维码</p>
+        <img class="w-2" src="https://s1.hdslb.com/bfs/static/account-vip/static/img/code_fail.f41d4f5.png" alt="">
+      </div>
+      <div v-else>
+        <img class="w-50 mx-auto" src="https://s1.hdslb.com/bfs/static/account-vip/static/img/code_fail.f41d4f5.png" alt="">
+      </div>
+        
+      
     </div>
   </div>
 </template>
-
+<script setup>
-<script  lang="ts">
+import { ref } from 'vue'
-import { reactive, ref } from 'vue'
 import axios from 'axios'
+import QRCode from 'qrcode.vue'
+import { debounce } from 'lodash'
+// import { toast } from '@/utils/toast'
 
-export default {
+const amount = ref('')
-  setup() {
+const qrCode = ref('')
-    const qrcode = ref(null)
+const showRefresh = ref(false)
-    const countdown = ref(60)
+const paymentType = ref('')
 
-    const payWith = async (method) => {
+const submitPayment = async type => {
-      try {
+  paymentType.value = type
-        const res = await axios.post('/api/pay', { method })
+  if (!amount.value) {
-        qrcode.value = res.data.qrcode
+    console.log('请输入支付金额', 'error')
-        countdown.value = 60
+    return
-        const timer = setInterval(() => {
+  }
-          countdown.value--
+  try {
-          if (countdown.value === 0) {
+    const res = await axios.post('/api/pay', { amount: amount.value, type })
-            clearInterval(timer)
+    const qrCodeData = await QRCode.toDataURL(res.data.qrCode)
-            qrcode.value = null
+    qrCode.value = qrCodeData
-          }
+    showRefresh.value = true
-        }, 1000)
+    setTimeout(() => {
-      } catch (error) {
+      qrCode.value = ''
-        console.error(error)
+      showRefresh.value = false
-      }
+    }, 60000)
-    }
+  } catch (err) {
-
+    console.log(err.message, 'error')
-    return {
+  }
-      qrcode,
-      countdown,
-      payWith,
-    }
-  },
 }
 
+const refreshQRCode = debounce(() => {
+  submitPayment(paymentType.value)
+}, 1000)
+
 </script>
+<style>
+/* tailwindcss classes */
+</style>
+
 
-<style scoped>
 
-</style>