BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 7640fe829e0285cdaf69acff124e00c16ce7d7ca

Authored by xingyu
1 parent bfea385c

fix: verify

Inline Side-by-side
Showing 2 changed files with 439 additions and 508 deletions
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue
  View file @7640fe8
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 </div> 57 </div>
58 </div> 58 </div>
59 </template> 59 </template>
60 -<script type="text/babel"> 60 +<script type="text/babel" setup>
61 /** 61 /**
62 * VerifyPoints 62 * VerifyPoints
63 * @description 点选 63 * @description 点选
@@ -67,215 +67,185 @@ import { aesEncrypt } from &#39;./../utils/ase&#39; @@ -67,215 +67,185 @@ import { aesEncrypt } from &#39;./../utils/ase&#39;
67 import { getCodeApi, reqCheckApi } from '@/api/login' 67 import { getCodeApi, reqCheckApi } from '@/api/login'
68 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue' 68 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
69 import { useI18n } from '@/hooks/web/useI18n' 69 import { useI18n } from '@/hooks/web/useI18n'
70 -export default {  
71 - name: 'VerifyPoints',  
72 - props: {  
73 - //弹出式pop，固定fixed  
74 - mode: {  
75 - type: String,  
76 - default: 'fixed'  
77 - },  
78 - captchaType: {  
79 - type: String  
80 - },  
81 - //间隔  
82 - vSpace: {  
83 - type: Number,  
84 - default: 5  
85 - },  
86 - imgSize: {  
87 - type: Object,  
88 - default() {  
89 - return {  
90 - width: '310px',  
91 - height: '155px'  
92 - }  
93 - }  
94 - },  
95 - barSize: {  
96 - type: Object,  
97 - default() {  
98 - return {  
99 - width: '310px',  
100 - height: '40px'  
101 - } 70 +
  71 +const props = defineProps({
  72 + //弹出式pop，固定fixed
  73 + mode: {
  74 + type: String,
  75 + default: 'fixed'
  76 + },
  77 + captchaType: {
  78 + type: String
  79 + },
  80 + //间隔
  81 + vSpace: {
  82 + type: Number,
  83 + default: 5
  84 + },
  85 + imgSize: {
  86 + type: Object,
  87 + default() {
  88 + return {
  89 + width: '310px',
  90 + height: '155px'
102 } 91 }
103 } 92 }
104 }, 93 },
105 - setup(props) {  
106 - const { t } = useI18n()  
107 - const { mode, captchaType } = toRefs(props)  
108 - const { proxy } = getCurrentInstance()  
109 - let secretKey = ref(''), //后端返回的ase加密秘钥  
110 - checkNum = ref(3), //默认需要点击的字数  
111 - fontPos = reactive([]), //选中的坐标信息  
112 - checkPosArr = reactive([]), //用户点击的坐标  
113 - num = ref(1), //点击的记数  
114 - pointBackImgBase = ref(''), //后端获取到的背景图片  
115 - poinTextList = reactive([]), //后端返回的点击字体顺序  
116 - backToken = ref(''), //后端返回的token值  
117 - setSize = reactive({  
118 - imgHeight: 0,  
119 - imgWidth: 0,  
120 - barHeight: 0,  
121 - barWidth: 0  
122 - }),  
123 - tempPoints = reactive([]),  
124 - text = ref(''),  
125 - barAreaColor = ref(undefined),  
126 - barAreaBorderColor = ref(undefined),  
127 - showRefresh = ref(true),  
128 - bindingClick = ref(true)  
129 -  
130 - const init = () => {  
131 - //加载页面  
132 - fontPos.splice(0, fontPos.length)  
133 - checkPosArr.splice(0, checkPosArr.length)  
134 - num.value = 1  
135 - getPictrue()  
136 - nextTick(() => {  
137 - let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)  
138 - setSize.imgHeight = imgHeight  
139 - setSize.imgWidth = imgWidth  
140 - setSize.barHeight = barHeight  
141 - setSize.barWidth = barWidth  
142 - proxy.$parent.$emit('ready', proxy)  
143 - })  
144 - }  
145 - onMounted(() => {  
146 - // 禁止拖拽  
147 - init()  
148 - proxy.$el.onselectstart = function () {  
149 - return false  
150 - }  
151 - })  
152 - const canvas = ref(null)  
153 - const canvasClick = (e) => {  
154 - checkPosArr.push(getMousePos(canvas, e))  
155 - if (num.value == checkNum.value) {  
156 - num.value = createPoint(getMousePos(canvas, e))  
157 - //按比例转换坐标值  
158 - let arr = pointTransfrom(checkPosArr, setSize)  
159 - checkPosArr.length = 0  
160 - checkPosArr.push(...arr)  
161 - //等创建坐标执行完  
162 - setTimeout(() => {  
163 - // var flag = this.comparePos(this.fontPos, this.checkPosArr);  
164 - //发送后端请求  
165 - var captchaVerification = secretKey.value  
166 - ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)  
167 - : backToken.value + '---' + JSON.stringify(checkPosArr)  
168 - let data = {  
169 - captchaType: captchaType.value,  
170 - pointJson: secretKey.value  
171 - ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)  
172 - : JSON.stringify(checkPosArr),  
173 - token: backToken.value  
174 - }  
175 - reqCheckApi(data).then((res) => {  
176 - if (res.repCode == '0000') {  
177 - barAreaColor.value = '#4cae4c'  
178 - barAreaBorderColor.value = '#5cb85c'  
179 - text.value = t('captcha.success')  
180 - bindingClick.value = false  
181 - if (mode.value == 'pop') {  
182 - setTimeout(() => {  
183 - proxy.$parent.clickShow = false  
184 - refresh()  
185 - }, 1500)  
186 - }  
187 - proxy.$parent.$emit('success', { captchaVerification })  
188 - } else {  
189 - proxy.$parent.$emit('error', proxy)  
190 - barAreaColor.value = '#d9534f'  
191 - barAreaBorderColor.value = '#d9534f'  
192 - text.value = t('captcha.fail')  
193 - setTimeout(() => {  
194 - refresh()  
195 - }, 700)  
196 - }  
197 - })  
198 - }, 400)  
199 - }  
200 - if (num.value < checkNum.value) {  
201 - num.value = createPoint(getMousePos(canvas, e)) 94 + barSize: {
  95 + type: Object,
  96 + default() {
  97 + return {
  98 + width: '310px',
  99 + height: '40px'
202 } 100 }
203 } 101 }
204 - //获取坐标  
205 - const getMousePos = function (obj, e) {  
206 - var x = e.offsetX  
207 - var y = e.offsetY  
208 - return { x, y }  
209 - }  
210 - //创建坐标点  
211 - const createPoint = function (pos) {  
212 - tempPoints.push(Object.assign({}, pos))  
213 - return num.value + 1  
214 - }  
215 - const refresh = function () {  
216 - tempPoints.splice(0, tempPoints.length)  
217 - barAreaColor.value = '#000'  
218 - barAreaBorderColor.value = '#ddd'  
219 - bindingClick.value = true  
220 - fontPos.splice(0, fontPos.length)  
221 - checkPosArr.splice(0, checkPosArr.length)  
222 - num.value = 1  
223 - getPictrue()  
224 - text.value = t('captcha.fail')  
225 - showRefresh.value = true  
226 - } 102 + }
  103 +})
227 104
228 - // 请求背景图片和验证图片  
229 - function getPictrue() { 105 +const { t } = useI18n()
  106 +const { mode, captchaType } = toRefs(props)
  107 +const { proxy } = getCurrentInstance()
  108 +let secretKey = ref(''), //后端返回的ase加密秘钥
  109 + checkNum = ref(3), //默认需要点击的字数
  110 + fontPos = reactive([]), //选中的坐标信息
  111 + checkPosArr = reactive([]), //用户点击的坐标
  112 + num = ref(1), //点击的记数
  113 + pointBackImgBase = ref(''), //后端获取到的背景图片
  114 + poinTextList = reactive([]), //后端返回的点击字体顺序
  115 + backToken = ref(''), //后端返回的token值
  116 + setSize = reactive({
  117 + imgHeight: 0,
  118 + imgWidth: 0,
  119 + barHeight: 0,
  120 + barWidth: 0
  121 + }),
  122 + tempPoints = reactive([]),
  123 + text = ref(''),
  124 + barAreaColor = ref(undefined),
  125 + barAreaBorderColor = ref(undefined),
  126 + showRefresh = ref(true),
  127 + bindingClick = ref(true)
  128 +
  129 +const init = () => {
  130 + //加载页面
  131 + fontPos.splice(0, fontPos.length)
  132 + checkPosArr.splice(0, checkPosArr.length)
  133 + num.value = 1
  134 + getPictrue()
  135 + nextTick(() => {
  136 + let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
  137 + setSize.imgHeight = imgHeight
  138 + setSize.imgWidth = imgWidth
  139 + setSize.barHeight = barHeight
  140 + setSize.barWidth = barWidth
  141 + proxy.$parent.$emit('ready', proxy)
  142 + })
  143 +}
  144 +onMounted(() => {
  145 + // 禁止拖拽
  146 + init()
  147 + proxy.$el.onselectstart = function () {
  148 + return false
  149 + }
  150 +})
  151 +const canvas = ref(null)
  152 +const canvasClick = (e) => {
  153 + checkPosArr.push(getMousePos(canvas, e))
  154 + if (num.value == checkNum.value) {
  155 + num.value = createPoint(getMousePos(canvas, e))
  156 + //按比例转换坐标值
  157 + let arr = pointTransfrom(checkPosArr, setSize)
  158 + checkPosArr.length = 0
  159 + checkPosArr.push(...arr)
  160 + //等创建坐标执行完
  161 + setTimeout(() => {
  162 + // var flag = this.comparePos(this.fontPos, this.checkPosArr);
  163 + //发送后端请求
  164 + var captchaVerification = secretKey.value
  165 + ? aesEncrypt(backToken.value + '---' + JSON.stringify(checkPosArr), secretKey.value)
  166 + : backToken.value + '---' + JSON.stringify(checkPosArr)
230 let data = { 167 let data = {
231 - captchaType: captchaType.value 168 + captchaType: captchaType.value,
  169 + pointJson: secretKey.value
  170 + ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
  171 + : JSON.stringify(checkPosArr),
  172 + token: backToken.value
232 } 173 }
233 - getCodeApi(data).then((res) => { 174 + reqCheckApi(data).then((res) => {
234 if (res.repCode == '0000') { 175 if (res.repCode == '0000') {
235 - pointBackImgBase.value = res.repData.originalImageBase64  
236 - backToken.value = res.repData.token  
237 - secretKey.value = res.repData.secretKey  
238 - poinTextList.value = res.repData.wordList  
239 - text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】' 176 + barAreaColor.value = '#4cae4c'
  177 + barAreaBorderColor.value = '#5cb85c'
  178 + text.value = t('captcha.success')
  179 + bindingClick.value = false
  180 + if (mode.value == 'pop') {
  181 + setTimeout(() => {
  182 + proxy.$parent.clickShow = false
  183 + refresh()
  184 + }, 1500)
  185 + }
  186 + proxy.$parent.$emit('success', { captchaVerification })
240 } else { 187 } else {
241 - text.value = res.repMsg 188 + proxy.$parent.$emit('error', proxy)
  189 + barAreaColor.value = '#d9534f'
  190 + barAreaBorderColor.value = '#d9534f'
  191 + text.value = t('captcha.fail')
  192 + setTimeout(() => {
  193 + refresh()
  194 + }, 700)
242 } 195 }
243 }) 196 })
244 - }  
245 - //坐标转换函数  
246 - const pointTransfrom = function (pointArr, imgSize) {  
247 - var newPointArr = pointArr.map((p) => {  
248 - let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))  
249 - let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))  
250 - return { x, y }  
251 - })  
252 - return newPointArr  
253 - }  
254 - return {  
255 - secretKey,  
256 - checkNum,  
257 - fontPos,  
258 - checkPosArr,  
259 - num,  
260 - pointBackImgBase,  
261 - poinTextList,  
262 - backToken,  
263 - setSize,  
264 - tempPoints,  
265 - text,  
266 - barAreaColor,  
267 - barAreaBorderColor,  
268 - showRefresh,  
269 - bindingClick,  
270 - init,  
271 - canvas,  
272 - canvasClick,  
273 - getMousePos,  
274 - createPoint,  
275 - refresh,  
276 - getPictrue,  
277 - pointTransfrom  
278 - } 197 + }, 400)
  198 + }
  199 + if (num.value < checkNum.value) {
  200 + num.value = createPoint(getMousePos(canvas, e))
279 } 201 }
280 } 202 }
  203 +//获取坐标
  204 +const getMousePos = function (obj, e) {
  205 + var x = e.offsetX
  206 + var y = e.offsetY
  207 + return { x, y }
  208 +}
  209 +//创建坐标点
  210 +const createPoint = function (pos) {
  211 + tempPoints.push(Object.assign({}, pos))
  212 + return num.value + 1
  213 +}
  214 +const refresh = async function () {
  215 + tempPoints.splice(0, tempPoints.length)
  216 + barAreaColor.value = '#000'
  217 + barAreaBorderColor.value = '#ddd'
  218 + bindingClick.value = true
  219 + fontPos.splice(0, fontPos.length)
  220 + checkPosArr.splice(0, checkPosArr.length)
  221 + num.value = 1
  222 + await getPictrue()
  223 + showRefresh.value = true
  224 +}
  225 +
  226 +// 请求背景图片和验证图片
  227 +const getPictrue = async () => {
  228 + let data = {
  229 + captchaType: captchaType.value
  230 + }
  231 + const res = await getCodeApi(data)
  232 + if (res.repCode == '0000') {
  233 + pointBackImgBase.value = res.repData.originalImageBase64
  234 + backToken.value = res.repData.token
  235 + secretKey.value = res.repData.secretKey
  236 + poinTextList.value = res.repData.wordList
  237 + text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
  238 + } else {
  239 + text.value = res.repMsg
  240 + }
  241 +}
  242 +//坐标转换函数
  243 +const pointTransfrom = function (pointArr, imgSize) {
  244 + var newPointArr = pointArr.map((p) => {
  245 + let x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth))
  246 + let y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight))
  247 + return { x, y }
  248 + })
  249 + return newPointArr
  250 +}
281 </script> 251 </script>
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue
  View file @7640fe8
@@ -71,7 +71,7 @@ @@ -71,7 +71,7 @@
71 </div> 71 </div>
72 </div> 72 </div>
73 </template> 73 </template>
74 -<script type="text/babel"> 74 +<script type="text/babel" setup>
75 /** 75 /**
76 * VerifySlide 76 * VerifySlide
77 * @description 滑块 77 * @description 滑块
@@ -90,337 +90,298 @@ import { @@ -90,337 +90,298 @@ import {
90 toRefs, 90 toRefs,
91 getCurrentInstance 91 getCurrentInstance
92 } from 'vue' 92 } from 'vue'
93 -// "captchaType":"blockPuzzle",  
94 -export default {  
95 - name: 'VerifySlide',  
96 - props: {  
97 - captchaType: {  
98 - type: String  
99 - },  
100 - type: {  
101 - type: String,  
102 - default: '1'  
103 - },  
104 - //弹出式pop，固定fixed  
105 - mode: {  
106 - type: String,  
107 - default: 'fixed'  
108 - },  
109 - vSpace: {  
110 - type: Number,  
111 - default: 5  
112 - },  
113 - explain: {  
114 - type: String,  
115 - default: ''  
116 - },  
117 - imgSize: {  
118 - type: Object,  
119 - default() {  
120 - return {  
121 - width: '310px',  
122 - height: '155px'  
123 - }  
124 - }  
125 - },  
126 - blockSize: {  
127 - type: Object,  
128 - default() {  
129 - return {  
130 - width: '50px',  
131 - height: '50px'  
132 - } 93 +
  94 +const props = defineProps({
  95 + captchaType: {
  96 + type: String
  97 + },
  98 + type: {
  99 + type: String,
  100 + default: '1'
  101 + },
  102 + //弹出式pop，固定fixed
  103 + mode: {
  104 + type: String,
  105 + default: 'fixed'
  106 + },
  107 + vSpace: {
  108 + type: Number,
  109 + default: 5
  110 + },
  111 + explain: {
  112 + type: String,
  113 + default: ''
  114 + },
  115 + imgSize: {
  116 + type: Object,
  117 + default() {
  118 + return {
  119 + width: '310px',
  120 + height: '155px'
133 } 121 }
134 - },  
135 - barSize: {  
136 - type: Object,  
137 - default() {  
138 - return {  
139 - width: '310px',  
140 - height: '30px'  
141 - } 122 + }
  123 + },
  124 + blockSize: {
  125 + type: Object,
  126 + default() {
  127 + return {
  128 + width: '50px',
  129 + height: '50px'
142 } 130 }
143 } 131 }
144 }, 132 },
145 - setup(props) {  
146 - const { t } = useI18n()  
147 - const { mode, captchaType, type, blockSize, explain } = toRefs(props)  
148 - const { proxy } = getCurrentInstance()  
149 - let secretKey = ref(''), //后端返回的ase加密秘钥  
150 - passFlag = ref(''), //是否通过的标识  
151 - backImgBase = ref(''), //验证码背景图片  
152 - blockBackImgBase = ref(''), //验证滑块的背景图片  
153 - backToken = ref(''), //后端返回的唯一token值  
154 - startMoveTime = ref(''), //移动开始的时间  
155 - endMovetime = ref(''), //移动结束的时间  
156 - tipsBackColor = ref(''), //提示词的背景颜色  
157 - tipWords = ref(''),  
158 - text = ref(''),  
159 - finishText = ref(''),  
160 - setSize = reactive({  
161 - imgHeight: 0,  
162 - imgWidth: 0,  
163 - barHeight: 0,  
164 - barWidth: 0  
165 - }),  
166 - top = ref(0),  
167 - left = ref(0),  
168 - moveBlockLeft = ref(undefined),  
169 - leftBarWidth = ref(undefined),  
170 - // 移动中样式  
171 - moveBlockBackgroundColor = ref(undefined),  
172 - leftBarBorderColor = ref('#ddd'),  
173 - iconColor = ref(undefined),  
174 - iconClass = ref('icon-right'),  
175 - status = ref(false), //鼠标状态  
176 - isEnd = ref(false), //是够验证完成  
177 - showRefresh = ref(true),  
178 - transitionLeft = ref(''),  
179 - transitionWidth = ref(''),  
180 - startLeft = ref(0)  
181 -  
182 - const barArea = computed(() => {  
183 - return proxy.$el.querySelector('.verify-bar-area')  
184 - })  
185 - function init() {  
186 - if (explain.value === '') {  
187 - text.value = t('captcha.slide')  
188 - } else {  
189 - text.value = explain.value 133 + barSize: {
  134 + type: Object,
  135 + default() {
  136 + return {
  137 + width: '310px',
  138 + height: '30px'
190 } 139 }
191 - getPictrue()  
192 - nextTick(() => {  
193 - let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)  
194 - setSize.imgHeight = imgHeight  
195 - setSize.imgWidth = imgWidth  
196 - setSize.barHeight = barHeight  
197 - setSize.barWidth = barWidth  
198 - proxy.$parent.$emit('ready', proxy)  
199 - }) 140 + }
  141 + }
  142 +})
200 143
201 - window.removeEventListener('touchmove', function (e) {  
202 - move(e)  
203 - })  
204 - window.removeEventListener('mousemove', function (e) {  
205 - move(e)  
206 - }) 144 +const { t } = useI18n()
  145 +const { mode, captchaType, type, blockSize, explain } = toRefs(props)
  146 +const { proxy } = getCurrentInstance()
  147 +let secretKey = ref(''), //后端返回的ase加密秘钥
  148 + passFlag = ref(''), //是否通过的标识
  149 + backImgBase = ref(''), //验证码背景图片
  150 + blockBackImgBase = ref(''), //验证滑块的背景图片
  151 + backToken = ref(''), //后端返回的唯一token值
  152 + startMoveTime = ref(''), //移动开始的时间
  153 + endMovetime = ref(''), //移动结束的时间
  154 + tipWords = ref(''),
  155 + text = ref(''),
  156 + finishText = ref(''),
  157 + setSize = reactive({
  158 + imgHeight: 0,
  159 + imgWidth: 0,
  160 + barHeight: 0,
  161 + barWidth: 0
  162 + }),
  163 + moveBlockLeft = ref(undefined),
  164 + leftBarWidth = ref(undefined),
  165 + // 移动中样式
  166 + moveBlockBackgroundColor = ref(undefined),
  167 + leftBarBorderColor = ref('#ddd'),
  168 + iconColor = ref(undefined),
  169 + iconClass = ref('icon-right'),
  170 + status = ref(false), //鼠标状态
  171 + isEnd = ref(false), //是够验证完成
  172 + showRefresh = ref(true),
  173 + transitionLeft = ref(''),
  174 + transitionWidth = ref(''),
  175 + startLeft = ref(0)
207 176
208 - //鼠标松开  
209 - window.removeEventListener('touchend', function () {  
210 - end()  
211 - })  
212 - window.removeEventListener('mouseup', function () {  
213 - end()  
214 - }) 177 +const barArea = computed(() => {
  178 + return proxy.$el.querySelector('.verify-bar-area')
  179 +})
  180 +const init = () => {
  181 + if (explain.value === '') {
  182 + text.value = t('captcha.slide')
  183 + } else {
  184 + text.value = explain.value
  185 + }
  186 + getPictrue()
  187 + nextTick(() => {
  188 + let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
  189 + setSize.imgHeight = imgHeight
  190 + setSize.imgWidth = imgWidth
  191 + setSize.barHeight = barHeight
  192 + setSize.barWidth = barWidth
  193 + proxy.$parent.$emit('ready', proxy)
  194 + })
215 195
216 - window.addEventListener('touchmove', function (e) {  
217 - move(e)  
218 - })  
219 - window.addEventListener('mousemove', function (e) {  
220 - move(e)  
221 - }) 196 + window.removeEventListener('touchmove', function (e) {
  197 + move(e)
  198 + })
  199 + window.removeEventListener('mousemove', function (e) {
  200 + move(e)
  201 + })
222 202
223 - //鼠标松开  
224 - window.addEventListener('touchend', function () {  
225 - end()  
226 - })  
227 - window.addEventListener('mouseup', function () {  
228 - end()  
229 - }) 203 + //鼠标松开
  204 + window.removeEventListener('touchend', function () {
  205 + end()
  206 + })
  207 + window.removeEventListener('mouseup', function () {
  208 + end()
  209 + })
  210 +
  211 + window.addEventListener('touchmove', function (e) {
  212 + move(e)
  213 + })
  214 + window.addEventListener('mousemove', function (e) {
  215 + move(e)
  216 + })
  217 +
  218 + //鼠标松开
  219 + window.addEventListener('touchend', function () {
  220 + end()
  221 + })
  222 + window.addEventListener('mouseup', function () {
  223 + end()
  224 + })
  225 +}
  226 +watch(type, () => {
  227 + init()
  228 +})
  229 +onMounted(() => {
  230 + // 禁止拖拽
  231 + init()
  232 + proxy.$el.onselectstart = function () {
  233 + return false
  234 + }
  235 +})
  236 +//鼠标按下
  237 +const start = (e) => {
  238 + e = e || window.event
  239 + if (!e.touches) {
  240 + //兼容PC端
  241 + var x = e.clientX
  242 + } else {
  243 + //兼容移动端
  244 + var x = e.touches[0].pageX
  245 + }
  246 + startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)
  247 + startMoveTime.value = +new Date() //开始滑动的时间
  248 + if (isEnd.value == false) {
  249 + text.value = ''
  250 + moveBlockBackgroundColor.value = '#337ab7'
  251 + leftBarBorderColor.value = '#337AB7'
  252 + iconColor.value = '#fff'
  253 + e.stopPropagation()
  254 + status.value = true
  255 + }
  256 +}
  257 +//鼠标移动
  258 +const move = (e) => {
  259 + e = e || window.event
  260 + if (status.value && isEnd.value == false) {
  261 + if (!e.touches) {
  262 + //兼容PC端
  263 + var x = e.clientX
  264 + } else {
  265 + //兼容移动端
  266 + var x = e.touches[0].pageX
230 } 267 }
231 - watch(type, () => {  
232 - init()  
233 - })  
234 - onMounted(() => {  
235 - // 禁止拖拽  
236 - init()  
237 - proxy.$el.onselectstart = function () {  
238 - return false  
239 - }  
240 - })  
241 - //鼠标按下  
242 - function start(e) {  
243 - e = e || window.event  
244 - if (!e.touches) {  
245 - //兼容PC端  
246 - var x = e.clientX  
247 - } else {  
248 - //兼容移动端  
249 - var x = e.touches[0].pageX  
250 - }  
251 - startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left)  
252 - startMoveTime.value = +new Date() //开始滑动的时间  
253 - if (isEnd.value == false) {  
254 - text.value = ''  
255 - moveBlockBackgroundColor.value = '#337ab7'  
256 - leftBarBorderColor.value = '#337AB7'  
257 - iconColor.value = '#fff'  
258 - e.stopPropagation()  
259 - status.value = true  
260 - } 268 + var bar_area_left = barArea.value.getBoundingClientRect().left
  269 + var move_block_left = x - bar_area_left //小方块相对于父元素的left值
  270 + if (
  271 + move_block_left >=
  272 + barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
  273 + ) {
  274 + move_block_left =
  275 + barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2
261 } 276 }
262 - //鼠标移动  
263 - function move(e) {  
264 - e = e || window.event  
265 - if (status.value && isEnd.value == false) {  
266 - if (!e.touches) {  
267 - //兼容PC端  
268 - var x = e.clientX  
269 - } else {  
270 - //兼容移动端  
271 - var x = e.touches[0].pageX  
272 - }  
273 - var bar_area_left = barArea.value.getBoundingClientRect().left  
274 - var move_block_left = x - bar_area_left //小方块相对于父元素的left值  
275 - if (  
276 - move_block_left >=  
277 - barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2  
278 - ) {  
279 - move_block_left =  
280 - barArea.value.offsetWidth - parseInt(parseInt(blockSize.value.width) / 2) - 2  
281 - }  
282 - if (move_block_left <= 0) {  
283 - move_block_left = parseInt(parseInt(blockSize.value.width) / 2)  
284 - }  
285 - //拖动后小方块的left值  
286 - moveBlockLeft.value = move_block_left - startLeft.value + 'px'  
287 - leftBarWidth.value = move_block_left - startLeft.value + 'px'  
288 - } 277 + if (move_block_left <= 0) {
  278 + move_block_left = parseInt(parseInt(blockSize.value.width) / 2)
289 } 279 }
  280 + //拖动后小方块的left值
  281 + moveBlockLeft.value = move_block_left - startLeft.value + 'px'
  282 + leftBarWidth.value = move_block_left - startLeft.value + 'px'
  283 + }
  284 +}
290 285
291 - //鼠标松开  
292 - function end() {  
293 - endMovetime.value = +new Date()  
294 - //判断是否重合  
295 - if (status.value && isEnd.value == false) {  
296 - var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))  
297 - moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)  
298 - let data = {  
299 - captchaType: captchaType.value,  
300 - pointJson: secretKey.value  
301 - ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)  
302 - : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),  
303 - token: backToken.value 286 +//鼠标松开
  287 +const end = () => {
  288 + endMovetime.value = +new Date()
  289 + //判断是否重合
  290 + if (status.value && isEnd.value == false) {
  291 + var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
  292 + moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
  293 + let data = {
  294 + captchaType: captchaType.value,
  295 + pointJson: secretKey.value
  296 + ? aesEncrypt(JSON.stringify({ x: moveLeftDistance, y: 5.0 }), secretKey.value)
  297 + : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
  298 + token: backToken.value
  299 + }
  300 + reqCheckApi(data).then((res) => {
  301 + if (res.repCode == '0000') {
  302 + moveBlockBackgroundColor.value = '#5cb85c'
  303 + leftBarBorderColor.value = '#5cb85c'
  304 + iconColor.value = '#fff'
  305 + iconClass.value = 'icon-check'
  306 + showRefresh.value = false
  307 + isEnd.value = true
  308 + if (mode.value == 'pop') {
  309 + setTimeout(() => {
  310 + proxy.$parent.clickShow = false
  311 + refresh()
  312 + }, 1500)
304 } 313 }
305 - reqCheckApi(data).then((res) => {  
306 - if (res.repCode == '0000') {  
307 - moveBlockBackgroundColor.value = '#5cb85c'  
308 - leftBarBorderColor.value = '#5cb85c'  
309 - iconColor.value = '#fff'  
310 - iconClass.value = 'icon-check'  
311 - showRefresh.value = false  
312 - isEnd.value = true  
313 - if (mode.value == 'pop') {  
314 - setTimeout(() => {  
315 - proxy.$parent.clickShow = false  
316 - refresh()  
317 - }, 1500)  
318 - }  
319 - passFlag.value = true  
320 - tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s 314 + passFlag.value = true
  315 + tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s
321 ${t('captcha.success')}` 316 ${t('captcha.success')}`
322 - var captchaVerification = secretKey.value  
323 - ? aesEncrypt(  
324 - backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),  
325 - secretKey.value  
326 - )  
327 - : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })  
328 - setTimeout(() => {  
329 - tipWords.value = ''  
330 - proxy.$parent.closeBox()  
331 - proxy.$parent.$emit('success', { captchaVerification })  
332 - }, 1000)  
333 - } else {  
334 - moveBlockBackgroundColor.value = '#d9534f'  
335 - leftBarBorderColor.value = '#d9534f'  
336 - iconColor.value = '#fff'  
337 - iconClass.value = 'icon-close'  
338 - passFlag.value = false  
339 - setTimeout(function () {  
340 - refresh()  
341 - }, 1000)  
342 - proxy.$parent.$emit('error', proxy)  
343 - tipWords.value = t('captcha.fail')  
344 - setTimeout(() => {  
345 - tipWords.value = ''  
346 - }, 1000)  
347 - }  
348 - })  
349 - status.value = false 317 + var captchaVerification = secretKey.value
  318 + ? aesEncrypt(
  319 + backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
  320 + secretKey.value
  321 + )
  322 + : backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 })
  323 + setTimeout(() => {
  324 + tipWords.value = ''
  325 + proxy.$parent.closeBox()
  326 + proxy.$parent.$emit('success', { captchaVerification })
  327 + }, 1000)
  328 + } else {
  329 + moveBlockBackgroundColor.value = '#d9534f'
  330 + leftBarBorderColor.value = '#d9534f'
  331 + iconColor.value = '#fff'
  332 + iconClass.value = 'icon-close'
  333 + passFlag.value = false
  334 + setTimeout(function () {
  335 + refresh()
  336 + }, 1000)
  337 + proxy.$parent.$emit('error', proxy)
  338 + tipWords.value = t('captcha.fail')
  339 + setTimeout(() => {
  340 + tipWords.value = ''
  341 + }, 1000)
350 } 342 }
351 - } 343 + })
  344 + status.value = false
  345 + }
  346 +}
352 347
353 - const refresh = () => {  
354 - showRefresh.value = true  
355 - finishText.value = '' 348 +const refresh = async () => {
  349 + showRefresh.value = true
  350 + finishText.value = ''
356 351
357 - transitionLeft.value = 'left .3s'  
358 - moveBlockLeft.value = 0 352 + transitionLeft.value = 'left .3s'
  353 + moveBlockLeft.value = 0
359 354
360 - leftBarWidth.value = undefined  
361 - transitionWidth.value = 'width .3s' 355 + leftBarWidth.value = undefined
  356 + transitionWidth.value = 'width .3s'
362 357
363 - leftBarBorderColor.value = '#ddd'  
364 - moveBlockBackgroundColor.value = '#fff'  
365 - iconColor.value = '#000'  
366 - iconClass.value = 'icon-right'  
367 - isEnd.value = false 358 + leftBarBorderColor.value = '#ddd'
  359 + moveBlockBackgroundColor.value = '#fff'
  360 + iconColor.value = '#000'
  361 + iconClass.value = 'icon-right'
  362 + isEnd.value = false
368 363
369 - getPictrue()  
370 - setTimeout(() => {  
371 - transitionWidth.value = ''  
372 - transitionLeft.value = ''  
373 - text.value = explain.value  
374 - }, 300)  
375 - } 364 + await getPictrue()
  365 + setTimeout(() => {
  366 + transitionWidth.value = ''
  367 + transitionLeft.value = ''
  368 + text.value = explain.value
  369 + }, 300)
  370 +}
376 371
377 - // 请求背景图片和验证图片  
378 - function getPictrue() {  
379 - let data = {  
380 - captchaType: captchaType.value  
381 - }  
382 - getCodeApi(data).then((res) => {  
383 - if (res.repCode == '0000') {  
384 - backImgBase.value = res.repData.originalImageBase64  
385 - blockBackImgBase.value = res.repData.jigsawImageBase64  
386 - backToken.value = res.repData.token  
387 - secretKey.value = res.repData.secretKey  
388 - } else {  
389 - tipWords.value = res.repMsg  
390 - }  
391 - })  
392 - }  
393 - return {  
394 - secretKey, //后端返回的ase加密秘钥  
395 - passFlag, //是否通过的标识  
396 - backImgBase, //验证码背景图片  
397 - blockBackImgBase, //验证滑块的背景图片  
398 - backToken, //后端返回的唯一token值  
399 - startMoveTime, //移动开始的时间  
400 - endMovetime, //移动结束的时间  
401 - tipsBackColor, //提示词的背景颜色  
402 - tipWords,  
403 - text,  
404 - finishText,  
405 - setSize,  
406 - top,  
407 - left,  
408 - moveBlockLeft,  
409 - leftBarWidth,  
410 - // 移动中样式  
411 - moveBlockBackgroundColor,  
412 - leftBarBorderColor,  
413 - iconColor,  
414 - iconClass,  
415 - status, //鼠标状态  
416 - isEnd, //是够验证完成  
417 - showRefresh,  
418 - transitionLeft,  
419 - transitionWidth,  
420 - barArea,  
421 - refresh,  
422 - start  
423 - } 372 +// 请求背景图片和验证图片
  373 +const getPictrue = async () => {
  374 + let data = {
  375 + captchaType: captchaType.value
  376 + }
  377 + const res = await getCodeApi(data)
  378 + if (res.repCode == '0000') {
  379 + backImgBase.value = res.repData.originalImageBase64
  380 + blockBackImgBase.value = res.repData.jigsawImageBase64
  381 + backToken.value = res.repData.token
  382 + secretKey.value = res.repData.secretKey
  383 + } else {
  384 + tipWords.value = res.repMsg
424 } 385 }
425 } 386 }
426 </script> 387 </script>