qimall/addons/Bargain/backend/views/default/index.php

<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api-params="apiParams"
        :search-list="searchList"
        @set-action-name="setActionName"
        :tabs="tabs"
    >
        <el-table-column prop="goods_id" label="商品ID" width="100" align="center"></el-table-column>
        <el-table-column label="商品">
            <template slot-scope="scope">
                <div flex="box:first">
                    <div style="padding-right: 10px;" v-if="scope.row.goods">
                        <com-image mode="aspectFill" :src="scope.row.goods.cover_pic"></com-image>
                    </div>
                    <div>
                        <div v-if="scope.row.goods">
                            {{scope.row.goods.goods_name}}
                        </div>
                        <div>
                            <span style="color:red;margin-right: 10px;">
                                最低价：￥{{scope.row.min_price}}
                            </span>
                            <span>
                                库存：{{scope.row.stock}}
                            </span>
                        </div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="title" label="砍价活动名称"  align="center"></el-table-column>
        <el-table-column prop="begin_time,end_time" label="活动时间" width="300" align="center">
            <template slot-scope="scope">
                <div>{{scope.row.begin_time|dateTimeFormat('Y-m-d H:i:s')}} ~ {{scope.row.end_time|dateTimeFormat('Y-m-d H:i:s')}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="active_status" label="状态" width="150" align="center">
            <template slot-scope="scope">
                <el-tag effect="dark" size="small" type="info" v-if="scope.row.active_status == 0">未开始</el-tag>
                <el-tag effect="dark" size="small" type="success" v-if="scope.row.active_status == 1">活动中</el-tag>
                <el-tag effect="dark" size="small" type="warning" v-if="scope.row.active_status == 2">已结束</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row.id)" type="text" size="mini">编辑</el-button>
                <el-button v-if="scope.row.status==1" @click="update(scope.row)" type="text" size="mini">失效</el-button>
                <el-button v-if="scope.row.status==0||scope.row.active_status==2" @click="update(scope.row)" type="text" size="mini">删除</el-button>
            </template>
        </el-table-column>
        <template slot="header-left">
            <el-button 
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="edit(0)"
            >添加活动</el-button>
        </template>
    </com-list-table>
</com-list-page>
<script>
    const application = new Vue({
        el: '#application',
        data: {
            crumbs: [
                {
                    title: '砍价',
                },
                {
                    title: '砍价活动',
                }
            ],
            searchList: [
                {
                    key: 'goods_name',
                    title: '商品名称',
                    type: 'text',
                },
            ],
            tabs: [
                {
                    label: '全部',
                    name: 'all',
                },
                {
                    label: '未开始',
                    name: '0',
                },
                {
                    label: '活动中',
                    name: '1',
                },
                {
                    label: '已结束',
                    name: '2',
                },
            ],
            apiParams: {
                r: 'bargain/default/index',
            },
            btnLoad: false,
        },
        methods: {
            setActionName(e) {
                this.apiParams = {r: 'bargain/default/index'}
                e != 'all' && (this.apiParams = Object.assign({...this.apiParams}, {
                    active_status: e
                }))
                this.$nextTick(function() {
                    this.$refs.table.handleSearch();
                })
            },
            edit(id) {
                navigateTo({
                    r: 'bargain/default/edit',
                    id: id
                })
            },
            update(row) {
                if (row.status == 0) {
                    this.$confirm('此操作将删除该砍价商品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delGoods(row.id);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                if (row.status == 1) {
                    this.$confirm('此操作将使该砍价活动失效, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.invalidGoods(row.id);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
            },
            delGoods(id) {
                this.loading = true;
                request({
                    params: {
                        r: 'bargain/default/del',
                        id: id
                    },
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.$message.success(res.msg);
                        this.$nextTick(function() {
                            this.$refs.table.handleSearch();
                        })
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {});
            },
            invalidGoods(id) {
                this.loading = true;
                request({
                    params: {
                        r: 'bargain/default/invalid',
                        id: id
                    },
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.$message.success(res.msg);
                        this.loadData();
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {});
            },
            formatEffectiveTime(value) {
                var h = parseInt(value / 60);
                var m = value % 60;
                return h + '小时' + m + '分';
            },
        }
    })
</script>