From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/Verifition/src/Verify/VerifyPictureWord.vue | 196 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 196 insertions(+), 0 deletions(-)
diff --git a/src/components/Verifition/src/Verify/VerifyPictureWord.vue b/src/components/Verifition/src/Verify/VerifyPictureWord.vue
new file mode 100644
index 0000000..e1725f8
--- /dev/null
+++ b/src/components/Verifition/src/Verify/VerifyPictureWord.vue
@@ -0,0 +1,196 @@
+<template>
+ <div style="position: relative">
+ <div class="verify-img-out">
+ <div
+ :style="{
+ width: setSize.imgWidth,
+ height: setSize.imgHeight,
+ 'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
+ 'margin-bottom': vSpace + 'px'
+ }"
+ class="verify-img-panel"
+ >
+ <div v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
+ <i class="iconfont icon-refresh"></i>
+ </div>
+ <img
+ @click="refresh"
+ ref="canvas"
+ :src="'data:image/png;base64,' + verificationCodeImg"
+ alt=""
+ style="display: block; width: 100%; height: 100%"
+ />
+ </div>
+ </div>
+ <div
+ :style="{
+ width: setSize.imgWidth,
+ color: barAreaColor,
+ 'border-color': barAreaBorderColor
+ // 'line-height': barSize.height
+ }"
+ class="verify-bar-area"
+ >
+ <div class="verify-msg">{{ text }}</div>
+ <div
+ :style="{
+ 'line-height': barSize.height
+ }"
+ >
+ <input class="verify-input" type="text" v-model="userCode" />
+ </div>
+ <button type="button" class="verify-btn" @click="submit" :disabled="checking">{{
+ t('captcha.verify')
+ }}</button>
+ </div>
+ </div>
+</template>
+<script setup type="text/babel">
+/**
+ * VerifyPictureWord
+ * @description 杈撳叆鏂囧瓧
+ * */
+import { resetSize } from '../utils/util'
+import { aesEncrypt } from '../utils/ase'
+import { getCode, reqCheck } from '@/api/login'
+import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
+
+const props = defineProps({
+ // 寮瑰嚭寮� pop锛屽浐瀹� fixed
+ mode: {
+ type: String,
+ default: 'fixed'
+ },
+ captchaType: {
+ type: String
+ },
+ // 闂撮殧
+ vSpace: {
+ type: Number,
+ default: 5
+ },
+ imgSize: {
+ type: Object,
+ default() {
+ return {
+ width: '310px',
+ height: '155px'
+ }
+ }
+ },
+ barSize: {
+ type: Object,
+ default() {
+ return {
+ width: '310px',
+ height: '40px'
+ }
+ }
+ }
+})
+
+const { t } = useI18n()
+const { mode, captchaType } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), // 鍚庣杩斿洖鐨刟se鍔犲瘑绉橀挜
+ userCode = ref(''), // 鐢ㄦ埛杈撳叆鐨勯獙璇佺爜 鏆傚瓨鑷硃ointJson锛屾棤闇�鍔犲瘑
+ verificationCodeImg = ref(''), // 鍚庣鑾峰彇鍒扮殑鑳屾櫙鍥剧墖
+ backToken = ref(''), // 鍚庣杩斿洖鐨則oken鍊�
+ setSize = reactive({
+ imgHeight: 0,
+ imgWidth: 0,
+ barHeight: 0,
+ barWidth: 0
+ }),
+ text = ref(''),
+ barAreaColor = ref('#000'),
+ barAreaBorderColor = ref('#ddd'),
+ showRefresh = ref(true),
+ // bindingClick = ref(true)
+ checking = ref(false)
+
+const init = () => {
+ // 鍔犺浇椤甸潰
+ getPicture()
+ nextTick(() => {
+ let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+ setSize.imgHeight = imgHeight
+ setSize.imgWidth = imgWidth
+ setSize.barHeight = barHeight
+ setSize.barWidth = barWidth
+ proxy.$parent.$emit('ready', proxy)
+ })
+}
+onMounted(() => {
+ // 绂佹鎷栨嫿
+ init()
+ proxy.$el.onselectstart = function () {
+ return false
+ }
+})
+const canvas = ref(null)
+
+const submit = () => {
+ checking.value = true
+ // 鍙戦�佸悗绔姹�
+ const captchaVerification = secretKey.value
+ ? aesEncrypt(backToken.value + '---' + userCode.value, secretKey.value)
+ : backToken.value + '---' + userCode.value
+ let data = {
+ captchaType: captchaType.value,
+ pointJson: userCode.value,
+ token: backToken.value
+ }
+ reqCheck(data).then((res) => {
+ if (res.repCode === '0000') {
+ barAreaColor.value = '#4cae4c'
+ barAreaBorderColor.value = '#5cb85c'
+ text.value = t('captcha.success')
+ // bindingClick.value = false
+ if (mode.value === 'pop') {
+ setTimeout(() => {
+ proxy.$parent.clickShow = false
+ refresh()
+ }, 1500)
+ }
+ proxy.$parent.$emit('success', { captchaVerification })
+ } else {
+ proxy.$parent.$emit('error', proxy)
+ barAreaColor.value = '#d9534f'
+ barAreaBorderColor.value = '#d9534f'
+ text.value = t('captcha.fail')
+ setTimeout(() => {
+ refresh()
+ }, 700)
+ }
+ checking.value = false
+ })
+}
+
+const refresh = async function () {
+ barAreaColor.value = '#000'
+ barAreaBorderColor.value = '#ddd'
+ checking.value = false
+
+ userCode.value = ''
+
+ await getPicture()
+ showRefresh.value = true
+}
+
+// 璇锋眰鑳屾櫙鍥剧墖鍜岄獙璇佸浘鐗�
+const getPicture = async () => {
+ let data = {
+ captchaType: captchaType.value
+ }
+ const res = await getCode(data)
+ if (res.repCode === '0000') {
+ verificationCodeImg.value = res.repData.originalImageBase64
+ backToken.value = res.repData.token
+ secretKey.value = res.repData.secretKey
+ text.value = t('captcha.code')
+ } else {
+ text.value = res.repMsg
+ }
+}
+</script>
--
Gitblit v1.8.0