李鹏飞
6 years ago
16 changed files with 1965 additions and 378 deletions
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> |
|||
<el-form-item label="活动ID" prop="actId"> |
|||
<el-input v-model="dataForm.actId" placeholder="活动ID"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="标题" prop="title"> |
|||
<el-input v-model="dataForm.title" placeholder="标题"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="banner图片" prop="bannerImg"> |
|||
<el-input v-model="dataForm.bannerImg" placeholder="banner图片"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="banner类型 0-活动，1-连接" prop="bannerType"> |
|||
<el-input v-model="dataForm.bannerType" placeholder="banner类型 0-活动，1-连接"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="连接地址" prop="url"> |
|||
<el-input v-model="dataForm.url" placeholder="连接地址"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="上下架状态 0-下架，1-上架" prop="statue"> |
|||
<el-input v-model="dataForm.statue" placeholder="上下架状态 0-下架，1-上架"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="上下架时间" prop="statueTime"> |
|||
<el-input v-model="dataForm.statueTime" placeholder="上下架时间"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="banner位置 0-顶部" prop="bannerPosition"> |
|||
<el-input v-model="dataForm.bannerPosition" placeholder="banner位置 0-顶部"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="浏览数量" prop="browseNum"> |
|||
<el-input v-model="dataForm.browseNum" placeholder="浏览数量"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="创建部门ID" prop="deptId"> |
|||
<el-input v-model="dataForm.deptId" placeholder="创建部门ID"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="乐观锁" prop="revision"> |
|||
<el-input v-model="dataForm.revision" placeholder="乐观锁"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="删除标识 0-否，1-是" prop="delFlag"> |
|||
<el-input v-model="dataForm.delFlag" placeholder="删除标识 0-否，1-是"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="创建人" prop="createdBy"> |
|||
<el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="创建时间" prop="createdTime"> |
|||
<el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="更新人" prop="updatedBy"> |
|||
<el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="更新时间" prop="updatedTime"> |
|||
<el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
id: '', |
|||
actId: '', |
|||
title: '', |
|||
bannerImg: '', |
|||
bannerType: '', |
|||
url: '', |
|||
statue: '', |
|||
statueTime: '', |
|||
bannerPosition: '', |
|||
browseNum: '', |
|||
deptId: '', |
|||
revision: '', |
|||
delFlag: '', |
|||
createdBy: '', |
|||
createdTime: '', |
|||
updatedBy: '', |
|||
updatedTime: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
actId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
title: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
bannerImg: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
bannerType: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
url: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
statue: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
statueTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
bannerPosition: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
browseNum: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
deptId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
revision: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
delFlag: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
createdBy: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
createdTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
updatedBy: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
updatedTime: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/heart/actbanner/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$http[!this.dataForm.id ? 'post' : 'put']('/heart/actbanner/', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-heart__actbanner}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="dataForm.status" placeholder="状态" clearable> |
|||
<el-option label="上架" :value="1"></el-option> |
|||
<el-option label="下架" :value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="时间" |
|||
prop="startTime"> |
|||
<el-date-picker v-model="dataForm.startTime" |
|||
type="date" |
|||
:picker-options="pickerBeginDateBefore" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
placeholder="选择日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="至" |
|||
label-width="25px" |
|||
prop="endTime"> |
|||
<el-date-picker v-model="dataForm.endTime" |
|||
type="date" |
|||
:picker-options="pickerBeginDateAfter" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
placeholder="选择日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column> |
|||
<el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="status" label="状态" :formatter="formatState" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="statusTime" label="上下架时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="browseNum" label="浏览数量" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('heart:actbanner:grounding')" type="text" size="small" @click="changeGroundingHandle(scope.row)">{{ changeGroundingText(scope.row.status) }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './actbanner-add-or-update' |
|||
import {debounce} from 'lodash' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/heart/actbanner/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/heart/actbanner', |
|||
deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
status: '', |
|||
startTime: '', |
|||
endTime: '' |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
}, |
|||
methods: { |
|||
changeGroundingText(status){ |
|||
let state = status |
|||
if (state === '1') { |
|||
return '下架' |
|||
} else if (state === '0') { |
|||
return '上架' |
|||
} |
|||
}, |
|||
formatState: function (row, column) { |
|||
let state = row.status |
|||
if (state === '1') { |
|||
return '上架' |
|||
} else if (state === '0') { |
|||
return '下架' |
|||
} |
|||
}, |
|||
|
|||
changeGroundingHandle: debounce(function (row) { |
|||
|
|||
this.$confirm(this.$t('prompt.info', { 'handle': this.changeGroundingText(row.status) }), this.$t('prompt.title'), { |
|||
confirmButtonText: this.$t('confirm'), |
|||
cancelButtonText: this.$t('cancel'), |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$http.get(`/heart/actbanner/grounding/${row.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.getDataList() |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}).catch(() => {}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="$t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"> |
|||
|
|||
<el-form-item label=" " > |
|||
<p> |
|||
活动取消，并发送通知给已报名的志愿者，是否确定取消？ |
|||
</p> |
|||
</el-form-item> |
|||
<el-form-item label="取消原因" prop="cancelReason"> |
|||
<el-input v-model="dataForm.cancelReason" placeholder="请输入原因，50字以内" |
|||
type="textarea" |
|||
style="width:500px" |
|||
maxlength="50" |
|||
clearable> |
|||
</el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
id: '', |
|||
cancelReason: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
cancelReason: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
let postData = { |
|||
id: this.dataForm.id, |
|||
cancelReason: this.dataForm.cancelReason |
|||
} |
|||
this.$http['post']('/heart/actinfo/cancel', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-news__news}"> |
|||
<el-form :inline="true" |
|||
:model="dataForm" |
|||
:rules="dataRule" |
|||
ref="dataForm" |
|||
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"> |
|||
<el-row> |
|||
<el-form-item label="活动头图：" v-loading="loading" prop="headPic"> |
|||
<img v-if="dataForm.headPic" |
|||
:src="dataForm.headPic" |
|||
class="avatar"> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="活动标题：" |
|||
prop="title"> |
|||
{{dataForm.title}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="报名要求：" prop="requirement"> |
|||
{{dataForm.requirement}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="报名截止时间：" |
|||
prop="signupEndTime"> |
|||
{{dataForm.signupEndTime}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="活动名额：" |
|||
prop="actQuota"> |
|||
<template> |
|||
{{dataForm.actQuotaCategory != '0' ? dataForm.actQuota+'人':'不限名额'}} |
|||
<!-- <el-radio v-model="dataForm.isActQuota"--> |
|||
<!-- label="1">固定名额</el-radio>  --> |
|||
<!-- <el-input-number v-enter-number type="number" :min="1" v-model="dataForm.actQuota" placeholder="固定名额"style="width:150px"></el-input-number>  人  --> |
|||
<!-- <el-radio v-model="dataForm.isActQuota"--> |
|||
<!-- label="0">不限名额</el-radio>--> |
|||
</template> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="活动时间：" |
|||
prop="actStartTime"> |
|||
{{dataForm.actStartTime}} |
|||
</el-form-item> |
|||
<el-form-item label="至" |
|||
label-width="40px" |
|||
prop="actEndTime"> |
|||
{{dataForm.actEndTime}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
|
|||
<div> |
|||
<el-form-item label="打卡范围时间：" |
|||
prop="signinStartTime"> |
|||
{{dataForm.signinStartTime}} |
|||
</el-form-item> |
|||
<el-form-item label="至" |
|||
label-width="40px" |
|||
prop="signinEndTime"> |
|||
{{dataForm.signinEndTime}} |
|||
</el-form-item> |
|||
</div> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-form-item label="活动地点：" |
|||
prop="actAddress"> |
|||
{{dataForm.actAddress}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="打卡地点：" |
|||
prop="signinAddress"> |
|||
{{dataForm.signinAddress}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="打卡范围：" |
|||
prop="clockRadius"> |
|||
{{dataForm.clockRadius}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="联系人：" |
|||
prop="contacts"> |
|||
{{dataForm.contacts}} |
|||
</el-form-item> |
|||
<el-form-item label="联系电话：" |
|||
prop="tel"> |
|||
{{dataForm.tel}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="活动主办方：" |
|||
prop="sponsor"> |
|||
{{dataForm.sponsor}} |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="奖励积分：" |
|||
prop="reward"> |
|||
{{dataForm.reward}} 积分 |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="惩罚积分：" |
|||
prop="punishmentPoints"> |
|||
{{dataForm.punishmentPoints}} 积分 |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item prop="actContent" |
|||
label="活动内容："> |
|||
<p v-html="dataForm.actContent"></p> |
|||
</el-form-item> |
|||
</el-row> |
|||
<!-- <el-row>--> |
|||
<!-- <el-form-item label="banner展示："--> |
|||
<!-- prop="isBanner">--> |
|||
<!-- <template>--> |
|||
<!-- <el-radio v-model="dataForm.isBanner"--> |
|||
<!-- label="1">是</el-radio>--> |
|||
<!-- <el-radio v-model="dataForm.isBanner"--> |
|||
<!-- label="0">否</el-radio>--> |
|||
<!-- </template>--> |
|||
<!-- </el-form-item>--> |
|||
<!-- </el-row>--> |
|||
<el-row> |
|||
<el-form-item label=" " v-loading="loading" prop="bannerUrl"> |
|||
<img v-if="dataForm.bannerUrl" |
|||
:src="dataForm.bannerUrl" |
|||
class="avatar"> |
|||
</el-form-item> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-form-item label-width="500px"> |
|||
<el-button size="small" style="width: 95px" @click="back">{{ $t('cancel') }}</el-button> |
|||
|
|||
</el-form-item> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import BMap from 'BMap' |
|||
import 'element-ui/lib/theme-chalk/timeline.css' |
|||
import 'element-ui/lib/theme-chalk/timeline-item.css' |
|||
import 'element-ui/lib/theme-chalk/image.css' |
|||
export default { |
|||
name: 'ActInfoDetailView', |
|||
data () { |
|||
return { |
|||
dataForm: { |
|||
id: '', |
|||
title: '', |
|||
headPic: '', |
|||
signupStartTime: '', |
|||
signupEndTime: '', |
|||
actQuotaCategory: '', |
|||
actStartTime: '', |
|||
actEndTime: '', |
|||
actAddress: '', |
|||
actLongitude: '', |
|||
actLatitude: '', |
|||
signinAddress: '', |
|||
signinLongitude: '', |
|||
signinLatitude: '', |
|||
clockRadius: '', |
|||
actQuota: '', |
|||
signupNum: '', |
|||
clockNum: '', |
|||
actShareNum: '', |
|||
actBrowseNum: '', |
|||
contacts: '', |
|||
tel: '', |
|||
requirement: '', |
|||
actContent: '', |
|||
actStatus: '', |
|||
publishTime: '', |
|||
sponsor: '', |
|||
deptId: '', |
|||
punishmentPoints: '', |
|||
reward: '', |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
|
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
back () { |
|||
this.$parent.selectComponent = 'ActInfoList' |
|||
this.$router.push({ path: '/heart-actinfo'}) |
|||
}, |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/heart/actinfo/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude) |
|||
}).catch(() => {}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-heart__actinfo}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item label="状态"> |
|||
<el-select v-model="dataForm.actStatus" placeholder="状态" clearable> |
|||
<el-option label="上架" :value="1"></el-option> |
|||
<el-option label="下架" :value="0"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="时间" |
|||
prop="startTime"> |
|||
<el-date-picker v-model="dataForm.startTime" |
|||
type="date" |
|||
:picker-options="pickerBeginDateBefore" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
placeholder="选择日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="至" |
|||
label-width="25px" |
|||
prop="endTime"> |
|||
<el-date-picker v-model="dataForm.endTime" |
|||
type="date" |
|||
:picker-options="pickerBeginDateAfter" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
placeholder="选择日期时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('heart:actinfo:add')" type="primary" @click="addAction()">增加活动</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
@selection-change="dataListSelectionChangeHandle" |
|||
style="width: 100%;"> |
|||
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column> |
|||
<el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signupEndTime" label="报名截止时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actStartTime" label="活动开始时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actEndTime" label="活动结束时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actStatus" label="活动发布状态" :formatter="formatState" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="publishTime" label="活动发布时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<div> |
|||
<el-button v-if="$hasPermission('heart:actinfo:cancel')" type="text" :disabled="scope.row.actStatus ==='0'? true :false" size="small" @click="cancelHandle(scope.row)">取消活动</el-button> |
|||
<el-button v-if="$hasPermission('heart:actinfo:look')" type="text" size="small" @click="detailAction(scope.row.id)">查看详情</el-button> |
|||
</div> |
|||
<div> |
|||
<el-button v-if="$hasPermission('heart:actinfo:join')" type="text" size="small" @click="joinManage(scope.row.id)">报名管理</el-button> |
|||
<el-button v-if="$hasPermission('heart:actinfo:clock')" type="text" size="small" @click="clockManage(scope.row.id)">打卡积分</el-button> |
|||
</div> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
<actinfo-detail-view v-if="actInfoDetailVisible" ref="actinfoDetail" @refreshDataList="getDataList"></actinfo-detail-view> |
|||
<actuserrelation v-if="actUserRelationVisible" ref="actUserRelation" @refreshDataList="getDataList"></actuserrelation> |
|||
<actinfo-cancel v-if="actInfoCancelVisible" ref="actinfoCancel" @refreshDataList="getDataList"></actinfo-cancel> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './actinfo-add-or-update' |
|||
import ActinfoDetailView from './actinfo-detail-view' |
|||
import ActUserRelation from './actuserrelation' |
|||
import ActinfoCancel from './actinfo-cancel' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'ActInfoList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/heart/actinfo/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
actStatus: '', |
|||
startTime: '', |
|||
endTime:'' |
|||
}, |
|||
addOrUpdateVisible: false, |
|||
actInfoDetailVisible: false, |
|||
actUserRelationVisible: false, |
|||
actInfoCancelVisible: false, |
|||
pickerBeginDateBefore: { |
|||
disabledDate: (time) => { |
|||
let beginDateVal = this.dataForm.startTime |
|||
if (beginDateVal) { |
|||
return time.getTime() > new Date(beginDateVal).getTime() |
|||
} |
|||
} |
|||
}, |
|||
pickerBeginDateAfter: { |
|||
disabledDate: (time) => { |
|||
let EndDateVal = this.dataForm.endTime |
|||
if (EndDateVal) { |
|||
return time.getTime() < new Date(EndDateVal).getTime() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate, |
|||
ActinfoDetailView, |
|||
ActUserRelation, |
|||
ActinfoCancel |
|||
}, |
|||
created: function () { |
|||
this.getDataList(); |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'ActInfoDetailView' |
|||
this.$router.push({ path: '/heart-actinfo', query: { id: id } }) |
|||
}, |
|||
addAction () { |
|||
this.$parent.selectComponent = 'ActInfoAdd' |
|||
this.$router.push({ path: '/heart-actinfo'}) |
|||
}, |
|||
joinManage (id) { |
|||
this.$parent.selectComponent = 'ActUserRelation' |
|||
this.$router.push({ path: '/heart-actinfo', query: { id: id } }) |
|||
}, |
|||
formatState: function (row, column) { |
|||
let state = row.actStatus |
|||
if (state === '1') { |
|||
return '上架' |
|||
} else if (state === '0') { |
|||
return '下架' |
|||
} |
|||
}, |
|||
cancelHandle(row){ |
|||
let state = row.actStatus |
|||
if(state === '1'){ |
|||
this.actInfoCancelVisible = true |
|||
this.$nextTick(() => { |
|||
console.log(this.$refs.actinfoCancel.dataForm); |
|||
this.$refs.actinfoCancel.dataForm.id = row.id |
|||
this.$refs.actinfoCancel.init() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,98 +1,33 @@ |
|||
<template> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="mod-heart__actinfo}"> |
|||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
|||
<el-form-item> |
|||
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="getDataList()">{{ $t('query') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('heart:actinfo:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="$hasPermission('heart:actinfo:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> |
|||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> |
|||
<el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="headPic" label="活动头图" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signupStartTime" label="报名开始时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signupEndTime" label="报名截止时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actStartTime" label="活动开始时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actEndTime" label="活动结束时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actAddress" label="活动地点" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actLongitude" label="活动位置经度" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actLatitude" label="活动位置纬度" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signinAddress" label="活动签到打卡地点" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signinLongitude" label="活动签到打卡位置经度" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signinLatitude" label="活动签到打卡位置纬度" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="clockRadius" label="活动签到打卡半径(单位：米)" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actQuota" label="活动名额" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="signupNum" label="已报名人数" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="clockNum" label="活动打卡人数" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actShareNum" label="活动分享数" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actBrowseNum" label="活动浏览数" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="contacts" label="联系人" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="tel" label="联系电话" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="requirement" label="招募要求" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actContent" label="活动内容" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="actStatus" label="活动发布状态（0-下架，1上架）" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="publishTime" label="活动发布时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="sponsor" label="活动主办方" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="deptId" label="创建部门ID" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="punishmentPoints" label="活动惩罚积分" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="reward" label="活动奖励积分" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column> |
|||
<el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column> |
|||
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('heart:actinfo:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> |
|||
<el-button v-if="$hasPermission('heart:actinfo:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
:current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="limit" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="actInfoList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './actinfo-add-or-update' |
|||
import ActInfoList from './actinfo-list' |
|||
import ActInfoDetailView from './actinfo-detail-view' |
|||
import ActInfoAdd from './actinfo-add-or-update' |
|||
import ActUserRelation from './actuserrelation' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/heart/actinfo/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/heart/actinfo', |
|||
deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
id: '' |
|||
} |
|||
selectComponent: ActInfoList |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate |
|||
ActInfoList, |
|||
ActInfoDetailView, |
|||
ActInfoAdd, |
|||
ActUserRelation |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.selectComponent = ActInfoList |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<el-dialog :visible.sync="visible" :title="$t('look')" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"> |
|||
<el-form-item label="用户昵称" prop="nickname"> |
|||
{{dataForm.nickname}} |
|||
</el-form-item> |
|||
<el-form-item label="真实姓名" prop="realName"> |
|||
{{dataForm.realName}} |
|||
</el-form-item> |
|||
<el-form-item label="性别" prop="sex"> |
|||
{{formatSex(dataForm.sex)}} |
|||
</el-form-item> |
|||
<el-form-item label="年龄" prop="age"> |
|||
{{dataForm.age}} |
|||
</el-form-item> |
|||
<el-form-item label="联系电话" prop="mobile"> |
|||
{{dataForm.mobile}} |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" prop="identityNo"> |
|||
{{dataForm.identityNo}} |
|||
</el-form-item> |
|||
<el-form-item label="当前状态" prop="status"> |
|||
{{formatState(dataForm.status)}} |
|||
<!-- <el-input v-model="dataForm.status" placeholder="当前状态（0-报名，1-审核通过，2-打卡，3-取消报名，4-审核不通过）"></el-input>--> |
|||
</el-form-item> |
|||
<el-form-item label="原因" prop="failureReason"> |
|||
{{dataForm.failureReason}} |
|||
</el-form-item> |
|||
<el-form-item label="审核时间" prop="auditTime"> |
|||
{{dataForm.auditTime}} |
|||
</el-form-item> |
|||
<el-form-item label="报名时间" prop="signupTime"> |
|||
{{dataForm.signupTime}} |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
id: '', |
|||
actId: '', |
|||
userId: '', |
|||
nickname: '', |
|||
faceImg: '', |
|||
partyFlag: '', |
|||
realName: '', |
|||
sex: '', |
|||
age: '', |
|||
mobile: '', |
|||
identityNo: '', |
|||
status: '', |
|||
failureReason: '', |
|||
auditTime: '', |
|||
signupTime: '' |
|||
|
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
}, |
|||
methods: { |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs['dataForm'].resetFields() |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/heart/actuserrelation/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
}).catch(() => {}) |
|||
}, |
|||
formatState: function (status) { |
|||
let state = status |
|||
if (state === '0') { |
|||
return '报名' |
|||
} else if (state === '1') { |
|||
return '审核通过' |
|||
} else if (state === '2') { |
|||
return '打卡' |
|||
} else if (state === '3') { |
|||
return '取消报名' |
|||
} else if (state === '4') { |
|||
return '审核不通过' |
|||
} |
|||
}, |
|||
formatSex: function (sex) { |
|||
let state = sex |
|||
if (state === '0') { |
|||
return '女' |
|||
} else if (state === '1') { |
|||
return '男' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
title="地址确认" |
|||
:append-to-body="true" |
|||
:modal-append-to-body="false" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
> |
|||
<el-form :model="dataForm" :label-width="$i18n.locale === 'en-US' ? '180px' : '140px'"> |
|||
<el-form-item label="地址:"> |
|||
<div>{{dataForm.address}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="经度:"> |
|||
<div>{{dataForm.longitude}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="纬度:"> |
|||
<div>{{dataForm.latitude}}</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="checkOk()" type="primary">{{$t("confirm")}}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
address: '', |
|||
longitude: 0,//经度 |
|||
latitude: 0,//纬度 |
|||
city: '' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init (dataForm) { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.dataForm = dataForm |
|||
}) |
|||
}, |
|||
checkOk () { |
|||
this.$emit('checkOk', true) |
|||
this.visible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,236 @@ |
|||
|
|||
<template> |
|||
<el-dialog :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"> |
|||
<el-form :inline="true" |
|||
:model="dataForm" |
|||
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"> |
|||
<el-row> |
|||
<el-form-item label="活动地点：" |
|||
prop="address"> |
|||
<el-input v-model="dataForm.address" |
|||
type="text" |
|||
clearable |
|||
style="width:400px"> |
|||
</el-input>  |
|||
<el-button type="primary" |
|||
@click="searchKeyword()">搜索</el-button> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label=" " |
|||
prop="map"> |
|||
<div> |
|||
<div id="container" style="width:500px;height:400px;"></div> |
|||
</div> |
|||
</el-form-item> |
|||
|
|||
</el-row> |
|||
</el-form> |
|||
<address-check v-if="addressCheckVisible" ref="addressCheck" v-on:checkOk="checkOk"></address-check> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
var geocoder; |
|||
import jsonp from 'jsonp' |
|||
import AddressCheck from './address-check' |
|||
export default { |
|||
name:'maps', |
|||
data () { |
|||
return { |
|||
dataForm: { |
|||
address: "", |
|||
longitude:0,//经度 |
|||
latitude:0,//纬度 |
|||
city:'', |
|||
type: 1, |
|||
radius:200 |
|||
}, |
|||
visible: false, |
|||
addressCheckVisible:false |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
init (type,radius) { |
|||
this.visible = true |
|||
this.dataForm.address = '' |
|||
this.dataForm.type = type |
|||
this.dataForm.radius = radius |
|||
this.getMyLocation(); |
|||
}, |
|||
getAddress(lat,lng) { |
|||
this.dataForm.longitude = lng; |
|||
this.dataForm.latitude = lat; |
|||
var url3 = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp"; |
|||
jsonp(url3, null, (err, data) => { |
|||
if (err) { |
|||
console.log(err) |
|||
} |
|||
console.log(data) |
|||
this.dataForm.address = data.result.address |
|||
}) |
|||
}, |
|||
getMyLocation() { |
|||
var geolocation = new qq.maps.Geolocation("MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M", "e家党群-管理端"); |
|||
geolocation.getIpLocation(this.showPosition, this.showErr); |
|||
}, |
|||
showPosition(position) { |
|||
console.log(position); |
|||
this.dataForm.latitude = position.lat; |
|||
this.dataForm.longitude = position.lng; |
|||
this.dataForm.city = position.city; |
|||
this.setMap(); |
|||
}, |
|||
showErr() { |
|||
console.log("定位失败"); |
|||
this.getMyLocation();//定位失败再请求定位，测试使用 |
|||
}, |
|||
setMap() { |
|||
const that = this |
|||
var markerList =[]; |
|||
var radiusList =[]; |
|||
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 |
|||
//设置地图中心点 |
|||
var myLatlng = new qq.maps.LatLng(this.dataForm.latitude,this.dataForm.longitude); |
|||
//定义工厂模式函数 |
|||
var zoom = this.capacity(); |
|||
var myOptions = { |
|||
zoom: zoom, //设置地图缩放级别 |
|||
center: myLatlng, //设置中心点样式 |
|||
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType |
|||
} |
|||
// //获取dom元素添加地图信息 |
|||
var map = new qq.maps.Map(document.getElementById("container"), myOptions); |
|||
//设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center:new qq.maps.LatLng(this.dataForm.latitude,this.dataForm.longitude), |
|||
radius: this.dataForm.radius, |
|||
map: map |
|||
}); |
|||
radiusList.push(radius); |
|||
var marker = new qq.maps.Marker({ |
|||
position:myLatlng, |
|||
map:map |
|||
}); |
|||
markerList.push(marker) |
|||
//添加监听事件 获取鼠标单击事件 |
|||
qq.maps.event.addListener(map, 'click', function(event) { |
|||
|
|||
that.cleanMarkRadius(markerList,radiusList); |
|||
that.getAddress(event.latLng.lat,event.latLng.lng); |
|||
var myLatlng = new qq.maps.LatLng(event.latLng.lat,event.latLng.lng); |
|||
map.setCenter(myLatlng); |
|||
var marker = new qq.maps.Marker({ |
|||
position:event.latLng, |
|||
map:map |
|||
}); |
|||
//设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center:new qq.maps.LatLng(event.latLng.lat,event.latLng.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}); |
|||
radiusList.push(radius); |
|||
markerList.push(marker) |
|||
qq.maps.event.addListener(map, 'click', function(event) { |
|||
that.cleanMarkRadius(markerList,radiusList); |
|||
}); |
|||
qq.maps.event.addListener(marker, 'click', function(event) { |
|||
that.addressCheckHandle(); |
|||
}); |
|||
}); |
|||
//调用地址解析类 |
|||
geocoder = new qq.maps.Geocoder({ |
|||
complete : function(result){ |
|||
map.setCenter(result.detail.location); |
|||
that.getAddress(result.detail.location.lat,result.detail.location.lng); |
|||
var marker = new qq.maps.Marker({ |
|||
map:map, |
|||
position: result.detail.location |
|||
}); |
|||
//设置圆形 |
|||
var radius = new qq.maps.Circle({ |
|||
center:new qq.maps.LatLng(result.detail.location.lat,result.detail.location.lng), |
|||
radius: that.dataForm.radius, |
|||
map: map |
|||
}); |
|||
radiusList.push(radius); |
|||
markerList.push(marker); |
|||
that.cleanMarkRadius(markerList,radiusList); |
|||
qq.maps.event.addListener(marker, 'click', function(event) { |
|||
that.addressCheckHandle(); |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
searchKeyword() { |
|||
geocoder.getLocation(this.dataForm.address); |
|||
}, |
|||
addressCheckHandle() { |
|||
if (this.dataForm.address =='' || !(this.dataForm.latitude > 0)){ |
|||
alert("请选择地址！"); |
|||
return |
|||
} |
|||
this.addressCheckVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.addressCheck.init(this.dataForm) |
|||
}) |
|||
}, |
|||
checkOk(checkOk){ |
|||
if (checkOk){ |
|||
this.$emit('position', this.dataForm) |
|||
this.visible = false |
|||
} |
|||
}, |
|||
cleanMarkRadius(markerList,radiusList) { |
|||
if (markerList) { |
|||
if(markerList.length > 1){ |
|||
for (var i = 0; i < markerList.length-1; i++) { |
|||
markerList[i].setMap(null); |
|||
} |
|||
} else { |
|||
for (var i = 0; i < markerList.length; i++) { |
|||
markerList[i].setMap(null); |
|||
} |
|||
} |
|||
|
|||
} |
|||
if (radiusList) { |
|||
if(radiusList.length > 1){ |
|||
for (var i = 0; i < radiusList.length-1; i++) { |
|||
radiusList[i].setMap(null); |
|||
} |
|||
} else { |
|||
for (var i = 0; i < markerList.length; i++) { |
|||
radiusList[i].setMap(null); |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
capacity() { |
|||
if(0 < this.dataForm.radius && this.dataForm.radius <= 25){ |
|||
return 18 |
|||
} else if (25 < this.dataForm.radius && this.dataForm.radius <= 50){ |
|||
return 17 |
|||
} else if (50 < this.dataForm.radius && this.dataForm.radius <= 100){ |
|||
return 16 |
|||
} else if (100 < this.dataForm.radius && this.dataForm.radius <= 200){ |
|||
return 15 |
|||
} else if (200 < this.dataForm.radius && this.dataForm.radius <= 500){ |
|||
return 14 |
|||
} else if (500 < this.dataForm.radius && this.dataForm.radius <= 1000){ |
|||
return 13 |
|||
} else if (1000 < this.dataForm.radius && this.dataForm.radius <= 2000){ |
|||
return 12 |
|||
} else if (2000 < this.dataForm.radius && this.dataForm.radius <= 5000){ |
|||
return 11 |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
AddressCheck |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue