qimall/addons/CloudStockTwo/backend/views/order/detail.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/order-shipping', \Yii::$app->basePath.'/modules/mall/views/order');
?>
<style>
    .card-box {
        border: none;
    }

    .marign-b-20 {
        margin-bottom: 20px;
    }

    .step-box {
        margin-top: 10px;
        padding-top: 10px;
    }

    .step-inactive {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e8e8e8;
        transform: translate(-50%, -50%);
    }

    .step-inside {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #cccbcb;
        transform: translate(-50%, -50%);
        text-align: center;
        line-height: 24px;
        z-index: 9;
        color: #fff;
        font-size: 12px;
    }

    .step-active {
        background-color: var(--primary, #fb6638);
    }

    .step-outside {
        background-color: transparent;
    }

    .step-box .el-step__title {
        font-size: 14px;
    }

    .text-item {
        padding: 10px 0;
        font-size: 12px;
    }

    .row-card-header {
        font-weight: 700;
        font-size: 14px;
    }

    .text-item > span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding-right: 20px;
        text-align: right;
    }

    .el-row-flex {
        display: flex;
        flex-flow: row wrap;
    }

    .el-row-flex .card-box {
        height: 100%;
    }

    .order-goods .el-table th > .cell,
    .order-goods .el-table {
        font-size: 13px;
    }

    .package-item {
        padding: 10px 0;
        font-size: 12px;
    }

    .package-item > span:nth-child(1) {
        display: inline-block;
        width: 105px;
        padding: 0 20px;
        text-align: left;
    }

    .package-item img {
        width: 55px;
        height: 55px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .range-right {
        margin-right: 20px;
    }

    .com-order-refund-status {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 20px;
        width: 50px;
        background-color: #FF7171;
        color: #fff;
        text-align: center;
        border-radius: 0 0 5px 5px;
        font-size: 12px;
    }

    .package .el-tab-pane {
        display: flex;
    }


    .package-item ::-webkit-scrollbar {
        width: 5px;
    }

    .el-timeline {
        font-size: 12px;
    }
    .com-order-count-price{
        float: right;
        margin-right: 100px;
    }
    .com-order-count-price .el-form-item{
        margin-bottom:0px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border: none;" body-style="background-color: #f3f3f3;padding: 10px 0 0;"
             v-loading="cardLoading">
        <div slot="header">
            <span>订单详情</span>
        </div>

        <el-card class="card-box step-box marign-b-20" shadow="never">
            <div slot="header">
                <span>订单路径</span>
            </div>
            <el-steps :active="stepArr.length" align-center>
                <el-step v-for="(item,index) in stepArr" :key="index" align-center>
                    <template slot="icon">
                        <template v-if="item.agent_user_avatar_url">
                            <com-image src="item.agent_user_avatar_url"></com-image>
                        </template>
                        <template v-else>
                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                        </template>
                    </template>
                    <template slot="title">
                       <div>{{ item.agent_user_level_name }}</div>
                    </template>
                    <template slot="description">
                       <div>{{ item.agent_user_mobile }}</div>
                    </template>
                </el-step>
            </el-steps>
        </el-card>

        <el-card v-if="detailList.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>库存明细</span>
            </div>
            <el-table
                        size="small"
                        :data="detailList"
                        style="width: 100%"
                        v-loading="listLoading">
                        <el-table-column
                            prop="agent_user_id"
                            label="代理商用户id"
                            align="center"
                            min-width="80"
                        >
                        </el-table-column>
                        <el-table-column
                                label="代理商"
                                min-width="150"
                        >
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle"  v-if="scope.row.agent_user_avatar_url" :src="scope.row.agent_user_avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.agent_user_nickname}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                        <!-- <el-table-column
                                label="商品名称"
                                min-width="150"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <img v-if="scope.row.goods.cover_pic" :src="scope.row.goods.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;" />
                                    <div style="text-align: left;line-height: 16px;">{{scope.row.goods.goods_name}}</div>
                                </div>
                            </template>
                        </el-table-column> -->
                        <el-table-column
                            prop="num"
                            label="扣减库存数"
                            align="center"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                -{{scope.row.num}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            align="center"
                            label="扣减库存类型"
                            min-width="100">
                            <template slot-scope="scope">
                                <el-tag>{{computedType(scope.row.changes_type)}}</el-tag>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            prop="order_id"
                            align="center"
                            label="订单id"
                            min-width="80">
                        </el-table-column> -->
                        <el-table-column
                            prop="created_at"
                            align="center"
                            label="时间"
                            min-width="100">

                            <template slot-scope="scope">
                                {{formatTime(scope.row.created_at)}}
                            </template>
                        </el-table-column>
                    </el-table>
        </el-card>


        <el-card v-if="priceList.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>资金明细</span>
            </div>
            <el-table :data="priceList" stripe style="width: 100%" v-loading="listLoading">
                <el-table-column prop="user_id" label="会员ID" min-width="100" align="center"></el-table-column>
                <el-table-column label="会员" width="200">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img circle" :src="scope.row.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="table-info-text">
                                <div v-if="scope.row.nickname">{{scope.row.nickname}}</div>
                                <div>{{scope.row.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="orderDetail.order.order_no" label="订单号" min-width="200" align="center"></el-table-column> -->
                <el-table-column prop="source_text" label="佣金类型" min-width="200" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.source_text">{{scope.row.source_text}}</div>
                        <div v-else-if="scope.row.source">{{scope.row.source}}</div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="结算金额" min-width="150" align="center">
                    <template slot-scope="scope">
                        <div style="font-size: 18px;color: #68CF3D" v-if="scope.row.change_type == 'add'">+{{scope.row.change_num}}</div>
                        <div style="font-size: 18px;color: #F6AA5A" v-if="scope.row.change_type == 'sub'">-{{scope.row.change_num}}</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="current_num" label="变动前佣金" min-width="150" align="center"></el-table-column>
                <el-table-column prop="current_num" label="变动后佣金" min-width="150" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.change_type == 'add'">{{Number((scope.row.current_num + scope.row.change_num)).toFixed(2)}}</div>
                        <div v-if="scope.row.change_type == 'sub'">{{Number((scope.row.current_num - scope.row.change_num)).toFixed(2)}}</div>
                    </template>
                </el-table-column> -->

                <el-table-column prop="desc" label="说明" min-width="300" align="center"></el-table-column>
                <el-table-column prop="scope" min-width="180" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.created_at}}
                    </template>
                </el-table-column>

                <!-- <el-table-column  label="操作" min-width="110" align="center">
                    <template slot-scope="scope">
                        <el-button  v-if="scope.status == '1'" type="primary" @click="settlement(scope.row.id)" size="mini">结算<i class="el-icon-caret-right"></i></el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-card>

    </el-card>




</div>


<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                user_id:0,
                order_type:1,
                count: 6,
                isShowChangeShipping: false,
                changeShippingLoading: false,
                remarkLoading: false,
                isShowRemark: false,
                shipping_form: {},
                remark_form: {
                    seller_remark: null,
                },
                activePackage: '0',
                cardLoading: false,
                logLoading: false,
                detailList:[],
                stepArr:[],
                listLoading:false,
                priceList:[],
            };
        },
        created() {
            this.id = getQuery('id');
            this.user_id = getQuery('user_id');
            this.order_type = getQuery('order_type');
        },
        mounted() {
            // this.getDetail();
            this.getAgentDetail();
            // this.getStockList();
            // this.getPriceList();
        },
        methods: {
            load() {
                // this.count += 2
            },

            getAgentDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/order/detail',
                        id: self.id,
                        type:self.order_type,
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        console.log(e.data.data);
                        self.stepArr = e.data.data.step_arr;
                        self.detailList = e.data.data.detail_list;
                        self.priceList = e.data.data.capital_log;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            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;

            },
            computedType(type){//200会员买货;201给下级配货;202下级向自己补货;203自提货到线下;204系统扣减;
                if(type == 200){
                    return "会员买货"
                }else if(type == 201){
                    return "给下级配货"
                }else if(type == 202){
                    return "下级向自己补货"
                }else if(type == 203){
                    return "自提货到线下"
                }else if(type == 204){
                    return "系统扣减"
                }
                if(type == 100){
                    return "向上级补货"
                }else if(type == 101){
                    return "上级给自己配货"
                }else if(type == 102){
                    return "退货退库存"
                }else if(type == 103){
                    return "系统添加"
                }else if(type == 104){
                    return "平台补货赠送"
                }else if(type == 105){
                    return "购买礼包赠送"
                }
            },
            computedType2(type){
                if(type == 100){
                    return "向上级补货"
                }else if(type == 101){
                    return "上级给自己配货"
                }else if(type == 102){
                    return "退货退库存"
                }else if(type == 103){
                    return "系统添加"
                }else if(type == 104){
                    return "平台补货赠送"
                }else if(type == 105){
                    return "购买礼包赠送"
                }
                if(type == 200){
                    return "会员买货"
                }else if(type == 201){
                    return "给下级配货"
                }else if(type == 202){
                    return "下级向自己补货"
                }else if(type == 203){
                    return "自提货到线下"
                }else if(type == 204){
                    return "系统扣减"
                }
            },
            getStockList() {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/default/stock-log',//plugin/cloud_stock/mall/stock-log/get-deduction-list扣减库存明细列表
                        page:self.page,
                        limit: 99,
                        log_type: 'sub',
                        order_id:self.id,
                        order_type:self.order_type,
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('扣减库存明细列表='+JSON.stringify(e))
                    self.listLoading = false;
                    if(e.data.code == 0){
                        self.detailList = e.data.data.list;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getPriceList() {
                let params = {
                    r: 'cloud-stock-two/order/price-log',
                    page: 1,
                    user_id: this.user_id,
                    order_type:this.order_type,
                };
                request({
                    params,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.priceList = e.data.data.list;
                    } else {
                        if(e.data.msg == 'User Id必须是整数。'){
                            e.data.msg = '会员id必须是整数';
                        }
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
                this.listLoading = true;
            },

        }
    });
</script>