增加轮播图配置
This commit is contained in:
BianLzhaoMin
parent
28b58646c2
commit
546f1f4ea1
|
|
@ -0,0 +1,23 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
// 新增上传首页轮播图
|
||||
export const addHomeSwiperApi = () => {
|
||||
return request({
|
||||
url: "/auth/getConfig",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
// 修改轮播图状态
|
||||
export const editHomeSwiperTypeApi = () => {
|
||||
return request({
|
||||
url: "/auth/getConfig",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
// 删除轮播图
|
||||
export const deleteHomeSwiperApi = () => {
|
||||
return request({
|
||||
url: "/auth/getConfig",
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
|
@ -18,18 +18,29 @@
|
|||
<el-table-column label="序号" align="center" width="100" type="index" />
|
||||
<el-table-column prop="imgSrc" label="图片链接" align="center" />
|
||||
<el-table-column prop="isShow" label="是否禁用" align="center">
|
||||
<template>
|
||||
<el-switch active-text="激活" inactive-text="禁用" v-model="value2" />
|
||||
<template slot-scope="{ row }">
|
||||
<el-switch
|
||||
active-text="激活"
|
||||
inactive-text="禁用"
|
||||
v-model="row.isShow"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="outLink" label="外部链接" align="center" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template>
|
||||
<el-button size="mini" type="danger" @click="onClickDelete">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog
|
||||
width="50%"
|
||||
append-to-body
|
||||
title="新增轮播图"
|
||||
:visible.sync="addSwiperVisible"
|
||||
width="40%"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
ref="addSwiperFormRef"
|
||||
|
|
@ -56,16 +67,16 @@
|
|||
<el-form-item label="轮播图上传：">
|
||||
<el-upload
|
||||
:limit="1"
|
||||
:headers="headers"
|
||||
:show-file-list="true"
|
||||
:action="uploadFileUrl"
|
||||
list-type="picture-card"
|
||||
:file-list="addOrEditForm.fileList"
|
||||
:headers="headers"
|
||||
:on-exceed="handleExceed"
|
||||
:on-remove="handleRemove"
|
||||
:on-preview="handlePreview"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:show-file-list="true"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="addSwiperForm.fileList"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
|
|
@ -77,19 +88,50 @@
|
|||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
width="30%"
|
||||
append-to-body
|
||||
:before-close="
|
||||
() => {
|
||||
dialogInnerVisible = false;
|
||||
}
|
||||
"
|
||||
:visible.sync="dialogInnerVisible"
|
||||
>
|
||||
<img
|
||||
:src="previewUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
import {
|
||||
addHomeSwiperApi,
|
||||
deleteHomeSwiperApi,
|
||||
editHomeSwiperTypeApi,
|
||||
} from "@/api/swiper-manage/index.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
|
||||
dialogInnerVisible: false,
|
||||
fileType: ["png", "jpg", "jpeg"],
|
||||
previewUrl: "",
|
||||
addSwiperVisible: false,
|
||||
value1: true,
|
||||
value2: true,
|
||||
uploadFileUrl: "",
|
||||
headers: {},
|
||||
addSwiperFormRules: {},
|
||||
addSwiperForm: {
|
||||
fileList: [],
|
||||
},
|
||||
headers: {
|
||||
Authorization: "Bearer " + getToken(),
|
||||
},
|
||||
noticeList: [
|
||||
{
|
||||
imgSrc: "xxxx",
|
||||
|
|
@ -121,44 +163,58 @@ export default {
|
|||
},
|
||||
// 上传之前
|
||||
handleBeforeUpload(file) {
|
||||
// const isSvg = this.fileType.some((e) => file.type.includes(e));
|
||||
// if (!isSvg) {
|
||||
// this.$modal.msgError(
|
||||
// `文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
|
||||
// );
|
||||
// return false;
|
||||
// }
|
||||
// const isLt = file.size / 1024 / 1024 < 3;
|
||||
// if (!isLt) {
|
||||
// this.$modal.msgError(`LOGO大小不能超过 3 MB`);
|
||||
// return false;
|
||||
// }
|
||||
// this.$modal.loading("图片正在上传，请稍候...");
|
||||
const isSvg = this.fileType.some((e) => file.type.includes(e));
|
||||
if (!isSvg) {
|
||||
this.$modal.msgError(
|
||||
`文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
const isLt = file.size / 1024 / 1024 < 10;
|
||||
if (!isLt) {
|
||||
this.$modal.msgError(`图片大小不能超过 10 MB`);
|
||||
return false;
|
||||
}
|
||||
this.$modal.loading("图片正在上传，请稍候...");
|
||||
},
|
||||
// 移除
|
||||
handleRemove(file) {
|
||||
// this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter(
|
||||
// (item) => item.uid !== file.uid
|
||||
// );
|
||||
// this.addOrEditForm.logo = "";
|
||||
this.addSwiperFormRules.fileList =
|
||||
this.addSwiperFormRules.fileList.filter(
|
||||
(item) => item.uid !== file.uid
|
||||
);
|
||||
this.addSwiperFormRules.logo = "";
|
||||
},
|
||||
// 预览 LOGO
|
||||
// 预览 图片
|
||||
handlePreview(file) {
|
||||
// this.dialogInnerVisible = true;
|
||||
// this.previewUrl = file.url;
|
||||
this.dialogInnerVisible = true;
|
||||
this.previewUrl = file.url;
|
||||
},
|
||||
|
||||
// 文件个数超出限制
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传的图片数量不能超过 1 个`);
|
||||
},
|
||||
// 上传成功
|
||||
handleSuccess(res) {
|
||||
// if (res.code === 200) {
|
||||
// this.addOrEditForm.logo = res.data.url;
|
||||
// } else {
|
||||
// this.addOrEditForm.fileList = [];
|
||||
// this.addOrEditForm.logo = "";
|
||||
// }
|
||||
// this.$modal.closeLoading();
|
||||
if (res.code === 200) {
|
||||
this.addSwiperFormRules.logo = res.data.url;
|
||||
} else {
|
||||
this.addSwiperFormRules.fileList = [];
|
||||
this.addSwiperFormRules.logo = "";
|
||||
}
|
||||
this.$modal.closeLoading();
|
||||
},
|
||||
|
||||
onClickDelete() {
|
||||
this.$confirm("确定删除该轮播图吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue