diff --git a/x_admin_app/components/verify/utils/ase.js b/x_admin_app/components/verify/utils/ase.ts
similarity index 100%
rename from x_admin_app/components/verify/utils/ase.js
rename to x_admin_app/components/verify/utils/ase.ts
diff --git a/x_admin_app/components/verify/utils/request.js b/x_admin_app/components/verify/utils/request.ts
similarity index 90%
rename from x_admin_app/components/verify/utils/request.js
rename to x_admin_app/components/verify/utils/request.ts
index 9e1a976..ff65095 100644
--- a/x_admin_app/components/verify/utils/request.js
+++ b/x_admin_app/components/verify/utils/request.ts
@@ -3,7 +3,7 @@
import env from "@/utils/env";
let baseUrl =env.baseUrl+'/api/common';
-export const myRequest = (option={})=>{
+export const myRequest = (option):any=>{
return new Promise((reslove,reject)=>{
uni.request({
url: baseUrl + option.url,
diff --git a/x_admin_app/components/verify/verify.vue b/x_admin_app/components/verify/verify.vue
index 79e9b96..586a2dc 100644
--- a/x_admin_app/components/verify/verify.vue
+++ b/x_admin_app/components/verify/verify.vue
@@ -1,17 +1,17 @@
-
+
请完成安全验证
-
-
+
+
@@ -29,7 +29,7 @@
>
-
+
-
diff --git a/x_admin_app/components/verify/verifyPoint/verifyPoint.vue b/x_admin_app/components/verify/verifyPoint/verifyPoint.vue
index d2184d5..526d427 100644
--- a/x_admin_app/components/verify/verifyPoint/verifyPoint.vue
+++ b/x_admin_app/components/verify/verifyPoint/verifyPoint.vue
@@ -4,21 +4,20 @@
-
+import { ref, reactive, nextTick, onMounted, getCurrentInstance } from "vue";
/**
* VerifyPoints
* @description 点选
* */
import { aesEncrypt } from "./../utils/ase.js";
import { myRequest } from "../utils/request.js";
-export default {
- name: "VerifyPoints",
- props: {
-
- captchaType: {
- type: String,
- },
- //间隔
- vSpace: {
- type: Number,
- default: 5,
- },
- imgSize: {
- type: Object,
- default: () => ({
- width: 310,
- height: 155,
- }),
- },
+defineOptions({ name: "VerifyPoints" });
+let emit = defineEmits(["success", "error"]);
+const props = defineProps({
+ captchaType: String,
+ vSpace: {
+ type: Number,
+ default: 5,
},
- data() {
- return {
- secretKey: "", //后端返回的加密秘钥 字段
- checkNum: 3, //
- fontPos: [], // 选中的坐标信息
- checkPosArr: [], //用户点击的坐标
- num: 1, //点击的记数
- pointBackImgBase: "", //后端获取到的背景图片
- poinTextList: [], //后端返回的点击字体顺序
- backToken: "", //后端返回的token值
- imgRand: 0, //随机的背景图片
- setSize: {
- imgHeight: 0,
- imgWidth: 0,
- barHeight: 0,
- barWidth: 0,
- },
- showImage: true,
- tempPoints: [],
- text: "",
- barAreaColor: "#fff",
- barAreaBorderColor: "#fff",
- showRefresh: true,
- bindingClick: true,
- imgLeft: 0,
- imgTop: 0,
- };
+ imgSize: {
+ type: Object,
+ default: () => ({
+ width: 310,
+ height: 155,
+ }),
},
- methods: {
- init() {
- //加载页面
- this.fontPos.splice(0, this.fontPos.length);
- this.checkPosArr.splice(0, this.checkPosArr.length);
- this.num = 1;
- this.$nextTick(() => {
- this.refresh();
- this.$parent.$emit("ready", this);
- });
- },
- canvasClick(e) {
- const query = uni.createSelectorQuery().in(this);
- query
- .select("#image")
- .boundingClientRect((data) => {
- // @ts-ignore
- this.imgLeft = Math.ceil(data.left);
- // @ts-ignore
- this.imgTop = Math.ceil(data.top);
- this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
- if (this.num == this.checkNum) {
- this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
- //按比例转换坐标值
- this.checkPosArr = this.pointTransfrom(
- this.checkPosArr,
- this.imgSize
- );
- //等创建坐标执行完
- setTimeout(() => {
- //发送后端请求
- // var captchaVerification =this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
- let data = {
- captchaType: this.captchaType,
- pointJson: this.secretKey
- ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey)
- : JSON.stringify(this.checkPosArr),
- token: this.backToken,
- };
- myRequest({
- url: `/captcha/check`,
- data,
- method: "POST",
- }).then((result) => {
- let res = result.data;
- if (res.repCode == "0000") {
- this.barAreaColor = "#4cae4c";
- this.barAreaBorderColor = "#5cb85c";
- this.text = "验证成功";
- this.bindingClick = false;
- setTimeout(() => {
- this.refresh();
- }, 1500);
- this.$emit("success", {
- ...data,
- });
- } else {
- this.$emit("error", this);
- this.barAreaColor = "#d9534f";
- this.barAreaBorderColor = "#d9534f";
- this.text = "验证失败";
- setTimeout(() => {
- this.refresh();
- }, 700);
- }
+});
+const secretKey = ref(""); // 后端返回的加密秘钥 字段
+const checkNum = ref(3); //
+const fontPos = ref([]); // 选中的坐标信息
+const checkPosArr = ref([]); // 用户点击的坐标
+const num = ref(1); // 点击的记数
+const pointBackImgBase = ref(""); // 后端获取到的背景图片
+const pointTextList = ref([]); // 后端返回的点击字体顺序
+const backToken = ref(""); // 后端返回的token值
+
+const showImage = ref(true);
+const tempPoints = ref([]);
+const text = ref("");
+const barAreaColor = ref("#fff");
+const barAreaBorderColor = ref("#fff");
+const showRefresh = ref(true);
+const bindingClick = ref(true);
+const imgLeft = ref(0);
+const imgTop = ref(0);
+
+function init() {
+ // 加载页面
+ fontPos.value.splice(0, fontPos.value.length);
+ checkPosArr.value.splice(0, checkPosArr.value.length);
+ num.value = 1;
+ nextTick(() => {
+ refresh();
+ });
+}
+
+let canvas = ref(null);
+const appInstance = getCurrentInstance().proxy;
+function canvasClick(e) {
+ const query = uni.createSelectorQuery().in(appInstance);
+ query
+ .select("#image")
+ .boundingClientRect((rect) => {
+ // @ts-ignore
+ imgLeft.value = Math.ceil(rect.left);
+ // @ts-ignore
+ imgTop.value = Math.ceil(rect.top);
+ checkPosArr.value.push(getMousePos(canvas.value, e));
+ if (num.value == checkNum.value) {
+ num.value = createPoint(getMousePos(canvas.value, e));
+ //按比例转换坐标值
+ checkPosArr.value = pointTransform(checkPosArr.value, props.imgSize);
+ //等创建坐标执行完
+ setTimeout(() => {
+ //发送后端请求
+ let info = {
+ captchaType: props.captchaType,
+ pointJson: secretKey.value
+ ? aesEncrypt(JSON.stringify(checkPosArr.value), secretKey.value)
+ : JSON.stringify(checkPosArr.value),
+ token: backToken.value,
+ };
+ myRequest({
+ url: `/captcha/check`,
+ data: info,
+ method: "POST",
+ }).then((result) => {
+ let res = result.data;
+ if (res.repCode == "0000") {
+ barAreaColor.value = "#4cae4c";
+ barAreaBorderColor.value = "#5cb85c";
+ text.value = "验证成功";
+ bindingClick.value = false;
+ setTimeout(() => {
+ refresh();
+ }, 1500);
+ emit("success", {
+ ...info,
});
- }, 400);
- }
- if (this.num < this.checkNum) {
- this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
- }
- })
- .exec();
- },
- //获取坐标
- getMousePos: function (obj, e) {
- let position = {
- x: Math.ceil(e.detail.x) - this.imgLeft,
- y: Math.ceil(e.detail.y) - this.imgTop,
- };
- return position;
- },
- //创建坐标点
- createPoint: function (pos) {
- this.tempPoints.push(Object.assign({}, pos));
- return ++this.num;
- },
- refresh: function () {
- this.tempPoints.splice(0, this.tempPoints.length);
- this.barAreaColor = "#000";
- this.barAreaBorderColor = "#ddd";
- this.bindingClick = true;
+ } else {
+ emit("error");
+ barAreaColor.value = "#d9534f";
+ barAreaBorderColor.value = "#d9534f";
+ text.value = "验证失败";
+ setTimeout(() => {
+ refresh();
+ }, 700);
+ }
+ });
+ }, 400);
+ }
+ if (num.value < checkNum.value) {
+ num.value = createPoint(getMousePos(canvas.value, e));
+ }
+ })
+ .exec();
+}
- this.fontPos.splice(0, this.fontPos.length);
- this.checkPosArr.splice(0, this.checkPosArr.length);
- this.num = 1;
+function getMousePos(obj, e) {
+ let position = {
+ x: Math.ceil(e.detail.x) - imgLeft.value,
+ y: Math.ceil(e.detail.y) - imgTop.value,
+ };
+ return position;
+}
- this.getPictrue();
+function createPoint(pos) {
+ tempPoints.value.push(Object.assign({}, pos));
+ return ++num.value;
+}
- // this.text = '验证失败'
- this.showRefresh = true;
- },
- // 请求背景图片和验证图片
- getPictrue() {
- let data = {
- captchaType: this.captchaType,
- ts: Date.now(), // 现在的时间戳
- };
- myRequest({
- url: "/captcha/get", //仅为示例，并非真实接口地址。
- data,
- method: "POST",
- }).then((result) => {
- let res = result.data;
- if (res.repCode == "0000") {
- this.pointBackImgBase = res.repData.originalImageBase64;
- this.backToken = res.repData.token;
- this.secretKey = res.repData.secretKey;
- this.poinTextList = res.repData.wordList;
- this.text = "请依次点击【" + this.poinTextList.join(",") + "】";
- }
- // 判断接口请求次数是否失效
- if (res.repCode == "6201") {
- this.pointBackImgBase = null;
- }
- });
- },
- //坐标转换函数
- pointTransfrom(pointArr, imgSize) {
- var newPointArr = pointArr.map((p) => {
- let x = Math.round((310 * p.x) / parseInt(imgSize.width));
- let y = Math.round((155 * p.y) / parseInt(imgSize.height));
- return {
- x,
- y,
- };
- });
- // console.log(newPointArr,"newPointArr");
- return newPointArr;
- },
- },
- mounted() {
- this.init();
- },
-};
+function refresh() {
+ tempPoints.value.splice(0, tempPoints.value.length);
+ barAreaColor.value = "#000";
+ barAreaBorderColor.value = "#ddd";
+ bindingClick.value = true;
+
+ fontPos.value.splice(0, fontPos.value.length);
+ checkPosArr.value.splice(0, checkPosArr.value.length);
+ num.value = 1;
+
+ getPicture();
+
+ // text.value = '验证失败'
+ showRefresh.value = true;
+}
+
+function getPicture() {
+ let info = {
+ captchaType: props.captchaType,
+ ts: Date.now(), // 现在的时间戳
+ };
+ myRequest({
+ url: "/captcha/get", //仅为示例，并非真实接口地址。
+ data: info,
+ method: "POST",
+ }).then((result) => {
+ let res = result.data;
+ if (res.repCode == "0000") {
+ pointBackImgBase.value =
+ "data:image/png;base64," + res.repData.originalImageBase64;
+ backToken.value = res.repData.token;
+ secretKey.value = res.repData.secretKey;
+ pointTextList.value = res.repData.wordList;
+ text.value = "请依次点击【" + pointTextList.value.join(",") + "】";
+ }
+ // 判断接口请求次数是否失效
+ if (res.repCode == "6201") {
+ pointBackImgBase.value = null;
+ }
+ });
+}
+function pointTransform(pointArr, imgSize) {
+ var newPointArr = pointArr.map((p) => {
+ let x = Math.round((310 * p.x) / parseInt(imgSize.width));
+ let y = Math.round((155 * p.y) / parseInt(imgSize.height));
+ return {
+ x,
+ y,
+ };
+ });
+ // console.log(newPointArr,"newPointArr");
+ return newPointArr;
+}
+defineExpose({
+ refresh,
+});
+onMounted(init);