<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 prop="agglomerateOrderNum" show-overflow-tooltip width="150px">
|
<template slot="header">
|
成团订单数
|
<el-popover placement="top" width="200" trigger="click"
|
content="注：成团订单数仅计算已成团数量，待成团数据不计数">
|
<i class="el-icon-question" style="cursor:pointer;" slot="reference"></i>
|
</el-popover>
|
</template>
|
<template slot-scope="scope">
|
<span class="agglomerateOrderNum" v-show="scope.row.agglomerateOrderNum !== '0'"
|
@click="getAgglomerateOrderNumDetails(scope.row)">
|
{{scope.row.agglomerateOrderNum}}
|
</span>
|
<span v-show="scope.row.agglomerateOrderNum === '0'">0</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" prop="createTime" width="180px"></el-table-column>
|
<el-table-column label="操作" :width="`${5 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn @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 v-if="scope.row.promotionStatus === '02'" type="primary"
|
@click="updateStatus(scope.row,scope.$index)">
|
停用
|
</wly-btn>
|
<wly-btn v-if="scope.row.promotionStatus === '02'" type="warning"
|
@click="updateStatusSuspend(scope.row,scope.$index)">
|
暂停
|
</wly-btn>
|
<wly-btn type="primary" @click="editItem(scope.row,scope.$index,'copy')">复制</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.promotionStatus!== '08'&&scope.row.agglomerateOrderNum === '0'"
|
@click="deleteItem(scope.row,scope.$index)">删除</wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<QRCode ref="QRCode"></QRCode>
|
<el-dialog :visible.sync="dialogVisible" title="成团订单数" :close-on-click-modal="false"
|
:modal-append-to-body="false" width="1300px">
|
<agglomerate-order-num-details ref="agglomerateOrderNumDetails" :idList="idList">
|
</agglomerate-order-num-details>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import proActivityApi from '@/api/promotion/proActivity'
|
import QRCode from '@/views/blindBoxActivity/components/QRCode.vue'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
import groupActivityApi from '@/api/promotion/groupActivity'
|
import agglomerateOrderNumDetails from './components/agglomerateOrderNumDetails.vue'
|
var _this = null
|
|
export default {
|
components: { QRCode, agglomerateOrderNumDetails },
|
data() {
|
return {
|
dialogVisible: false,
|
tableData: [],
|
total: 0,
|
listQuery: {
|
promotionName: null,
|
promotionStatus: null,
|
promotionStartTime: null,
|
promotionEndTime: null,
|
promotionType: '6'
|
},
|
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: '-',
|
type: 'date',
|
customLabel: '活动时间',
|
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: '已结束'
|
},
|
{
|
id: '08',
|
name: '已暂停'
|
}
|
]
|
}
|
],
|
form: {},
|
idList: null
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
created() {
|
_this = this
|
},
|
methods: {
|
/**
|
* 获取拼团人数的详情
|
*/
|
async getAgglomerateOrderNumDetails(row) {
|
const res = await groupActivityApi.getAgglomerateOrderNumDetails(row.promotionId)
|
if (res.code === '0' && res.data.length) {
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.$refs.agglomerateOrderNumDetails.tableData = []
|
this.idList = res.data[0].orderIds.join()
|
this.$refs.agglomerateOrderNumDetails.queryList({ pageNum: 1, pageSize: 10 }, this.idList)
|
})
|
}
|
},
|
/**
|
* 修改活动状态为已暂停
|
*/
|
async updateStatusSuspend(row, index) {
|
this.$confirm('暂停后活动处于不可参与状态，确定要暂停吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async() => {
|
try {
|
const res = await groupActivityApi.waitingItem(row.promotionId)
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryList(this.$refs.table.getPageInfo())
|
}
|
} catch (error) {
|
}
|
}).catch(() => { })
|
},
|
/**
|
* 修改活动状态为已停用
|
*/
|
async updateStatus(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(() => { })
|
},
|
/**
|
* 删除
|
*/
|
deleteItem(row, index) {
|
this.$confirm('删除后不可恢复，确定要删除吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async() => {
|
const res = await groupActivityApi.deleteItem(row.promotionId)
|
if (res.code === '0') {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryData()
|
}
|
}).catch(() => { })
|
},
|
/**
|
* 查看详情
|
*/
|
detailsInfo(row, index) {
|
this.$router.push({ name: 'groupActInfo', query: { id: row.promotionId } })
|
},
|
/**
|
*打开二位
|
*/
|
QRCode(row, index) {
|
row.routerPath = `${process.env.VUE_APP_H5_URL}/collageActivity?promotionId=${row.promotionId}`
|
this.$refs.QRCode.show(row)
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.$router.push({ name: 'groupActAdd' })
|
},
|
/**
|
*编辑
|
*/
|
editItem(row, index, f) {
|
const query = {
|
id: row.promotionId
|
}
|
if (f === 'copy') {
|
query.isCopy = true
|
}
|
this.$router.push({ name: 'groupActEdit', query })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
proActivityApi.getList({ ...this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.agglomerateOrderNum {
|
color: #409eff;
|
cursor: pointer;
|
text-decoration: underline;
|
}
|
</style>
|
