<template>
|
<div class="status_add">
|
<v-header :title="add ? '新增' : '编辑'"></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">标题：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.title"
|
maxlength="50"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec" v-if="categoryId != 4">
|
<p class="label">地址类型：</p>
|
<article>
|
<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
|
class="article-maxwidth"
|
style="display: flex; align-items: center"
|
>
|
<el-radio-group v-model="os.type">
|
<el-radio
|
:label="text.id"
|
v-for="(text, index) in queryDynamiclist"
|
:key="index"
|
>{{ text.name }}</el-radio
|
>
|
<!-- <el-radio :label="2">社区动态</el-radio> -->
|
</el-radio-group>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">广告设置：</p>
|
<article>
|
<div
|
class="image-box"
|
v-if="os.imageUrl != null && os.imageUrl != ''"
|
>
|
<img class="image" :src="os.imageUrl" alt />
|
<img
|
@click="imgclear2"
|
class="clear-icon"
|
src="static/image/clear.png"
|
alt
|
/>
|
</div>
|
<div class="avatar" v-else>
|
<v-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="categoryId == 4 ? 670 : 650"
|
:height="categoryId == 4 ? 348 : 285"
|
@path="onPath2"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
<section class="sec fl-al">
|
<p class="label">首页顶部：</p>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
v-model="os.onTop"
|
></el-checkbox>
|
</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-u
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="categoryId == 4 ? 670 : 650"
|
:height="categoryId == 4 ? 348 : 285"
|
@path="onPath"
|
></v-u>
|
</div>
|
</article>
|
</section>
|
<div v-if="categoryId != 4">
|
<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>
|
</div>
|
|
<!---->
|
<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>
|
<!-- <editor-bar1></editor-bar1> -->
|
<!-- <quill-editor
|
v-model="content"
|
class="myQuillEditor"
|
ref="myQuillEditor"
|
:options="editorOption"
|
@blur="onEditorBlur($event)"
|
@focus="onEditorFocus($event)"
|
@change="change($event)"
|
></quill-editor> -->
|
</div>
|
<div class="zd">
|
<el-checkbox v-model="checked">设为置顶</el-checkbox>
|
</div>
|
<section class="sec" v-if="categoryId == 4">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
:picker-options="expireTimeOption2"
|
type="date"
|
size="small"
|
placeholder="选择日期"
|
v-model="os.releaseTime"
|
value-format="yyyy-MM-dd"
|
format="yyyy-MM-dd"
|
></el-date-picker>
|
</article>
|
</section>
|
<section class="sec" v-if="checked1">
|
<p class="label">发布时间：</p>
|
<article>
|
<el-date-picker
|
:picker-options="expireTimeOption"
|
type="datetime"
|
size="small"
|
placeholder="选择日期时间"
|
v-model="os.publishAt"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</article>
|
</section>
|
<div class="btn">
|
<el-button type="primary" size="small" @click="sub">
|
{{ checked1 ? "定时发布" : "立即发布" }}
|
</el-button>
|
<el-checkbox v-if="categoryId != 4" v-model="checked1"
|
>定时发布</el-checkbox
|
>
|
<el-button size="small" @click="$router.go(-1)">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import EditorBar1 from "com/editor/editor"; //富文本组件
|
import QuillEditor from "com/editor/quilleditor"; //富文本组件
|
|
import vU from "com/upload/upload";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: "" },
|
categoryIdEdit: { type: [String, Number], default: "" }
|
},
|
components: { EditorBar, vU, EditorBar1, QuillEditor },
|
data() {
|
return {
|
checked: false,
|
checked1: false, //定时
|
isClear: false,
|
detail: "",
|
categoryId: "",
|
os: {
|
coverMode: "",
|
type: "",
|
title: "",
|
publishAt: "",
|
content: "",
|
isTopping: "",
|
cover: "",
|
jumpUrl: "",
|
imageUrl: "",
|
jumpType: 2,
|
releaseTime: "",
|
onTop: 0
|
},
|
content: "",
|
queryDynamiclist: {},
|
expireTimeOption: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate() - 1));
|
return time < nowData;
|
}
|
},
|
expireTimeOption2: {
|
disabledDate(time) {
|
let nowData = new Date();
|
nowData = new Date(nowData.setDate(nowData.getDate()));
|
return time > nowData;
|
}
|
}
|
};
|
},
|
watch: {
|
aid() {
|
this.getDetail();
|
},
|
categoryIdEdit(val) {
|
this.categoryId = val;
|
}
|
},
|
methods: {
|
imgclear() {
|
//删除图片
|
this.os.cover = "";
|
},
|
imgclear2() {
|
//删除图片
|
this.os.imageUrl = "";
|
},
|
onPath(v) {
|
this.os.cover = v;
|
},
|
onPath2(v) {
|
this.os.imageUrl = v;
|
},
|
sub() {
|
let o = demo.copy(this.os);
|
if (!o.title) {
|
demo.toast("请输入标题");
|
return 0;
|
}
|
if (!o.publishAt && this.checked1) {
|
demo.toast("请选择时间");
|
return 0;
|
}
|
// if (this.os.cover === "" && this.os.coverMode !== "") {
|
// demo.toast("请上传封面图");
|
// return 0;
|
// }
|
if (!o.content && o.jumpType == 2) {
|
demo.toast("请输入内容");
|
return 0;
|
}
|
if (!o.releaseTime && this.categoryId == 4) {
|
demo.toast("请选择发布时间");
|
return 0;
|
}
|
if (!o.jumpUrl && o.jumpType == 1) {
|
demo.toast("请输入链接");
|
return 0;
|
}
|
// if (this.add && new Date(o.publishAt).getTime() < Date.now()) {
|
// demo.toast("发布时间不能小于当前时间");
|
// return 0;
|
// }
|
o.isTopping = this.checked * 1;
|
// o.createAt = demo.timeout("", "alls", "/");
|
let method = "post";
|
if (!this.add) {
|
o.id = this.aid;
|
method = "put";
|
}
|
o.status = this.checked1 ? 0 : 1;
|
o.category = this.categoryId;
|
this.$api[method]("communityactivity/dynamic", o, e => {
|
demo.toast((this.add ? "发布" : "编辑") + "成功");
|
this.reset();
|
this.$router.go(-1);
|
});
|
},
|
reset() {
|
for (let k in this.os) {
|
this.os[k] = "";
|
}
|
this.content = "";
|
this.checked = false;
|
},
|
// 失去焦点事件
|
onEditorBlur(editor) {
|
// console.log("editor blur!", editor);
|
},
|
// 获得焦点事件
|
onEditorFocus(editor) {
|
// console.log("editor focus!", editor);
|
},
|
//编辑富文本
|
change({ quill, html, text }) {
|
this.os.content = html;
|
},
|
getDetail() {
|
if (this.aid) {
|
this.$api.get(
|
"communityactivity/detaildynamic",
|
{ id: this.aid },
|
e => {
|
this.os.title = e.title;
|
this.os.coverMode = e.coverMode;
|
this.os.type = e.type;
|
this.os.isTopping = e.isTopping;
|
this.checked = !!e.isTopping;
|
this.os.publishAt = e.publishAt;
|
this.content = this.os.content = e.content;
|
this.os.cover = e.cover;
|
this.os.jumpUrl = e.jumpUrl;
|
this.os.jumpType = e.jumpType;
|
this.checked1 = e.status == 1 ? false : true;
|
// this.checked1 =
|
// Date.now() < (e.publishAt ? new Date(e.publishAt).getTime() : 0);
|
// this.checked1 =
|
}
|
);
|
}
|
},
|
//分类动态列表
|
queryDynamic() {
|
let param = { category: this.categoryId };
|
if (this.categoryId == "2") {
|
param["area"] = 2;
|
}
|
this.$api.post("dyn/type/list", param, data => {
|
this.queryDynamiclist = data;
|
console.log(this.queryDynamiclist);
|
});
|
}
|
},
|
mounted() {
|
this.categoryId = this.$route.query.id;
|
this.getDetail();
|
this.queryDynamic();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.image-box {
|
position: relative;
|
/*overflow: hidden;*/
|
max-width: 300px;
|
}
|
.image-box2 {
|
position: relative;
|
/*overflow: hidden;*/
|
width: 300px;
|
}
|
.clear-icon {
|
cursor: pointer;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
width: 30px;
|
height: 30px;
|
}
|
.image {
|
width: 100%;
|
object-fit: cover;
|
/*width: 300px;*/
|
}
|
.status_add {
|
overflow-y: auto;
|
.edit,
|
.zd,
|
.btn {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
article {
|
max-width: 300px;
|
}
|
.article-maxwidth {
|
.el-radio {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.radio-text {
|
width: 100%;
|
font-size: 10px;
|
color: #7f7f7f;
|
}
|
</style>
|
