code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-08-06 10:57:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

升级Vue3，iView替换ElementPlus

Browse Source 
- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
2026-06-05 17:49:43 +08:00
parent 615ee91511
commit 832fda813b
322 changed files with 25693 additions and 24453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
seller/src/views/my-components/lili/circle-loading.vue
View File

@@ -1,12 +1,17 @@
<template>
<div style="display: inline-block;">
<Icon type="ios-loading" size="18" color="#2d8cf0" class="spin-icon-load"></Icon>
<div style="display: inline-block">
<el-icon class="spin-icon-load" :size="18" color="#ff5c58">
<Loading />
</el-icon>
</div>
</template>
<script>
import { Loading } from "@element-plus/icons-vue";
export default {
name: "circleLoading"
name: "circleLoading",
components: { Loading },
};
</script>
@@ -14,5 +19,12 @@ export default {
.spin-icon-load {
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

56
seller/src/views/my-components/lili/department-choose.vue
View File

@@ -1,72 +1,68 @@
<template>
<div>
<Cascader
<el-cascader
v-model="selectDep"
:data="department"
@on-change="handleChangeDep"
change-on-select
:options="department"
:props="cascaderProps"
filterable
clearable
placeholder="请选择"
></Cascader>
style="width: 100%"
@change="handleChangeDep"
/>
</div>
</template>
<script>
import { initDepartment } from "@/api/index";
export default {
name: "departmentChoose",
props: {
},
data() {
return {
selectDep: [], // 已选数据
department: [] // 列表
selectDep: [],
department: [],
cascaderProps: {
value: "value",
label: "label",
children: "children",
checkStrictly: true,
emitPath: true,
},
};
},
methods: {
// 获取部门数据
initDepartmentData() {
initDepartment().then(res => {
initDepartment().then((res) => {
if (res.success) {
const arr = res.result;
this.filterData(arr)
this.department = arr
this.filterData(arr);
this.department = arr;
}
});
},
handleChangeDep(value, selectedData) {
handleChangeDep(value) {
let departmentId = "";
// 获取最后一个值
if (value && value.length > 0) {
departmentId = value[value.length - 1];
}
this.$emit("on-change", departmentId);
},
// 清空已选列表
clearSelect() {
this.selectDep = [];
},
// 处理部门数据
filterData (data) {
data.forEach(e => {
filterData(data) {
data.forEach((e) => {
e.value = e.id;
e.label = e.title;
if (e.children) {
this.filterData(e.children)
} else {
return
this.filterData(e.children);
}
})
}
});
},
},
created() {
this.initDepartmentData();
}
},
};
</script>
<style lang="scss">
</style>

145
seller/src/views/my-components/lili/department-tree-choose.vue
View File

@@ -1,112 +1,123 @@
<template>
<div>
<div style="display:flex;">
<Input
<div style="display: flex">
<el-input
v-model="departmentTitle"
readonly
style="margin-right:10px;"
style="margin-right: 10px; flex: 1"
:placeholder="placeholder"
:clearable="clearable"
@on-clear="clearSelect"
@clear="clearSelect"
/>
<Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
<Button icon="md-list">选择部门</Button>
<div slot="content">
<Input
v-model="searchKey"
suffix="ios-search"
@on-change="searchDep"
placeholder="输入部门名搜索"
clearable
<el-popover trigger="click" placement="right" title="选择部门" :width="280">
<template #reference>
<el-button>选择部门</el-button>
</template>
<el-input
v-model="searchKey"
placeholder="输入部门名搜索"
clearable
style="margin-bottom: 8px"
@input="searchDep"
/>
<div v-loading="depLoading" class="dep-tree-bar">
<el-tree
:data="dataDep"
:props="treeProps"
node-key="id"
highlight-current
default-expand-all
@node-click="selectTree"
/>
<div class="dep-tree-bar">
<Tree
:data="dataDep"
@on-select-change="selectTree"
></Tree>
<Spin size="large" fix v-if="depLoading"></Spin>
</div>
</div>
</Poptip>
</el-popover>
</div>
</div>
</template>
<script>
import {initDepartment, searchDepartment} from "@/api/index";
import { initDepartment, searchDepartment } from "@/api/index";
export default {
name: "departmentTreeChoose",
props: {
multiple: {
type: Boolean,
default: false
default: false,
},
clearable: {
type: Boolean,
default: true
default: true,
},
placeholder: {
type: String,
default: "点击选择部门"
}
default: "点击选择部门",
},
},
data() {
return {
depLoading: false, // 加载状态
departmentTitle: "", // modal标题
searchKey: "", // 搜索关键词
dataDep: [], // 部门列表
selectDep: [], // 已选部门
departmentId: [] // 部门id
depLoading: false,
departmentTitle: "",
searchKey: "",
dataDep: [],
cloneDep: [],
departmentId: [],
treeProps: {
label: "title",
children: "children",
},
};
},
methods: {
// 获取部门数据
initDepartmentData() {
initDepartment().then(res => {
if (res.success) {
this.dataDep = res.result;
}
});
this.depLoading = true;
initDepartment()
.then((res) => {
if (res.success) {
this.dataDep = res.result;
this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
}
})
.finally(() => {
this.depLoading = false;
});
},
searchDep() {
// 搜索部门
if (this.searchKey) {
this.depLoading = true;
searchDepartment({title: this.searchKey}).then(res => {
this.depLoading = false;
if (res.success) {
res.result.forEach(function (e) {
if (e.status == -1) {
e.title = "[已禁用] " + e.title;
e.disabled = true;
}
});
this.dataDep = res.result;
}
});
searchDepartment({ title: this.searchKey })
.then((res) => {
if (res.success) {
res.result.forEach((e) => {
if (e.status == -1) {
e.title = "[已禁用] " + e.title;
e.disabled = true;
}
});
this.dataDep = res.result;
}
})
.finally(() => {
this.depLoading = false;
});
} else {
this.initDepartmentData();
this.dataDep = JSON.parse(JSON.stringify(this.cloneDep));
}
},
// 选择回调
selectTree(v) {
if (v.length === 0) {
selectTree(node) {
if (!node) {
this.$emit("on-change", null);
this.departmentId = "";
this.departmentTitle = "";
return
return;
}
this.departmentId = v[0].id;
this.departmentTitle = v[0].title;
let department = {
this.departmentId = node.id;
this.departmentTitle = node.title;
this.$emit("on-change", {
departmentId: this.departmentId,
departmentTitle: this.departmentTitle
}
this.$emit("on-change", department);
departmentTitle: this.departmentTitle,
});
},
// 清除选中方法
clearSelect() {
this.departmentId = [];
this.departmentTitle = "";
@@ -118,7 +129,6 @@ export default {
}
this.$emit("on-clear");
},
// 设置数据 回显用
setData(ids, title) {
this.departmentTitle = title;
if (this.multiple) {
@@ -127,11 +137,11 @@ export default {
this.departmentId = [];
this.departmentId.push(ids);
}
}
},
},
created() {
this.initDepartmentData();
}
},
};
</script>
@@ -151,9 +161,6 @@ export default {
.dep-tree-bar::-webkit-scrollbar-thumb {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
background: #e4e4e4;
}
</style>

157
seller/src/views/my-components/lili/set-password.vue
View File

@@ -1,30 +1,31 @@
<template>
<div class="set-password">
<Poptip transfer trigger="focus" placement="right" width="250">
<Input
type="password"
password
style="width:350px;"
:maxlength="maxlength"
v-model="currentValue"
@on-change="handleChange"
:size="size"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
/>
<div :class="tipStyle" slot="content">
<div class="words">强度 : {{strength}}</div>
<Progress
:percent="strengthValue"
:status="progressStatus"
hide-info
style="margin: 13px 0;"
<el-popover trigger="focus" placement="right" :width="250">
<template #reference>
<el-input
v-model="currentValue"
type="password"
show-password
style="width: 350px"
:maxlength="maxlength"
:size="size"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
@input="handleChange"
/>
<br />请至少输入 6 个字符。请不要使
<br />用容易被猜到的密码。
</template>
<div :class="tipStyle">
<div class="words">强度 : {{ strength }}</div>
<el-progress
:percentage="strengthValue"
:status="progressStatus"
:show-text="false"
style="margin: 13px 0"
/>
<br />请至少输入 6 个字符。请不要使用容易被猜到的密码。
</div>
</Poptip>
</el-popover>
</div>
</template>
@@ -32,58 +33,56 @@
export default {
name: "setPassword",
props: {
modelValue: String,
value: String,
size: String,
placeholder: {
type: String,
default: "请输入密码，长度为6-20个字符"
default: "请输入密码，长度为6-20个字符",
},
disabled: {
type: Boolean,
default: false
default: false,
},
readonly: {
type: Boolean,
default: false
default: false,
},
maxlength: {
type: Number,
default: 20
}
default: 20,
},
},
emits: ["update:modelValue", "input", "on-change"],
data() {
return {
currentValue: this.value, // 当前密码
tipStyle: "password-tip-none", // 提示样式
strengthValue: 0, // 密码强度
progressStatus: "normal", // 进度条状态
strength: "无", // 密码长度
grade: 0 // 强度等级
currentValue: this.modelValue ?? this.value ?? "",
tipStyle: "password-tip-none",
strengthValue: 0,
progressStatus: "",
strength: "无",
grade: 0,
};
},
watch: {
modelValue(val) {
this.setCurrentValue(val);
},
value(val) {
this.setCurrentValue(val);
},
},
methods: {
checkStrengthValue(v) {
// 评级制判断密码强度 最高5
let grade = 0;
if (/\d/.test(v)) {
grade++; //数字
}
if (/[a-z]/.test(v)) {
grade++; //小写
}
if (/[A-Z]/.test(v)) {
grade++; //大写
}
if (/\W/.test(v)) {
grade++; //特殊字符
}
if (v.length >= 10) {
grade++;
}
if (/\d/.test(v)) grade++;
if (/[a-z]/.test(v)) grade++;
if (/[A-Z]/.test(v)) grade++;
if (/\W/.test(v)) grade++;
if (v.length >= 10) grade++;
this.grade = grade;
return grade;
},
// 强度验证方法
strengthChange() {
if (!this.currentValue) {
this.tipStyle = "password-tip-none";
@@ -91,14 +90,14 @@ export default {
this.strengthValue = 0;
return;
}
let grade = this.checkStrengthValue(this.currentValue);
const grade = this.checkStrengthValue(this.currentValue);
if (grade <= 1) {
this.progressStatus = "wrong";
this.progressStatus = "exception";
this.tipStyle = "password-tip-weak";
this.strength = "弱";
this.strengthValue = 33;
} else if (grade >= 2 && grade <= 4) {
this.progressStatus = "normal";
this.progressStatus = "";
this.tipStyle = "password-tip-middle";
this.strength = "中";
this.strengthValue = 66;
@@ -109,61 +108,33 @@ export default {
this.strengthValue = 100;
}
},
// 输入框change事件
handleChange(v) {
handleChange() {
this.strengthChange();
this.$emit("update:modelValue", this.currentValue);
this.$emit("input", this.currentValue);
this.$emit("on-change", this.currentValue, this.grade, this.strength);
},
// 回显当前密码
setCurrentValue(value) {
if (value === this.currentValue) {
return;
}
this.currentValue = value;
if (value === this.currentValue) return;
this.currentValue = value ?? "";
this.strengthChange();
this.$emit("on-change", this.currentValue, this.grade, this.strength);
}
},
},
watch: {
value(val) {
this.setCurrentValue(val);
}
}
};
</script>
<style lang="scss" scoped>
.set-password .ivu-poptip,
.set-password .ivu-poptip-rel {
display: block;
}
.password-tip-none {
padding: 1vh 0;
}
.password-tip-weak {
padding: 1vh 0;
.words {
color: #ed3f14;
}
.password-tip-weak .words {
color: #ed3f14;
}
.password-tip-middle {
padding: 1vh 0;
.words {
color: #2d8cf0;
}
.password-tip-middle .words {
color: #2d8cf0;
}
.password-tip-strong {
padding: 1vh 0;
.words {
color: #52c41a;
}
.password-tip-strong .words {
color: #52c41a;
}
</style>

243
seller/src/views/my-components/lili/upload-pic-input.vue
View File

@@ -1,173 +1,166 @@
<template>
<div>
<div style="display:flex;">
<Input
<div style="display: flex; gap: 10px; align-items: center; width: 100%">
<el-input
v-if="showInput"
v-model="currentValue"
@on-change="handleChange"
v-show="showInput"
:placeholder="placeholder"
:size="size"
:disabled="disabled"
:readonly="readonly"
:maxlength="maxlength"
style="flex: 1"
@input="handleChange"
>
<Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right">
<Icon type="md-eye" class="see-icon" />
<div slot="content">
<img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
<a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a>
</div>
</Poptip>
</Input>
<Upload
:action="uploadFileUrl"
:headers="accessToken"
:on-success="handleSuccess"
:on-error="handleError"
:format="['jpg','jpeg','png','gif','bmp']"
accept=".jpg, .jpeg, .png, .gif, .bmp"
:max-size="1024"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="beforeUpload"
:show-upload-list="false"
ref="up"
class="upload"
>
<Button :loading="loading" :size="size" :disabled="disabled">上传图片</Button>
</Upload>
<template #append>
<el-popover trigger="hover" placement="right" :width="320" title="图片预览">
<template #reference>
<el-button class="see-icon">
<el-icon><View /></el-icon>
</el-button>
</template>
<img
v-if="currentValue"
:src="currentValue"
alt="该资源不存在"
style="max-width: 280px; display: block; margin: 0 auto"
/>
<el-button
v-if="currentValue"
type="primary"
link
style="margin-top: 8px; display: block; text-align: right"
@click="viewImage = true"
>
查看大图
</el-button>
</el-popover>
</template>
</el-input>
<el-button @click="handleCLickImg('storeLogo')">选择图片</el-button>
</div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
<img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" />
<div slot="footer">
<Button @click="viewImage=false">关闭</Button>
</div>
</Modal>
<el-dialog v-model="viewImage" title="图片预览" width="480px" append-to-body :z-index="3500">
<img
:src="currentValue"
alt="该资源不存在"
style="max-width: 100%; margin: 0 auto; display: block"
/>
<template #footer>
<el-button @click="viewImage = false">关闭</el-button>
</template>
</el-dialog>
<el-dialog v-model="picModalFlag" width="1200px" append-to-body :z-index="3500" destroy-on-close>
<ossManage
ref="ossManage"
:is-component="true"
:initialize="picModalFlag"
@callback="callbackSelected"
/>
</el-dialog>
</div>
</template>
<script>
import { View } from "@element-plus/icons-vue";
import { uploadFile } from "@/libs/axios";
import ossManage from "@/views/shop/ossManages";
export default {
name: "uploadPicInput",
props: {
value: String,
size: String,
placeholder: { // input提示信息
type: String,
default: "图片链接"
},
showInput: { // 显示图片链接
type: Boolean,
default: true
},
disabled: { // 是否不可选中
type: Boolean,
default: false
},
readonly: { // 是否只读
type: Boolean,
default: false
},
maxlength: Number, // 最大长度
icon: { // 上传按钮图标
type: String,
default: "ios-cloud-upload-outline"
}
components: {
ossManage,
View,
},
props: {
modelValue: String,
value: String,
size: {
default: "default",
type: String,
},
placeholder: {
type: String,
default: "图片链接",
},
showInput: {
type: Boolean,
default: true,
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
maxlength: Number,
},
emits: ["update:modelValue", "input", "on-change"],
data() {
return {
accessToken: {}, // 验证token
currentValue: this.value, // 当前值
loading: false, // 加载状态
viewImage: false, // 是否预览图片
uploadFileUrl: uploadFile // 上传路径
accessToken: {},
currentValue: this.modelValue ?? this.value ?? "",
viewImage: false,
uploadFileUrl: uploadFile,
picModalFlag: false,
selectedFormBtnName: "",
picIndex: "",
};
},
methods: {
// 初始化
handleCLickImg(val, index) {
this.$refs.ossManage.selectImage = true;
this.picModalFlag = true;
this.selectedFormBtnName = val;
this.picIndex = index;
},
callbackSelected(val) {
this.picModalFlag = false;
this.currentValue = val.url;
this.picIndex = "";
this.emitValue(this.currentValue);
},
init() {
this.accessToken = {
accessToken: this.getStore("accessToken")
accessToken: this.getStore("accessToken"),
};
},
// 格式校验
handleFormatError(file) {
this.loading = false;
this.$Notice.warning({
title: "不支持的文件格式",
desc:
"所选文件‘ " +
file.name +
" ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件"
});
emitValue(val) {
this.$emit("update:modelValue", val);
this.$emit("input", val);
this.$emit("on-change", val);
},
// 大小校验
handleMaxSize(file) {
this.loading = false;
this.$Notice.warning({
title: "文件大小过大",
desc: "所选文件大小过大, 不得超过1M."
});
handleChange() {
this.emitValue(this.currentValue);
this.$attrs.rollback && this.$attrs.rollback();
},
// 上传前
beforeUpload() {
this.loading = true;
return true;
},
// 上传成功
handleSuccess(res, file) {
this.loading = false;
if (res.success) {
this.currentValue = res.result;
this.$emit("input", this.currentValue);
this.$emit("on-change", this.currentValue);
} else {
this.$Message.error(res.message);
}
},
// 上传失败
handleError(error, file, fileList) {
this.loading = false;
this.$Message.error(error.toString());
},
// 上传成功回显
handleChange(v) {
this.$emit("input", this.currentValue);
this.$emit("on-change", this.currentValue);
this.$attrs.rollback && this.$attrs.rollback()
},
// 初始值
setCurrentValue(value) {
if (value === this.currentValue) {
return;
}
this.currentValue = value;
this.$emit("on-change", this.currentValue);
}
this.currentValue = value ?? "";
this.emitValue(this.currentValue);
},
},
watch: {
modelValue(val) {
this.setCurrentValue(val);
},
value(val) {
this.setCurrentValue(val);
}
},
},
created() {
this.init();
}
},
};
</script>
<style lang="scss" scoped>
.see-icon {
font-size: 16px;
cursor: pointer;
}
.upload {
display: inline-block;
margin-left: 10px;
padding: 8px;
}
</style>

306
seller/src/views/my-components/lili/upload-pic-thumb.vue
View File

@@ -3,144 +3,152 @@
<div class="upload-pic-thumb">
<vuedraggable
:list="uploadList"
:disabled="!draggable||!multiple"
:disabled="!draggable || !multiple"
:animation="200"
class="list-group"
ghost-class="thumb-ghost"
@end="onEnd"
>
<div class="upload-list" v-for="(item, index) in uploadList" :key="index">
<div v-if="item.status == 'finished'">
<img :src="item.url" />
<div v-for="(item, index) in uploadList" :key="index" class="upload-list">
<div v-if="item.status == 'finished'" style="height: 60px">
<img :src="item.url" alt="" />
<div class="upload-list-cover">
<Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
<Icon v-if="remove" type="ios-trash-outline" @click="handleRemove(item)"></Icon>
<el-icon class="action-icon" @click="handleView(item.url)"><View /></el-icon>
<el-icon v-if="remove" class="action-icon" @click="handleRemove(item)"><Delete /></el-icon>
</div>
</div>
<div v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
<el-progress
v-if="item.showProgress"
:percentage="item.percentage"
:show-text="false"
/>
</div>
</div>
</vuedraggable>
<div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;line-height: 60px;text-align: center;"
@click="handleCLickImg('uploadList')">
<Icon size="20" type="md-camera"></Icon>
<div
v-if="!isView"
class="upload-trigger-box"
@click="handleCLickImg('uploadList')"
>
<el-icon :size="20"><Camera /></el-icon>
</div>
<!--<Upload-->
<!--:disabled="disable"-->
<!--ref="upload"-->
<!--:multiple="multiple"-->
<!--:show-upload-list="false"-->
<!--:on-success="handleSuccess"-->
<!--:on-error="handleError"-->
<!--:format="['jpg','jpeg','png','gif']"-->
<!--:max-size="1024"-->
<!--:on-format-error="handleFormatError"-->
<!--:on-exceeded-size="handleMaxSize"-->
<!--:before-upload="handleBeforeUpload"-->
<!--type="drag"-->
<!--:action="uploadFileUrl"-->
<!--:headers="accessToken"-->
<!--style="display: inline-block;width:58px;"-->
<!--v-if="!isView"-->
<!--&gt;-->
<!--<div style="width: 58px;height:58px;line-height: 58px;">-->
<!--<Icon type="md-camera" size="20"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
<div slot="footer">
<Button @click="viewImage=false">关闭</Button>
</div>
</Modal>
<Modal width="1200px" v-model="picModelFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
</Modal>
<el-dialog v-model="viewImage" title="图片预览" width="520px" append-to-body>
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%; display: block; margin: 0 auto" />
<template #footer>
<el-button @click="viewImage = false">关闭</el-button>
</template>
</el-dialog>
<el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
<ossManage
ref="ossManage"
:is-component="true"
:initialize="picModelFlag"
@callback="callbackSelected"
@selected="(list) => { selectedImage = list }"
/>
<template #footer>
<el-button @click="picModelFlag = false">取消</el-button>
<el-button type="primary" @click="confirmUrls">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { Camera, Delete, View } from "@element-plus/icons-vue";
import { uploadFile } from "@/libs/axios";
import vuedraggable from "vuedraggable";
import ossManage from "@/views/shop/ossManages";
export default {
name: "uploadPicThumb",
components: {
vuedraggable,
ossManage
ossManage,
Camera,
Delete,
View,
},
props: {
value: { // 默认值
type:null
},
draggable: { // 是否可拖拽改变位置
modelValue: { type: null },
value: { type: null },
draggable: {
type: Boolean,
default: true
default: true,
},
multiple: { // 多选
multiple: {
type: Boolean,
default: true
default: true,
},
disable:{ // 禁止上传
disable: {
type: Boolean,
default: false
default: false,
},
remove:{ // 移除图片
remove: {
type: Boolean,
default: true
default: true,
},
limit: { // 上传总数限制
limit: {
type: Number,
default: 10
default: 10,
},
isView: { // 显示上传按钮
isView: {
type: Boolean,
default: false
}
default: false,
},
},
emits: ["update:modelValue", "input", "on-change", "uploadchange"],
data() {
return {
accessToken: {}, // 验证token
uploadFileUrl: uploadFile, // 上传文件
uploadList: [], // 上传文件列表
viewImage: false, // 是否预览图片
imgUrl: "", // 图片地址
picModelFlag: false, // 图片选择器
selectedFormBtnName: "", // 点击图片绑定form
accessToken: {},
uploadFileUrl: uploadFile,
uploadList: [],
viewImage: false,
imgUrl: "",
picModelFlag: false,
selectedFormBtnName: "",
selectedImage: [],
};
},
computed: {
bindValue() {
return this.modelValue !== undefined ? this.modelValue : this.value;
},
},
methods: {
// 选择图片modal
handleCLickImg(val, index) {
handleCLickImg(val) {
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
this.selectedFormBtnName = val;
},
// 图片选择后回调
callbackSelected(val) {
this.picModelFlag = false;
if (!this.multiple && this.uploadList && this.uploadList.length > 0) {
// 删除第一张
if (!this.multiple && this.uploadList.length > 0) {
this.uploadList.splice(0, 1);
}
this.uploadList.push(val);
// 返回组件值
this.uploadList.push({ ...val, status: "finished" });
this.returnValue();
},
confirmUrls(){
confirmUrls() {
if (this.selectedImage.length) {
this.selectedImage.forEach((element) => {
this.uploadList.push({ url: element.url, status: "finished" });
});
}
this.picModelFlag = false;
this.returnValue();
},
onEnd() {
this.returnValue();
},
init() {
this.setData(this.value, true);
this.setData(this.bindValue, true);
this.accessToken = {
accessToken: this.getStore("accessToken")
accessToken: this.getStore("accessToken"),
};
},
handleView(imgUrl) {
@@ -148,79 +156,28 @@ export default {
this.viewImage = true;
},
handleRemove(file) {
const uploadList = this.uploadList;
this.uploadList.splice(uploadList.indexOf(file), 1);
this.uploadList = this.uploadList.filter((i) => i.url !== file.url);
this.returnValue();
},
handleSuccess(res, file) {
if (res.success) {
file.url = res.result;
// 单张图片处理
if (!this.multiple && this.uploadList.length > 0) {
// 删除第一张
this.uploadList.splice(0, 1);
}
this.uploadList.push(file);
// 返回组件值
this.returnValue();
} else {
this.$Message.error(res.message);
}
},
handleError(error, file, fileList) {
this.$Message.error(error.toString());
},
handleFormatError(file) {
this.$Notice.warning({
title: "不支持的文件格式",
desc:
"所选文件‘ " +
file.name +
" ’格式不正确, 请选择 .jpg .jpeg .png .gif图片格式文件"
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: "文件大小过大",
desc:
"所选文件大小过大, 不得超过1M."
});
},
handleBeforeUpload() {
if (this.multiple && this.uploadList.length >= this.limit) {
this.$Message.warning("最多只能上传" + this.limit + "张图片");
return false;
}
return true;
emitValue(val) {
this.$emit("update:modelValue", val);
this.$emit("input", val);
this.$emit("on-change", val);
},
returnValue() {
if (!this.uploadList || this.uploadList.length < 1) {
if (!this.multiple) {
this.$emit("input", "");
this.$emit("on-change", "");
} else {
this.$emit("input", []);
this.$emit("on-change", []);
}
const empty = this.multiple ? [] : "";
this.emitValue(empty);
return;
}
if (!this.multiple) {
// 单张
let v = this.uploadList[0].url;
this.$emit("input", v);
this.$emit("on-change", v);
this.emitValue(this.uploadList[0].url);
} else {
let v = [];
this.uploadList.forEach(e => {
v.push(e.url);
});
this.$emit("input", v);
this.$emit("on-change", v);
this.emitValue(this.uploadList.map((e) => e.url));
}
},
setData(v, init) {
if (typeof v == "string") {
// 单张
if (this.multiple) {
this.$Message.warning("多张上传仅支持数组数据类型");
return;
@@ -228,62 +185,53 @@ export default {
if (!v) {
return;
}
this.uploadList = [];
let item = {
url: v,
status: "finished"
};
this.uploadList.push(item);
this.$emit("on-change", v);
} else if (typeof v == "object") {
// 多张
this.uploadList = [{ url: v, status: "finished" }];
this.$emit("uploadchange", v);
this.emitValue(v);
} else if (typeof v == "object" && v) {
if (!this.multiple) {
this.$Message.warning("单张上传仅支持字符串数据类型");
return;
}
this.uploadList = [];
const list = v.length > this.limit ? v.slice(0, this.limit) : v;
if (v.length > this.limit) {
for (let i = 0; i < this.limit; i++) {
let item = {
url: v[i],
status: "finished"
};
this.uploadList.push(item);
}
this.$emit("on-change", v.slice(0, this.limit));
if (init) {
this.$emit("input", v.slice(0, this.limit));
}
this.$Message.warning("最多只能上传" + this.limit + "张图片");
} else {
v.forEach(e => {
let item = {
url: e,
status: "finished"
};
this.uploadList.push(item);
}
list.forEach((e) => {
this.uploadList.push({
status: "finished",
...(typeof e === "string" ? { url: e } : e),
});
this.$emit("on-change", v);
});
if (init) {
this.emitValue(list);
} else {
this.$emit("on-change", list);
}
}
}
},
},
watch: {
modelValue(val) {
this.setData(val);
},
value(val) {
this.setData(val);
}
},
},
mounted() {
this.init();
}
},
};
</script>
<style lang="scss" scoped>
.upload-pic-thumb{
.upload-pic-thumb {
display: flex;
}
.upload-list {
display: inline-flex;
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
@@ -300,6 +248,7 @@ export default {
.upload-list img {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-list-cover {
display: none;
@@ -309,15 +258,17 @@ export default {
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
align-items: center;
justify-content: center;
gap: 6px;
}
.upload-list:hover .upload-list-cover {
display: block;
display: flex;
}
.upload-list-cover i {
.action-icon {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
.list-group {
display: inline-block;
@@ -326,5 +277,14 @@ export default {
opacity: 0.5;
background: #c8ebfb;
}
.upload-trigger-box {
display: inline-block;
width: 58px;
height: 58px;
border: 1px dashed #dcdfe6;
border-radius: 4px;
line-height: 58px;
text-align: center;
cursor: pointer;
}
</style>

63
seller/src/views/my-components/map/index.vue
View File

@@ -1,11 +1,10 @@
<template>
<div class="map">
<div class="address">{{ addrContent.address }}</div>
<div id="map-container"></div>
<div class="search-con">
<Input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
<el-input id="input-map" v-model="mapSearch" placeholder="输入关键字搜索" clearable />
<ul>
<li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
<p>{{ tip.name }}</p>
@@ -13,42 +12,39 @@
</li>
</ul>
</div>
<div slot="footer" class="footer">
<Button type="primary" :loading="loading" @click="ok">确定</Button>
<div class="footer">
<el-button type="primary" :loading="loading" @click="ok">确定</el-button>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getRegion } from "@/api/common.js";
const config = require('@/config/index')
const config = require("@/config/index");
export default {
name: "map",
data() {
return {
config,
showMap: false, // 地图显隐
mapSearch: "", // 地图搜索
map: null, // 初始化地图
autoComplete: null, // 初始化搜索方法
geocoder: null, // 初始化地理、坐标转化
positionPicker: null, // 地图拖拽选点
tips: [], //搜索关键字列表
addrContent: {}, // 回显地址信息
loading: false, // 加载状态
showMap: false,
mapSearch: "",
map: null,
autoComplete: null,
geocoder: null,
positionPicker: null,
tips: [],
addrContent: {},
loading: false,
};
},
watch: {
mapSearch: function (val) {
mapSearch(val) {
this.searchOfMap(val);
},
},
methods: {
ok() {
if (this.addrContent && this.addrContent.regeocode) {
const params = {
cityCode: this.addrContent.regeocode.addressComponent.citycode,
@@ -59,30 +55,27 @@ export default {
this.addrContent.addr = res.result.name.replace(/,/g, " ");
this.addrContent.addrId = res.result.id;
this.loading = false;
this.$emit("getAddress", this.addrContent);
}
});
} else {
this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
this.$Message.error("未获取到坐标信息！请查看高德API配置是否正确");
}
},
init() {
AMapLoader.load({
key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
key: this.config.aMapKey,
version: "",
plugins: [
"AMap.ToolBar",
"AMap.Autocomplete",
"AMap.PlaceSearch",
"AMap.Geolocation",
"AMap.Geocoder",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
],
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
version: "1.1",
plugins: ["misc/PositionPicker"],
},
})
.then((AMap) => {
@@ -95,36 +88,26 @@ export default {
that.map.addControl(new AMap.PlaceSearch());
that.map.addControl(new AMap.Geocoder());
// 实例化Autocomplete
let autoOptions = {
city: "全国",
};
that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
that.autoComplete = new AMap.Autocomplete(autoOptions);
that.geocoder = new AMap.Geocoder(autoOptions);
that.positionPicker = new AMapUI.PositionPicker({
// 拖拽选点
mode: "dragMap",
map: that.map,
});
that.positionPicker.start();
/**
*
* 所有回显数据，都在positionResult里面
* 需要字段可以查找
*
*/
that.positionPicker.on("success", function (positionResult) {
that.addrContent = positionResult;
});
})
.catch((e) => { });
.catch(() => {});
},
searchOfMap(val) {
// 地图搜索
let that = this;
this.autoComplete.search(val, function (status, result) {
// 搜索成功时，result即是对应的匹配数据
if (status == "complete" && result.info == "OK") {
that.tips = result.tips;
} else {
@@ -133,7 +116,6 @@ export default {
});
},
selectAddr(location) {
// 选择坐标
if (!location) {
this.$Message.warning("请选择正确点位");
return false;
@@ -182,7 +164,6 @@ export default {
.address {
margin-bottom: 10px;
// color: $theme_color;
font-weight: bold;
}

117
seller/src/views/my-components/map/multiple-map.vue
View File

@@ -1,38 +1,50 @@
<template>
<Modal width="800" footer-hide v-model="enableMap">
<RadioGroup @on-change="changeMap" v-model="mapDefault" type="button">
<Radio label="select">级联选择</Radio>
<Radio label="map" v-if="aMapSwitch">高德地图</Radio>
</RadioGroup>
<el-dialog v-model="enableMap" width="800px" :show-close="true" destroy-on-close>
<el-radio-group v-model="mapDefault" @change="changeMap">
<el-radio-button value="select">级联选择</el-radio-button>
<el-radio-button v-if="aMapSwitch" value="map">高德地图</el-radio-button>
</el-radio-group>
<div>
<div v-if="mapDefault === 'select'">
<div class="selector">
<div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
<div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
<div
v-for="(plant, plantIndex) in Object.keys(data)"
:key="plantIndex"
class="selector-item"
>
<div
v-for="(item, index) in data[plant]"
:key="index"
@click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
class="map-item">
:class="{ active: chiosend[plantIndex]?.id == item.id }"
class="map-item"
@click="
init(
item,
plantIndex != Object.keys(data).length - 1
? Object.keys(data)[plantIndex + 1]
: 0,
plantIndex
)
"
>
{{ item.name }}
</div>
</div>
</div>
<div class="footer">
<Button type="primary" @click="finished">确定</Button>
<el-button type="primary" @click="finished">确定</el-button>
</div>
</div>
<mapping v-if="mapDefault === 'map'" ref="map" @getAddress="getAddress" />
</div>
</Modal>
</el-dialog>
</template>
<script>
import { aMapSwitch } from '@/config/index'
import { aMapSwitch } from "@/config/index";
import mapping from "@/views/my-components/map/index.vue";
import * as API_Setup from "@/api/common.js";
export default {
components: { mapping },
data() {
@@ -41,87 +53,76 @@ export default {
enableMap: false,
mapDefault: "select",
data: {
province: [], //省
city: [], //市
area: [], //区
street: [], //街道
province: [],
city: [],
area: [],
street: [],
},
chiosend: [],
};
},
mounted() {
this.chiosend = new Array(4).fill("");
},
methods: {
open() {
this.enableMap = true
this.init({ id: 0 }, 'province');
this.enableMap = true;
this.init({ id: 0 }, "province");
},
changeMap(val) {
this.mapDefault = val
this.mapDefault = val;
},
init(val, level = 'province', index) {
init(val, level = "province", index) {
if (level == 0) {
// 说明选择到了街道，将街道id存入数组
this.chiosend.splice(3, 1, val);
}
else {
} else {
API_Setup.getChildRegion(val.id).then((res) => {
if (res.result.length && val.id !== 0) {
this.chiosend[index] = val
}
else if(!res.result.length){
this.chiosend[index] = val
this.chiosend[index] = val;
} else if (!res.result.length) {
this.chiosend[index] = val;
}
this.data[level] = res.result;
if (level == 'city') {
this.data.area = []
this.data.street = []
this.chiosend.splice(1, 3, "","","");
if (level == "city") {
this.data.area = [];
this.data.street = [];
this.chiosend.splice(1, 3, "", "", "");
}
if (level == 'area') {
this.data.street = []
this.chiosend.splice(2, 2, "","");
if (level == "area") {
this.data.street = [];
this.chiosend.splice(2, 2, "", "");
}
if (level == 'street') {
if (level == "street") {
this.chiosend.splice(3, 1, "");
}
});
}
},
getAddress(center) {
this.$emit('callback', {
this.$emit("callback", {
type: this.mapDefault,
data: center
})
data: center,
});
this.enableMap = false;
},
// 选择完成
finished() {
if(!this.chiosend[0]){
this.$Message.error("请选择地址")
return
if (!this.chiosend[0]) {
this.$Message.error("请选择地址");
return;
}
const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
const params = this.chiosend.filter((item) => item !== "" && item.value !== "");
this.enableMap = false;
this.$emit('callback', {
this.$emit("callback", {
type: this.mapDefault,
data: params
})
data: params,
});
},
},
}
};
</script>
<style lang="scss" scoped>
.selector {
height: 400px;
padding: 10px 0;
display: flex;

2
seller/src/views/my-components/tree-table/Checkbox/Checkbox.vue
View File

@@ -55,4 +55,4 @@
};
</script>
<style lang="less" src="./Checkbox.less"></style>
<style lang="less" scoped src="./Checkbox.less"></style>

9
seller/src/views/my-components/tree-table/Table/Table.vue
View File

@@ -2,8 +2,8 @@
<div
v-if="columns.length > 0"
ref="table"
v-loading="loading"
:class="[prefixCls, `${prefixCls}-${size}`, tableClass]">
<Spin fix v-if="loading"></Spin>
<div
v-show="showHeader"
ref="header-wrapper"
@@ -297,6 +297,11 @@ export default {
cellStyle: [Object, Function],
expandKey: String
},
provide() {
return {
treeTableRoot: this,
};
},
data() {
return {
computedWidth: "",
@@ -387,7 +392,7 @@ export default {
this.measure();
window.addEventListener("resize", this.measure);
},
beforeDestroy() {
beforeUnmount() {
window.removeEventListener("resize", this.measure);
}
};

68
seller/src/views/my-components/tree-table/Table/TableBody.js
View File

@@ -1,13 +1,13 @@
import Checkbox from '../Checkbox/Checkbox'; // eslint-disable-line
// import Radio from '../Radio/Radio'; // eslint-disable-line
import { mixins } from './utils';
import { Radio } from 'view-design'; // eslint-disable-line
/* eslint-disable no-underscore-dangle */
export default {
name: 'TreeTable__body',
mixins: [mixins],
components: { Radio },
inject: {
treeTableRoot: { default: null },
},
data() {
return {
radioSelectedIndex: -1,
@@ -15,6 +15,12 @@ export default {
},
computed: {
table() {
if (this.treeTableRoot) return this.treeTableRoot;
let parent = this.$parent;
while (parent) {
if (parent.$options && parent.$options.name === 'TreeTable') return parent;
parent = parent.$parent;
}
return this.$parent;
},
},
@@ -110,15 +116,6 @@ export default {
},
},
render() {
// key
// function getKey(row, rowIndex) {
// const rowKey = this.table.rowKey;
// if (rowKey) {
// return rowKey.call(null, row, rowIndex);
// }
// return rowIndex;
// }
// style
function getStyle(type, row, rowIndex, column, columnIndex) {
const certainType = this.validateType(type, ['cell', 'row'], 'getStyle');
@@ -185,8 +182,21 @@ export default {
return classList.join(' ');
}
// Vue 3：scoped slot 合并到 $slots
function renderTemplateSlot(table, slotName, scope) {
if (!table || !slotName) return '';
const slots = table.$slots || {};
let slot = slots[slotName];
if (!slot && table.$scopedSlots && table.$scopedSlots[slotName]) {
slot = table.$scopedSlots[slotName];
}
if (!slot) return '';
return slot(scope);
}
// 根据type渲染单元格Cell
function renderCell(row, rowIndex, column, columnIndex) {
if (!row || !column) return '';
// ExpandType
if (this.isExpandCell(this.table, columnIndex)) {
return <i class='zk-icon zk-icon-angle-right'></i>;
@@ -219,13 +229,16 @@ export default {
}
}
}
// res = <Checkbox
// indeterminate={indeterminate}
// value={allCheck}
// onOn-change={isChecked => this.handleEvent(null, 'checkbox', { row, rowIndex, column, columnIndex }, { isChecked })}>
// </Checkbox>;
} else {
res = <Radio value={this.radioSelectedIndex === rowIndex} on-on-change={() => this.handleEvent(null, 'radio', { row, rowIndex, column, columnIndex })}></Radio>;
res = (
<input
type="radio"
checked={this.radioSelectedIndex === rowIndex}
onChange={() =>
this.handleEvent(null, 'radio', { row, rowIndex, column, columnIndex })
}
/>
);
}
return res;
}
@@ -253,9 +266,12 @@ export default {
if (column.type === undefined || column.type === 'custom') {
return row[column.key];
} else if (column.type === 'template') {
return this.table.$scopedSlots[column.template]
? this.table.$scopedSlots[column.template]({ row, rowIndex, column, columnIndex })
: '';
return renderTemplateSlot.call(this, this.table, column.template, {
row,
rowIndex,
column,
columnIndex,
});
}
return '';
}
@@ -263,11 +279,6 @@ export default {
// Template
return (
<table cellspacing="0" cellpadding="0" border="0" class={`${this.prefixCls}__body`}>
{/* <colgroup>
{this.table.tableColumns.map(column =>
<col width={column.computedWidth || column.minWidth || column.width}></col>)
}
</colgroup> */}
<tbody>
{ this.table.bodyData.length > 0
? this.table.bodyData.map((row, rowIndex) =>
@@ -304,10 +315,7 @@ export default {
<td
class={`${this.prefixCls}--expand-content`}
colspan={this.table.tableColumns.length}>
{this.table.$scopedSlots.expand
? this.table.$scopedSlots.expand({ row, rowIndex })
: ''
}
{renderTemplateSlot.call(this, this.table, 'expand', { row, rowIndex })}
</td>
</tr>,
])

22
seller/src/views/my-components/tree-table/Table/utils/scrollBarWidth.js
View File

@@ -1,23 +1,21 @@
import Vue from 'vue';
let scrollBarWidth;
export default function () {
if (Vue.prototype.$isServer) return 0;
export default function getScrollBarWidth() {
if (typeof document === "undefined") return 0;
if (scrollBarWidth !== undefined) return scrollBarWidth;
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.width = '100px';
outer.style.position = 'absolute';
outer.style.top = '-9999px';
const outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.position = "absolute";
outer.style.top = "-9999px";
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = 'scroll';
outer.style.overflow = "scroll";
const inner = document.createElement('div');
inner.style.width = '100%';
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;

160
seller/src/views/my-components/verify/index.vue
View File

@@ -1,59 +1,81 @@
<template>
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp" @click.stop>
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
<img :src="data.backImage" style="width:100%;height:100%" alt="">
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
<Icon type="md-refresh" class="refresh" @click="init" />
<div
class="verify-content"
v-if="show"
@mousemove="mouseMove"
@mouseup="mouseUp"
@click.stop
>
<div
class="imgBox"
:style="{
width: data.originalWidth + 'px',
height: data.originalHeight + 'px',
}"
>
<img :src="data.backImage" style="width: 100%; height: 100%" alt="" />
<img
class="slider"
:src="data.slidingImage"
:style="{ left: distance + 'px', top: data.randomY + 'px' }"
:width="data.sliderWidth"
:height="data.sliderHeight"
alt=""
/>
<el-icon class="refresh" @click="init"><Refresh /></el-icon>
</div>
<div class="handle" :style="{width:data.originalWidth+'px'}">
<span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
<span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
<Icon type="md-arrow-round-forward" />
<div class="handle" :style="{ width: data.originalWidth + 'px' }">
<span
class="bgcolor"
:style="{ width: distance + 'px', background: bgColor }"
></span>
<span class="swiper" :style="{ left: distance + 'px' }" @mousedown="mouseDown">
<el-icon><DArrowRight /></el-icon>
</span>
<span class="text">{{verifyText}}</span>
<span class="text">{{ verifyText }}</span>
</div>
</div>
</template>
<script>
import { getVerifyImg, postVerifyImg } from './verify.js';
import { Refresh, DArrowRight } from "@element-plus/icons-vue";
import { getVerifyImg, postVerifyImg } from "./verify.js";
export default {
components: { Refresh, DArrowRight },
props: {
// 传入数据，判断是登录、注册、修改密码
verifyType: {
defalut: 'LOGIN',
type: String
}
default: "LOGIN",
type: String,
},
},
data () {
data() {
return {
show: false, // 验证码显隐
type: 'LOGIN', // 请求类型
data: { // 验证码数据
backImage: '',
slidingImage: '',
show: false,
type: "LOGIN",
data: {
backImage: "",
slidingImage: "",
originalHeight: 150,
originalWidth: 300,
sliderWidth: 60,
sliderHeight: 60
sliderHeight: 60,
},
distance: 0, // 拼图移动距离
flag: false, // 判断滑块是否按下
downX: 0, // 鼠标按下位置
bgColor: '#04ad11', // 滑动背景颜色
verifyText: '拖动滑块解锁' // 文字提示
distance: 0,
flag: false,
downX: 0,
bgColor: "#04ad11",
verifyText: "拖动滑块解锁",
};
},
methods: {
// 鼠标按下事件，开始拖动滑块
mouseDown (e) {
mouseDown(e) {
this.downX = e.clientX;
this.flag = true;
},
// 鼠标移动事件，计算距离
mouseMove (e) {
mouseMove(e) {
if (this.flag) {
let offset = e.clientX - this.downX;
const offset = e.clientX - this.downX;
if (offset > this.data.originalWidth - 43) {
this.distance = this.data.originalWidth - 43;
} else if (offset < 0) {
@@ -63,65 +85,63 @@ export default {
}
}
},
// 鼠标抬起事件，验证是否正确
mouseUp () {
mouseUp() {
if (!this.flag) return false;
this.flag = false;
let params = {
const params = {
verificationEnums: this.type,
xPos: this.distance
xPos: this.distance,
};
postVerifyImg(params).then(res => {
if (res.success) {
if (res.result) {
this.bgColor = 'green';
this.verifyText = '解锁成功';
this.$emit('change', { status: true, distance: this.distance });
postVerifyImg(params)
.then((res) => {
if (res.success) {
if (res.result) {
this.bgColor = "green";
this.verifyText = "解锁成功";
this.$emit("change", { status: true, distance: this.distance });
} else {
this.bgColor = "red";
this.verifyText = "解锁失败";
setTimeout(() => this.init(), 1000);
this.$emit("change", { status: false, distance: this.distance });
}
} else {
this.bgColor = 'red';
this.verifyText = '解锁失败';
let that = this;
setTimeout(() => {
that.init();
}, 1000);
this.$emit('change', { status: false, distance: this.distance });
this.init();
}
} else {
this.init()
}
}).catch(()=>{
this.init()
});
})
.catch(() => {
this.init();
});
},
init () { // 初始化数据
init() {
this.flag = false;
this.downX = 0;
this.distance = 0;
this.bgColor = '#04ad11';
this.verifyText = '拖动滑块解锁';
getVerifyImg(this.type).then(res => {
this.bgColor = "#04ad11";
this.verifyText = "拖动滑块解锁";
getVerifyImg(this.type).then((res) => {
if (res.result) {
this.data = res.result;
this.show = true;
} else {
this.$Message.warning('请求失败请重试！')
this.$Message.warning("请求失败请重试！");
}
});
}
},
},
watch: {
verifyType: {
immediate: true,
handler: function (v) {
handler(v) {
this.type = v;
}
}
}
},
},
},
};
</script>
<style lang="scss" scoped>
.verify-content{
.verify-content {
padding: 10px;
background: #fff;
border: 1px solid #eee;
@@ -174,9 +194,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
.ivu-icon {
font-size: 20px;
}
font-size: 20px;
}
.text {