<template>
|
<div class="AddBanner">
|
<div class="title">添加轮播图</div>
|
<div class="close iconfont" @click="back"></div>
|
<div class="content">
|
<el-form
|
:model="ruleForm"
|
ref="ruleForm"
|
:rules="rules"
|
label-width="83px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="模块名称" prop="name">
|
<el-input
|
v-model="ruleForm.name"
|
placeholder="请输入模块名称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="上传图片" prop="pic">
|
<div class="logo">
|
<el-upload
|
action
|
:http-request="uploadLogo"
|
list-type="picture-card"
|
accept="image/*"
|
:limit="1"
|
:file-list="pic"
|
:on-remove="handleRemoveLogo"
|
>
|
<i class="el-icon-plus" style="margin-top: 10px"></i>
|
<div>点击上传图片</div>
|
</el-upload>
|
</div>
|
</el-form-item>
|
|
<el-form-item label="排序">
|
<el-input v-model="ruleForm.sort" placeholder="请输入"></el-input>
|
</el-form-item>
|
|
<el-form-item label="跳转连接">
|
<el-input v-model="ruleForm.url" placeholder="请输入"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="buttonArea">
|
<div class="cancel" @click="back">取消</div>
|
<div class="confirm" @click="submitForm">添加</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import request from "@/api/index";
|
import { saveIndexPic } from "@/api/product";
|
export default {
|
props: {
|
editObj: {
|
default: null,
|
},
|
},
|
created() {
|
this.getEditData();
|
},
|
data() {
|
return {
|
ruleForm: {
|
name: "",
|
pic: "",
|
sort: "",
|
url: "",
|
},
|
rules: {
|
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
|
pic: [{ required: true, message: "请上传图片", trigger: "blur" }],
|
},
|
pic: [],
|
};
|
},
|
methods: {
|
getEditData() {
|
if (this.editObj) {
|
this.ruleForm = this.editObj;
|
|
if (this.ruleForm.pic && this.ruleForm.pic.indexOf("/images") !== 0) {
|
this.pic.push({
|
url: this.ruleForm.pic,
|
});
|
} else {
|
this.pic.push({
|
url: this.ruleForm.pic,
|
});
|
}
|
}
|
},
|
uploadLogo(param) {
|
const fd = new FormData();
|
fd.append("file", param.file);
|
request({
|
method: "post",
|
url: `/admin/api-f/file/fileUpload`,
|
data: fd,
|
})
|
.then((res) => {
|
this.ruleForm.pic = res.data.picUrl;
|
})
|
.catch((err) => {
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
handleRemoveLogo() {
|
this.ruleForm.pic = "";
|
},
|
submitForm() {
|
this.$refs["ruleForm"].validate(async (valid) => {
|
if (valid) {
|
this.ruleForm.sort = +this.ruleForm.sort;
|
const res = await saveIndexPic(this.ruleForm);
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "添加成功",
|
});
|
this.$emit("addSuccess");
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
back() {
|
this.$emit("close");
|
},
|
},
|
watch: {
|
editObj() {
|
this.getEditData();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.AddBanner {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin-top: -229px;
|
margin-left: -250px;
|
width: 500px;
|
height: 458px;
|
border-radius: 3px;
|
background: #ffffff;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
z-index: 1;
|
|
.title {
|
box-sizing: border-box;
|
padding: 0 20px;
|
height: 64px;
|
line-height: 64px;
|
font-size: 18px;
|
font-weight: 700;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.close {
|
position: absolute;
|
top: 24px;
|
right: 24px;
|
font-size: 12px;
|
color: #000;
|
cursor: pointer;
|
}
|
|
.content {
|
padding: 30px 20px 20px 20px;
|
|
.el-input ::v-deep {
|
width: 300px;
|
height: 32px;
|
.el-input__inner {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
color: #3d3d3d;
|
border-radius: 0;
|
border-color: #c0c5cc;
|
border-radius: 3px;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.logo ::v-deep {
|
width: 136px;
|
height: 76px;
|
overflow: hidden;
|
font-size: 12px;
|
color: #999999;
|
.el-upload--picture-card {
|
width: 126px;
|
height: 66px;
|
line-height: 20px;
|
background: #e9ebee;
|
border-radius: 3px;
|
border-color: #c0c5cc;
|
}
|
.el-upload-list__item {
|
margin: 10px;
|
width: 126px;
|
height: 66px;
|
img {
|
object-fit: contain;
|
}
|
}
|
}
|
|
.buttonArea {
|
display: flex;
|
align-items: flex-end;
|
justify-content: flex-end;
|
height: 52px;
|
line-height: 32px;
|
font-size: 12px;
|
text-align: center;
|
border-top: 1px solid #e9ebee;
|
|
.cancel {
|
margin-right: 10px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
border-radius: 3px;
|
color: #0064ff;
|
cursor: pointer;
|
}
|
|
.confirm {
|
width: 60px;
|
height: 32px;
|
color: #fff;
|
background: #0064ff;
|
border-radius: 3px;
|
border: 1px solid #0064ff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
