李鹏飞
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> |
<template> |
||||
<el-card shadow="never" class="aui-card--fill"> |
<keep-alive include="actInfoList"> |
||||
<div class="mod-heart__actinfo}"> |
<component :is="selectComponent"></component> |
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> |
</keep-alive> |
||||
<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> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import mixinViewModule from '@/mixins/view-module' |
import ActInfoList from './actinfo-list' |
||||
import AddOrUpdate from './actinfo-add-or-update' |
import ActInfoDetailView from './actinfo-detail-view' |
||||
|
import ActInfoAdd from './actinfo-add-or-update' |
||||
|
import ActUserRelation from './actuserrelation' |
||||
export default { |
export default { |
||||
mixins: [mixinViewModule], |
|
||||
data () { |
data () { |
||||
return { |
return { |
||||
mixinViewModuleOptions: { |
selectComponent: ActInfoList |
||||
getDataListURL: '/heart/actinfo/page', |
|
||||
getDataListIsPage: true, |
|
||||
deleteURL: '/heart/actinfo', |
|
||||
deleteIsBatch: true |
|
||||
}, |
|
||||
dataForm: { |
|
||||
id: '' |
|
||||
} |
|
||||
} |
} |
||||
}, |
}, |
||||
components: { |
components: { |
||||
AddOrUpdate |
ActInfoList, |
||||
|
ActInfoDetailView, |
||||
|
ActInfoAdd, |
||||
|
ActUserRelation |
||||
|
}, |
||||
|
methods: { |
||||
|
init () { |
||||
|
this.selectComponent = ActInfoList |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</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