qimall/addons/BusinessBonus/backend/views/default/detail.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-dialog-select');

?>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<div id="app" v-cloak>

    <div class="user_info">
        <div class="user_detail">
            <el-image style="height:50px;width:50px;border-radius: 50%;margin-right: 20px;" :src="detailInfo.avatar_url ? detailInfo.avatar_url : '/resources/img/common/default-avatar.png'" lazy></el-image>
            <div style="flex:1;">
                <div style="margin-bottom: 20px;" class="my_flex">
                    <div style="flex:1;">
                        <div class="user_name">
                            <span>{{detailInfo.nickname}}</span>
                            <div style="float: right;">
                                <el-switch
                                        v-model="detailInfo.status"
                                        @change="((val)=>{switchFun(val,detailInfo.id,'status')})"
                                        :active-value="1"
                                        :inactive-value="0"
                                        active-text="开放"
                                        inactive-text="禁用"
                                >
                                </el-switch>
                            </div>
                        </div>
                        <div class="info">
                            <div>
                                <span>ID：</span>
                                <span class="text">{{detailInfo.user_id || ' '}}</span>
                            </div>
                            <div>
                                <span>手机号：</span>
                                <span class="text">{{detailInfo.mobile || ' '}}</span>
                            </div>
                        </div>

                    </div>

                </div>
                <el-row :gutter="24" style="margin-bottom: 20px;">
                    <el-col :span="6">等级：{{detailInfo.level_name}}</el-col>
                    <el-col :span="6">分红比例：{{detailInfo.bonus_rate}}%</el-col>
                    <el-col :span="6">成为招商员时间：{{detailInfo.register_time_format}}</el-col>
                </el-row>
                <el-row :gutter="24" style="margin-bottom: 20px;">
                    <el-col :span="6">门店数量：{{detailInfo.store_number}}</el-col>
                    <el-col :span="6">商户数量：{{detailInfo.mch_number}}</el-col>
<!--                    <el-col :span="6">消费金额：</el-col>-->
<!--                    <el-col :span="6">下单时间：</el-col>-->
                </el-row>

            </div>
        </div>
    </div>

    <div class="table-body">
        <div style="display: flex;align-items: center;">
            <div style="width: 5px;height: 20px;background-color: #409eff;margin-right: 5px;"></div>
            <div>升级记录</div>
        </div>
        <el-tabs>
            <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column prop="id"  label="序号" align="center"></el-table-column>

                <el-table-column  prop="level_info.level_name" label="招商员等级" align="center"></el-table-column>

                <el-table-column label="分红比例" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.bonus_rate}}%
                    </template>
                </el-table-column>
<!--                升级方式：0未知，1无条件，2前端申请，3购买知道商品，4后台添加，5后台调整-->
                <el-table-column label="升级方式" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.upgrade_type == 1">无条件</span>
                        <span v-if="scope.row.upgrade_type == 2">前端申请</span>
                        <span v-if="scope.row.upgrade_type == 3">购买指定商品</span>
                        <span v-if="scope.row.upgrade_type == 4">后台添加</span>
                        <span v-if="scope.row.upgrade_type == 5">后台调整</span>
                        <span v-if="scope.row.upgrade_type == 6">购买门店商品</span>
                        <span v-if="scope.row.upgrade_type == 7">条件升级</span>
                    </template>
                </el-table-column>

                <el-table-column label="详情" align="left" min-width="125">
                    <template slot-scope="scope">
                        <span v-if="scope.row.upgrade_type == 1 || scope.row.upgrade_type == 7">
                            <p>备注：{{scope.row.extra_data.mark}}</p>
                        </span>
                        <span v-if="scope.row.upgrade_type == 2">
                             <p>备注：{{scope.row.extra_data.mark}}</p>
                             <p v-if="scope.row.extra_data.audit_admin">管理员账号：{{scope.row.extra_data.audit_admin}}</p>
                             <p v-if="scope.row.extra_data.audit_account">管理员姓名：{{scope.row.extra_data.audit_account}}</p>
                        </span>
                        <span v-if="scope.row.upgrade_type == 3">
                            <p>备注：{{scope.row.extra_data.mark}}</p>
                            <p>商品ID：{{scope.row.extra_data.goods_id}}</p>
                            <div style="display: flex;align-items: center;">
                                <el-image fit="cover" :src="scope.row.extra_data.pic_url" style="width: 40px;height: 40px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                                <div>
                                    <div style="max-height: 40px; overflow-y: hidden;">{{scope.row.extra_data.goods_name}}</div>
                                    <div v-if="scope.row.extra_data.goods_price">￥{{scope.row.extra_data.goods_price}} ×{{scope.row.extra_data.num}}</div>
                                    <div v-else>￥{{scope.row.extra_data.price}} ×{{scope.row.extra_data.num}}</div>
                                </div>
                            </div>
                        </span>
                        <span v-if="scope.row.upgrade_type == 4 || scope.row.upgrade_type == 5">
                            <p>备注：{{scope.row.extra_data.mark}}</p>
                            <p>管理员账号：{{scope.row.extra_data.username}}</p>
                            <p>管理员姓名：{{scope.row.extra_data.account}}</p>
                        </span>

                    </template>
                </el-table-column>


                <el-table-column label="升级时间" min-width="105" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.upgrade_time | dateTimeFormat('Y-m-d H:i') }}
                    </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>
        </el-tabs>
    </div>

</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
                titleName:"查看招商员信息",
                loading:false,
                page: 1,
                pageCount: 0,
                list: [],
                submitData:{

                },
                detailInfo: {
                    'id': 0,
                    "user_id": '',
                    "status": 0,
                    "business_bonus_level": 1,
                    "store_number": 0,
                    "mch_number": 0,
                    "register_time": 0,
                    "nickname":  '',
                    "mobile": '',
                    "avatar_url": "",
                    "level_name": "",
                    "bonus_rate": 0
                },

                rules: {
                    business_bonus_level: [
                        { required: true, message: '请选择招商员等级', trigger: 'blur' }
                    ],

                },

                btnLoading:false,


            };
        },
        mounted() {
            this.submitData.updated_at = Date.parse(new Date()) / 1000; // 新建数据的更新时间
            if (getQuery('id')) {
                this.loadData(getQuery('id'));
            } else {
                this.submitData.created_at = Date.parse(new Date()) / 1000; // 新建数据的创建时间
            }


        },
        watch:{


        },
        computed: {

        },
        methods: {
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            getList(search = {}) {
                let self = this;
                self.loading = true;
                let basic_params = {
                    page: self.page,
                    user_id: self.detailInfo.user_id,
                };
                let params = Object.assign(basic_params, search);
                request({
                    params: {
                        r: 'business-bonus/default/upgrade-record'
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    self.loading = false;
                    if (e.data.code == 0) {
                        self.list = e.data.data.page_data.list;
                        self.pageCount = e.data.data.page_data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.loading = false;
                });
            },
            saveFun(){
                this.$refs['ruleForm'].validate((valid) => {

                    if (valid) {

                        if (!this.submitData.user_id) {
                            this.$message.error('请选择一个用户作为招商员！');
                            return false;
                        }
                        let data =JSON.parse(JSON.stringify(this.submitData));
                        this.btnLoading = true;
                        let url = 'business-bonus/default/edit';
                        request({
                            params: {
                                r:url,
                            },
                            method: 'post',
                            data: data
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                setTimeout(function () {
                                    navigateTo({
                                        r: 'business-bonus/default/index',
                                    });
                                }, 1500);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.$message.error('请填写必要的参数！');
                        return false;
                    }
                });


            },
            formatTime(timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },
            loadData(id){

                let that = this;
                this.loading = true;
                request({
                    params: {
                        r:'business-bonus/default/detail',
                        inc_id: id
                    },
                    method: 'get',
                }).then(e => {

                    that.loading = false;
                    if (e.data.code == 0) {

                        if (e.data.data.is_null == 0) {
                            that.detailInfo = e.data.data.info;
                            that.getList();
                        }

                    } else {
                        that.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    that.loading = false;
                });
            },
            switchFun(val, id, field) {
                if (field == 'status') {
                    let param = {id: id, status: val};
                    this.send('business-bonus/default/handle',param)
                }

            },
            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;
            },

        }
    });
</script>

<style>

    .user_info{
        background: #FFF;
        padding: 20px;
        margin-bottom: 10px;
    }

    .user_detail{
        display: flex;
        /* align-items: center; */
    }

    .user_detail .info{
        display: flex;
        font-size: 12px;
        color: #939393;
    }

    .user_detail .info .text{
        color: #000;
        margin-right: 40px;
    }

    .user_detail .user_name{
        font-size: 15px;
        margin-bottom: 10px;
    }

</style>