<template>
|
<div class="custom-scroll">
|
<v-header
|
:title="'抽奖活动获奖名单'"
|
:bar="bar"
|
search
|
@on-search="onSearch"
|
></v-header>
|
<div>
|
<div class="fl-fw mr-b-10 fz-9">
|
<div>
|
奖品总量：<span class="fc-red fw-bold">{{ statisObj.total }}</span>
|
</div>
|
<div class="mr-l-30">
|
已奖励：<span class="fc-red fw-bold">{{ statisObj.total-statisObj.surplus }}</span>
|
</div>
|
<div class="mr-l-30">
|
剩余奖品：<span class="fc-red fw-bold">{{ statisObj.surplus }}</span>
|
</div>
|
</div>
|
<div class="fl-fw">
|
<div
|
class="fl-f mr-r-20 mr-b-10"
|
v-for="(it, ix) in goodsList"
|
:key="ix"
|
>
|
<el-image
|
fit="cover"
|
class="img-style"
|
:src="it.image"
|
:preview-src-list="[it.image]"
|
>
|
</el-image>
|
<div class="mr-l-10 fl-co">
|
<span class="mr-t-6">{{ it.name }}</span>
|
<span class="mr-t-10"
|
>已奖励：<span class="fc-red">{{
|
it.total - it.surplus
|
}}</span></span
|
>
|
<span class="mr-t-10"
|
>剩余奖品：<span class="fc-red">{{
|
it.surplus
|
}}</span></span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="add fl-al mr-b-10">
|
<el-button :disabled="!tds.length" size="small" type="primary" @click.stop="clickHandle('import')"
|
>导出</el-button
|
>
|
<el-button size="small" @click="$router.go(-1)">返回上一页</el-button>
|
</div>
|
<div class="tab">
|
<v-table :trs="trs" :tds="tds">
|
<template v-slot:status="item">
|
<span v-if="item.scope.status === 1">待兑换</span>
|
<span v-if="item.scope.status === 2">已兑换</span>
|
<span v-if="item.scope.status === 3">已失效</span>
|
</template>
|
<template v-slot:createTime="item">
|
<span>{{ rTime(item.scope.createTime) }}</span>
|
</template>
|
<template v-slot:staffTime="item">
|
<span>{{ rTime(item.scope.staffTime) }}</span>
|
</template>
|
<template v-slot:image="{ scope }">
|
<div class="fl-cen" v-if="scope.image">
|
<el-image
|
fit="cover"
|
style="width: 30px; height: 30px"
|
:src="scope.image"
|
:preview-src-list="[scope.image]"
|
>
|
</el-image>
|
</div>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<el-button @click="clickHandle('edit', scope)" type="text"
|
>编辑</el-button
|
>
|
<el-button @click="clickHandle('look', scope)" type="text"
|
>查看</el-button
|
>
|
<el-button @click="clickHandle('delete', scope)" type="text"
|
>删除</el-button
|
>
|
<el-button @click="clickHandle('award', scope)" type="text"
|
>获奖名单</el-button
|
>
|
</template>
|
</v-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { dateTime } from "../../utils/common";
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
dialogVisible: false,
|
bar: [
|
{ title: "关键字", name: "keyword" },
|
{
|
title: "状态",
|
name: "status",
|
type: "select",
|
list: [
|
{
|
value: 1,
|
label: "待兑换",
|
},
|
{
|
value: 2,
|
label: "已兑换",
|
},
|
{
|
value: 3,
|
label: "已失效",
|
},
|
],
|
},
|
],
|
trs: [
|
{ text: "序号", val: "id", width: "60px" },
|
{ text: "用户昵称", val: "nickName" },
|
{ text: "姓名", val: "username" },
|
{ text: "联系电话", val: "phone" },
|
{ text: "中奖时间", val: "btn", slot: "createTime" },
|
{ text: "奖品名称", val: "prizeName" },
|
{ text: "奖品图片", val: "btn", slot: "image" },
|
{ text: "核销人", val: "staffName" },
|
{ text: "核销时间", val: "btn", slot: "staffTime" },
|
{ text: "状态", val: "btn", slot: "status" },
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
search: {},
|
goodsList: [],
|
statisObj: {},
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler(n) {
|
if (n.page === this.$route.path) {
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
rTime(t) {
|
return dateTime(t);
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
},
|
onSearch(v) {
|
this.search = demo.copy(v);
|
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();
|
},
|
// 获取数据
|
init() {
|
let v = demo.copy(
|
Object.assign(this.search, {
|
page: this.paged.page,
|
size: this.paged.limit,
|
paramId: this.$route.query.id,
|
})
|
);
|
this.$api.post("comActRaffleRecord/queryAll", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
});
|
},
|
// 页面操作
|
clickHandle(type, row) {
|
switch (type) {
|
case "import": {
|
let v = demo.copy(
|
Object.assign(this.search, {
|
page: this.paged.page,
|
size: this.paged.limit,
|
paramId: this.$route.query.id,
|
})
|
);
|
this.$api.post("comActRaffleRecord/export", v, (e) => {
|
location.href = e;
|
});
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
},
|
getActStatis() {
|
this.$api.get(
|
"comActRaffleRecord/queryPrize",
|
{
|
id: this.$route.query.id,
|
},
|
(e) => {
|
this.statisObj = e;
|
this.goodsList = e.comActRafflePrizeVOList;
|
}
|
);
|
},
|
},
|
mounted() {
|
this.getActStatis();
|
},
|
};
|
</script>
|
<style scoped>
|
.custom-scroll {
|
overflow: scroll;
|
}
|
.text-label {
|
width: 150px;
|
text-align: right;
|
}
|
.text-box {
|
width: 200px;
|
}
|
.img-style {
|
width: 100px;
|
height: 100px;
|
border-radius: 10px;
|
}
|
</style>
|
