Commit d2d4794490ad206a789f510c8aa6fcfb2352e30d

Authored by xingyu4j
1 parent 4d7ac3eb

refactor: verify

yudao-ui-admin-vue3/src/api/login/index.ts
... ... @@ -62,3 +62,12 @@ export const socialAuthRedirectApi = (type: string, redirectUri: string) => {
62 62 url: '/system/auth/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri
63 63 })
64 64 }
  65 +// 获取验证图片 以及token
  66 +export const getCodeApi = (data) => {
  67 + return request.postOriginal({ url: 'system/captcha/get', data })
  68 +}
  69 +
  70 +// 滑动或者点选验证
  71 +export const reqCheckApi = (data) => {
  72 + return request.postOriginal({ url: 'system/captcha/check', data })
  73 +}
... ...
yudao-ui-admin-vue3/src/components/Verifition/src/Verify.vue
... ... @@ -2,7 +2,7 @@
2 2 <div :class="mode == 'pop' ? 'mask' : ''" v-show="showBox">
3 3 <div
4 4 :class="mode == 'pop' ? 'verifybox' : ''"
5   - :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
  5 + :style="{ 'max-width': parseInt(imgSize.width) + 20 + 'px' }"
6 6 >
7 7 <div class="verifybox-top" v-if="mode == 'pop'">
8 8 {{ t('captcha.verification') }}
... ... @@ -10,7 +10,7 @@
10 10 <i class="iconfont icon-close"></i>
11 11 </span>
12 12 </div>
13   - <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '15px' : '0' }">
  13 + <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '10px' : '0' }">
14 14 <!-- 验证码容器 -->
15 15 <component
16 16 v-if="componentType"
... ... @@ -153,12 +153,13 @@ export default {
153 153 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
154 154 left: 50%;
155 155 top: 50%;
  156 + border-radius: 5px;
156 157 transform: translate(-50%, -50%);
157 158 }
158 159 .verifybox-top {
159 160 padding: 0 15px;
160   - height: 50px;
161   - line-height: 50px;
  161 + height: 40px;
  162 + line-height: 40px;
162 163 text-align: left;
163 164 font-size: 16px;
164 165 color: #45494c;
... ... @@ -166,7 +167,7 @@ export default {
166 167 box-sizing: border-box;
167 168 }
168 169 .verifybox-bottom {
169   - padding: 15px;
  170 + padding: 10px;
170 171 box-sizing: border-box;
171 172 }
172 173 .verifybox-close {
... ... @@ -262,6 +263,7 @@ export default {
262 263 color: #ffffff;
263 264 border: none;
264 265 margin-top: 10px;
  266 + border-radius: 8px;
265 267 }
266 268  
267 269 /*滑动验证码*/
... ... @@ -273,6 +275,7 @@ export default {
273 275 -moz-box-sizing: content-box;
274 276 box-sizing: content-box;
275 277 border: 1px solid #ddd;
  278 + border-radius: 8px;
276 279 }
277 280  
278 281 .verify-bar-area .verify-move-block {
... ... @@ -285,6 +288,7 @@ export default {
285 288 -moz-box-sizing: content-box;
286 289 box-sizing: content-box;
287 290 box-shadow: 0 0 2px #888888;
  291 + border-radius: 8px;
288 292 }
289 293  
290 294 .verify-bar-area .verify-move-block:hover {
... ... @@ -302,6 +306,7 @@ export default {
302 306 -moz-box-sizing: content-box;
303 307 box-sizing: content-box;
304 308 border: 1px solid #ddd;
  309 + border-radius: 8px;
305 310 }
306 311  
307 312 .verify-img-panel {
... ...
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifyPoints.vue
... ... @@ -64,7 +64,7 @@
64 64 * */
65 65 import { resetSize } from './../utils/util'
66 66 import { aesEncrypt } from './../utils/ase'
67   -import { reqGet, reqCheck } from './../api/index'
  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 70 export default {
... ... @@ -172,7 +172,7 @@ export default {
172 172 : JSON.stringify(checkPosArr),
173 173 token: backToken.value
174 174 }
175   - reqCheck(data).then((res) => {
  175 + reqCheckApi(data).then((res) => {
176 176 if (res.repCode == '0000') {
177 177 barAreaColor.value = '#4cae4c'
178 178 barAreaBorderColor.value = '#5cb85c'
... ... @@ -230,7 +230,7 @@ export default {
230 230 let data = {
231 231 captchaType: captchaType.value
232 232 }
233   - reqGet(data).then((res) => {
  233 + getCodeApi(data).then((res) => {
234 234 if (res.repCode == '0000') {
235 235 pointBackImgBase.value = res.repData.originalImageBase64
236 236 backToken.value = res.repData.token
... ...
yudao-ui-admin-vue3/src/components/Verifition/src/Verify/VerifySlide.vue
... ... @@ -78,7 +78,7 @@
78 78 * */
79 79 import { aesEncrypt } from './../utils/ase'
80 80 import { resetSize } from './../utils/util'
81   -import { reqGet, reqCheck } from './../api/index'
  81 +import { getCodeApi, reqCheckApi } from '@/api/login'
82 82 import { useI18n } from '@/hooks/web/useI18n'
83 83 import {
84 84 computed,
... ... @@ -302,7 +302,7 @@ export default {
302 302 : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
303 303 token: backToken.value
304 304 }
305   - reqCheck(data).then((res) => {
  305 + reqCheckApi(data).then((res) => {
306 306 if (res.repCode == '0000') {
307 307 moveBlockBackgroundColor.value = '#5cb85c'
308 308 leftBarBorderColor.value = '#5cb85c'
... ... @@ -379,7 +379,7 @@ export default {
379 379 let data = {
380 380 captchaType: captchaType.value
381 381 }
382   - reqGet(data).then((res) => {
  382 + getCodeApi(data).then((res) => {
383 383 if (res.repCode == '0000') {
384 384 backImgBase.value = res.repData.originalImageBase64
385 385 blockBackImgBase.value = res.repData.jigsawImageBase64
... ...
yudao-ui-admin-vue3/src/components/Verifition/src/api/index.ts deleted
1   -/**
2   - * 此处可直接引用自己项目封装好的 axios 配合后端联调
3   - */
4   -
5   -import request from './../utils/axios' //组件内部封装的axios
6   -// import request from "@/api/axios.js" //调用项目封装的axios
7   -
8   -//获取验证图片 以及token
9   -export function reqGet(data) {
10   - return request({
11   - // url: '/captcha/get',
12   - url: '/admin-api/system/captcha/get', // 使用项目自定义的 /admin-api/ 前缀
13   - method: 'post',
14   - data
15   - })
16   -}
17   -
18   -//滑动或者点选验证
19   -export function reqCheck(data) {
20   - return request({
21   - // url: '/captcha/check',
22   - url: '/admin-api/system/captcha/check', // 使用项目自定义的 /admin-api/ 前缀
23   - method: 'post',
24   - data
25   - })
26   -}
yudao-ui-admin-vue3/src/components/Verifition/src/utils/axios.ts deleted
1   -import axios from 'axios'
2   -
3   -axios.defaults.baseURL = import.meta.env.VITE_BASE_URL
4   -
5   -const service = axios.create({
6   - timeout: 40000,
7   - headers: {
8   - 'X-Requested-With': 'XMLHttpRequest',
9   - 'Content-Type': 'application/json; charset=UTF-8'
10   - }
11   -})
12   -service.interceptors.request.use(
13   - (config) => {
14   - return config
15   - },
16   - (error) => {
17   - Promise.reject(error)
18   - }
19   -)
20   -
21   -// response interceptor
22   -service.interceptors.response.use((response) => {
23   - const res = response.data
24   - return res
25   -})
26   -export default service
yudao-ui-admin-vue3/src/config/axios/index.ts
... ... @@ -26,6 +26,10 @@ export default {
26 26 const res = await request({ method: 'POST', ...option })
27 27 return res.data as unknown as T
28 28 },
  29 + postOriginal: async (option: any) => {
  30 + const res = await request({ method: 'POST', ...option })
  31 + return res
  32 + },
29 33 delete: async <T = any>(option: any) => {
30 34 const res = await request({ method: 'DELETE', ...option })
31 35 return res.data as unknown as T
... ...
yudao-ui-admin-vue3/vite.config.ts
... ... @@ -144,6 +144,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
144 144 'vue-router',
145 145 'vue-types',
146 146 'vue-i18n',
  147 + 'vxe-table',
  148 + 'xe-utils',
147 149 'element-plus/es',
148 150 'element-plus/es/locale/lang/zh-cn',
149 151 'element-plus/es/locale/lang/en',
... ...