<template>
|
<div class="blindBoxActivity">
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-col :span="24" :offset="0" class="buttonPosition">
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-col>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="活动名称" prop="promotionName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="活动起止时间" width="300px">
|
<template slot-scope="scope">
|
<span>{{scope.row.promotionStartTime}} ~ {{scope.row.promotionEndTime}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="活动状态" width="100px">
|
<template slot-scope="scope">
|
{{getArrayLable(formLabel[3].opts,scope.row.promotionStatus)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
|
<el-table-column label="操作" :width="`${5 * $store.getters.colSize + 50}px`">
|
<template slot-scope="scope">
|
<wly-btn v-show="scope.row.promotionStatus !== '08'"
|
@click="detailsInfo(scope.row,scope.$index)">详情</wly-btn>
|
<wly-btn type="primary"
|
v-if="scope.row.promotionStatus === '00' || scope.row.promotionStatus === '08'"
|
@click="editItem(scope.row,scope.$index)">编辑</wly-btn>
|
<wly-btn type="primary" @click="editItem(scope.row,scope.$index,'copy')">复制</wly-btn>
|
<wly-btn v-if="scope.row.promotionStatus === '02' || scope.row.promotionStatus === '08'"
|
:type="scope.row.promotionStatus === '02' ? 'primary':'success'"
|
@click="updateStatus(scope.row,scope.$index)">
|
{{scope.row.promotionStatus === '02' ? '暂停':'启用'}}
|
</wly-btn>
|
<wly-btn v-if="scope.row.promotionStatus === '02'" type="primary"
|
@click="updateInactiveStatus(scope.row,scope.$index)">
|
停用
|
</wly-btn>
|
<wly-btn type="warning" v-if="scope.row.isExistRecord === 1"
|
@click="getReceiveRecordList(scope.row,scope.$index)">抽奖记录</wly-btn>
|
<wly-btn type="success" @click="QRCode(scope.row,scope.$index)">APP预览</wly-btn>
|
<wly-btn type="danger"
|
v-if="scope.row.promotionStatus!== '02'&&scope.row.isExistRecord !== 1"
|
@click="deleteItem(scope.row,scope.$index)">删除</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<QRCode ref="QRCode"></QRCode>
|
<receive-record :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
:promotionId='selectedDialog.id'></receive-record>
|
</div>
|
</template>
|
<script>
|
import receiveRecord from '@/views/blindBoxActivity/components/receiveRecord.vue'
|
import QRCode from '@/views/blindBoxActivity/components/QRCode.vue'
|
import proActivityApi from '@/api/promotion/proActivity'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
var _this = null
|
|
export default {
|
components: { receiveRecord, QRCode },
|
data() {
|
return {
|
dialogVisible: false,
|
tableData: [],
|
total: 0,
|
listQuery: {
|
promotionName: null,
|
promotionStatus: null,
|
promotionStartTime: null,
|
promotionEndTime: null
|
},
|
selectedDialog: {
|
show: false,
|
title: '抽奖记录',
|
id: null
|
},
|
formLabel: [
|
{
|
model: 'promotionStartTime',
|
label: '活动起止时间',
|
customLabel: '活动时间',
|
type: 'date',
|
labelWidth: '100px',
|
pickerOptions: {
|
disabledDate(time) {
|
return _this.listQuery.promotionEndTime && time.getTime() > new Date(_this.listQuery.promotionEndTime).getTime()
|
}
|
},
|
timeClass: 'start-time-style'
|
},
|
{
|
model: 'promotionEndTime',
|
label: '-',
|
customLabel: '活动时间',
|
type: 'date',
|
labelWidth: '20px',
|
valueFormat: 'yyyy-MM-dd 23:59:59',
|
pickerOptions: {
|
disabledDate(time) {
|
return _this.listQuery.promotionStartTime && time.getTime() < new Date(_this.listQuery.promotionStartTime).getTime()
|
}
|
},
|
timeClass: 'end-time-style'
|
},
|
{
|
model: 'promotionName',
|
label: '活动名称',
|
type: 'input'
|
},
|
{
|
model: 'promotionStatus',
|
label: '活动状态',
|
type: 'select',
|
opts: [
|
{
|
id: '00',
|
name: '未开始'
|
},
|
{
|
id: '02',
|
name: '进行中'
|
},
|
{
|
id: '07',
|
name: '已停用'
|
},
|
{
|
id: '08',
|
name: '已暂停'
|
},
|
{
|
id: '06',
|
name: '已结束'
|
}
|
]
|
}
|
],
|
form: {}
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
created() {
|
_this = this
|
},
|
methods: {
|
/**
|
* 修改活动状态
|
*/
|
async updateStatus(row, index) {
|
try {
|
const promotionStatus = row.promotionStatus === '02' ? '08' : '00'
|
const res = await proActivityApi.updateStartOrStop({ promotionId: row.promotionId, promotionStatus })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 修改活动状态为已停用
|
*/
|
async updateInactiveStatus(row, index) {
|
this.$confirm('停用后活动不可在开启，确定要停用吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
try {
|
const res = await proActivityApi.updateStartInactive({ promotionId: row.promotionId })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
}).catch(() => { })
|
},
|
/**
|
* 查看详情
|
*/
|
detailsInfo(row, index) {
|
this.$router.push({ name: 'blindBoxActInfo', query: { id: row.promotionId } })
|
},
|
/**
|
*打开二位
|
*/
|
QRCode(row, index) {
|
row.routerPath = `${process.env.VUE_APP_H5_URL}/blindBoxNew?promotionId=${row.promotionId}`
|
this.$refs.QRCode.show(row)
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 获取抽奖记录列表
|
*/
|
getReceiveRecordList(row, index) {
|
this.selectedDialog.show = true
|
this.selectedDialog.id = row.promotionId
|
},
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.$router.push({ name: 'blindBoxActAdd' })
|
},
|
/**
|
*编辑
|
*/
|
editItem(row, index, f) {
|
const query = {
|
id: row.promotionId
|
}
|
if (f === 'copy') {
|
query.isCopy = true
|
}
|
this.$router.push({ name: 'blindBoxActEdit', query })
|
},
|
/**
|
* 修改状态
|
*/
|
async updateState(row, index) {
|
try {
|
const promotionStatus = row.promotionStatus === '02' ? '08' : '00'
|
const res = await proActivityApi.updateStartOrStop({ promotionId: row.promotionId, promotionStatus })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 删除
|
*/
|
deleteItem(row, index) {
|
this.$confirm('删除后当前活动历史记录将清空，确认要删除吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
proActivityApi.deleteItem({ promotionId: row.promotionId }).then(res => {
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryData()
|
}
|
})
|
}).catch(() => { })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
this.listQuery.promotionType = '3'
|
proActivityApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.blindBoxActivity .el-table .el-button + .el-button {
|
margin-top: 10px;
|
}
|
</style>
|
