qimall/backend/modules/mall/views/freight/rules.php

<?php

?>
<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>运费模板</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" size="small" @click="handle('edit')">添加规则</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-form :inline="true" size="small" class="demo-form-inline">
                <el-form-item>
                    <el-input @keyup.enter.native="search" size="small" placeholder="请输入搜索内容" v-model="keyword" clearable @clear="getList">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                <el-table-column label="ID" prop="id" align="center" min-width="100"></el-table-column>
                <el-table-column label="规则名称" prop="name" align="center" min-width="300">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_default" label="是否默认" width="100">
                    <template slot-scope="scope">
                        <el-radio v-model="scope.row.is_default" :label="1" @change="handle('default',scope.row)">默认</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('edit',scope.row)">编辑</el-button>
                        <el-button type="text" @click="handle('destroy',scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                keyword: '',
                list: [{
                    title: "测试标题"
                }],
                listLoading: false,
                page: 1,
                pageCount: 0
            };
        },
        mounted: function() {
            this.getList();
        },
        methods: {
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            // 获取广告列表
            getList() {
                let self = this;
                let params = {
                    r: 'mall/freight/rules',
                    page: self.page,
                }
                if(this.keyword) params.keyword = this.keyword;
                if (self.listLoading == false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code == 0) {
                            self.list = e.data.data.list;
                            self.pageCount = e.data.data.page_count;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        self.$message.error(e.data.msg);
                        self.listLoading = false;
                    });
                }
            },
            handle(type, data = null) {
                switch (type) {
                    case 'edit':
                        id = data ? parseInt(data.id) : '';
                        param = {
                            r: 'mall/freight/edit'
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                    case 'default':
                        for (let i in this.list) {
                            this.list[i].is_default = 0;
                        }
                        data.is_default = 1;
                        param = {
                            id: data.id,
                            is_default: data.is_default,
                            type
                        };
                        this.send(param)
                        break;
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        })
                        break;
                }
            },
            send(params) {
                let self = this;
                request({
                    params: {
                        r: 'mall/freight/rules',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            }

        }
    });
</script>