You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1051 lines
33 KiB
1051 lines
33 KiB
<template>
|
|
<div>
|
|
<div class="dialog-h-content scroll-h">
|
|
<el-form ref="ref_form"
|
|
:inline="true"
|
|
:model="formData"
|
|
:rules="dataRule"
|
|
:disabled="formType === 'detail'"
|
|
class="div_form">
|
|
<div class="form_flex">
|
|
<div class="form_item">
|
|
<el-form-item label="主办方"
|
|
prop="sponsorId"
|
|
label-width="150px">
|
|
<el-cascader v-if="formData.richTextFlag || formType === 'add'"
|
|
class="item_width_6"
|
|
ref="myCascader"
|
|
filterable
|
|
v-model="agencyIdArray"
|
|
:options="orgOptions"
|
|
:props="orgOptionProps"
|
|
:show-all-levels="false"
|
|
@change="handleChangeAgency"></el-cascader>
|
|
<el-input v-else
|
|
class="item_width_6"
|
|
v-model="formData.sponsorName"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="活动标题"
|
|
prop="title"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_6"
|
|
type="textarea"
|
|
maxlength="50"
|
|
show-word-limit
|
|
:rows="2"
|
|
placeholder="请输入活动标题，不超过50字"
|
|
v-model="formData.title"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="封面"
|
|
prop="coverPic"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-upload :headers="$getElUploadHeaders()"
|
|
:class="['avatar-uploader', { hide: hideUploadBtn }]"
|
|
ref="uploadPic"
|
|
:action="uploadUlr"
|
|
list-type="picture-card"
|
|
:on-exceed="exceedPic"
|
|
:before-upload="beforeAvatarUpload"
|
|
:on-remove="removePic"
|
|
:file-list="replayImgList"
|
|
:on-change="handleEditChange"
|
|
:on-success="handleSuccess"
|
|
:limit="1">
|
|
<span class="font-14">选择图片</span>
|
|
</el-upload>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="活动时间"
|
|
label-width="150px"
|
|
prop="actStartTime">
|
|
<el-date-picker v-model="formData.actStartTime"
|
|
class="list_item_width_3"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="开始时间">
|
|
</el-date-picker>
|
|
<span class="data-tag">至</span>
|
|
<el-date-picker v-model="formData.actEndTime"
|
|
class="list_item_width_3 data-tag"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="活动人数"
|
|
prop="actQuota"
|
|
style="display: block"
|
|
label-width="150px">
|
|
<el-input-number class="item_width_2"
|
|
:min="0"
|
|
v-model="formData.actQuota"
|
|
label="活动人数"></el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="活动积分"
|
|
prop="reward"
|
|
style="display: block"
|
|
label-width="150px">
|
|
<el-input-number class="item_width_2"
|
|
:min="0"
|
|
v-model="formData.reward"
|
|
label="活动积分"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="联系人"
|
|
prop="sponsorContacts"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_6"
|
|
maxlength="20"
|
|
placeholder="请输入联系人"
|
|
v-model="formData.sponsorContacts">
|
|
</el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form_item">
|
|
<el-form-item label="联系电话"
|
|
prop="sponsorTel"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_6"
|
|
maxlength="20"
|
|
placeholder="请输入联系电话"
|
|
v-model="formData.sponsorTel">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="报名仅限志愿者"
|
|
prop="volunteerLimit"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-checkbox v-model="formData.volunteerLimit"></el-checkbox>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="报名无需审核"
|
|
prop="auditSwitch"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-checkbox v-model="noauditSwitch"></el-checkbox>
|
|
<span class="div-tooltip">（选中后报名参加活动人员可以直接审核通过）</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="报名截止时间"
|
|
style="display: block"
|
|
prop="signUpEndTime"
|
|
label-width="150px">
|
|
<el-date-picker class="item_width_2"
|
|
v-model="formData.signUpEndTime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
type="datetime"
|
|
placeholder="选择时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="报名条件"
|
|
prop="requirement"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_6"
|
|
type="textarea"
|
|
maxlength="200"
|
|
show-word-limit
|
|
:rows="7"
|
|
placeholder="请输入报名条件，不超过200字"
|
|
v-model="formData.requirement"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="签到时间"
|
|
label-width="150px"
|
|
prop="signInStartTime">
|
|
<el-date-picker v-model="formData.signInStartTime"
|
|
class="list_item_width_3"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="开始时间">
|
|
</el-date-picker>
|
|
<span class="data-tag">至</span>
|
|
<el-date-picker v-model="formData.signInEndTime"
|
|
class="list_item_width_3 data-tag"
|
|
type="datetime"
|
|
value-format="yyyy-MM-dd HH:mm"
|
|
format="yyyy-MM-dd HH:mm"
|
|
placeholder="结束时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="签到有效范围（米）"
|
|
prop="signInRadius"
|
|
style="display: block"
|
|
label-width="150px">
|
|
<el-input-number class="item_width_2"
|
|
:min="0"
|
|
v-model="formData.signInRadius"
|
|
label="签到有效范围"></el-input-number>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="form_flex">
|
|
<div class="form_item">
|
|
<el-form-item label="活动地点"
|
|
prop="actAddress"
|
|
label-width="150px">
|
|
<div style="width: 400px">
|
|
<el-input class="item_width_4"
|
|
maxlength="100"
|
|
style="width: 330px"
|
|
show-word-limit
|
|
placeholder="请输入所在地址"
|
|
v-model="formData.actAddress">
|
|
</el-input>
|
|
<el-button style="margin-left: 10px"
|
|
type="default"
|
|
size="small"
|
|
@click="handleSearchMapAct">查询</el-button>
|
|
<div id="map_act_id"
|
|
class="div_map"></div>
|
|
<!-- <div style="margin-top: 10px">
|
|
<span>经度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入经度"
|
|
v-model="formData.actLatitude">
|
|
</el-input>
|
|
<span style="margin-left: 20px">纬度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入纬度"
|
|
v-model="formData.actLongitude">
|
|
</el-input>
|
|
</div> -->
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form_item">
|
|
<el-form-item label="签到地点"
|
|
prop="signInAddress"
|
|
label-width="150px">
|
|
<div style="width: 400px">
|
|
<el-input class="item_width_4"
|
|
maxlength="100"
|
|
style="width: 330px"
|
|
show-word-limit
|
|
placeholder="请输入所在地址"
|
|
v-model="formData.signInAddress">
|
|
</el-input>
|
|
<el-button style="margin-left: 10px"
|
|
type="default"
|
|
size="small"
|
|
@click="handleSearchMapSignin">查询</el-button>
|
|
<div id="map_signin_id"
|
|
class="div_map"></div>
|
|
<!-- <div style="margin-top: 10px">
|
|
<span>经度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入经度"
|
|
v-model="formData.signInLatitude">
|
|
</el-input>
|
|
<span style="margin-left: 20px">纬度</span>
|
|
<el-input class="item_width_3"
|
|
maxlength="50"
|
|
placeholder="请输入纬度"
|
|
v-model="formData.signInLongitude">
|
|
</el-input>
|
|
</div> -->
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<el-form-item label="活动详情"
|
|
prop="actContentHtml"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<div v-if="formData.richTextFlag || formType === 'add'">
|
|
<Tinymce class="tinymce_view"
|
|
v-if="formType != 'detail'"
|
|
v-model="formData.actContentHtml"
|
|
:height="250"
|
|
style="width: 1000px"
|
|
:customerId="customerId"
|
|
placeholder="在这里输入文字" />
|
|
<p v-else
|
|
class="text_p"
|
|
v-html="formData.actContentHtml"></p>
|
|
</div>
|
|
<div class="div_content"
|
|
v-else>
|
|
<div v-for="(item, index) in formData.actContent"
|
|
:key="index">
|
|
<div v-if="item.contentType === 'text'">{{ item.content }}</div>
|
|
<img v-if="item.contentType === 'img'"
|
|
class="img_icon"
|
|
:src="item.content" />
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="formData.summaryFlag"
|
|
label="活动回顾"
|
|
prop="summaryContentHtml"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<div v-if="formData.richTextFlag">
|
|
<p class="text_p"
|
|
v-html="formData.summaryContentHtml"></p>
|
|
</div>
|
|
<div class="div_content"
|
|
v-else>
|
|
<div v-for="(item, index) in formData.summaryContent"
|
|
:key="index">
|
|
<div v-if="item.contentType === 'text'">{{ item.content }}</div>
|
|
<img v-if="item.contentType === 'img'"
|
|
class="img_icon"
|
|
:src="item.content" />
|
|
<p v-if="item.contentType === 'rich_text'"
|
|
class="text_p"
|
|
v-html="item.content"></p>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="div_btn">
|
|
<el-button size="small"
|
|
@click="handleCancle">取 消</el-button>
|
|
<el-button size="small"
|
|
v-if="formType != 'detail'"
|
|
type="primary"
|
|
:disabled="btnDisable"
|
|
@click="handleComfirm">确 定</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
|
|
import Tinymce from "@c/tinymce2/index.vue";
|
|
|
|
let loading; // 加载动画
|
|
|
|
var map_act;
|
|
var search_act;
|
|
var markers_act;
|
|
var infoWindowList_act;
|
|
var geocoder_act; // 新建一个正逆地址解析类
|
|
|
|
var map_signin;
|
|
var search_signin;
|
|
var markers_signin;
|
|
var infoWindowList_signin;
|
|
var geocoder_signin; // 新建一个正逆地址解析类
|
|
|
|
export default {
|
|
data () {
|
|
let endDisabledDate = (time) => {
|
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
|
|
let nowData = Date.now();
|
|
if (this.formData.actStartTime) {
|
|
let startTime = new Date(this.formData.actStartTime + ":00");
|
|
return time.getTime() < startTime;
|
|
} else {
|
|
return "";
|
|
}
|
|
};
|
|
let startDisabledDate = (time) => {
|
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
|
|
let nowData = Date.now();
|
|
return time.getTime() > nowData;
|
|
};
|
|
const valActTime = (rule, value, callback) => {
|
|
if (value === "" || value === null) {
|
|
callback(new Error("请选择活动开始时间"));
|
|
} else if (!this.formData.actEndTime) {
|
|
callback(new Error("请选择活动结束时间"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
const valSigninTime = (rule, value, callback) => {
|
|
if (value === "" || value === null) {
|
|
callback(new Error("请选择签到开始时间"));
|
|
} else if (!this.formData.signInEndTime) {
|
|
callback(new Error("请选择签到结束时间"));
|
|
} else {
|
|
callback();
|
|
}
|
|
};
|
|
return {
|
|
formType: "add", //表单操作类型 add新增，edit编辑，detail详情
|
|
btnDisable: false,
|
|
customerId: "",
|
|
actId: "",
|
|
valActTime: valActTime,
|
|
valSigninTime: valSigninTime,
|
|
|
|
noauditSwitch: false,
|
|
formData: {
|
|
actAddress: "",
|
|
actContentHtml: "",
|
|
actContent: {},
|
|
actDraftId: "",
|
|
actEndTime: "",
|
|
actId: "",
|
|
actLatitude: null,
|
|
actLongitude: null,
|
|
actQuota: 0,
|
|
actStartTime: "",
|
|
actType: "heart",
|
|
|
|
auditSwitch: true,
|
|
coverPic: "",
|
|
coverPicAuditStatus: "",
|
|
customerId: "",
|
|
|
|
noticePassedPeople: false,
|
|
requirement: "",
|
|
reward: 0,
|
|
|
|
signInAddress: "",
|
|
signInEndTime: "",
|
|
signInLatitude: null,
|
|
signInLongitude: null,
|
|
signInRadius: 200,
|
|
signInStartTime: "",
|
|
signUpEndTime: "",
|
|
sponsorContacts: "",
|
|
sponsorId: "",
|
|
sponsorPath: "",
|
|
sponsorName: "",
|
|
sponsorTel: "",
|
|
sponsorType: "",
|
|
target: "",
|
|
title: "",
|
|
|
|
volunteerLimit: false,
|
|
},
|
|
|
|
orgOptions: [],
|
|
orgOptionProps: {
|
|
multiple: false,
|
|
value: "gridId",
|
|
label: "agencyGridName",
|
|
children: "agencyGridList",
|
|
checkStrictly: true,
|
|
},
|
|
agencyIdArray: [],
|
|
|
|
endPickerOptions: {
|
|
disabledDate: endDisabledDate,
|
|
},
|
|
startPickerOptions: {
|
|
disabledDate: startDisabledDate,
|
|
},
|
|
|
|
//图片相关 oss/file/uploadvariedfile
|
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
|
|
// upload_url: '', // 上传URL
|
|
upload_name: "", // 图片或视频名称
|
|
replayImgList: [
|
|
// {
|
|
// id: '1',
|
|
// url: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20220629/db05fed5cc56417299364ab8362ac9a0.png'
|
|
// }
|
|
],
|
|
hideUploadBtn: false,
|
|
};
|
|
},
|
|
components: { Tinymce },
|
|
mounted () {
|
|
this.customerId = localStorage.getItem("customerId");
|
|
this.loadSponsorlist();
|
|
this.initMap();
|
|
|
|
// this.replayImgList.push()
|
|
},
|
|
|
|
methods: {
|
|
async initForm (type, actId) {
|
|
this.$refs.ref_form.resetFields();
|
|
|
|
this.formType = type;
|
|
if (actId) {
|
|
this.startLoading();
|
|
this.actId = actId;
|
|
this.formData.actId = actId;
|
|
await this.loadFormData();
|
|
this.endLoading();
|
|
} else {
|
|
this.actId = "";
|
|
this.formData.actId = "";
|
|
// this.formData = JSON.parse(JSON.stringify(this.formDataTemp));
|
|
// this.agencyIdArray = this.formData.sponsorPath.split(',')
|
|
}
|
|
},
|
|
|
|
//获取主办方
|
|
async loadSponsorlist () {
|
|
const url = "/heart/work/act/sponsorlist";
|
|
|
|
let params = {};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
data.agencyGridName = data.agencyName;
|
|
data.gridId = data.agencyId;
|
|
data.level = "agency";
|
|
this.orgOptions.push(data);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
handleChangeAgency (val) {
|
|
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data;
|
|
if (obj) {
|
|
this.formData.sponsorId = obj.gridId;
|
|
this.formData.sponsorName = obj.agencyGridName;
|
|
this.formData.sponsorPath = this.agencyIdArray.join(",");
|
|
|
|
if (obj.level === "agency") {
|
|
this.formData.sponsorType = "agency";
|
|
} else {
|
|
this.formData.sponsorType = "grid";
|
|
}
|
|
} else {
|
|
this.formData.sponsorId = "";
|
|
this.formData.sponsorPath = "";
|
|
this.formData.sponsorName = "";
|
|
this.formData.sponsorType = "";
|
|
}
|
|
},
|
|
|
|
//加载form
|
|
async loadFormData () {
|
|
const url = "/heart/work/act/detail";
|
|
|
|
let params = {
|
|
actId: this.actId,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
this.formData = JSON.parse(JSON.stringify(data));
|
|
if (this.formData.richTextFlag) {
|
|
this.agencyIdArray = this.formData.sponsorPath.split(",");
|
|
if (this.formData.actContent && this.formData.actContent.length > 0) {
|
|
this.formData.actContentHtml = this.formData.actContent[0].content;
|
|
}
|
|
if (
|
|
this.formData.summaryContent &&
|
|
this.formData.summaryContent.length > 0
|
|
) {
|
|
this.formData.summaryContentHtml =
|
|
this.formData.summaryContent[0].content;
|
|
}
|
|
}
|
|
|
|
this.noauditSwitch = !this.formData.auditSwitch;
|
|
|
|
if (this.formData.coverPic) {
|
|
let obj = {
|
|
id: "111",
|
|
url: this.formData.coverPic,
|
|
};
|
|
|
|
this.replayImgList = [];
|
|
this.replayImgList.push(obj);
|
|
|
|
this.hideUploadBtn = true;
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
async handleComfirm () {
|
|
console.log(this.formData);
|
|
|
|
this.btnDisable = true;
|
|
setTimeout(() => {
|
|
this.btnDisable = false;
|
|
}, 3000);
|
|
|
|
this.$refs["ref_form"].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj);
|
|
this.btnDisable = false;
|
|
} else {
|
|
let errBeforeSubmit = "";
|
|
|
|
if (
|
|
new Date(this.formData.actEndTime).getTime() <=
|
|
new Date(this.formData.actStartTime).getTime()
|
|
) {
|
|
errBeforeSubmit = "活动预计开始时间应早于活动预计结束时间";
|
|
} else if (
|
|
new Date(this.formData.signInEndTime).getTime() <=
|
|
new Date(this.formData.signInStartTime).getTime()
|
|
) {
|
|
errBeforeSubmit = "签到开始时间应早于签到结束时间";
|
|
}
|
|
|
|
if (errBeforeSubmit) {
|
|
this.$message({
|
|
type: "info",
|
|
message: errBeforeSubmit,
|
|
});
|
|
return false;
|
|
}
|
|
|
|
this.addHeartAct();
|
|
}
|
|
});
|
|
},
|
|
async addHeartAct () {
|
|
let obj = {
|
|
contentType: "rich_text",
|
|
content: this.dormatHtml(this.formData.actContentHtml),
|
|
};
|
|
this.formData.actContent = [];
|
|
this.formData.actContent.push(obj);
|
|
|
|
this.formData.customerId = this.customerId;
|
|
this.formData.noticePassedPeople = false;
|
|
|
|
this.formData.auditSwitch = !this.noauditSwitch;
|
|
|
|
let url = "/heart/work/act/publishV2";
|
|
if (this.actId) {
|
|
this.formData.actId = this.actId;
|
|
url = "/heart/work/act/republishV2";
|
|
} else {
|
|
url = "/heart/work/act/publishV2";
|
|
}
|
|
|
|
// let url = "http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolrecord/add"
|
|
|
|
this.startLoading();
|
|
const { data, code, msg } = await requestPost(url, this.formData);
|
|
this.endLoading();
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "操作成功",
|
|
});
|
|
this.resetData();
|
|
this.$emit("dialogOk");
|
|
this.btnDisable = false;
|
|
} else {
|
|
this.btnDisable = false;
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
dormatHtml (content) {
|
|
let c = "";
|
|
if (content.indexOf("DOCTYPE") != -1) {
|
|
c = content.slice(45, -16);
|
|
}
|
|
console.log("content", typeof content);
|
|
return c || content;
|
|
},
|
|
|
|
removePic (file, fileList) {
|
|
this.formData.coverPic = "";
|
|
this.replayImgList = [];
|
|
this.hideUploadBtn = fileList.length >= 1;
|
|
},
|
|
// 最多上传3张图，超过时隐藏上传按钮
|
|
handleEditChange (file, fileList) {
|
|
this.hideUploadBtn = fileList.length >= 1;
|
|
},
|
|
exceedPic () {
|
|
this.$message.warning("只能上传1张封面图");
|
|
},
|
|
beforeAvatarUpload (file) {
|
|
const isJPG = file.type === "image/jpeg";
|
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
|
|
if (!isLt2M) {
|
|
this.$message.error("上传图片大小不能超过 10MB!");
|
|
}
|
|
return isLt2M;
|
|
},
|
|
handleSuccess (response, file, fileList) {
|
|
this.replayImgList.push(file);
|
|
this.formData.coverPic = response.data.url;
|
|
},
|
|
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
|
|
initMap () {
|
|
// 定义地图中心点坐标
|
|
var center = new window.TMap.LatLng(36.0722275, 120.38945519);
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图
|
|
map_act = new window.TMap.Map(document.getElementById("map_act_id"), {
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
});
|
|
map_signin = new window.TMap.Map(
|
|
document.getElementById("map_signin_id"),
|
|
{
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
}
|
|
);
|
|
|
|
search_act = new window.TMap.service.Search({ pageSize: 10 });
|
|
// 新建一个地点搜索类
|
|
markers_act = new TMap.MultiMarker({
|
|
map: map_act,
|
|
geometries: [],
|
|
});
|
|
infoWindowList_act = Array(10);
|
|
|
|
geocoder_act = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
|
|
|
|
search_signin = new window.TMap.service.Search({ pageSize: 10 });
|
|
// 新建一个地点搜索类
|
|
markers_signin = new TMap.MultiMarker({
|
|
map: map_signin,
|
|
geometries: [],
|
|
});
|
|
infoWindowList_signin = Array(10);
|
|
|
|
geocoder_signin = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
|
|
|
|
// 监听地图平移结束
|
|
map_act.on("panend", (e) => {
|
|
this.handleMoveCenterAct(e);
|
|
});
|
|
this.handleMoveCenterAct();
|
|
|
|
// 监听地图平移结束
|
|
map_signin.on("panend", (e) => {
|
|
this.handleMoveCenterSignin(e);
|
|
});
|
|
this.handleMoveCenterSignin();
|
|
},
|
|
|
|
setMarkerAct (lat, lng) {
|
|
markers_act.setGeometries([]);
|
|
markers_act.add([
|
|
{
|
|
id: "4",
|
|
styleId: "marker",
|
|
position: new TMap.LatLng(lat, lng),
|
|
properties: {
|
|
title: "marker4",
|
|
},
|
|
},
|
|
]);
|
|
},
|
|
|
|
handleSearchMapAct () {
|
|
infoWindowList_act.forEach((infoWindow) => {
|
|
infoWindow.close();
|
|
});
|
|
infoWindowList_act.length = 0;
|
|
markers_act.setGeometries([]);
|
|
// 在地图显示范围内以给定的关键字搜索地点
|
|
search_act
|
|
.searchNearby({
|
|
keyword: this.formData.actAddress,
|
|
radius: 1000,
|
|
autoExtend: true,
|
|
center: map_act.getCenter(),
|
|
})
|
|
.then((result) => {
|
|
let { data } = result;
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
const {
|
|
location: { lat, lng },
|
|
} = data[0];
|
|
map_act.setCenter(new TMap.LatLng(lat, lng));
|
|
this.setMarkerAct(lat, lng);
|
|
this.formData.actLatitude = lat;
|
|
this.formData.actLongitude = lng;
|
|
} else {
|
|
this.$message.error("未检索到相关位置坐标");
|
|
}
|
|
});
|
|
},
|
|
|
|
handleMoveCenterAct (e) {
|
|
//修改地图中心点
|
|
const center = map_act.getCenter();
|
|
const lat = center.getLat();
|
|
const lng = center.getLng();
|
|
this.formData.actLatitude = lat;
|
|
this.formData.actLongitude = lng;
|
|
this.setMarkerAct(lat, lng);
|
|
|
|
if (e && e.originalEvent) {
|
|
geocoder_act
|
|
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
|
|
.then((result) => {
|
|
this.formData.actAddress = result.result.address;
|
|
});
|
|
}
|
|
},
|
|
setMarkerSignin (lat, lng) {
|
|
markers_signin.setGeometries([]);
|
|
markers_signin.add([
|
|
{
|
|
id: "4",
|
|
styleId: "marker",
|
|
position: new TMap.LatLng(lat, lng),
|
|
properties: {
|
|
title: "marker4",
|
|
},
|
|
},
|
|
]);
|
|
},
|
|
|
|
handleSearchMapSignin () {
|
|
infoWindowList_signin.forEach((infoWindow) => {
|
|
infoWindow.close();
|
|
});
|
|
infoWindowList_signin.length = 0;
|
|
markers_signin.setGeometries([]);
|
|
// 在地图显示范围内以给定的关键字搜索地点
|
|
search_signin
|
|
.searchNearby({
|
|
keyword: this.formData.signInAddress,
|
|
radius: 1000,
|
|
autoExtend: true,
|
|
center: map_signin.getCenter(),
|
|
})
|
|
.then((result) => {
|
|
let { data } = result;
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
const {
|
|
location: { lat, lng },
|
|
} = data[0];
|
|
map_signin.setCenter(new TMap.LatLng(lat, lng));
|
|
this.setMarkerSignin(lat, lng);
|
|
this.formData.signInLatitude = lat;
|
|
this.formData.signInLongitude = lng;
|
|
} else {
|
|
this.$message.error("未检索到相关位置坐标");
|
|
}
|
|
});
|
|
},
|
|
|
|
handleMoveCenterSignin (e) {
|
|
//修改地图中心点
|
|
const center = map_signin.getCenter();
|
|
const lat = center.getLat();
|
|
const lng = center.getLng();
|
|
this.formData.signInLatitude = lat;
|
|
this.formData.signInLongitude = lng;
|
|
this.setMarkerSignin(lat, lng);
|
|
|
|
if (e && e.originalEvent) {
|
|
geocoder_signin
|
|
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
|
|
.then((result) => {
|
|
this.formData.signInAddress = result.result.address;
|
|
});
|
|
}
|
|
},
|
|
|
|
handleCancle () {
|
|
this.resetData();
|
|
this.$emit("dialogCancle");
|
|
},
|
|
|
|
resetData () {
|
|
this.actId = "";
|
|
this.replayImgList = [];
|
|
this.agencyIdArray = [];
|
|
this.hideUploadBtn = false;
|
|
this.noauditSwitch = false;
|
|
this.formData = {
|
|
actAddress: "",
|
|
actContentHtml: "",
|
|
actContent: {},
|
|
actDraftId: "",
|
|
actEndTime: "",
|
|
actId: "",
|
|
actLatitude: null,
|
|
actLongitude: null,
|
|
actQuota: 0,
|
|
actStartTime: "",
|
|
actType: "heart",
|
|
|
|
auditSwitch: true,
|
|
coverPic: "",
|
|
coverPicAuditStatus: "",
|
|
customerId: "",
|
|
|
|
noticePassedPeople: false,
|
|
requirement: "",
|
|
reward: 0,
|
|
|
|
signInAddress: "",
|
|
signInEndTime: "",
|
|
signInLatitude: null,
|
|
signInLongitude: null,
|
|
signInRadius: 200,
|
|
signInStartTime: "",
|
|
signUpEndTime: "",
|
|
sponsorContacts: "",
|
|
sponsorId: "",
|
|
sponsorPath: "",
|
|
sponsorName: "",
|
|
sponsorTel: "",
|
|
sponsorType: "",
|
|
target: "",
|
|
title: "",
|
|
|
|
volunteerLimit: false,
|
|
};
|
|
},
|
|
// 开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
dataRule () {
|
|
return {
|
|
sponsorId: [
|
|
{ required: true, message: "主办方不能为空", trigger: "change" },
|
|
],
|
|
title: [
|
|
{ required: true, message: "活动标题不能为空", trigger: "change" },
|
|
],
|
|
|
|
coverPic: [
|
|
{ required: true, message: "封面图不能为空", trigger: "change" },
|
|
],
|
|
|
|
actContentHtml: [
|
|
{ required: true, message: "活动详情不能为空", trigger: "change" },
|
|
],
|
|
actAddress: [
|
|
{ required: true, message: "活动地点不能为空", trigger: "change" },
|
|
],
|
|
actStartTime: [
|
|
{
|
|
required: true,
|
|
validator: this.valActTime,
|
|
message: "活动时间不能为空",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
actQuota: [
|
|
{ required: true, message: "活动人数不能为空", trigger: "change" },
|
|
],
|
|
reward: [
|
|
{ required: true, message: "活动积分不能为空", trigger: "change" },
|
|
],
|
|
signUpEndTime: [
|
|
{
|
|
required: true,
|
|
message: "报名截止时间不能为空",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
signInStartTime: [
|
|
{
|
|
required: true,
|
|
validator: this.valSigninTime,
|
|
message: "签到时间不能为空",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
signInAddress: [
|
|
{ required: true, message: "签到地点不能为空", trigger: "change" },
|
|
],
|
|
signInRadius: [
|
|
{
|
|
required: true,
|
|
message: "签到有效范围不能为空",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
sponsorContacts: [
|
|
{ required: true, message: "联系人不能为空", trigger: "change" },
|
|
],
|
|
sponsorTel: [
|
|
{ required: true, message: "联系电话不能为空", trigger: "change" },
|
|
],
|
|
};
|
|
},
|
|
},
|
|
props: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/management/form-main.scss";
|
|
|
|
.avatar-uploader {
|
|
margin: 0 0 0 20px;
|
|
}
|
|
.div-tooltip {
|
|
margin-left: 10px;
|
|
color: red;
|
|
}
|
|
|
|
.text_p {
|
|
width: 1000px;
|
|
margin: 0 0;
|
|
border: 3px;
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-margin-start: 0;
|
|
-webkit-margin-end: 0;
|
|
}
|
|
}
|
|
.div_content {
|
|
width: 1000px;
|
|
}
|
|
.img_icon {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.el-dialog__body {
|
|
padding: 0 10px 20px !important;
|
|
}
|
|
|
|
.hide {
|
|
.el-upload--picture-card {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|