git/diypay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev

Browse Source
This commit is contained in:
C菌
2023-02-17 22:34:46 +08:00
parent 1576a9d088
commit 067bbc4bce
3 changed files with 84 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -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",

5
package.json
View File

@@ -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",

108
src/components/diypay.vue
View File

@@ -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="w-1/3">
<h2 class="text-center text-2xl mb-4">请选择支付方式</h2>
<div class="flex justify-center">
<button
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded mr-2"
@click="payWith('alipay')"
>
支付宝
</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 class="flex flex-col justify-center items-center h-screen">
<div class="w-96 rounded-lg shadow-lg p-8">
<h1 class="text-3xl font-bold mb-6">请输入支付金额</h1>
<div class="flex-blok justify-center items-center mb-6">
<input type="number" class="w-full py-2 px-4 border border-gray-400 rounded-md mr-2" v-model="amount" placeholder="请输入金额" />
<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 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>
</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 lang="ts">
import { reactive, ref } from 'vue'
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import QRCode from 'qrcode.vue'
import { debounce } from 'lodash'
// import { toast } from '@/utils/toast'
export default {
setup() {
const qrcode = ref(null)
const countdown = ref(60)
const amount = ref('')
const qrCode = ref('')
const showRefresh = ref(false)
const paymentType = ref('')
const payWith = async (method) => {
const submitPayment = async type => {
paymentType.value = type
if (!amount.value) {
console.log('请输入支付金额', 'error')
return
}
try {
const res = await axios.post('/api/pay', { method })
qrcode.value = res.data.qrcode
countdown.value = 60
const timer = setInterval(() => {
countdown.value--
if (countdown.value === 0) {
clearInterval(timer)
qrcode.value = null
const res = await axios.post('/api/pay', { amount: amount.value, type })
const qrCodeData = await QRCode.toDataURL(res.data.qrCode)
qrCode.value = qrCodeData
showRefresh.value = true
setTimeout(() => {
qrCode.value = ''
showRefresh.value = false
}, 60000)
} catch (err) {
console.log(err.message, 'error')
}
}, 1000)
} catch (error) {
console.error(error)
}
}
return {
qrcode,
countdown,
payWith,
}
},
}
const refreshQRCode = debounce(() => {
submitPayment(paymentType.value)
}, 1000)
</script>
<style scoped>
<style>
/* tailwindcss classes */
</style>