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.
1067 lines
33 KiB
1067 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"
|
|
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 :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: 17.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
});
|
|
map_signin = new window.TMap.Map(document.getElementById("map_signin_id"), {
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 17.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
|
|
.searchRectangle({
|
|
keyword: this.formData.actAddress,
|
|
bounds: map_act.getBounds(),
|
|
})
|
|
.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
|
|
.searchRectangle({
|
|
keyword: this.formData.signInAddress,
|
|
bounds: map_signin.getBounds(),
|
|
})
|
|
.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>
|
|
|
|
|