qimall/addons/WechatVideoShop/backend/views/region/diff.php

<?php

?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>地区对比</span>
        </div>
        <div class="bootstrap-container" v-loading="loading">
            <el-table size="mini" border :data="list">
                <el-table-column label="微信地区" align="left">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.id}} -
                            {{scope.row.level}} -
                            {{scope.row.level_one_name}}
                            {{scope.row.level_two_name}}
                            {{scope.row.level_three_name}}
                            {{scope.row.name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="本地地区" align="left">
                    <template slot-scope="scope">
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="left">
                    <template slot-scope="scope">
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            loading: false
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                this.loading = true;
                request({
                    method: 'get',
                    params: {
                        r: 'wechat-video-shop/region/diff',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            }
        },
    });
</script>

<style>
    .bootstrap-container {
        padding: 40px;
        background-color: #fff;
        font-size: 15px;
    }

    .text-vertical-center {
        display: flex;
        align-items: center
    }

    .text-padding {
        padding: 0 10px
    }
</style>