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 57 </div>
58 58 </div>
59 59 </template>
60   -<script type="text/babel">
  60 +<script type="text/babel" setup>
61 61 /**
62 62 * VerifyPoints
63 63 * @description 点选
... ... @@ -67,215 +67,185 @@ import { aesEncrypt } from &#39;./../utils/ase&#39;
67 67 import { getCodeApi, reqCheckApi } from '@/api/login'
68 68 import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
69 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 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 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 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 251 </script>
... ...
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue
  View file @7640fe8
... ... @@ -71,7 +71,7 @@
71 71 </div>
72 72 </div>
73 73 </template>
74   -<script type="text/babel">
  74 +<script type="text/babel" setup>
75 75 /**
76 76 * VerifySlide
77 77 * @description 滑块
... ... @@ -90,337 +90,298 @@ import {
90 90 toRefs,
91 91 getCurrentInstance
92 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 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 387 </script>
... ...