<template>
|
<div class="act_add">
|
<v-header :title="(add ? '新增' : '编辑') + '活动'"></v-header>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="form"
|
label-width="160px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="活动名称:" prop="activityName">
|
<el-input
|
class="input-width"
|
placeholder="请输入活动名称"
|
size="small"
|
v-model.trim="form.activityName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="活动地点:" prop="activityAddr" required>
|
<el-input
|
class="input-width"
|
placeholder="请选择活动地点"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="3"
|
v-model="form.activityAddr"
|
maxlength="50"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="签到范围（以内）:" required>
|
<el-form-item prop="range">
|
<el-input
|
class="input-width2"
|
placeholder="请输入大于0的数字"
|
size="small"
|
v-model.trim="form.range"
|
:disabled="isrange == 1"
|
></el-input>
|
<span class="mr-l-10">km</span>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
class="mr-l-10"
|
v-model="isrange"
|
@change="israngeC"
|
>无限制</el-checkbox
|
>
|
</el-form-item>
|
<span class="mr-l-10 fc-999">若设置签到范围将限制用户签到距离</span>
|
</el-form-item>
|
<el-form-item label="报名时间:" required>
|
<el-form-item prop="signtime">
|
<el-date-picker
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
v-model="signtime"
|
class="input-width"
|
@focus="handleCloseMap"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-form-item>
|
<el-form-item label="活动时间:" required>
|
<el-form-item prop="activetime">
|
<el-date-picker
|
class="input-width"
|
type="daterange"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="small"
|
v-model="activetime"
|
@focus="handleCloseMap"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
format="yyyy-MM-dd HH:mm:ss"
|
:default-time="['00:00:00', '23:59:59']"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<span class="fc-999 mr-l-10"
|
>活动时长x小时，超过30分钟不足1小时的按1小时计算</span
|
>
|
</el-form-item>
|
<el-form-item label="活动类型:" required>
|
<el-radio-group v-model="form.activityType">
|
<el-radio
|
:label="type.label"
|
v-for="type in radioList"
|
:key="type.value"
|
:value="type.label"
|
>{{ type.label }}</el-radio
|
>
|
</el-radio-group>
|
<el-input
|
v-model="inputType"
|
class="input-width2"
|
placeholder="请输入内容"
|
></el-input>
|
<el-button type="primary" size="small" @click="addtype()"
|
>添加</el-button
|
>
|
</el-form-item>
|
<el-form-item label="居民参与人群:" prop="aattendPeople">
|
<el-select
|
v-model="aattendPeople"
|
multiple
|
class="input-width"
|
placeholder="请选择参与人群"
|
size="small"
|
@change="tagsHandle"
|
>
|
<el-option
|
v-for="item in tagsList"
|
:key="item.value"
|
:label="item.label"
|
:disabled="aattendPeople.includes('全部')"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="居民参与上限人数:" required>
|
<el-form-item prop="participantMax">
|
<el-input
|
class="input-width2"
|
placeholder="请输入大于0的数字"
|
size="small"
|
:disabled="isparticipantMax == 1"
|
v-model.trim="form.participantMax"
|
></el-input>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
class="mr-l-10"
|
v-model="isparticipantMax"
|
@change="isparticipantMaxC"
|
>不限</el-checkbox
|
>
|
</el-form-item>
|
</el-form-item>
|
<!-- <el-form-item label="志愿者参与上限人数:" required>
|
<el-form-item prop="volunteerMax">
|
<el-input
|
class="input-width2"
|
placeholder="请输入大于0的数字"
|
size="small"
|
:disabled="isvolunteerMax == 1"
|
v-model.trim="form.volunteerMax"
|
></el-input>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
class="mr-l-10"
|
v-model="isvolunteerMax"
|
@change="isvolunteerMaxC"
|
>不限</el-checkbox
|
>
|
</el-form-item>
|
</el-form-item> -->
|
<el-form-item label="积分奖励:">
|
<el-radio v-model="form.haveIntegralReward" :label="1">有</el-radio>
|
<el-radio v-model="form.haveIntegralReward" :label="2">无</el-radio>
|
</el-form-item>
|
<template v-if="form.haveIntegralReward == 1">
|
<el-form-item label="积分奖励方式:">
|
<el-radio v-model="form.rewardWay" :label="1">按次奖励</el-radio>
|
<el-radio v-model="form.rewardWay" :label="2" disabled
|
>计时奖励</el-radio
|
>
|
<div class="fc-999" style="width: 500px; line-height: 1.5">
|
若有积分奖励则可以选择按次奖励还是计时奖励，按次奖励根据用户打卡次数进行奖励，计时奖励按用户打卡时长进行奖励，不足1小时的不发放奖励
|
</div>
|
</el-form-item>
|
<!-- <el-form-item label="居民每小时奖励积分:">
|
<el-input-number
|
class="input-width2"
|
v-model="form.activityName"
|
:min="1"
|
label=""
|
></el-input-number>
|
</el-form-item> -->
|
<el-form-item label="单次奖励积分:" prop="rewardIntegral">
|
<el-input-number
|
class="input-width2"
|
v-model="form.rewardIntegral"
|
:min="1"
|
label=""
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="参与奖励次数上限:" required>
|
<el-form-item prop="limit">
|
<el-input
|
class="input-width2"
|
placeholder="请输入大于0的数字"
|
size="small"
|
:disabled="islimit == 1"
|
v-model.trim="form.limit"
|
></el-input>
|
<el-checkbox
|
:true-label="1"
|
:false-label="0"
|
class="mr-l-10"
|
v-model="islimit"
|
@change="islimitClick"
|
>不限</el-checkbox
|
>
|
</el-form-item>
|
<div class="fc-999" style="width: 500px; line-height: 1.5">
|
签到1次视为参与1次，一个签到码同一个用户仅可签到一次，多次参与的用户可重置签到二维码让用户进行多次签到，
|
设置上限即用户签到次数上限，达到上限后用户无法继续参与。
|
</div>
|
</el-form-item>
|
</template>
|
<el-form-item label="报名后取消:">
|
<el-radio v-model="form.canCancel" :label="1">允许</el-radio>
|
<el-radio v-model="form.canCancel" :label="2">拒绝</el-radio>
|
</el-form-item>
|
<el-form-item label="取消活动扣除积分:" prop="cancelDeduct" required>
|
<el-input-number
|
class="input-width2"
|
v-model="form.cancelDeduct"
|
:min="1"
|
label=""
|
></el-input-number>
|
<div class="fc-999" style="width: 500px; line-height: 1.5">
|
即用户参与活动后取消活动将会扣除一定积分作为惩罚
|
</div>
|
</el-form-item>
|
<div class="fl-fw">
|
<el-form-item label="联系人姓名:">
|
<el-input
|
class="input-width"
|
placeholder="请输入联系人姓名"
|
size="small"
|
v-model.trim="form.contactName"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="联系人电话:">
|
<el-input
|
class="input-width"
|
placeholder="请输入联系人电话"
|
size="small"
|
v-model.trim.number="form.contactPhone"
|
maxlength="11"
|
></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="广告设置:">
|
<el-checkbox v-model="form.isTop" :true-label="1" :false-label="0"
|
>首页顶部</el-checkbox
|
>
|
</el-form-item>
|
<el-form-item label="活动封面:" required>
|
<UpdateCover
|
:width="520"
|
:height="308"
|
:cover="form.cover"
|
@updateBackImg="updateBackImg"
|
@listCheck="listCheck"
|
/>
|
</el-form-item>
|
<el-form-item label="是否跳转活动文章:">
|
<el-radio v-model="form.isArticle" :label="1">是</el-radio>
|
<el-radio v-model="form.isArticle" :label="0">否</el-radio>
|
</el-form-item>
|
<el-form-item label="活动文章链接:" required v-if="form.isArticle === 1">
|
<el-input
|
class="input-width-url"
|
placeholder="请输入活动文章链接"
|
size="small"
|
v-model.trim="form.jumpArticleUrl"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="活动详情:" required>
|
<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(2, 'form')"
|
v-if="add"
|
>保存并发布</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
@click="send(3, 'form')"
|
v-if="add"
|
>保存</el-button
|
>
|
<el-button
|
size="small"
|
type="primary"
|
@click="send(1, 'form')"
|
v-if="!add"
|
>保存编辑</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
|
class="fm"
|
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-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="handleCloseCover">取 消</el-button>
|
<el-button type="primary" :loading="btnLoading" @click="finishCofirm"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
</el-dialog>
|
<el-dialog
|
title="设置活动地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import EditorBar from "com/wangEnduit/index"; //富文本组件
|
import UpdateCover from "../../../components/upload/updateCover.vue";
|
import MapBox from "../../../components/map/map.vue";
|
import { PHONE } from "../../../utils/validation";
|
export default {
|
props: {
|
add: { type: Boolean, default: false },
|
aid: { type: [String, Number], default: 0 },
|
},
|
components: { EditorBar, UpdateCover, MapBox },
|
data() {
|
var range = (rule, value, callback) => {
|
if (!value && this.isrange !== 1) {
|
return callback(new Error("请输入签到范围"));
|
}
|
var regNumber = /^\+?[1-9][0-9]*$/;
|
if (regNumber.test(value) == false && this.isrange !== 1) {
|
return callback(new Error("请输入大于0的整数"));
|
} else {
|
callback();
|
}
|
};
|
var validatorlimit = (rule, value, callback) => {
|
if (!value && this.islimit !== 1) {
|
return callback(new Error("请输入参与奖励次数上限"));
|
}
|
var regNumber = /^\+?[1-9][0-9]*$/;
|
if (regNumber.test(value) == false && this.islimit !== 1) {
|
return callback(new Error("请输入大于0的整数"));
|
} else {
|
callback();
|
}
|
};
|
|
var validatoraattendPeople = (rule, value, callback) => {
|
if (!value && this.isparticipantMax !== 1) {
|
return callback(new Error("请输入居民参与上限人数"));
|
}
|
var regNumber = /^\+?[1-9][0-9]*$/;
|
if (regNumber.test(value) == false && this.isparticipantMax !== 1) {
|
return callback(new Error("请输入大于0的整数"));
|
} else {
|
callback();
|
}
|
};
|
|
var validatorvolunteerMax = (rule, value, callback) => {
|
if (!value && this.isvolunteerMax !== 1) {
|
return callback(new Error("请输入志愿者参与上限人数"));
|
}
|
var regNumber = /^\+?[1-9][0-9]*$/;
|
if (regNumber.test(value) == false && this.isvolunteerMax !== 1) {
|
return callback(new Error("请输入大于0的整数"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
tabsName: "0",
|
btnLoading: false,
|
win: true,
|
item: [],
|
inputNumber: [], //人数区间提示
|
startnum1: false,
|
endnum1: false,
|
startnum2: false,
|
endnum2: false,
|
leader: [], // 活动负责人
|
leaderId: "", // 活动负责人Id
|
form: {
|
activityName: "", // 活动名字
|
activityAddr: "", // 活动地址
|
prizeRemark: "", // 奖品备注
|
rewardDesc: "", // 奖品详情
|
sponsorId: "", // 负责人
|
sponsorName: "", // 负责人id
|
volunteerMin: 0, // 志愿者人数
|
volunteerMax: "", // 志愿者人数
|
participantMin: 0, // 参与人数
|
participantMax: "", // 参与人数
|
signUpBegin: "", // 报名时间
|
signUpEnd: "", // 报名时间
|
beginAt: "", // 活动时间
|
endAt: "", // 活动时间
|
cover: "", // 封面
|
content: "", // 活动内容
|
hasPrize: 0, // 是否有奖品
|
status: "", // 状态
|
aattendPeople: [], // 参与人群
|
isQrCode: 1, // 是否扫码签到
|
isTop: 0, // 是否顶部
|
contactName: "", // 联系人姓名
|
contactPhone: "", // 联系人电话
|
lat: 0,
|
lng: 0,
|
range: "", //签到范围
|
limit: "",
|
rewardIntegral: "",
|
haveIntegralReward: 1,
|
rewardWay: 1,
|
canCancel: 1,
|
cancelDeduct: "",
|
activityType: "",
|
isArticle: 1,
|
jumpArticleUrl: "",
|
},
|
radioList: [],
|
inputType: "",
|
isparticipantMax: "",
|
islimit: "",
|
isrange: "",
|
isvolunteerMax: "",
|
rules: {
|
activityName: [
|
{
|
required: true,
|
message: "请输入活动名称",
|
trigger: "blur",
|
},
|
],
|
aattendPeople: [
|
{
|
required: true,
|
message: "居民参与人群",
|
trigger: "change",
|
},
|
],
|
activityAddr: [
|
{
|
required: true,
|
message: "请输入活动地点",
|
trigger: "blur",
|
},
|
],
|
jumpArticleUrl: [
|
{
|
required: true,
|
message: "请输入活动文章链接",
|
trigger: "blur",
|
},
|
],
|
range: [
|
{
|
validator: range,
|
trigger: "blur",
|
},
|
],
|
limit: [
|
{
|
validator: validatorlimit,
|
trigger: "blur",
|
},
|
],
|
participantMax: [
|
{
|
validator: validatoraattendPeople,
|
trigger: "blur",
|
},
|
],
|
contactPhone: [
|
{
|
required: true,
|
validator: PHONE,
|
trigger: "blur",
|
},
|
],
|
},
|
min: { a: 0, b: 0 },
|
max: { a: 0, b: 0 },
|
activetime: [],
|
signtime: [],
|
content: "",
|
isC: false,
|
isCr: false,
|
minmax: false,
|
isClear: false,
|
detail: "",
|
aattendPeople: "",
|
tagsList: [
|
{
|
label: "全部居民",
|
value: 1,
|
},
|
{
|
label: "低保户",
|
value: 2,
|
},
|
],
|
dialogVisible: false,
|
dialogVisibleCover: false,
|
dialogVisibleMap: 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, // 图片最大像素
|
}, // 截图配置
|
positionData: {},
|
checkImgList: [],
|
listCheckImg: "",
|
newdata: {},
|
};
|
},
|
computed: {
|
pickerOptions() {
|
return {
|
disabledDate(time) {
|
// return time.getTime() < Date.now();
|
let date = new Date(new Date().toLocaleDateString()).getTime();
|
return time.getTime() < date;
|
},
|
};
|
},
|
pickerOptions2() {
|
let e = this.form.signUpEnd;
|
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;
|
},
|
};
|
},
|
},
|
watch: {
|
minmax(n) {
|
this.max.a = n ? -1 : 0;
|
},
|
isCr(n) {
|
this.max.b = n ? -1 : 0;
|
},
|
aid(n) {
|
// 编辑 获取数据
|
if (!this.add) {
|
this.getData(n);
|
}
|
},
|
// 选择负责人
|
leaderId(n) {
|
let v = this.leader.filter((k) => {
|
return k.managerId === n;
|
});
|
if (v && v[0]) {
|
this.form.sponsorId = n;
|
this.form.sponsorName = v[0].name;
|
} else {
|
this.form.sponsorName = "";
|
this.form.sponsorId = "";
|
}
|
},
|
// 时间
|
time: {
|
handler(n) {
|
if (n.a && n.a.length && n.a[1]) {
|
// this.form.signUpBegin = 'n.a[0]';
|
this.form.signUpEnd = n.a[1];
|
}
|
if (n.b && n.b.length && n.b[1]) {
|
console.log(n.b);
|
this.form.beginAt = n.b[0];
|
this.form.endAt = n.b[1];
|
}
|
},
|
deep: true,
|
},
|
win(n) {
|
if (n) {
|
this.form.comActActPrizeVOList = this.item = [];
|
this.form.prizeRemark = "";
|
this.form.rewardDesc = "";
|
}
|
},
|
isC(n) {
|
if (n) {
|
this.max.b =
|
this.min.b =
|
this.form.participantMin =
|
this.form.participantMax =
|
0;
|
}
|
},
|
},
|
methods: {
|
tagsHandle(val) {
|
this.form.aattendPeople = val ? val.join(",") : "";
|
},
|
getactivity() {
|
this.$api.get(
|
"communityactivity/activity/type/list",
|
{ type: 2 },
|
(e) => {
|
this.radioList = e.map((d) => {
|
return {
|
label: d.name,
|
value: d.id,
|
};
|
});
|
}
|
);
|
},
|
addtype() {
|
if (this.inputType) {
|
// var num = this.radioList ? this.radioList[this.radioList.length-1].value : 1;
|
let newlist = {
|
id: "",
|
name: this.inputType,
|
type: 2,
|
};
|
this.$api.post("communityactivity/activity/type/add", newlist, (e) => {
|
this.inputType = "";
|
this.getactivity();
|
});
|
}
|
},
|
islimitClick(val) {
|
if (val) {
|
this.form.limit = -1;
|
} else {
|
this.form.limit = "";
|
}
|
},
|
isvolunteerMaxC(val) {
|
if (val) {
|
this.form.volunteerMax = -1;
|
} else {
|
this.form.volunteerMax = "";
|
}
|
},
|
isparticipantMaxC(val) {
|
if (val) {
|
this.form.participantMax = -1;
|
} else {
|
this.form.participantMax = "";
|
}
|
},
|
israngeC(val) {
|
if (val) {
|
this.form.range = -1;
|
} else {
|
this.form.range = "";
|
}
|
},
|
|
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;
|
},
|
mapCheck() {
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation({
|
val: this.form.activityAddr,
|
l: this.form.lat,
|
r: this.form.lng,
|
});
|
});
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.form.activityAddr = this.positionData.addr;
|
this.form.lat = this.positionData.lat;
|
this.form.lng = this.positionData.lng;
|
}
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(data) {
|
this.positionData = data;
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
tabCheckHandle() {
|
this.checkImgList = [];
|
switch (this.tabsName) {
|
case "0": {
|
this.listCheck();
|
break;
|
}
|
case "1": {
|
this.listSysCheck(2);
|
break;
|
}
|
case "2": {
|
this.listSysCheck(1);
|
break;
|
}
|
case "3": {
|
this.listSysCheck(4);
|
break;
|
}
|
case "4": {
|
this.listSysCheck(3);
|
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((obj) => {
|
const timer = new Date().getTime();
|
const urldata = this.dataURLtoFile(obj, timer + ".png");
|
let formData = new FormData();
|
formData.append("file", urldata);
|
this.btnLoading = true;
|
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;
|
},
|
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("communityactivity/picture/getList", {}, (arr) => {
|
arr.forEach((item) => {
|
item.type = false;
|
});
|
this.checkImgList = arr;
|
});
|
},
|
listSysCheck(t) {
|
this.$api.get(
|
"communityactivity/sysPicture/getList",
|
{ type: t },
|
(arr) => {
|
arr.forEach((item) => {
|
item.type = false;
|
});
|
this.checkImgList = arr;
|
}
|
);
|
},
|
start1() {
|
this.startnum1 = true;
|
},
|
start2() {
|
this.startnum2 = true;
|
},
|
end1() {
|
this.endnum1 = true;
|
},
|
end2() {
|
this.endnum2 = true;
|
},
|
nBlur() {
|
this.endnum1 = false;
|
this.endnum2 = false;
|
this.startnum1 = false;
|
this.startnum2 = false;
|
this.minmax = +this.max.a === -1;
|
this.isCr = +this.max.b === -1;
|
},
|
// 取消
|
reset() {
|
for (let k in this.form) {
|
this.form[k] = "";
|
}
|
this.form.participantMin = this.form.volunteerMin = 0;
|
this.win = { a: 0, b: 0 };
|
this.max = { a: 0, b: 0 };
|
this.time = { a: ["", ""], b: ["", ""] };
|
this.content = "";
|
this.leaderId = "";
|
this.item = [];
|
},
|
// 获取数据-编辑
|
getData(id) {
|
this.$api.get("communityactivity/detailactivity", { id }, (e) => {
|
this.form.activityName = e.activityName;
|
this.form.activityAddr = e.activityAddr;
|
this.form.prizeRemark = e.prizeRemark;
|
this.form.rewardDesc = e.rewardDesc;
|
this.leaderId = this.form.sponsorId = +e.sponsorId;
|
this.form.sponsorName = e.sponsorName;
|
this.form.contactName = e.contactName;
|
this.form.contactPhone = e.contactPhone;
|
this.form.isTop = e.isTop;
|
this.form.id = e.id;
|
this.form.lat = e.lat;
|
this.form.lng = e.lng;
|
this.form.isQrCode = e.isQrCode;
|
this.form.volunteerMin = e.volunteerMin;
|
this.form.aattendPeople = e.aattendPeople;
|
this.form.participantMin = e.participantMin;
|
this.form.activityType = e.activityType;
|
if (e.range == -1) {
|
this.isrange = 1;
|
} else {
|
this.form.range = e.range;
|
}
|
|
if (e.participantMax == -1) {
|
this.isparticipantMax = 1;
|
} else {
|
this.form.participantMax = e.participantMax;
|
}
|
|
if (e.limit == -1) {
|
this.islimit = 1;
|
} else {
|
this.form.limit = e.limit;
|
}
|
// if(e.volunteerMax == -1) {
|
// this.isvolunteerMax = 1;
|
// } else {
|
// this.form.volunteerMax = e.volunteerMax;
|
// }
|
(this.signtime = [e.signUpBegin, e.signUpEnd]),
|
(this.activetime = [e.beginAt, e.endAt]),
|
(this.form.haveIntegralReward = e.haveIntegralReward);
|
this.form.rewardWay = 1; //默认选中
|
this.form.rewardIntegral = e.rewardIntegral;
|
this.form.canCancel = e.canCancel;
|
this.form.cancelDeduct = e.cancelDeduct;
|
this.form.signUpEnd = e.signUpEnd;
|
this.form.beginAt = e.beginAt;
|
this.form.endAt = e.endAt;
|
|
this.form.cover = e.cover;
|
this.content = this.form.content = e.content;
|
this.hasPrize = e.hasPrize;
|
this.form.status = e.status;
|
this.win = !(+e.hasPrize === 1);
|
this.isC = +e.participantMax === 0;
|
this.nBlur();
|
this.aattendPeople = e.aattendPeople.split(",");
|
this.item = [];
|
this.$nextTick(() => {
|
this.item = (e.comActActPrizeVOList || []).map((k) => {
|
return {
|
name: k.prizeName,
|
pic: k.prizePhoto,
|
type: !!k.type,
|
id: k.id,
|
aid: k.activityId,
|
};
|
});
|
});
|
});
|
},
|
// 封面
|
onUploadImage(v) {
|
this.form.cover = v;
|
},
|
// 奖品封面
|
onUploadItemImage(v, j) {
|
this.item[j].pic = v;
|
this.item[j].r++;
|
},
|
//编辑富文本
|
change(val) {
|
this.form.content = val;
|
},
|
// 增添奖品
|
onItemAdd() {
|
let v = this.item.filter((k) => {
|
return k.pic === "" || k.name === "";
|
});
|
if (v.length) {
|
demo.toast("活动奖品请上传封面与填写奖品名字");
|
return 0;
|
}
|
this.item.push({
|
pic: "",
|
name: "",
|
type: false,
|
r: 0,
|
});
|
},
|
|
// 保存
|
send(v, f) {
|
this.$refs[f].validate((valid) => {
|
if (valid) {
|
if (!this.signtime.length) {
|
return demo.toast("请选择报名时间");
|
}
|
if (!this.activetime.length) {
|
return demo.toast("请选择活动时间");
|
}
|
if (this.signtime[1] > this.activetime[1]) {
|
return demo.toast("活动结束时间不能早于报名结束时间");
|
}
|
if (this.signtime[0] > this.activetime[0]) {
|
return demo.toast("活动开始时间不能早于报名开始时间");
|
}
|
if (!this.form.cover) {
|
return demo.toast("请上传活动封面");
|
}
|
if (!this.form.content) {
|
return demo.toast("请输入活动详情");
|
}
|
if (!this.form.activityType) {
|
return demo.toast("请输入活动类型");
|
}
|
(this.form.signUpBegin = this.signtime[0]),
|
(this.form.signUpEnd = this.signtime[1]),
|
(this.form.beginAt = this.activetime[0]),
|
(this.form.endAt = this.activetime[1]);
|
if (this.isrange == 1) {
|
this.form.range = -1;
|
}
|
if (this.isparticipantMax == 1) {
|
this.form.participantMax = -1;
|
}
|
if (this.islimit == 1) {
|
this.form.limit = -1;
|
}
|
if (this.isvolunteerMax == 1) {
|
this.form.volunteerMax = -1;
|
}
|
if (this.form.haveIntegralReward == 2) {
|
this.form.rewardWay = null;
|
}
|
this.form.type = 2; // 活动类型 1 支援者活动 2 普通社区活动
|
//保存
|
if (v == 3) {
|
this.form.status = 1;
|
this.$api.post("communityactivity/activity", this.form, (e) => {
|
demo.toast((this.add ? "添加" : "编辑") + "活动成功");
|
this.reset();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
//保存发布
|
if (v == 2) {
|
this.form.status = 2;
|
this.$api.post("communityactivity/activity", this.form, (e) => {
|
demo.toast((this.add ? "添加" : "编辑") + "活动成功");
|
this.reset();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
//保存/保存编辑
|
if (v == 1) {
|
this.form.status = 1;
|
this.$api.put("communityactivity/activity", this.form, (e) => {
|
demo.toast("编辑活动成功");
|
this.reset();
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
} else {
|
}
|
});
|
},
|
// 获取人员标签
|
getPersonTags() {
|
this.$api.get("communityactivity/userTags/getList", {}, (e) => {
|
this.tagsList = e;
|
});
|
},
|
},
|
mounted() {
|
// this.getPersonTags();
|
// 当前活动负责人使用了缓存 [可接入接口 搜索]
|
this.$api.leader((e) => {
|
this.leader = e;
|
});
|
this.getactivity();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.fm {
|
/deep/.el-dialog {
|
height: 50%;
|
overflow: auto;
|
}
|
}
|
.number-title {
|
// height: 10px;
|
// font-size: 14px;
|
// padding-top: 10px;
|
// color: #a5a8af;
|
}
|
.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;
|
}
|
.input-width-url {
|
width: 450px;
|
}
|
</style>
|
