qimall/addons/DoubleCopy/backend/views/default/change-logs.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>换位记录</span>
        </div>
        <div class="table-body" id="copys">
            <el-tabs v-model="activeName">
                <el-table :data="list" stripe v-loading="loading" border size="small" style="margin-bottom: 15px;">
                    <el-table-column prop="id" label="ID" align="center" width="80"></el-table-column>
                    <el-table-column label="换位信息" align="center">
                        <template slot-scope="scope">
                            <div v-for="(item, index) in scope.row.content_arr" class="segmentation">
                                <div>
                                    用户ID：{{ item.user_id }}
                                </div>
                                <div>
                                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="item.avatar_url ? item.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                                    <div style="width:300px; text-align: left;">昵称：{{item.nickname}}<br/>手机号：{{item.mobile}}</div>
                                </div>

                                <div>
                                    换位前位置：{{ item.old_pos }}号位
                                </div>
                                <div>
                                    换位后位置：{{ item.now_pos }}号位
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="状态" prop="change_status" align="center" width="120">
                        <template slot-scope="scope">
                            <el-tag size="small" type="danger" v-if="scope.row.change_status == -1">换位失败</el-tag>
                            <el-tag size="small" v-if="scope.row.change_status == 0">处理中</el-tag>
                            <el-tag size="small" type="success" v-if="scope.row.change_status == 1">换位成功</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="失败原因" prop="reason" align="center" width="160" ></el-table-column>

                    <el-table-column label="创建时间"  align="center" width="160" >
                        <template slot-scope="scope">
                            {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handle('open',scope.row)">查看团队</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>

            <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>

    <!-- 查看助力用户 -->
    <el-dialog title="团队平台补贴用户变化" :visible.sync="helpDialog" center>
        <el-table :data="helpList" stripe v-loading="helpLoading" size="small" border style="margin-bottom: 15px;">
            <el-table-column prop="user_id" label="会员ID" align="center" width="150"></el-table-column>
            <el-table-column label="基本信息" align="left">
                <template slot-scope="scope">
                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.user.avatar_url ? scope.row.user.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                    <div>{{scope.row.user.nickname}}<br/>{{scope.row.user.mobile}}</div>
                </template>
            </el-table-column>

            <el-table-column label="更换前平台补贴用户" align="left">
                <template slot-scope="scope">
                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.oldTop.avatar_url ? scope.row.oldTop.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                    <div>用户ID：{{scope.row.oldTop.id}}<br/>{{scope.row.oldTop.nickname ?? scope.row.oldTop.mobile}}</div>
                </template>
            </el-table-column>

            <el-table-column label="更换后平台补贴用户" align="left">
                <template slot-scope="scope">
                    <com-image style="float: left;margin-right: 5px;" class="avatar_url" mode="aspectFill" :src="scope.row.nowTop.avatar_url ? scope.row.nowTop.avatar_url : '/resources/img/common/default-avatar.png'"></com-image>
                    <div>用户ID：{{scope.row.nowTop.id}}<br/>{{ scope.row.nowTop.nickname ?? scope.row.nowTop.mobile }}</div>
                </template>
            </el-table-column>

        </el-table>

        <div style="text-align: right;margin: 20px 0;">
            <el-pagination @current-change="helpPagination" background layout="prev, pager, next" :page-count="helpPageCount"></el-pagination>
        </div>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeName: '-1',
            loading: false,
            helpLoading: false,
            helpDialog: false,
            page: 1,
            pageCount: 0,
            helpPage: 1,
            helpPageCount: 0,
            list: [],
            helpList: [],
            change_id: 0,
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'double-copy/default/change-logs',
                    page:this.page,
                };
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                        this.page = e.data.data.page;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            helpPagination(currentPage) {
                let self = this;
                self.helpPage = currentPage;
                self.loadHelpList();
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'open':
                        this.helpDialog = true;
                        this.change_id = data.id
                        this.loadHelpList();
                        break;
                }
            },
            send(params,url,callback = null, method = 'get') {
                let self = this;
                let basic_params = {
                    r: url
                };
                let data = method === 'get' ? null : params
                params = method === 'get' ? Object.assign(basic_params, params) : basic_params;
                request({
                    params: params,
                    data: data,
                    method: method
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            loadHelpList() {
                this.helpLoading = true;
                let params = {
                    r: 'double-copy/default/change-team-logs',
                    change_id:this.change_id,
                    page:this.helpPage,
                };
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.helpLoading = false;
                    if (e.data.code == 0) {
                        this.helpList = e.data.data.list;
                        this.helpPage = e.data.data.page;
                        this.helpPageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.helpLoading = false;
                });
            },
        }
    });
</script>
<style>
    .segmentation {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid #EBEEF5;
    }
    .segmentation:last-child {
        border-bottom: 0px solid #EBEEF5;
    }
</style>