feat: 🚀 图片上传按顺序回显
This commit is contained in:
11
package-lock.json
generated
11
package-lock.json
generated
@@ -14,6 +14,7 @@
|
|||||||
"@vueuse/core": "^10.1.2",
|
"@vueuse/core": "^10.1.2",
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
|
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||||
"async-validator": "^4.2.5",
|
"async-validator": "^4.2.5",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"bwip-js": "^4.3.2",
|
"bwip-js": "^4.3.2",
|
||||||
@@ -3896,6 +3897,11 @@
|
|||||||
"snabbdom": "^3.1.0"
|
"snabbdom": "^3.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@zhj-target/vue3-kind-editor": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "8.8.2",
|
"version": "8.8.2",
|
||||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||||
@@ -17949,6 +17955,11 @@
|
|||||||
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
"integrity": "sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==",
|
||||||
"requires": {}
|
"requires": {}
|
||||||
},
|
},
|
||||||
|
"@zhj-target/vue3-kind-editor": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@zhj-target/vue3-kind-editor/-/vue3-kind-editor-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-tzSutZUBmGBRFBW8UMu2w5qmFMzp0RbaER8YQnMytq3COc04BHETiQkMOQ2PCHkrUXitzjBOWNSquW/AibizQA=="
|
||||||
|
},
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "8.8.2",
|
"version": "8.8.2",
|
||||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.8.2.tgz",
|
||||||
|
|||||||
@@ -26,6 +26,7 @@
|
|||||||
"@vueuse/core": "^10.1.2",
|
"@vueuse/core": "^10.1.2",
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
|
"@zhj-target/vue3-kind-editor": "^0.1.3",
|
||||||
"async-validator": "^4.2.5",
|
"async-validator": "^4.2.5",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
"bwip-js": "^4.3.2",
|
"bwip-js": "^4.3.2",
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||||
content: "14px";
|
content: "12px";
|
||||||
}
|
}
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||||
@@ -78,3 +78,149 @@
|
|||||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||||
content: "等宽字体";
|
content: "等宽字体";
|
||||||
}
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
|
||||||
|
font-family: SimSun, sans-serif;
|
||||||
|
content: "宋体";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
|
||||||
|
font-family: SimHei, sans-serif;
|
||||||
|
content: "黑体";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
|
||||||
|
font-family: "Microsoft YaHei", sans-serif;
|
||||||
|
content: "微软雅黑";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
|
||||||
|
font-family: KaiTi, sans-serif;
|
||||||
|
content: "楷体";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
|
||||||
|
font-family: FangSong, sans-serif;
|
||||||
|
content: "仿宋";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
content: "Arial";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
|
||||||
|
font-family: "Times New Roman", sans-serif;
|
||||||
|
content: "Times New Roman";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
|
||||||
|
font-family: sans-serif;
|
||||||
|
content: "sans-serif";
|
||||||
|
}
|
||||||
|
.ql-font-SimSun {
|
||||||
|
font-family: SimSun, sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-SimHei {
|
||||||
|
font-family: SimHei, sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-Microsoft-YaHei {
|
||||||
|
font-family: "Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-KaiTi {
|
||||||
|
font-family: KaiTi, sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-FangSong {
|
||||||
|
font-family: FangSong, sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-Arial {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-Times-New-Roman {
|
||||||
|
font-family: "Times New Roman", sans-serif;
|
||||||
|
}
|
||||||
|
.ql-font-sans-serif {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
|
||||||
|
// content: "10px";
|
||||||
|
// }
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
|
||||||
|
content: "12px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
|
||||||
|
content: "14px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
|
||||||
|
content: "16px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
|
||||||
|
content: "18px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
|
||||||
|
content: "20px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
|
||||||
|
content: "22px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
|
||||||
|
content: "24px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
|
||||||
|
content: "26px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
|
||||||
|
content: "28px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
|
||||||
|
content: "30px";
|
||||||
|
}
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||||
|
content: "32px";
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
|
||||||
|
// content: "32px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
|
||||||
|
// content: "36px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
|
||||||
|
// content: "38px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
|
||||||
|
// content: "40px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
|
||||||
|
// content: "44px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
|
||||||
|
// content: "44px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
|
||||||
|
// content: "45px";
|
||||||
|
// }
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
|
||||||
|
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
|
||||||
|
// content: "50px";
|
||||||
|
// }
|
||||||
|
|||||||
@@ -4,15 +4,14 @@
|
|||||||
action="#"
|
action="#"
|
||||||
:multiple="true"
|
:multiple="true"
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
:http-request="handleHttpUpload"
|
:http-request="() => {}"
|
||||||
:before-upload="handleBeforeUpload"
|
:before-upload="() => false"
|
||||||
|
@change="handleFileChange"
|
||||||
class="editor-img-uploader"
|
class="editor-img-uploader"
|
||||||
accept=".jpeg,.jpg,.png,.gif"
|
accept=".jpeg,.jpg,.png,.gif"
|
||||||
>
|
>
|
||||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
|
|
||||||
<!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
|
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
accept="video/*"
|
accept="video/*"
|
||||||
@@ -43,195 +42,219 @@ import { h } from "@/utils/url";
|
|||||||
import { routerObj } from "./utils.js";
|
import { routerObj } from "./utils.js";
|
||||||
import { titleConfig } from "./titleConfig.js";
|
import { titleConfig } from "./titleConfig.js";
|
||||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||||
// 引入插入图片标签自定义的类
|
|
||||||
|
// 字体配置
|
||||||
|
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||||
|
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||||
|
Quill.register(fontSizeStyle, true);
|
||||||
|
|
||||||
|
// 自定义模块
|
||||||
import ImageBlot from "./quill-image";
|
import ImageBlot from "./quill-image";
|
||||||
import Video from "./quill-video";
|
import Video from "./quill-video";
|
||||||
const uuid = ref("id-" + generateUUID());
|
|
||||||
const $router = useRouter();
|
|
||||||
const routerValueName = $router.currentRoute.value.name;
|
|
||||||
|
|
||||||
const routerName = ref(routerObj[routerValueName]);
|
|
||||||
|
|
||||||
Quill.register(Video);
|
Quill.register(Video);
|
||||||
Quill.register(ImageBlot);
|
Quill.register(ImageBlot);
|
||||||
|
|
||||||
|
// 路由相关
|
||||||
|
const $router = useRouter();
|
||||||
|
const routerValueName = $router.currentRoute.value.name;
|
||||||
|
const routerName = ref(routerObj[routerValueName]);
|
||||||
|
|
||||||
|
// 核心：上传队列 + 临时去重集合（单次上传会话有效）
|
||||||
|
const uploadQueue = ref([]);
|
||||||
|
const isProcessing = ref(false);
|
||||||
|
const uuid = ref(generateUUID());
|
||||||
|
// 临时去重集合：仅在当前批次上传中去重，全部完成后清空
|
||||||
|
const tempProcessedFiles = ref(new Set());
|
||||||
|
|
||||||
|
// 编辑器基础
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||||
const uploadFileVideo = ref(null);
|
const uploadFileVideo = ref(null);
|
||||||
|
const myQuillEditor = ref(null);
|
||||||
|
const oldContent = ref("");
|
||||||
|
|
||||||
|
// Props
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
/* 编辑器的内容 */
|
content: { type: String, default: "" },
|
||||||
content: {
|
readOnly: { type: Boolean, default: false },
|
||||||
type: String,
|
fileSizeLimit: { type: Number, default: 10 }
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
/* 只读 */
|
|
||||||
readOnly: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 上传文件大小限制(MB)
|
|
||||||
fileSizeLimit: {
|
|
||||||
type: Number,
|
|
||||||
default: 10
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
//值
|
|
||||||
|
// 内容双向绑定
|
||||||
const editorContent = computed({
|
const editorContent = computed({
|
||||||
get: () => props.content,
|
get: () => props.content,
|
||||||
set: val => {
|
set: val => emit("update:content", val)
|
||||||
emit("update:content", val);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
//富文本ref
|
|
||||||
const myQuillEditor = ref(null);
|
// 编辑器配置
|
||||||
//富文本值
|
|
||||||
const oldContent = ref("");
|
|
||||||
//富文本配置项
|
|
||||||
const options = reactive({
|
const options = reactive({
|
||||||
theme: "snow",
|
theme: "snow",
|
||||||
debug: "warn",
|
|
||||||
modules: {
|
modules: {
|
||||||
// 工具栏配置
|
|
||||||
toolbar: {
|
toolbar: {
|
||||||
container: [
|
container: [
|
||||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
["bold", "italic", "underline", "strike"],
|
||||||
["blockquote", "code-block"], // 引用 代码块
|
["blockquote", "code-block"],
|
||||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
[{ list: "ordered" }, { list: "bullet" }],
|
||||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
[{ indent: "-1" }, { indent: "+1" }],
|
||||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
[{ size: fontSizeStyle.whitelist }],
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
[{ color: [] }, { background: [] }],
|
||||||
[{ align: [] }], // 对齐方式
|
[{ align: [] }],
|
||||||
["clean"], // 清除文本格式
|
["clean"],
|
||||||
["link", "image", "video"] // 链接、图片、视频
|
["link", "image", "video"]
|
||||||
],
|
],
|
||||||
handlers: {
|
handlers: {
|
||||||
// 重写图片上传事件
|
image: () => proxy.$refs.uploadRef.click(),
|
||||||
image: function (value) {
|
video: () => document.querySelector("#uploadFileVideo")?.click()
|
||||||
if (value) {
|
|
||||||
//调用图片上传
|
|
||||||
proxy.$refs.uploadRef.click();
|
|
||||||
} else {
|
|
||||||
Quill.format("image", true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
video: function (value) {
|
|
||||||
if (value) {
|
|
||||||
// 劫持原来的视频点击按钮事件
|
|
||||||
document.querySelector("#uploadFileVideo")?.click();
|
|
||||||
} else {
|
|
||||||
Quill.format("video", true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
placeholder: "请输入内容...",
|
placeholder: "请输入内容...",
|
||||||
readOnly: props.readOnly,
|
readOnly: props.readOnly
|
||||||
clipboard: {
|
|
||||||
matchers: [
|
|
||||||
[
|
|
||||||
"img",
|
|
||||||
(node, delta) => {
|
|
||||||
const src = node.getAttribute("src");
|
|
||||||
const id = node.getAttribute("id");
|
|
||||||
delta.insert({ image: { src, id: id } });
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
//上传前的钩子
|
|
||||||
const handleBeforeUpload = file => {
|
|
||||||
const fileType = file.type;
|
|
||||||
|
|
||||||
// 图片
|
// 处理文件选择（临时去重，仅当前批次有效）
|
||||||
if (
|
const handleFileChange = (file, fileList) => {
|
||||||
fileType == "image/jpeg" ||
|
if (!fileList.length) return;
|
||||||
fileType == "image/png" ||
|
|
||||||
fileType == "image/gif" ||
|
const rawEditor = toRaw(myQuillEditor.value);
|
||||||
fileType == "image/jpg" ||
|
const quill = rawEditor?.getQuill();
|
||||||
fileType == "image/bmp" ||
|
if (!quill) return;
|
||||||
fileType == "image/webp" ||
|
|
||||||
fileType == "video/mov" ||
|
// 获取初始光标位置
|
||||||
fileType == "video/ts" ||
|
let baseCursorIndex = quill.selection.savedRange?.index || 0;
|
||||||
fileType == "video/mp4" ||
|
|
||||||
fileType == "video/avi"
|
// 生成文件唯一标识（用于临时去重）
|
||||||
) {
|
const getFileKey = file => `${file.name}-${file.size}-${file.lastModified}`;
|
||||||
const fileSizeLimit = file.size;
|
|
||||||
// 校检文件大小
|
// 过滤当前批次中已选择的重复文件（但允许和历史批次重复）
|
||||||
const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
|
const newFiles = fileList.filter(item => {
|
||||||
if (!isLt) {
|
const file = item.raw;
|
||||||
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
const key = getFileKey(file);
|
||||||
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
|
// 仅在当前批次内去重（避免单次选择中重复添加）
|
||||||
|
if (tempProcessedFiles.value.has(key)) {
|
||||||
|
console.log(`当前批次中已包含文件: ${file.name}`);
|
||||||
return false;
|
return false;
|
||||||
} else {
|
|
||||||
console.log(`RIch MB!`);
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
} else {
|
// 校验文件合法性
|
||||||
alert(`文件格式不正确！`);
|
if (!validateFile(file)) return false;
|
||||||
return false;
|
// 添加到临时去重集合
|
||||||
}
|
tempProcessedFiles.value.add(key);
|
||||||
};
|
return true;
|
||||||
//图片上传
|
});
|
||||||
const handleHttpUpload = async options => {
|
|
||||||
let formData = new FormData();
|
|
||||||
//这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
|
|
||||||
formData.append("image", options.file);
|
|
||||||
try {
|
|
||||||
const result = await uploadImg(formData, routerName.value);
|
|
||||||
if (result?.code === 0) {
|
|
||||||
const { data } = result;
|
|
||||||
let rawMyQuillEditor = toRaw(myQuillEditor.value);
|
|
||||||
// 获取富文本实例
|
|
||||||
let quill = rawMyQuillEditor.getQuill();
|
|
||||||
// 获取光标位置
|
|
||||||
let length = quill.selection.savedRange.index;
|
|
||||||
quill.insertEmbed(length, "image", {
|
|
||||||
url: h + data.path,
|
|
||||||
id: generateUUID()
|
|
||||||
});
|
|
||||||
quill.setSelection(length + 1);
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
};
|
|
||||||
|
|
||||||
//视频上传
|
if (!newFiles.length) {
|
||||||
const handleVideoUpload = async evt => {
|
alert("所选文件已在当前上传批次中或不合法");
|
||||||
if (evt.target.files.length === 0) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("video", evt.target.files[0]);
|
// 按选择顺序添加到队列
|
||||||
try {
|
newFiles.forEach((item, index) => {
|
||||||
let quill = toRaw(myQuillEditor.value).getQuill();
|
uploadQueue.value.push({
|
||||||
// 获取光标位置
|
file: item.raw,
|
||||||
let length = quill.selection.savedRange.index;
|
cursorIndex: baseCursorIndex + index
|
||||||
const { data } = await uploadVideo(formData);
|
|
||||||
quill.insertEmbed(length, "video", {
|
|
||||||
url: h + data.path, //h + data.fileUrl, //
|
|
||||||
id: generateUUID()
|
|
||||||
});
|
});
|
||||||
uploadFileVideo.value.value = "";
|
});
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
// 启动队列处理
|
||||||
|
if (!isProcessing.value) {
|
||||||
|
processQueue();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
|
// 文件校验
|
||||||
|
const validateFile = file => {
|
||||||
|
const isImage = file.type.startsWith("image/");
|
||||||
|
if (!isImage) {
|
||||||
|
alert("请上传图片文件");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileSizeMB = file.size / 1024 / 1024;
|
||||||
|
if (fileSizeMB > props.fileSizeLimit) {
|
||||||
|
alert(`文件 ${file.name} 大小超过 ${props.fileSizeLimit} MB`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理上传队列（全部完成后清空临时去重集合）
|
||||||
|
const processQueue = async () => {
|
||||||
|
if (isProcessing.value || uploadQueue.value.length === 0) return;
|
||||||
|
|
||||||
|
isProcessing.value = true;
|
||||||
|
const { file, cursorIndex } = uploadQueue.value[0];
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 上传文件
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("image", file);
|
||||||
|
const result = await uploadImg(formData, routerName.value);
|
||||||
|
|
||||||
|
if (result?.code === 0) {
|
||||||
|
const rawEditor = toRaw(myQuillEditor.value);
|
||||||
|
const quill = rawEditor.getQuill();
|
||||||
|
// 插入图片
|
||||||
|
quill.insertEmbed(cursorIndex, "image", {
|
||||||
|
url: h + result.data.path,
|
||||||
|
id: generateUUID()
|
||||||
|
});
|
||||||
|
quill.setSelection(cursorIndex + 1);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`文件 ${file.name} 上传失败:`, error);
|
||||||
|
} finally {
|
||||||
|
uploadQueue.value.shift();
|
||||||
|
// 若队列已空，清空临时去重集合（允许下次上传相同文件）
|
||||||
|
if (uploadQueue.value.length === 0) {
|
||||||
|
tempProcessedFiles.value.clear();
|
||||||
|
}
|
||||||
|
isProcessing.value = false;
|
||||||
|
// 继续处理下一个
|
||||||
|
processQueue();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 视频上传（保持不变）
|
||||||
|
const handleVideoUpload = async evt => {
|
||||||
|
if (evt.target.files.length === 0) return;
|
||||||
|
|
||||||
|
const file = evt.target.files[0];
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("video", file);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const rawEditor = toRaw(myQuillEditor.value);
|
||||||
|
const quill = rawEditor.getQuill();
|
||||||
|
const cursorIndex = quill.selection.savedRange?.index || 0;
|
||||||
|
|
||||||
|
const { data } = await uploadVideo(formData);
|
||||||
|
quill.insertEmbed(cursorIndex, "video", {
|
||||||
|
url: h + data.path,
|
||||||
|
id: generateUUID()
|
||||||
|
});
|
||||||
|
quill.setSelection(cursorIndex + 1);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("视频上传失败:", error);
|
||||||
|
} finally {
|
||||||
|
evt.target.value = "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 内容变化监听
|
||||||
const onContentChange = content => {
|
const onContentChange = content => {
|
||||||
emit("handleRichTextContentChange", content);
|
emit("handleRichTextContentChange", content);
|
||||||
};
|
};
|
||||||
// 增加hover工具栏有中文提示
|
|
||||||
|
// 初始化标题提示
|
||||||
const initTitle = () => {
|
const initTitle = () => {
|
||||||
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
|
for (const item of titleConfig.value) {
|
||||||
for (let item of titleConfig.value) {
|
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
|
||||||
let tip = document.querySelector(".ql-toolbar " + item.Choice);
|
if (tip) tip.setAttribute("title", item.title);
|
||||||
if (!tip) continue;
|
|
||||||
tip.setAttribute("title", item.title);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initTitle();
|
initTitle();
|
||||||
oldContent.value = props.content;
|
oldContent.value = props.content;
|
||||||
|
|||||||
10
src/components/Editor/lineHeight.js
Normal file
10
src/components/Editor/lineHeight.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
//lineHeight.js
|
||||||
|
import Quill from "quill";
|
||||||
|
const Parchment = Quill.import("parchment");
|
||||||
|
class lineHeightAttributor extends Parchment.Attributor.Style {}
|
||||||
|
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
|
||||||
|
scope: Parchment.Scope.INLINE,
|
||||||
|
whitelist: ["1", "2", "3", "4", "5"]
|
||||||
|
});
|
||||||
|
|
||||||
|
export { lineHeightStyle };
|
||||||
124
src/components/Editor/quill-custom-fontsize.js
Normal file
124
src/components/Editor/quill-custom-fontsize.js
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
// 自定义字体大小模块，支持预设选项和输入框
|
||||||
|
export class CustomFontSize {
|
||||||
|
constructor(quill, options) {
|
||||||
|
this.quill = quill;
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
// 创建工具栏容器
|
||||||
|
const container = quill.getModule("toolbar").container;
|
||||||
|
|
||||||
|
// 创建字体大小选择器
|
||||||
|
this.selector = document.createElement("select");
|
||||||
|
this.selector.classList.add("ql-size");
|
||||||
|
|
||||||
|
// 添加预设选项
|
||||||
|
options.presets.forEach(size => {
|
||||||
|
if (size === false) {
|
||||||
|
// 添加分隔线
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.disabled = true;
|
||||||
|
option.innerHTML = "──────────";
|
||||||
|
this.selector.appendChild(option);
|
||||||
|
} else {
|
||||||
|
// 添加预设大小选项
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = size;
|
||||||
|
option.innerHTML = this.getSizeLabel(size);
|
||||||
|
this.selector.appendChild(option);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加自定义输入选项
|
||||||
|
const inputOption = document.createElement("option");
|
||||||
|
inputOption.value = "custom";
|
||||||
|
inputOption.innerHTML = "自定义";
|
||||||
|
this.selector.appendChild(inputOption);
|
||||||
|
|
||||||
|
// 创建自定义输入框
|
||||||
|
this.input = document.createElement("input");
|
||||||
|
this.input.type = "number";
|
||||||
|
this.input.placeholder = "输入字号";
|
||||||
|
this.input.min = 1;
|
||||||
|
this.input.style.width = "50px";
|
||||||
|
this.input.style.display = "none"; // 默认隐藏
|
||||||
|
|
||||||
|
// 将选择器和输入框添加到工具栏
|
||||||
|
container.appendChild(this.selector);
|
||||||
|
container.appendChild(this.input);
|
||||||
|
|
||||||
|
// 绑定事件
|
||||||
|
this.selector.addEventListener("change", this.onSelectChange.bind(this));
|
||||||
|
this.input.addEventListener("change", this.onInputChange.bind(this));
|
||||||
|
this.quill.on("text-change", this.update.bind(this));
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取大小标签
|
||||||
|
getSizeLabel(size) {
|
||||||
|
const labels = {
|
||||||
|
small: "小",
|
||||||
|
normal: "正常",
|
||||||
|
large: "大",
|
||||||
|
huge: "超大"
|
||||||
|
};
|
||||||
|
return labels[size] || size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器变更事件
|
||||||
|
onSelectChange() {
|
||||||
|
const value = this.selector.value;
|
||||||
|
|
||||||
|
if (value === "custom") {
|
||||||
|
// 显示输入框
|
||||||
|
this.input.style.display = "inline-block";
|
||||||
|
this.input.focus();
|
||||||
|
} else {
|
||||||
|
// 隐藏输入框并应用选择的大小
|
||||||
|
this.input.style.display = "none";
|
||||||
|
this.quill.format("size", value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框变更事件
|
||||||
|
onInputChange() {
|
||||||
|
const value = this.input.value;
|
||||||
|
if (value) {
|
||||||
|
this.quill.format("size", `${value}px`);
|
||||||
|
}
|
||||||
|
// 选择"自定义"选项，保持输入框显示
|
||||||
|
this.selector.value = "custom";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新当前选中状态
|
||||||
|
update() {
|
||||||
|
const selection = this.quill.getSelection();
|
||||||
|
if (selection) {
|
||||||
|
const [format] = this.quill.getFormat(selection.index, 1);
|
||||||
|
const size = format.size;
|
||||||
|
|
||||||
|
if (size && size.endsWith("px")) {
|
||||||
|
const sizeValue = size.replace("px", "");
|
||||||
|
this.input.value = sizeValue;
|
||||||
|
|
||||||
|
// 如果是预设值，选中对应的选项
|
||||||
|
if (this.options.presets.includes(size)) {
|
||||||
|
this.selector.value = size;
|
||||||
|
this.input.style.display = "none";
|
||||||
|
} else {
|
||||||
|
// 否则选中"自定义"并显示输入框
|
||||||
|
this.selector.value = "custom";
|
||||||
|
this.input.style.display = "inline-block";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 没有选中的大小，重置为默认
|
||||||
|
this.selector.value = "normal";
|
||||||
|
this.input.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// // 注册自定义模块
|
||||||
|
// Quill.register("modules/customFontSize", CustomFontSize);
|
||||||
@@ -36,25 +36,25 @@
|
|||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
/>
|
/>
|
||||||
<!-- <div
|
<!-- <div
|
||||||
style="
|
style="
|
||||||
width: 350px;
|
width: 350px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #4178d5;
|
color: #4178d5;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
"
|
"
|
||||||
@click="handleTabClick(2)"
|
@click="handleTabClick(2)"
|
||||||
>
|
>
|
||||||
忘记密码?
|
忘记密码?
|
||||||
</div> -->
|
</div> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item prop="captcha">
|
<!-- <el-form-item prop="captcha">
|
||||||
<span style="margin-right: 10px; color: #606266">验证码</span>
|
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||||
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||||
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||||
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button
|
<el-button
|
||||||
size="large"
|
size="large"
|
||||||
|
|||||||
291
src/views/login/index2.vue
Normal file
291
src/views/login/index2.vue
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<div class="container">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-logo-box"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 登录 -->
|
||||||
|
<div class="right" v-if="dataStore.type === 1">
|
||||||
|
<div class="right-logo-box">
|
||||||
|
<div>
|
||||||
|
<div class="right-logo-font">登录</div>
|
||||||
|
<div class="sign-in">Sign in</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-left: 100px">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
style="width: 300px"
|
||||||
|
:model="dataStore.ruleForm"
|
||||||
|
:rules="dataStore.rules"
|
||||||
|
label-width="auto"
|
||||||
|
label-position="top"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
hide-required-asterisk
|
||||||
|
>
|
||||||
|
<el-form-item label="账号" prop="username">
|
||||||
|
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="password">
|
||||||
|
<el-input
|
||||||
|
v-model="dataStore.ruleForm.password"
|
||||||
|
type="password"
|
||||||
|
show-password
|
||||||
|
:prefix-icon="Lock"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
<!-- <div
|
||||||
|
style="
|
||||||
|
width: 350px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
color: #4178d5;
|
||||||
|
text-align: right;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
@click="handleTabClick(2)"
|
||||||
|
>
|
||||||
|
忘记密码?
|
||||||
|
</div> -->
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item prop="captcha">
|
||||||
|
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||||
|
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||||
|
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||||
|
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||||
|
v-debounce="submitForm"
|
||||||
|
>登录</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--忘记密码 -->
|
||||||
|
<div class="right" v-if="dataStore.type === 2">
|
||||||
|
<div style="margin-left: 100px">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="ArrowLeftBold"
|
||||||
|
circle
|
||||||
|
style="margin: 60px 0 20px"
|
||||||
|
@click="handleTabClick(1)"
|
||||||
|
/>
|
||||||
|
<el-form
|
||||||
|
ref="resetRuleFormRef"
|
||||||
|
:model="dataStore.resetRuleForm"
|
||||||
|
:rules="dataStore.resetRules"
|
||||||
|
label-width="auto"
|
||||||
|
label-position="top"
|
||||||
|
class="demo-ruleForm"
|
||||||
|
hide-required-asterisk
|
||||||
|
>
|
||||||
|
<el-form-item label="手机号" prop="iphone">
|
||||||
|
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="code" label="验证码">
|
||||||
|
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
||||||
|
<template #append>
|
||||||
|
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
||||||
|
{{ dataStore.codeFont }}
|
||||||
|
</div>
|
||||||
|
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
||||||
|
{{ dataStore.timeCount }}s
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新密码" prop="newPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="dataStore.resetRuleForm.newPassword"
|
||||||
|
type="password"
|
||||||
|
show-password
|
||||||
|
:prefix-icon="Lock"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确认密码" prop="confirmPassword">
|
||||||
|
<el-input
|
||||||
|
v-model="dataStore.resetRuleForm.confirmPassword"
|
||||||
|
type="password"
|
||||||
|
show-password
|
||||||
|
:prefix-icon="Lock"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||||
|
v-debounce="resetConfirmForm"
|
||||||
|
>提交</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CryptoJS from "crypto-js";
|
||||||
|
//loginCodeImgApi
|
||||||
|
import { loginApi } from "@/api/modules/login";
|
||||||
|
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
||||||
|
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
||||||
|
import { cloneDeep } from "lodash-es";
|
||||||
|
//用户信息存储
|
||||||
|
import { useUserStore } from "@/stores/modules/user";
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const $router = useRouter();
|
||||||
|
//登录表单Ref
|
||||||
|
const ruleFormRef: any = ref(null);
|
||||||
|
//修改密码表单Ref
|
||||||
|
const resetRuleFormRef: any = ref(null);
|
||||||
|
//数据源
|
||||||
|
const dataStore = reactive<any>({
|
||||||
|
timeCount: 120, //修改密码里验证码倒计时
|
||||||
|
isShowTime: false,
|
||||||
|
|
||||||
|
base64: "", //验证码图片
|
||||||
|
type: 1, //1:登录,2:修改密码
|
||||||
|
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
||||||
|
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
||||||
|
rules: cloneDeep(RULES), //登录表单验证
|
||||||
|
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
||||||
|
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
||||||
|
});
|
||||||
|
//计时器
|
||||||
|
let intervalId: any = null;
|
||||||
|
|
||||||
|
//登录
|
||||||
|
const submitForm = () => {
|
||||||
|
console.log(ruleFormRef);
|
||||||
|
if (!ruleFormRef) return;
|
||||||
|
ruleFormRef?.value?.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
login();
|
||||||
|
} else {
|
||||||
|
console.log("error submit!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//忘记密码提交事件
|
||||||
|
const resetConfirmForm = () => {
|
||||||
|
if (!resetRuleFormRef) return;
|
||||||
|
resetRuleFormRef?.value?.validate((valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
||||||
|
console.log(password, "==== dataStore.ruleForm.password====");
|
||||||
|
console.log("submit!");
|
||||||
|
} else {
|
||||||
|
console.log("error submit!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//登录接口
|
||||||
|
const login = async () => {
|
||||||
|
const result: any = await loginApi({
|
||||||
|
...dataStore.ruleForm,
|
||||||
|
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result?.code === 0) {
|
||||||
|
const { data } = result;
|
||||||
|
setUserData(data);
|
||||||
|
}
|
||||||
|
// else {
|
||||||
|
// getLoginCodeImg();
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
//获取验证码图片接口
|
||||||
|
// const getLoginCodeImg = async () => {
|
||||||
|
// const result: any = await loginCodeImgApi();
|
||||||
|
// if (result?.code === 0) {
|
||||||
|
// const { data } = result;
|
||||||
|
// const { captcha, token } = data;
|
||||||
|
// dataStore.base64 = captcha;
|
||||||
|
// dataStore.ruleForm.token = token;
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// getLoginCodeImg();
|
||||||
|
//登录和密码重置切换
|
||||||
|
const handleTabClick = (type: any) => {
|
||||||
|
dataStore.type = type;
|
||||||
|
for (let key in dataStore.ruleForm) {
|
||||||
|
dataStore.ruleForm[key] = "";
|
||||||
|
}
|
||||||
|
for (let key in dataStore.resetRuleForm) {
|
||||||
|
dataStore.resetRuleForm[key] = "";
|
||||||
|
}
|
||||||
|
if (intervalId) {
|
||||||
|
handleClearInterval();
|
||||||
|
dataStore.timeCount = 120;
|
||||||
|
dataStore.isShowTime = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//120秒验证时间
|
||||||
|
const updateCountdown = () => {
|
||||||
|
intervalId = setInterval(() => {
|
||||||
|
if (dataStore.timeCount > 0) {
|
||||||
|
dataStore.isShowTime = true;
|
||||||
|
dataStore.timeCount--;
|
||||||
|
} else {
|
||||||
|
handleClearInterval();
|
||||||
|
dataStore.timeCount = 120;
|
||||||
|
dataStore.isShowTime = false;
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
//获取验证码
|
||||||
|
const handleGetCode = () => {
|
||||||
|
//如果计时器已经启动了,就不要再去触发了
|
||||||
|
if (intervalId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
||||||
|
if (valid) {
|
||||||
|
updateCountdown();
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//清理定时器
|
||||||
|
const handleClearInterval = () => {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
intervalId = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置用户数据
|
||||||
|
const setUserData = (data: any) => {
|
||||||
|
const { username, uid, token, avatar } = data;
|
||||||
|
console.log();
|
||||||
|
// 设置token
|
||||||
|
userStore.setToken("Bearer" + " " + token);
|
||||||
|
userStore.setUid(uid);
|
||||||
|
userStore.setNickname(username);
|
||||||
|
userStore.setAvatar(avatar);
|
||||||
|
// await userStore.getAuthMenuList();
|
||||||
|
//跳转到首页
|
||||||
|
setTimeout(() => {
|
||||||
|
$router.push("/admin/index");
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
//页面卸载的时候清空定时器
|
||||||
|
if (intervalId) {
|
||||||
|
handleClearInterval();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./index.scss";
|
||||||
|
</style>
|
||||||
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
371
vite.config.ts.timestamp-1752636911283-0a4ac4d78e007.mjs
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user