<template>
|
<div>
|
<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="120px">
|
<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="260px">
|
<template slot-scope="scope">
|
<wly-btn @click="detailsInfo(scope.row,scope.$index)">详情</wly-btn>
|
<wly-btn type="primary" v-if="scope.row.promotionStatus === '00'"
|
@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 === '00' || scope.row.promotionStatus === '02'"
|
:type="scope.row.promotionStatus === '02' ? 'primary':'success'"
|
@click="updateStatus(scope.row,scope.$index)">
|
{{scope.row.promotionStatus === '00' ? '开始':'停用'}}
|
</wly-btn>
|
<wly-btn type="success" @click="QRCode(scope.row,scope.$index)">APP预览</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<QRCode ref="QRCode"></QRCode>
|
</div>
|
</template>
|
<script>
|
import timeLimitBuyApi from '@/api/promotion/timeLimitBuy'
|
import QRCode from '@/views/blindBoxActivity/components/QRCode.vue'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
var _this = null
|
|
export default {
|
components: { 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() + 86400000
|
}
|
},
|
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() - 86400000
|
}
|
},
|
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: '06',
|
name: '已结束'
|
}
|
]
|
}
|
],
|
form: {}
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
created() {
|
_this = this
|
},
|
methods: {
|
/**
|
* 修改活动状态
|
*/
|
async updateStatus(row, index) {
|
if (row.promotionStatus === '00') {
|
this.startActivity(row) // 活动未开始时
|
} else if (row.promotionStatus === '02') {
|
this.stopActivity(row) // 活动进行中时
|
}
|
},
|
/**
|
* 活动开始
|
*/
|
async startActivity(row) {
|
try {
|
const res = await timeLimitBuyApi.startActivity({ promotionId: row.promotionId })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 活动停用
|
*/
|
async stopActivity(row) {
|
try {
|
const res = await timeLimitBuyApi.stopActivity({ promotionId: row.promotionId })
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
},
|
/**
|
* 查看详情
|
*/
|
detailsInfo(row, index) {
|
this.$router.push({ name: 'timeLimitBuyInfo', query: { id: row.promotionId } })
|
},
|
/**
|
*打开二位
|
*/
|
QRCode(row, index) {
|
row.routerPath = `${process.env.VUE_APP_H5_URL}/activity?promotionId=${row.promotionId}`
|
this.$refs.QRCode.show(row)
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.$router.push({ name: 'timeLimitBuyAdd' })
|
},
|
/**
|
*编辑
|
*/
|
editItem(row, index, f) {
|
const query = {
|
id: row.promotionId
|
}
|
if (f === 'copy') {
|
query.isCopy = true
|
}
|
this.$router.push({ name: 'timeLimitBuyEdit', query })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
timeLimitBuyApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
