<template>
|
<div class="page_activity">
|
<v-header
|
title="居民活动"
|
search
|
:bar="bar"
|
@on-search="onSearch"
|
></v-header>
|
<div class="add">
|
<el-button
|
type="primary"
|
size="small"
|
@click.stop="$router.push('/act_act_add')"
|
>新增</el-button
|
>
|
</div>
|
<div class="tab">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span
|
v-if="item.scope.isQrCode === 1"
|
@click="onEvent({ v: 'code' }, item.scope)"
|
class="col_primary"
|
>二维码</span
|
>
|
<span
|
class="col_primary"
|
v-for="(i, j) in is_level(+item.scope.status)"
|
:key="j + '-btn'"
|
@click="onEvent(i, item.scope)"
|
>{{ i.t }}</span
|
>
|
<el-dropdown
|
@command="handleCommand"
|
@visible-change="handleCommand2(item.scope)"
|
style="
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
line-height: 1;
|
cursor: pointer;
|
color: #2593fc;
|
"
|
>
|
<span class="el-dropdown-link">更多</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="sign">签到记录</el-dropdown-item>
|
<el-dropdown-item command="comment">评价记录</el-dropdown-item>
|
<el-dropdown-item command="up">报名记录</el-dropdown-item>
|
<el-dropdown-item
|
v-if="item.scope.status === 3 || item.scope.status === 4"
|
command="close"
|
>取消活动</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</template>
|
<template v-slot:status="item">
|
<b>{{ isStatus(+item.scope.status - 1) }}</b>
|
</template>
|
<template v-slot:time="item">
|
<b>{{ item.scope.beginAt }}~{{ item.scope.endAt }}</b>
|
</template>
|
<template v-slot:rewardWay="{scope}">
|
<b>{{scope.rewardWay == 1 ? '按次奖励' : '' }}</b>
|
</template>
|
<template v-slot:times="item">
|
<b>{{ item.scope.signUpBegin }}~{{ item.scope.signUpEnd }}</b>
|
</template>
|
<template v-slot:num="item">
|
<b
|
>{{ item.scope.participantNow }}/{{
|
item.scope.participantMax < 0 ? "无限" : item.scope.participantMax
|
}}</b
|
>
|
</template>
|
</v-tool-table>
|
</div>
|
<!-- 二维码 -->
|
<el-dialog
|
title="活动签到码"
|
:modal='false'
|
:visible.sync="codeVisible"
|
width="30%"
|
:before-close="handleClose">
|
<div class="code-img">
|
<img src="">
|
</div>
|
<p class="text-f">按次奖励签到码，签到1次视为参与1次，一个签到码同一个用户仅可签到一次多次参与的用户可重置二维码让居民进行多次签到</p>
|
<span slot="footer" class="dialog-footer">
|
<el-button >重置二维码</el-button>
|
<el-button >下载保存</el-button>
|
<el-button type="primary" @click="codeVisible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
<el-dialog
|
title="活动签到码"
|
:visible.sync="dialogVisible"
|
width="30%"
|
:before-close="handleClose"
|
center
|
append-to-body
|
>
|
<div class="fl-cen">
|
<el-image class="code-img" :src="codeImg" :preview-src-list="[codeImg]">
|
</el-image>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="resetCode">重置二维码</el-button>
|
<el-button size="mini" @click="saveImgHandle">下载保存</el-button>
|
<el-button size="mini" @click="dialogVisible = false">关 闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
dialogVisible: false,
|
bar: [
|
{ title: "活动名称", name: "activityName" },
|
{ title: "状态", name: "status", type: "select", list: [] },
|
{ title: "积分奖励方式", name: "rewardWay", type: "select", list: [
|
{
|
label:"按次奖励",
|
value:1,
|
},
|
// {
|
// label:"计时奖励",
|
// value:2,
|
// }
|
] },
|
{ title: "活动时间", name: "time", type: "times" },
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "活动名称", val: "activityName" },
|
{ text: "活动类型", val: "activityType" },
|
{ text: "活动地点", val: "activityAddr" },
|
{ text: "居民人数", val: "btn", slot: "num", width: "90px" },
|
{ text: "积分奖励方式", val: "btn" ,slot:'rewardWay' },
|
// { text: "志愿者人数", val: "btn", slot: "num2", width: "90px" },
|
{ text: "活动状态", val: "btn", slot: "status" },
|
{ text: "发布时间", val: "publishAt" },
|
{ text: "活动时间", val: "btn", slot: "time" },
|
{ text: "报名时间", val: "btn", slot: "times" },
|
{ text: "评分等级", val: "evaluateLevel" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
os: {},
|
search: {},
|
item_id: "",
|
row_data: {},
|
codeImg: "",
|
actObj: {},
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
handleCommand2(data) {
|
this.item_id = data.id;
|
this.row_data = data;
|
},
|
handleCommand(val, item) {
|
switch (val) {
|
case "sign": {
|
this.$router.push(this.$nav.url("/checkRecord/" + this.item_id));
|
break;
|
}
|
case "comment": {
|
this.$router.push(this.$nav.url("/evaluateRecord/" + this.item_id));
|
break;
|
}
|
case "up": {
|
this.$router.push(this.$nav.url("/act_act_list/" + this.item_id));
|
break;
|
}
|
case "close": {
|
console.log(item);
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
type: "act-cancel",
|
data: {
|
id: this.item_id,
|
name: this.row_data.activityName,
|
people: this.row_data.contactName,
|
},
|
},
|
time: Date.now(),
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
// 按钮权限
|
is_level(id) {
|
/**
|
状态：待发布、未开始、报名中、进行中、已结束、已取消
|
①待发布：存草稿的状态；可发布、查看、编辑、删除
|
②未开始：未到报名时间；可查看、编辑、删除
|
④进行中：包括报名到活动结束之前的时间；可报名名单、查看、取消
|
⑤已结束：已到活动结束时间；可报名名单、查看
|
⑥已取消：到活动开始时，未达到需报名人数则自动取消
|
*/
|
let v = [
|
// { t: "报名名单", v: "list", by: [3, 4, 5, 6] },
|
{ t: "发布", v: "add", by: [1] },
|
{ t: "查看", v: "sel", by: [1, 2, 3, 4, 5, 6] },
|
{ t: "编辑", v: "upd", by: [1, 2, 6] },
|
{ t: "删除", v: "del", by: [1, 2, 6] },
|
// { t: "取消", v: "close", by: [3, 4] },
|
];
|
let o = v.filter((k) => {
|
return k.by.indexOf(+id) >= 0;
|
});
|
return demo.copy(o);
|
},
|
// 点击操作按钮
|
onEvent(i, item) {
|
let t = this;
|
// console.log(item);
|
switch (i.v) {
|
case "list": // 报名名单
|
this.$router.push(this.$nav.url("/act_act_list/" + item.id));
|
break;
|
case "add": // 发布
|
this.$api.post(
|
"communityactivity/releaseactivity",
|
{ id: item.id },
|
() => {
|
demo.toast("发布成功");
|
t.init();
|
}
|
);
|
break;
|
case "sel": // 查看
|
this.$router.push(this.$nav.url("/act_act_detail/" + item.id));
|
break;
|
case "code": // 二维码
|
this.actObj = item;
|
this.$api.post(
|
"comActActivityCode/getQRCode",
|
{
|
id: item.id,
|
type: 2,
|
},
|
(e) => {
|
this.dialogVisible = true;
|
this.codeImg = e;
|
}
|
);
|
break;
|
case "upd": // 编辑
|
this.$router.push(this.$nav.url("/act_act_edit/" + item.id));
|
break;
|
case "del": // 删除
|
this.$js.model(
|
"删除",
|
"是否删除[" + item.activityName + "]",
|
(res) => {
|
if (res) {
|
this.$api.del(
|
"communityactivity/activity",
|
{ id: item.id },
|
() => {
|
demo.toast("删除成功");
|
t.init();
|
}
|
);
|
}
|
}
|
);
|
break;
|
case "close": // 取消 cancelReason id
|
this.$store.dispatch("setFixed", {
|
event: "add",
|
data: {
|
type: "act-cancel",
|
data: {
|
id: item.id,
|
name: item.activityName,
|
people: item.contactName,
|
},
|
},
|
time: Date.now(),
|
});
|
break;
|
default:
|
}
|
},
|
// 状态
|
isStatus(v) {
|
return (
|
["待发布", "未开始", "报名中", "进行中", "已结束", "已取消"][v] || ""
|
);
|
},
|
onSearch(v) {
|
if (v.time && v.time.length && v.time[1]) {
|
v.beginAt = v.time[0];
|
v.endAt = v.time[1];
|
} else {
|
v.beginAt = "";
|
v.endAt = "";
|
}
|
this.search = demo.copy(v);
|
delete this.search.time;
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
},
|
// 重置二维码
|
resetCode() {
|
this.codeImg = "";
|
this.$api.post(
|
"comActActivityCode/resetQRCode",
|
{
|
id: this.actObj.id,
|
type: 2,
|
},
|
(e) => {
|
demo.toast("重置成功");
|
this.codeImg = e;
|
}
|
);
|
},
|
// 保存图片
|
saveImgHandle() {
|
let a = document.createElement("a");
|
a.href = this.codeImg;
|
a.setAttribute("download", "chart-download");
|
a.click();
|
},
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.os, this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
type:'2'
|
})
|
);
|
this.$api.post("communityactivity/pageactivity", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
e.records.map((item,index) => {
|
item.index = (this.paged.page-1) * this.paged.limit + index + 1
|
})
|
});
|
},
|
},
|
mounted() {
|
this.bar[1].list = this.$api.static.party_status();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.page_activity {
|
overflow-y: auto;
|
.tab,
|
.add {
|
margin-bottom: 10px;
|
}
|
.code-img {
|
width: 200px;
|
height: 200px;
|
border: 1px red solid;
|
margin: auto;
|
overflow: hidden;
|
img {
|
width: 100%;
|
}
|
}
|
.text-f{
|
font-size: 13px;
|
padding-top: 15px;
|
line-height: 20px;
|
}
|
}
|
</style>
|
