<template>
|
<div class='activity_add'>
|
<v-header :title="(add?'添加':'编辑')+title"></v-header>
|
<div class="fm w_row clearfix">
|
<section class="w_col_12 sec">
|
<p
|
class="label"
|
data-require
|
>活动名称：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.name"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p
|
class="label"
|
data-require
|
>活动地点：</p>
|
<article>
|
<el-input
|
placeholder="请输入"
|
size="small"
|
v-model="os.address"
|
></el-input>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p
|
class="label"
|
data-require
|
>参与人数区间：</p>
|
<article>
|
<div>
|
<el-input-number
|
size="small"
|
v-model="min"
|
:controls="false"
|
@blur="nBlur"
|
@focus="start1"
|
:min="-1"
|
@change="onMin"
|
></el-input-number>
|
<b>~</b>
|
<el-input-number
|
size="small"
|
:controls="false"
|
@blur="nBlur"
|
@focus="end1"
|
v-model="max"
|
:min="-1"
|
@change="onMax"
|
></el-input-number>
|
</div>
|
<div class="number-title">
|
<span v-show="startnum1">结束报名时人数低于区间，活动将会自动停止</span>
|
<span v-show="endnum1">若不限制参与人数，则上限中填写-1</span>
|
</div>
|
</article>
|
<el-checkbox
|
class="up"
|
:value="max==-1"
|
v-model="minmax"
|
>无限</el-checkbox>
|
</section>
|
<section class="w_col_12 sec">
|
<p
|
class="label"
|
data-require
|
>报名截止时间：</p>
|
<article>
|
<!-- <el-date-picker-->
|
<!-- type="datetimerange"-->
|
<!-- range-separator="~"-->
|
<!-- start-placeholder="开始日期"-->
|
<!-- end-placeholder="结束日期"-->
|
<!-- size="small"-->
|
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
|
<!-- format="yyyy-MM-dd HH"-->
|
<!-- v-model="time"-->
|
<!-- @change="changeTime"-->
|
<!-- >-->
|
<!-- </el-date-picker>-->
|
<el-date-picker
|
size="small"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
v-model="os.enrollTimeEnd"
|
type="datetime"
|
placeholder="选择日期时间"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</article>
|
</section>
|
<section class="w_col_12 sec">
|
<p
|
class="label"
|
data-require
|
>活动时间：</p>
|
<article>
|
<el-date-picker
|
type="datetimerange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH"
|
v-model="start"
|
@change="changeStart"
|
:picker-options="pickerOptions2"
|
>
|
</el-date-picker>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p
|
class="label"
|
data-require
|
>活动封面：</p>
|
<article>
|
<div class="avatar">
|
<v-upload
|
:boxWidth="800"
|
:boxHeight="400"
|
:width="650"
|
:height="285"
|
@path="onUpload"
|
:pic="os.cover"
|
></v-upload>
|
</div>
|
</article>
|
</section>
|
<section class="w_col_24 sec">
|
<p
|
class="label"
|
data-require
|
>活动内容：</p>
|
<article></article>
|
</section>
|
</div>
|
<div class="edit">
|
<editor-bar v-model="content" :isClear="isClear" @change="change"></editor-bar>
|
</div>
|
<div class="btns">
|
<el-button
|
size="small"
|
type="primary"
|
@click="sub(2)"
|
>保存并发布</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
@click="sub(1)"
|
>保存</el-button>
|
<el-button
|
@click="back"
|
size="small"
|
>取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from 'com/wangEnduit/index' //富文本组件
|
import vUpload from "com/upload/upload";
|
import ImgCutter from "vue-img-cutter";
|
export default {
|
props: {
|
add: { type: Boolean, default: false }, // 添加 编辑
|
title: { type: String, default: "活动" },
|
detail: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
},
|
components: { EditorBar, vUpload, ImgCutter },
|
data() {
|
return {
|
startnum1: false,
|
endnum1: false,
|
os: {
|
name: "",
|
participationLowestNum: "",
|
participationNum: "",
|
enrollTimeBegin: "",
|
enrollTimeEnd: "",
|
activityTimeBegin: "",
|
activityTimeEnd: "",
|
address: "",
|
cover: "",
|
richText: "",
|
status: "",
|
},
|
time: ["", ""],
|
start: ["", ""],
|
content: "",
|
min: 0,
|
max: 0,
|
minmax: false,
|
isClear: false,
|
detail:""
|
};
|
},
|
computed: {
|
pickerOptions() {
|
// let e = this.start;
|
// if (e.length && e.length === 2 && e[0]) {
|
// let s = new Date(e[0].replace(/-/g, "/")).getTime();
|
// let end = new Date(e[1].replace(/-/g, "/")).getTime();
|
// return {
|
// disabledDate(time) {
|
// return !(s <= time.getTime() && time.getTime() <= end);
|
// },
|
// };
|
// }
|
return {
|
disabledDate(time) {
|
let date = new Date(new Date().toLocaleDateString()).getTime()
|
return time.getTime() < date
|
// return time.getTime() < Date.now();
|
},
|
};
|
},
|
pickerOptions2() {
|
let e = this.os.enrollTimeEnd;
|
let end = 0;
|
if (e) {
|
end = new Date(e.replace(/-/g, "/")).getTime();
|
}
|
return {
|
disabledDate(time) {
|
let date = new Date(new Date().toLocaleDateString()).getTime()
|
return time.getTime() < date
|
// let tm = time.getTime();
|
// if (end > 0) {
|
// if (tm <= Date.now()) return !0;
|
// if (end > tm) return !0;
|
// return !1;
|
// }
|
// return tm < Date.now();
|
},
|
};
|
},
|
},
|
watch: {
|
detail: {
|
handler(n) {
|
this.setDetail(n);
|
},
|
deep: true,
|
},
|
minmax(n) {
|
this.max = n ? -1 : 0;
|
},
|
},
|
methods: {
|
back() {
|
//取消 返回上一页
|
this.$router.back();
|
},
|
start1() {
|
this.startnum1 = true;
|
},
|
end1() {
|
this.endnum1 = true;
|
},
|
nBlur() {
|
this.endnum1 = false;
|
this.startnum1 = false;
|
},
|
onMin(v) {
|
console.log(v)
|
this.os.participationLowestNum = v;
|
},
|
onMax(v) {
|
this.os.participationNum = v;
|
this.minmax = +v === -1;
|
},
|
//编辑富文本
|
change(val) {
|
this.os.richText = val
|
},
|
// 完成上传赋值
|
onUpload(v) {
|
this.os.cover = v;
|
},
|
// 活动时间：
|
changeStart(v) {
|
if (v && v.length && v[0] && v[1]) {
|
this.os.activityTimeBegin = v[0];
|
this.os.activityTimeEnd = v[1];
|
}
|
},
|
// 报名时间
|
changeTime(v) {
|
if (v && v.length && v[0] && v[1]) {
|
this.os.enrollTimeBegin = v[0];
|
this.os.enrollTimeEnd = v[1];
|
}
|
},
|
// 保存发布
|
sub(v) {
|
let o = demo.copy(this.os);
|
o.status = v;
|
let x = this.$js.validate.activeAdd(o);
|
if (!x.code) {
|
demo.toast(x.err);
|
return 0;
|
}
|
let url = "updateactivity";
|
let method = "put";
|
if (this.add) {
|
url = "addactivity";
|
method = "post";
|
if (+v === 2) {
|
x.data.releaseTime = demo.timeout("", "alls", "-");
|
}
|
}
|
if (this.minmax) {
|
x.data.participationNum = -1;
|
}
|
x.data.enrollTimeBegin = x.data.activityTimeBegin;
|
this.$api[method]("communitypartybuilding/" + url, x.data, (e) => {
|
demo.toast((this.add ? "保存" : "编辑") + "成功");
|
this.reset();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
},
|
reset() {
|
this.content = "";
|
this.min = this.max = 0;
|
this.time = ["", ""];
|
this.start = ["", ""];
|
for (let j in this.os) {
|
this.os[j] = "";
|
}
|
},
|
setDetail(v) {
|
if (v.id) {
|
this.os.participationLowestNum = this.min = +(
|
v.participationLowestNum || 0
|
);
|
this.os.participationNum = this.max = +(v.participationNum || 0);
|
this.os.name = v.name;
|
this.content = this.os.richText = v.richText;
|
this.os.address = v.address;
|
this.os.enrollTimeBegin = v.enrollTimeBegin;
|
this.os.enrollTimeEnd = v.enrollTimeEnd;
|
this.os.activityTimeBegin = v.activityTimeBegin;
|
this.os.activityTimeEnd = v.activityTimeEnd;
|
this.os.cover = v.cover;
|
this.os.status = v.status;
|
this.start = [v.activityTimeBegin || "", v.activityTimeEnd || ""];
|
this.time = [v.enrollTimeBegin || "", v.enrollTimeEnd || ""];
|
this.os.id = v.id;
|
}
|
},
|
},
|
mounted() {
|
this.onMin(this.min);
|
this.onMax(this.max);
|
this.setDetail(this.detail);
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.number-title {
|
height: 10px;
|
font-size: 14px;
|
padding-top: 10px;
|
color: #a5a8af;
|
}
|
.activity_add {
|
overflow-y: auto;
|
.w_row {
|
padding-left: 5px;
|
}
|
.edit {
|
margin-bottom: 10px;
|
padding: 0 40px;
|
}
|
.sec:last-child {
|
margin-bottom: 0;
|
}
|
.sec {
|
article {
|
max-width: 300px;
|
}
|
}
|
}
|
</style>
|
