修复部分验证码问题

This commit is contained in:
xiangheng
2024-06-04 01:16:50 +08:00
parent 89eb9ccc72
commit 6471a7ea23
10 changed files with 1820 additions and 1889 deletions

View File

@@ -2,16 +2,14 @@
"version" : "1.0",
"configurations" : [
{
"playground" : "custom",
"playground" : "standard",
"type" : "uni-app:app-android"
},
{
"app-plus" :
{
"app-plus" : {
"launchtype" : "local"
},
"mp-weixin" :
{
"mp-weixin" : {
"launchtype" : "local"
},
"type" : "uniCloud"

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,54 +1,25 @@
<template>
<view :class="mode == 'pop' ? 'mask' : ''" v-show="showBox">
<view
:class="mode == 'pop' ? 'verifybox' : ''"
:style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }"
>
<view :class="mode == 'pop' ? 'verifybox' : ''" :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }">
<view class="verifybox-top" v-if="mode == 'pop'">
请完成安全验证
<text class="verifybox-close" @click="clickShow = false">
<text class="iconfont icon-close"></text>
</text>
</view>
<view
class="verifybox-bottom"
:style="{ padding: mode == 'pop' ? '15px' : '0' }"
>
<view class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '15px' : '0' }">
<!-- 验证码容器 -->
<!-- 滑动 -->
<view v-if="componentType == 'VerifySlide'">
<VerifySlide
@success="success"
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
:defaultImg="defaultImg"
ref="instance"
></VerifySlide>
<VerifySlide @success="success" :captchaType="captchaType" :type="verifyType" :figure="figure"
:arith="arith" :mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize"
:blockSize="blockSize" :barSize="barSize" ref="VerifySlideInstance"></VerifySlide>
</view>
<!-- 点选 -->
<view v-if="componentType == 'VerifyPoints'">
<VerifyPoint
:captchaType="captchaType"
:type="verifyType"
:figure="figure"
:arith="arith"
:mode="mode"
:vSpace="vSpace"
:explain="explain"
:imgSize="imgSize"
:blockSize="blockSize"
:barSize="barSize"
:defaultImg="defaultImg"
ref="instance"
></VerifyPoint>
<VerifyPoint :captchaType="captchaType" :type="verifyType" :figure="figure" :arith="arith"
:mode="mode" :vSpace="vSpace" :explain="explain" :imgSize="imgSize" :blockSize="blockSize"
:barSize="barSize" ref="VerifyPointsInstance"></VerifyPoint>
</view>
</view>
</view>
@@ -59,9 +30,9 @@
* Verify 验证码组件
* @description 分发验证码使用
* */
import VerifySlide from "./verifySlider/verifySlider";
import VerifyPoint from "./verifyPoint/verifyPoint";
import defaultJpg from "@/static/default.jpg";
import VerifySlide from "./verifySlider/verifySlider.vue";
import VerifyPoint from "./verifyPoint/verifyPoint.vue";
export default {
name: "Vue2Verify",
components: {
@@ -118,13 +89,10 @@ export default {
// showBox:true,
clickShow: false,
defaultImg: defaultJpg,
};
},
computed: {
instance() {
return this.$refs.instance || {};
},
showBox() {
if (this.mode == "pop") {
return this.clickShow;
@@ -144,7 +112,7 @@ export default {
if (this.captchaType == "blockPuzzle") {
return "VerifySlide";
} else {
return "VerifyPoint";
return "VerifyPoints";
}
},
},
@@ -187,8 +155,10 @@ export default {
* @description 刷新
* */
refresh() {
if (this.instance.refresh) {
this.instance.refresh();
if (this.captchaType == "blockPuzzle") {
this.$refs.VerifySlideInstance?.refresh();
} else {
this.$refs.VerifyPointsInstance?.refresh();
}
},
show() {
@@ -211,6 +181,7 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
}
.verifybox-top {
padding: 0 15px;
height: 50px;
@@ -221,10 +192,12 @@ export default {
border-bottom: 1px solid #e4e7eb;
box-sizing: border-box;
}
.verifybox-bottom {
/* padding: 15px; */
box-sizing: border-box;
}
.verifybox-close {
position: absolute;
top: 13px;
@@ -234,6 +207,7 @@ export default {
text-align: center;
cursor: pointer;
}
.mask {
position: fixed;
top: 0;
@@ -245,6 +219,7 @@ export default {
/* display: none; */
transition: all 0.5s;
}
.verify-tips {
position: absolute;
left: 0px;
@@ -255,14 +230,17 @@ export default {
line-height: 30px;
color: #fff;
}
.tips-enter,
.tips-leave-to {
bottom: -30px;
}
.tips-enter-active,
.tips-leave-active {
transition: bottom 0.5s;
}
/* ---------------------------- */
/*常规验证码*/
.verify-code {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -33,33 +33,12 @@
let text = ["Fota", "轻松管理"];
let baseList = [
// {
// icon: "/static/index/product.png",
// path: "/pages/product/product",
// title: "产品",
// },
// {
// icon: "/static/index/group.png",
// path: "/pages/group/group",
// title: "分组",
// },
// {
// icon: "/static/index/version.png",
// path: "/pages/version/version",
// title: "版本",
// },
{
let baseList = [{
icon: "/static/index/equipment.png",
path: "/pages/monitor_project/index",
title: "项目监控",
},
{
icon: "/static/index/equipment.png",
path: "/pages/equipment/equipment",
title: "设备管理",
},
{
icon: "scan",
@@ -83,26 +62,8 @@
});
},
},
{
icon: "/static/index/equipmentLog.png",
path: "/pages/statistics/statistics",
title: "销量统计",
},
// {
// icon: "/static/index/sysUp.png",
// path: "/pages/log/sysUp/sysUp",
// title: "上行日志",
// },
// {
// icon: "/static/index/sysDown.png",
// path: "/pages/log/sysDown/sysDown",
// title: "下行日志",
// },
// {
// icon: "/static/index/log.png",
// path: "/pages/log/sysLog/sysLog",
// title: "系统日志",
// },
];
function toList(item) {

View File

@@ -1,64 +1,30 @@
<template>
<view>
<uv-form
class="form"
ref="form"
labelWidth="60"
labelAlign="right"
:model="model"
:rules="rules"
>
<uv-form class="form" ref="form" labelWidth="60" labelAlign="right" :model="model" :rules="rules">
<uv-form-item class="hide">
<uv-input
class="hide"
v-model="model.username"
placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账号' }]"
/>
<uv-input class="hide" v-model="model.username" placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账号' }]" />
</uv-form-item>
<uv-form-item class="hide">
<uv-input
type="password"
v-model="model.password"
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<uv-input type="password" v-model="model.password" placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]" />
</uv-form-item>
<uv-form-item label="账号" name="username" prop="username">
<uv-input
v-model="model.username"
placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账号' }]"
/>
<uv-input v-model="model.username" placeholder="请输入账号"
:rules="[{ required: true, message: '请填写账号' }]" />
</uv-form-item>
<uv-form-item label="密码" name="password" prop="password">
<uv-input
type="password"
v-model="model.password"
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<uv-input type="password" v-model="model.password" placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]" />
</uv-form-item>
<Verify
@success="VerifySuccess"
:mode="'pop'"
:captchaType="'blockPuzzle'"
ref="verifyRef"
:imgSize="{ width: '310px', height: '155px' }"
></Verify>
<Verify :mode="'pop'" :captchaType="'blockPuzzle'" ref="verifyRef"
:imgSize="{ width: '310px', height: '155px' }" @success="VerifySuccess"></Verify>
<view class="footer">
<!-- -->
<wd-button class="btn" size="large" @click="VerifyShow" block
>VerifyShow</wd-button
>
<wd-button class="btn" size="large" @click="handleSubmit" block
>登录</wd-button
>
<wd-button class="btn" size="large" @click="VerifyShow" block>登录</wd-button>
</view>
</uv-form>
</view>
@@ -66,20 +32,18 @@
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { v1 as uuid_v1 } from "uuid";
import Verify from "@/components/verifition/verify";
import Verify from "@/components/verify/verify.vue";
import { login } from "@/api/user.js";
import { setLocalStorage } from "@/utils/storage.js";
import { toast } from "@/utils/utils.js";
import { alert } from "@/utils/utils.js";
// import appicon from "@/static/appicon.png";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const model = reactive({
username: "",
password: "",
@@ -99,17 +63,16 @@ const rules = {
trigger: ["blur", "change"],
},
],
};
const form = ref();
const verifyRef=ref()
const verifyRef = ref();
function VerifyShow(e) {
verifyRef.value.show()
verifyRef.value.show();
}
function VerifySuccess(e) {
console.log('VerifySuccess',e);
console.log("VerifySuccess", e);
handleSubmit(e)
handleSubmit(e);
}
function handleSubmit(verify) {
form.value
@@ -119,7 +82,7 @@ function handleSubmit(verify) {
username: model.username,
password: model.password,
...verify
...verify,
};
// userStore.getUser();
@@ -135,16 +98,15 @@ function handleSubmit(verify) {
});
});
} else {
toast(res.message);
alert(res.message);
}
})
.catch((err) => {
toast(err.message);
alert(err.message);
});
})
.catch((err) => {
toast(err.message);
alert(err.message);
});
}
</script>