qimall/addons/Rebate/backend/views/index/reward-log.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-user-info');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api-params="apiParams"
        :search-list="searchList"
    >
        <el-table-column prop="user_id" min-width="50" label="会员ID" align="center"></el-table-column>
        <el-table-column label="会员信息" min-width="50" align="left">
            <template slot-scope="scope">
                <com-user-info :user="scope.row.user"></com-user-info>
            </template>
        </el-table-column>

        <el-table-column prop="reward_title" label="奖励类型" align="center">
            <template slot-scope="scope">
                {{ scope.row.reward_title }}
            </template>
        </el-table-column>

        <el-table-column label="奖励内容" align="center">
            <template slot-scope="scope">
                <el-tooltip placement="top" effect="light">
                    <div slot="content">{{ scope.row.content }}</div>
                    <el-button type="text">{{ getByteVal(scope.row.content) }}</el-button>
                </el-tooltip>
            </template>
        </el-table-column>

        <el-table-column prop="created_at" label="奖励时间" min-width="70" align="center">
            <template slot-scope="scope">
                {{ scope.row.created_at | dateTimeFormat('Y-m-d H:i') }}
            </template>
        </el-table-column>

        <el-table-column prop="is_frozen_text" label="冻结状态" min-width="70" align="center"></el-table-column>

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

    <el-dialog title="关联订单" :visible.sync="dialogVisible" width="60%">
        <el-table :data="orderList" stripe v-loading="orderLoading" size="small" style="margin-bottom: 15px;">
            <el-table-column prop="user_id" min-width="50" label="会员ID" align="center"></el-table-column>
            <el-table-column label="会员信息" min-width="50" align="left">
                <template slot-scope="scope">
                    <com-image style="float: left;margin-right: 10px;" 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 prop="order_no" label="订单编号" align="center"></el-table-column>

            <el-table-column prop="pay_at" label="支付时间" min-width="70" align="center">
                <template slot-scope="scope">
                    {{ scope.row.pay_at | dateTimeFormat('Y-m-d H:i') }}
                </template>
            </el-table-column>

            <el-table-column prop="updated_at" label="结算时间" min-width="70" align="center">
                <template slot-scope="scope">
                    {{ scope.row.updated_at | dateTimeFormat('Y-m-d H:i') }}
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</com-list-page>

<script>
    const application = new Vue({
        el: '#application',
        data: {
            apiParams: {
                r: 'rebate/index/reward-log',
                rid: getQuery('rid'),
            },
            crumbs: [
                {
                    title: '首页',
                    router: 'mall/overview/index',
                },
                {
                    title: '推三返一',
                    router: 'rebate/index/index',
                },
                {
                    title: '奖励记录',
                },
            ],
            searchList: [
                {
                    key: 'user_id',
                    title: '会员ID',
                    type: 'text',
                },
                {
                    key: 'mobile',
                    title: '手机号',
                    type: 'text',
                },
                {
                    key: 'btw_time',
                    title: '奖励时间',
                    type: 'date-time-range',
                }
            ],
            orderLoading: false,
            dialogVisible: false,
            orderList: [],
        },
        methods: {
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'rebate/index/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'log':
                        param = {
                            r: 'rebate/index/reward-log'
                        };
                        if (id) param = Object.assign(param, {
                            id: id
                        });
                        navigateTo(param);
                        break;
                    case 'destroy':
                        param = {id: data.id,status: -1};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.send('plugin/rebate/mall/index/handle',param)})
                        break;
                    case 'operate':
                        param = {id: data.id, status:data.status};
                        this.$confirm('是否继续'+data.name+'该活动?', '警告', {type: 'warning'}).then(() => {this.send('plugin/rebate/mall/index/handle',param)})
                        break;
                    case 'open':
                        this.dialogVisible = true;
                        this.getRewardOrder(data);
                        break;
                }
            },
            send(url, params, callback = null) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    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);
                });
                if(callback) return e.data;
            },
            getByteVal(val, max = 30) {
                var returnValue = '';
                var byteValLen = 0;
                for (var i = 0; i < val.length; i++) {
                    if (val[i].match(/[^\x00-\xff]/ig) != null)
                    byteValLen += 2;
                    else
                    byteValLen += 1;
                    if (byteValLen > max)
                    break;
                    returnValue += val[i];
                }
                return returnValue;
            },
            getRewardOrder(data) {
                let self = this;
                self.orderLoading = true;
                request({
                    params: {
                        r: 'rebate/index/reward-buy-logs',
                        pid: data.user_id,
                        reward_id: data.id,
                    },
                    method: 'get',
                }).then(e => {
                    this.orderLoading = false;
                    if (e.data.code == 0) {
                        self.orderList = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.orderLoading = false;
                });
            },
            updateTime(val){
                if(val){
                    this.searchForm.start_at = val[0].getTime() / 1000;
                    this.searchForm.end_at = val[1].getTime() / 1000;
                } else {
                    this.searchForm.start_at = "";
                    this.searchForm.end_at = "";
                }
            },
        },
    })
</script>