<template>
|
<div class="policy_add">
|
<v-header :title="(add ? '添加' : '编辑') + title"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">标题：</p>
|
<article>
|
<el-input size="small" v-model="os.title" maxlength="50" placeholder="请输入标题"></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">地址类型：</p>
|
<article class="fl-al">
|
<el-radio v-model="os.jumpType" :label="1">跳转链接</el-radio>
|
<el-radio v-model="os.jumpType" :label="2">内容</el-radio>
|
</article>
|
</section>
|
<section class="sec" v-if="os.jumpType === 1">
|
<p class="label">跳转地址：</p>
|
<article>
|
<el-input placeholder="请输入" size="small" v-model="os.jumpUrl"></el-input>
|
</article>
|
</section>
|
<!---->
|
<!-- <section class="sec">
|
<p class="label">分类：</p>
|
<article style="display: flex; align-items: center">
|
<el-radio-group v-model="os.dynType">
|
<el-radio :label="1">党建动态</el-radio>
|
<el-radio :label="2">党员帮扶</el-radio>
|
<el-radio :label="3">党员示范</el-radio>
|
</el-radio-group>
|
</article>
|
</section> -->
|
<section class="sec" v-if="checked1">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="time"
|
@change="changeTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">封面：</p>
|
<article>
|
<div class="image-box" v-if="os.cover != null && os.cover != ''">
|
<img class="image" :src="os.cover" alt />
|
<img @click="imgclear" class="clear-icon" src="static/image/clear.png" alt />
|
</div>
|
<div class="avatar" v-else>
|
<v-upload :boxWidth="800" :boxHeight="400" :width="650" :height="285" @path="onPath"></v-upload>
|
<!-- :pic="os.cover"-->
|
</div>
|
</article>
|
</section>
|
<!---->
|
<template v-if="os.cover != null && os.cover != ''">
|
<section class="sec">
|
<p class="label"></p>
|
<article
|
style="
|
display: flex;
|
align-items: center;
|
max-width: 700px !important;
|
"
|
>
|
<el-radio-group v-model="os.coverMode">
|
<el-radio :label="2">大图展示</el-radio>
|
</el-radio-group>
|
<div class="radio-text">（若选择大图展示，小程序查看时则在标题下方展示封面大图）</div>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label"></p>
|
<article
|
style="
|
display: flex;
|
align-items: center;
|
max-width: 700px !important;
|
"
|
>
|
<el-radio-group v-model="os.coverMode">
|
<el-radio :label="1">小图展示</el-radio>
|
</el-radio-group>
|
<div class="radio-text">（若选择小图展示，小程序查看时则在标题右侧展示封面小图）</div>
|
</article>
|
</section>
|
</template>
|
|
<!---->
|
<section class="sec" v-if="os.jumpType == 2">
|
<p class="label">内容：</p>
|
<article></article>
|
</section>
|
</div>
|
<!-- 富文本编辑 -->
|
<div class="edit" v-if="os.jumpType == 2">
|
<editor-bar v-model="content" :isClear="isClear" @change="change"></editor-bar>
|
</div>
|
<!-- 按钮 -->
|
<div class="btns">
|
<!-- <el-button
|
size="small"
|
type="primary"
|
@click="send(2)"
|
>保存并发布</el-button>-->
|
<el-button size="small" type="primary" @click="send(1)">
|
{{
|
checked1 ? "定时发布" : "立即发布"
|
}}
|
</el-button>
|
<el-checkbox v-model="checked1">定时发布</el-checkbox>
|
<el-button size="small" @click="close(true)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import vE from "com/editor/editor";
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import vUpload from "com/upload/upload";
|
export default {
|
props: {
|
type: { type: String, default: "2" }, // 1动态 2政策文件
|
add: { type: Boolean, default: false }, // 添加 编辑
|
title: { type: String, default: "活动" },
|
aid: { type: [Number, String], default: 0 },
|
},
|
components: { vUpload, EditorBar },
|
data() {
|
return {
|
checked1: false,
|
os: {
|
dynType: 1,
|
coverMode: "",
|
communityId: 0,
|
content: "",
|
cover: "",
|
createAt: "",
|
createBy: 0,
|
createByName: "",
|
id: 0,
|
pageNum: 0,
|
pageSize: 0,
|
publishAt: "",
|
publishAtBegin: "",
|
publishAtEnd: "",
|
readingVolume: 0,
|
status: 0,
|
title: "",
|
type: 0,
|
jumpUrl: "",
|
jumpType: 2,
|
},
|
time: "",
|
content: "",
|
upload: null,
|
isClear: false,
|
detail: "",
|
};
|
},
|
watch: {
|
aid(n) {
|
if (+n > 0 && !this.add) {
|
this.getDetail(n);
|
}
|
},
|
},
|
methods: {
|
//编辑富文本
|
change(val) {
|
this.os.content = val;
|
},
|
|
imgclear() {
|
//删除图片
|
this.os.cover = null;
|
},
|
// 获取详情
|
getDetail(id) {
|
this.$api.get("communitypartybuilding/infodynamic", { id }, (e) => {
|
this.content = e.content;
|
this.time = e.publishAt;
|
this.os = demo.copy(e);
|
this.checked1 = e.status == 2 ? false : true;
|
});
|
},
|
// 选择时间
|
changeTime(v) {
|
this.os.publishAt = v;
|
},
|
// 初始化
|
setData() {
|
this.os.type = this.type;
|
},
|
// 上传封面
|
onPath(v) {
|
this.os.cover = v;
|
},
|
// 重置/取消
|
close(f) {
|
for (let i in this.os) {
|
this.os[i] = "";
|
}
|
this.content = "";
|
this.time = "";
|
this.setData();
|
if (f) {
|
this.$router.go(-1);
|
}
|
},
|
// 提交
|
send(v) {
|
// status 1 待发布 2 已发布
|
if (!this.os.title) {
|
demo.toast("请输入标题");
|
return 0;
|
}
|
if (this.os.dynType === "") {
|
demo.toast("请选择分类");
|
return 0;
|
}
|
if (!this.os.publishAt && this.checked1) {
|
demo.toast("请选择发布时间");
|
return 0;
|
}
|
// if (!this.os.cover && this.os.coverMode !== "") {
|
// demo.toast("请上传封面");
|
// return 0;
|
// }
|
if (!this.os.content && this.os.jumpType == 2) {
|
demo.toast("请输入内容");
|
return 0;
|
}
|
if (!this.os.jumpUrl && this.os.jumpType == 1) {
|
demo.toast("请输入链接");
|
return 0;
|
}
|
if (!this.checked1) {
|
this.os.publishAt = demo.timeout("", "alls", "-");
|
}
|
// if (new Date(this.os.publishAt).getTime() < Date.now()) {
|
// demo.toast("发布时间不能小于当前时间");
|
// return 0;
|
// }
|
this.os.status = this.checked1 ? 1 : 2;
|
this.os.content = this.os.content.replace(/"/g, "'");
|
let vr = demo.copy(this.os);
|
let url = this.add ? "adddynamic" : "updatedynamic"; // 编辑
|
let method = this.add ? "post" : "put";
|
this.$api[method]("communitypartybuilding/" + url, vr, (e) => {
|
demo.toast((this.add ? "添加" : "编辑") + "成功");
|
this.close();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
},
|
// 编辑器文本
|
onMessage(v) {
|
// this.os.content = v.html;
|
// console.log(this.os.content)
|
},
|
},
|
mounted() {
|
this.setData();
|
},
|
};
|
</script>
|
<style lang="less">
|
.policy_add {
|
.el-date-editor.el-input,
|
.el-date-editor.el-input__inner {
|
width: 100% !important;
|
}
|
}
|
</style>
|
<style lang='less' scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.policy_add {
|
overflow-y: auto;
|
.fm {
|
.sec {
|
article {
|
max-width: 300px;
|
}
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.v {
|
width: 1px;
|
height: 1px;
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
