272 lines
7.9 KiB
Vue
272 lines
7.9 KiB
Vue
<template>
|
||
<div class="store-activity-base-container">
|
||
<vab-query-form>
|
||
<vab-query-form-right-panel :span="24">
|
||
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||
<el-form-item>
|
||
<el-input
|
||
v-model.trim="queryForm.activity_name"
|
||
clearable
|
||
:placeholder="__('请输入活动标题')"
|
||
style="margin-right: 10px"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select
|
||
v-model="queryForm.store_id"
|
||
clearable
|
||
filterable
|
||
:loading="loading"
|
||
:placeholder="__('请输入店铺名称')"
|
||
remote
|
||
:remote-method="remoteFindUserList"
|
||
reserve-keyword
|
||
>
|
||
<el-option
|
||
v-for="item in dataList"
|
||
:key="item.store_id"
|
||
:label="item.store_name"
|
||
:value="item.store_id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-select
|
||
v-model="queryForm.activity_state"
|
||
clearable
|
||
:placeholder="__('请选择活动状态')"
|
||
>
|
||
<el-option :label="__('未开启')" :value="0" /><el-option :label="__('正常')" :value="1" /><el-option :label="__('已结束')" :value="2" /><el-option :label="__('商家关闭')" :value="3" /><el-option :label="__('管理员关闭')" :value="4" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button icon="el-icon-search" type="primary" @click="queryData">
|
||
{{ __('查询') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</vab-query-form-right-panel>
|
||
</vab-query-form>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
border
|
||
:data="list"
|
||
:height="tableConfig.height"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('店铺编号')"
|
||
prop="store_id"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('店铺名称')"
|
||
prop="store_name"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('活动标题')"
|
||
prop="activity_title"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:formatter="formatStarttime"
|
||
:label="__('活动开始时间')"
|
||
prop="activity_starttime"
|
||
show-overflow-tooltip
|
||
width="160"
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:formatter="formatEndtime"
|
||
:label="__('活动结束时间')"
|
||
prop="activity_endtime"
|
||
show-overflow-tooltip
|
||
width="160"
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('等级要求')"
|
||
prop="activity_use_level_name"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('活动状态')"
|
||
prop="activity_state"
|
||
show-overflow-tooltip
|
||
width="130"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-if="scope.row.activity_state === 0"
|
||
type="info"
|
||
@click="changeState(scope.row.activity_id, 1)"
|
||
>
|
||
{{ __('未开启') }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.activity_state === 1"
|
||
type="success"
|
||
@click="changeState(scope.row.activity_id, 4)"
|
||
>
|
||
{{ __('正常') }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.activity_state === 2"
|
||
disabled
|
||
type="danger"
|
||
>
|
||
{{ __('已结束') }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.activity_state === 3"
|
||
type="success"
|
||
@click="changeState(scope.row.activity_id, 0)"
|
||
>
|
||
{{ __('商家关闭') }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.activity_state === 4"
|
||
type="success"
|
||
@click="changeState(scope.row.activity_id, 0)"
|
||
>
|
||
{{ __('管理员关闭') }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('活动商品')"
|
||
prop="item_id"
|
||
show-overflow-tooltip
|
||
width="200"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.item">
|
||
<el-row v-for="item in scope.row.item" :key="item.item_id">
|
||
{{ item.product_item_name }}
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
:label="__('活动规则')"
|
||
show-overflow-tooltip
|
||
width="250"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.activity_rule.rule && scope.row.activity_rule.rule.length > 0">
|
||
<el-row>
|
||
<span>{{ __('购买同一活动商品消费：') }}</span>
|
||
<br />
|
||
<div v-for="item in scope.row.activity_rule.rule" :key="item">
|
||
{{ __('满') }} {{ item.total }} {{ __('元，') }}{{ __('可换购商品') }} {{ item.max_num }} {{ __('件') }}
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
<el-pagination
|
||
background
|
||
:current-page="queryForm.pageNum"
|
||
:layout="layout"
|
||
:page-size="queryForm.pageSize"
|
||
:total="total"
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { translateTitle as __ } from '@/utils/i18n'
|
||
import { editState, getList } from '@/api/store/activity/base'
|
||
import { renderTime } from '@/utils/date'
|
||
import { getList as storeList } from '@/api/store/base'
|
||
|
||
export default {
|
||
name: 'StoreActivityBase',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
tableConfig: {
|
||
height: window.innerHeight - 220 - 90,
|
||
},
|
||
list: [],
|
||
dataList: [],
|
||
loading: true,
|
||
listLoading: true,
|
||
layout: 'total, sizes, prev, pager, next, jumper',
|
||
total: 0,
|
||
selectRows: '',
|
||
queryForm: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
activity_type_id: 1101,
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchData()
|
||
},
|
||
methods: {
|
||
__,
|
||
formatStarttime(row) {
|
||
return renderTime(row.activity_starttime)
|
||
},
|
||
formatEndtime(row) {
|
||
return renderTime(row.activity_endtime)
|
||
},
|
||
handleSizeChange(val) {
|
||
this.queryForm.pageSize = val
|
||
this.fetchData()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.queryForm.pageNum = val
|
||
this.fetchData()
|
||
},
|
||
queryData() {
|
||
this.queryForm.pageNum = 1
|
||
this.fetchData()
|
||
},
|
||
async remoteFindUserList(store_name) {
|
||
if (store_name !== '') {
|
||
this.loading = true
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
storeList({ store_name: store_name,pageSize: 200 }).then((res) => {
|
||
this.dataList = res.data.items
|
||
})
|
||
}, 200)
|
||
} else {
|
||
this.dataList = []
|
||
}
|
||
},
|
||
async changeState(activity_id, state) {
|
||
this.$baseConfirm(this.__('请确认是否更改状态？'), null, async () => {
|
||
const { msg } = await editState({
|
||
activity_id: activity_id,
|
||
activity_state: state,
|
||
})
|
||
this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
|
||
await this.fetchData()
|
||
})
|
||
},
|
||
async fetchData() {
|
||
this.listLoading = true
|
||
const { data } = await getList(this.queryForm)
|
||
this.list = data.items
|
||
this.total = data.records
|
||
this.listLoading = false
|
||
},
|
||
},
|
||
}
|
||
</script>
|