From 9b91001077c962d3aa7e6c945d53e45c0384d26d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=81=E7=A5=96=E6=98=9F?= <996675933@qq.com> Date: Tue, 16 Jul 2024 00:40:53 +0800 Subject: [PATCH] feat: --- package-lock.json | 83 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/hooks/index.ts | 1 + src/hooks/useCopy/index.ts | 24 +++++++++++ src/views/callback/index.vue | 20 ++++++++- src/views/sign/index.vue | 24 +++++++++++ src/views/tender/index.vue | 14 +++++- 7 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 src/hooks/useCopy/index.ts diff --git a/package-lock.json b/package-lock.json index f075378..dc4099f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "pinia": "^2.0.12", "qs": "^6.10.3", "vue": "^3.2.34", + "vue-clipboard3": "^2.0.0", "vue-router": "4" }, "devDependencies": { @@ -627,6 +628,16 @@ "node": ">= 10.0" } }, + "node_modules/clipboard": { + "version": "2.0.11", + "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz", + "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==", + "dependencies": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -754,6 +765,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -1445,6 +1461,14 @@ "node": ">= 6" } }, + "node_modules/good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==", + "dependencies": { + "delegate": "^3.1.2" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz", @@ -2103,6 +2127,11 @@ "node": ">=14.0.0" } }, + "node_modules/select": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz", + "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz", @@ -2237,6 +2266,11 @@ "utrie": "^1.0.2" } }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -2371,6 +2405,14 @@ } } }, + "node_modules/vue-clipboard3": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz", + "integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==", + "dependencies": { + "clipboard": "^2.0.6" + } + }, "node_modules/vue-demi": { "version": "0.14.8", "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.8.tgz", @@ -2884,6 +2926,16 @@ "source-map": "~0.6.0" } }, + "clipboard": { + "version": "2.0.11", + "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz", + "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==", + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -2982,6 +3034,11 @@ "gopd": "^1.0.1" } }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -3395,6 +3452,14 @@ "is-glob": "^4.0.1" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==", + "requires": { + "delegate": "^3.1.2" + } + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz", @@ -3847,6 +3912,11 @@ "source-map-js": ">=0.6.2 <2.0.0" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz", + "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==" + }, "set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz", @@ -3947,6 +4017,11 @@ "utrie": "^1.0.2" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4033,6 +4108,14 @@ "@vue/shared": "3.4.27" } }, + "vue-clipboard3": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz", + "integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==", + "requires": { + "clipboard": "^2.0.6" + } + }, "vue-demi": { "version": "0.14.8", "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.8.tgz", diff --git a/package.json b/package.json index 22e977b..739219f 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "pinia": "^2.0.12", "qs": "^6.10.3", "vue": "^3.2.34", + "vue-clipboard3": "^2.0.0", "vue-router": "4" }, "devDependencies": { diff --git a/src/hooks/index.ts b/src/hooks/index.ts index a8c3cc2..91e03b7 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1 +1,2 @@ +export * from './useCopy'; export * from './useLoading'; diff --git a/src/hooks/useCopy/index.ts b/src/hooks/useCopy/index.ts new file mode 100644 index 0000000..184ae63 --- /dev/null +++ b/src/hooks/useCopy/index.ts @@ -0,0 +1,24 @@ +import useClipboard from 'vue-clipboard3'; + +import { errorAlert, successAlert } from '../../utils/alert'; + +export const useCopy = (params = { copyTip: true }) => { + const { copyTip } = params; + const { toClipboard } = useClipboard(); + + async function copy(val: string) { + try { + await toClipboard(val); + + if (copyTip) { + successAlert('复制成功'); + } + } catch (_) { + if (copyTip) { + errorAlert('复制失败'); + } + } + } + + return { copy }; +}; diff --git a/src/views/callback/index.vue b/src/views/callback/index.vue index ee64084..33a54de 100644 --- a/src/views/callback/index.vue +++ b/src/views/callback/index.vue @@ -90,7 +90,9 @@
-
收款人账户
+
+ 收款人账户一键复制 +
@@ -154,11 +156,13 @@ import { useRoute } from 'vue-router'; import { WarningFilled } from '@element-plus/icons-vue'; import IPC from '@/components/IPC.vue'; +import { useCopy } from '@/hooks'; import { getPayInfo } from '@/api'; import type { PayInfo } from '@/api'; const route = useRoute(); +const { copy } = useCopy(); const payInfo = ref({ Payee: {}, Payer: {} }); initPage(); @@ -169,6 +173,20 @@ async function initPage() { payInfo.value = data.PayInfo; } + +function handleCopyPayee() { + const { Payee, Remark, PayAmount } = payInfo.value; + const { BankUserName, BankCardNum, BankName } = Payee; + const copyText = [ + `户名：${BankUserName}\r`, + `账号：${BankCardNum}\r`, + `开户行：${BankName}\r`, + `金额：${PayAmount}\r`, + `备注：${Remark}\r`, + ].join(''); + + copy(copyText); +}