<template>
|
<div class="act_add">
|
<v-header :title="(add ? '新增' : '编辑') + '物业宣传'"></v-header>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="宣传标题:" prop="title">
|
<el-input
|
class="input-width"
|
placeholder="请输入宣传标题"
|
size="small"
|
maxlength="30"
|
v-model.trim="form.title"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="宣传类型:" prop="publicityType">
|
<div class="fl-fw">
|
<div
|
class="fl-cen class-label-box"
|
:class="[item.value == checkValue ? 'check-box ' : '']"
|
v-for="(item, index) in classList"
|
:key="index"
|
@click="checkClass(item.value, item.img)"
|
>{{ item.label }}</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="其他类型:" v-if="form.publicityType == 0">
|
<el-input
|
class="input-width"
|
maxlength="6"
|
placeholder="请输入其他类型"
|
size="small"
|
v-model.trim="form.other"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="宣传封面:" prop="cover">
|
<UpdateCover
|
:width="520"
|
:height="308"
|
:cover="form.cover"
|
@updateBackImg="updateBackImg"
|
@listCheck="listCheck"
|
/>
|
</el-form-item>
|
<el-form-item label="内容形式:" prop="contentType">
|
<div class="input-width">
|
<el-radio v-model="form.contentType" :label="1">文章链接</el-radio>
|
<el-radio v-model="form.contentType" :label="2">自定义内容</el-radio>
|
</div>
|
</el-form-item>
|
<el-form-item label="文章链接:" v-if="form.contentType == '1'" prop="articleUrl">
|
<el-input
|
class="input-width"
|
placeholder="请输入文章链接"
|
size="small"
|
v-model.trim="form.articleUrl"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="自定义内容:" v-if="form.contentType == '2'" prop="diyContent">
|
<editor-bar v-model="content" :isClear="isClear" @change="change"></editor-bar>
|
</el-form-item>
|
<el-form-item label>
|
<el-button size="small" type="primary" @click="send(1, 'form')">提交</el-button>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</el-form-item>
|
</el-form>
|
<el-dialog
|
title="选择封面"
|
:visible.sync="dialogVisible"
|
:before-close="handleClose"
|
append-to-body
|
width="54%"
|
>
|
<div class="fl-f">
|
<el-tabs
|
tab-position="left"
|
style="width: 125px"
|
v-model="tabsName"
|
@tab-click="tabCheckHandle"
|
>
|
<el-tab-pane label="上传"></el-tab-pane>
|
<el-tab-pane label="停水通知"></el-tab-pane>
|
<el-tab-pane label="停电通知"></el-tab-pane>
|
<el-tab-pane label="停气通知"></el-tab-pane>
|
<el-tab-pane label="物业公告"></el-tab-pane>
|
<el-tab-pane label="优秀业主"></el-tab-pane>
|
</el-tabs>
|
<div class="fl-fw" style="width: 100%">
|
<el-upload
|
v-if="tabsName == '0'"
|
class="mr-r-10"
|
action
|
:http-request="uploadFileHandle"
|
:before-upload="beforeAvatarUploadImg"
|
:show-file-list="false"
|
>
|
<div class="update-img">
|
<i class="el-icon-plus fz-15"></i>
|
</div>
|
</el-upload>
|
<div class="img-list-item mr-r-10" v-for="(item, index) in checkImgList" :key="index">
|
<img
|
v-if="item.type"
|
class="check-img"
|
src="../../../assets/image/check-img.png"
|
@click="checkImgHandle(index)"
|
/>
|
<img
|
v-else
|
class="check-img"
|
src="../../../assets/image/no-check.png"
|
@click="checkImgHandle(index)"
|
/>
|
<el-image
|
class="img-shwo-item"
|
:style="{
|
border: item.type ? '1px solid red' : '1px solid #fff',
|
}"
|
:src="item.uploadPicture"
|
@click="checkImgHandle(index)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="storeListConfirm">确 定</el-button>
|
</div>
|
<!-- 裁剪图片 -->
|
<el-dialog
|
title="图片裁剪"
|
:visible.sync="dialogVisibleCover"
|
:before-close="handleCloseCover"
|
:close-on-click-modal="false"
|
append-to-body
|
>
|
<div class="cropper-content">
|
<div class="cropper" style="text-align: center">
|
<vueCropper
|
ref="cropper"
|
:img="option.img"
|
:outputSize="option.size"
|
:outputType="option.outputType"
|
:info="true"
|
:full="option.full"
|
:canMove="option.canMove"
|
:canMoveBox="option.canMoveBox"
|
:autoCropWidth="500"
|
:autoCropHeight="296"
|
:original="option.original"
|
:autoCrop="option.autoCrop"
|
:fixedBox="option.fixedBox"
|
:fixed="option.fixed"
|
:fixedNumber="[500, 296]"
|
></vueCropper>
|
</div>
|
</div>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="route.back()">取 消</el-button>
|
<el-button type="primary" :loading="btnLoading" @click="finishCofirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import UpdateCover from "../../../components/upload/updateCover.vue";
|
import { propertyType, objCopyPro } from "../../../utils/common";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: 0 },
|
},
|
components: { EditorBar, UpdateCover },
|
data() {
|
return {
|
tabsName: "0",
|
btnLoading: false,
|
form: {
|
title: "",
|
publicityType: 1, // 0.其他 1.停水通知 2.停电通知 3.停气通知 4.物业公告 5.优秀业主
|
contentType: 1,
|
cover: "",
|
diyContent: "",
|
other: "",
|
articleUrl: "",
|
},
|
checkValue: '1',
|
rules: {
|
title: [
|
{
|
required: true,
|
message: "请输入宣传标题",
|
trigger: "blur",
|
},
|
],
|
other: [
|
{
|
required: true,
|
message: "请输入其他类型",
|
trigger: "blur",
|
},
|
],
|
articleUrl: [
|
{
|
required: true,
|
message: "请输入文章链接",
|
trigger: "blur",
|
},
|
],
|
diyContent: [
|
{
|
required: true,
|
message: "请输入自定义内容",
|
trigger: "blur",
|
},
|
],
|
publicityType: [
|
{
|
required: true,
|
message: "请选择宣传类型",
|
trigger: "change",
|
},
|
],
|
cover: [
|
{
|
required: true,
|
message: "请选择宣传封面",
|
trigger: "change",
|
},
|
],
|
contentType: [
|
{
|
required: true,
|
message: "请选择内容形式",
|
trigger: "change",
|
},
|
],
|
},
|
content: "",
|
isClear: false,
|
dialogVisible: false,
|
dialogVisibleCover: false,
|
option: {
|
img: "",
|
outputSize: 1, // 剪切后的图片质量（0.1-1）
|
full: true, // 输出原图比例截图 props名full
|
outputType: "png",
|
canMove: false,
|
original: false,
|
canMoveBox: true,
|
autoCrop: true,
|
fixedBox: false,
|
fixed: true,
|
maxImgSize: 3000, // 图片最大像素
|
}, // 截图配置
|
checkImgList: [],
|
listCheckImg: "",
|
classList: [],
|
};
|
},
|
methods: {
|
checkClass(val, img) {
|
this.form.publicityType = val;
|
this.form.cover = img;
|
this.checkValue = val;
|
this.$refs["ruleForm"].validateField("cover");
|
},
|
checkImgHandle(i) {
|
this.checkImgList[i].type = !this.checkImgList[i].type;
|
this.checkImgList.forEach((im, ix) => {
|
if (ix !== i) {
|
im.type = false;
|
}
|
});
|
if (this.checkImgList[i].type) {
|
this.listCheckImg = this.checkImgList[i].uploadPicture;
|
} else {
|
this.listCheckImg = "";
|
}
|
},
|
storeListConfirm() {
|
this.form.cover = this.listCheckImg;
|
this.tabsName = "0";
|
this.dialogVisible = false;
|
this.$refs["ruleForm"].validateField("cover");
|
},
|
tabCheckHandle() {
|
this.checkImgList = [];
|
switch (this.tabsName) {
|
case "0": {
|
this.listCheck();
|
break;
|
}
|
case "1": {
|
this.listSysCheck(1);
|
break;
|
}
|
case "2": {
|
this.listSysCheck(2);
|
break;
|
}
|
case "3": {
|
this.listSysCheck(3);
|
break;
|
}
|
case "4": {
|
this.listSysCheck(4);
|
break;
|
}
|
case "5": {
|
this.listSysCheck(5);
|
break;
|
}
|
case "6": {
|
this.listSysCheck(6);
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
dataURLtoFile(dataurl, filename) {
|
var arr = dataurl.split(","),
|
mime = arr[0].match(/:(.*?);/)[1],
|
bstr = atob(arr[1]),
|
n = bstr.length,
|
u8arr = new Uint8Array(n);
|
while (n--) {
|
u8arr[n] = bstr.charCodeAt(n);
|
}
|
return new File([u8arr], filename, { type: mime });
|
},
|
finishCofirm() {
|
this.$refs.cropper.getCropData(async (obj) => {
|
const timer = new Date().getTime();
|
const urldata = this.dataURLtoFile(obj, timer + ".png");
|
let formData = new FormData();
|
formData.append("file", urldata);
|
this.btnLoading = true;
|
await this.$api.post(
|
"communitypartybuilding/uploadimage",
|
formData,
|
(e) => {
|
this.btnLoading = false;
|
this.form.cover = e;
|
this.dialogVisible = false;
|
this.dialogVisibleCover = false;
|
}
|
);
|
});
|
},
|
updateBackImg(val) {
|
this.form.cover = val;
|
this.$refs["ruleForm"].validateField("cover");
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.tabsName = "0";
|
},
|
handleCloseCover() {
|
this.dialogVisibleCover = false;
|
},
|
uploadFileHandle(f) {
|
this.dialogVisibleCover = true;
|
this.option.img = URL.createObjectURL(f.file);
|
},
|
beforeAvatarUploadImg(file) {
|
const imgType = ["image/png", "image/jpeg", "video/mp4"];
|
if (imgType.indexOf(file.type) === -1) {
|
showToast("只能上传 png jpeg jpg 格式图片或者视频文件!", "error");
|
return false;
|
} else {
|
return true;
|
}
|
},
|
listCheck() {
|
this.dialogVisible = true;
|
this.$api.get("property/publicity/picture/library", { publicityType: this.tabsName }, (data) => {
|
let arr = []
|
data.presetPictures.forEach((item) => {
|
arr.push({
|
type: false,
|
uploadPicture: item
|
})
|
});
|
this.checkImgList = arr;
|
});
|
},
|
listSysCheck(t) {
|
this.$api.get(
|
"property/publicity/picture/library",
|
{ publicityType: t },
|
(data) => {
|
let arr = []
|
data.presetPictures.forEach((item) => {
|
arr.push({
|
type: false,
|
uploadPicture: item
|
})
|
});
|
this.checkImgList = arr;
|
}
|
);
|
},
|
// 获取数据-编辑
|
getData(id) {
|
this.$api.get("property/publicity/get", { id: id }, (e) => {
|
this.form = objCopyPro(this.form, e);
|
this.checkValue = e.publicityType;
|
this.content = e.diyContent;
|
this.content = e.diyContent;
|
});
|
},
|
//编辑富文本
|
change(val) {
|
this.form.diyContent = val;
|
this.$refs["ruleForm"].validateField("diyContent");
|
},
|
// 保存
|
send(v, f) {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
// this.form.publicityType = parseInt(this.form.publicityType)
|
if (!this.$route.query.id) {
|
this.$api.post("property/publicity/add", this.form, (e) => {
|
demo.toast("新增成功");
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
} else {
|
this.$api.post("property/publicity/update", this.form, (e) => {
|
demo.toast("编辑成功");
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
}
|
});
|
},
|
},
|
mounted() {
|
this.classList = propertyType();
|
this.form.cover = this.classList[0].img
|
if (this.$route.query.id) {
|
this.getData(this.$route.query.id);
|
} else {
|
this.form.cover = this.classList[0].img
|
}
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.act_add {
|
overflow-y: auto;
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
.up {
|
margin-top: 8px;
|
}
|
.sec {
|
.label {
|
width: 120px;
|
}
|
article {
|
width: calc(~"100% - 120px");
|
max-width: 300px;
|
&.more {
|
max-width: 100%;
|
}
|
.label {
|
text-align: left;
|
}
|
.item {
|
display: flex;
|
flex-wrap: wrap;
|
article {
|
margin: 0 10px 10px 0;
|
width: 140px;
|
box-sizing: border-box;
|
padding: 5px 20px 5px 0;
|
text-align: center;
|
.avatar {
|
margin: 0 auto 5px;
|
}
|
.el-input {
|
margin-bottom: 5px;
|
}
|
}
|
.btn {
|
display: flex;
|
justify-content: space-between;
|
width: 120px;
|
.add,
|
.del {
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
font-size: 28px;
|
font-weight: 700;
|
display: block;
|
border-radius: 50%;
|
border: 1px solid #ccc;
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
}
|
.update-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 260px;
|
height: 154px;
|
border: 1px dashed #999;
|
}
|
.fz-15 {
|
font-size: 30px;
|
}
|
.img-shwo-item {
|
cursor: pointer;
|
width: 260px;
|
height: 154px;
|
}
|
.img-list-item {
|
margin-bottom: 10px;
|
width: 260px;
|
height: 154px;
|
position: relative;
|
border: 1px dashed #fff;
|
}
|
.check-img {
|
cursor: pointer;
|
z-index: 999;
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 20px;
|
height: 20px;
|
}
|
.fl-f {
|
display: flex;
|
}
|
.fl-fw {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.mr-r-10 {
|
margin-right: 10px;
|
}
|
.cropper-content .cropper {
|
width: auto;
|
height: 500px !important;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.el-dialog {
|
width: 800px !important;
|
}
|
.input-width {
|
width: 300px;
|
}
|
.input-width2 {
|
width: 200px;
|
}
|
.class-label-box {
|
margin-right: 10px;
|
cursor: pointer;
|
padding: 12px;
|
border: 1px solid #333;
|
line-height: 1 !important;
|
}
|
.check-box {
|
border: 1px solid rgb(23, 116, 192) !important;
|
color: rgb(23, 116, 192);
|
}
|
</style>
|
