qimall/addons/StarChain/backend/views/order/index.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('../components/com-title', __DIR__);
    ComponentHelper::loadComponentView('com-list-page');
    ComponentHelper::loadComponentView('com-list-table');
?>
<com-list-page :crumbs="crumbs" id="application">
    <com-list-table 
        ref="table"
        :api="'star-chain/order/index'"
        :search-list="searchList"
    >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="order_no" align="center" label="订单编号">
            <template slot-scope="scope">
                <a href="javascript:void(0);" @click="mallOrder(scope.row.order_id)">
                    {{ scope.row.order_no }}
                </a>
            </template>
        </el-table-column>
        <el-table-column prop="goods" align="center" width="280px" label="商品">
            <template slot-scope="scope">
                <div class="goods">
                    <div v-for="(item, index) in scope.row.details" :key="index" class="detail-item">
                        <el-avatar shape="square" :size="60" fit="fill" :src="item.pic_url"></el-avatar>
                        <div class="detail-item-info">
                            <com-title :max="10" :title="item.goods_name"></com-title>
                            <com-title :max="10" :title="item.goods_attr_name"></com-title>
                        </div>
                        <div class="num">{{ item.num }}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="商品总价" width="100px" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.goods_price }}
            </template>
        </el-table-column>
        <el-table-column prop="price" label="邮费" width="80px" align="center">
            <template slot-scope="scope">
                {{ scope.row.order.shipping_money }}
            </template>
        </el-table-column>
        <el-table-column prop="receiver_name" width="130px" label="收件人" align="center">
            <template slot-scope="scope">
                <div>
                    <p>{{ scope.row.order.receiver_name }}</p>
                    <p>{{ scope.row.order.mobile }}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="time" label="支付时间" align="center">
            <template slot-scope="scope">
                {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
            </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" align="center">
            <template slot-scope="scope">
                <template v-if="scope.row.status == -1">
                    <el-tooltip effect="dark" :content="scope.row.error" placement="top-start">
                        <span>下单失败</span>
                    </el-tooltip>
                </template>
                <template v-else>
                    {{ scope.row.chain_order_status_text }}
                </template>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button 
                    type="text"
                    :loading="btnLoading"
                    @click="sendOrder(scope.row.id)"
                    v-if="scope.row.status == 0 || scope.row.status == -1"
                >推送</el-button>
                <el-button type="text" :loading="btnLoading" @click="showOrderDetail(scope.row.id)" v-else>订单详情</el-button>
            </template>
        </el-table-column>
    </com-list-table>
    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%">
        <el-descriptions class="margin-top" v-for="item in orderDetail" title="" :column="3" border v-if="orderDetail">
            <el-descriptions-item>
                <template slot="label">
                    供应链订单编号
                </template>
                {{ item.orderSn }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    订单状态
                </template>
                {{ item.orderStatusDesc }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    实际支付金额
                </template>
                {{ item.payAmount }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    支付时间
                </template>
                {{ item.payTime }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    付款类型
                </template>
                {{ item.payChannelName }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    物流类型
                </template>
                {{ item.deliveryTypeDesc }}
            </el-descriptions-item>
            <el-descriptions-item v-if="item.recieveAddr">
                <template slot="label">
                    收货地址
                </template>
                {{ item.recieveAddr.provinceName }}
                {{ item.recieveAddr.cityName }}
                {{ item.recieveAddr.areaName }}
                {{ item.recieveAddr.receiveAddrDetail }}
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</com-list-page>
<script>
const application = new Vue({
    el: '#application',
    data: {
        crumbs: [
            {
                title: '首页',
                router: 'mall/overview/index',
            },
            {
                title: '订单管理',
            }
        ],
        orderDetail: {},
        dialogVisible: false,
        searchList: [
            {
                key: 'name',
                title: '商品名称',
                type: 'text',
            },
            {
                key: 'order_no',
                title: '订单号',
                type: 'text',
            },
            {
                key: 'receiver_name',
                title: '收件人',
                type: 'text',
            },
        ],
        btnLoading: false,
    },
    methods: {
        /**
         * 字符串裁剪
         */
        sub(string) {
            string = string + ''
            var reg = /[\u4e00-\u9fa5]/g, //专业匹配中文
                slice = string.substring(0, 15),
                chineseCharNum = (~~(slice.match(reg) && slice.match(reg).length)),
                realen = slice.length * 2 - chineseCharNum;
            return string.substr(0, realen) + (realen < string.length ? "..." : "");
        },
        /**
         * 跳转到商城商品
         */
        mallOrder(id) {
            this.$navigate({
                r: 'mall/order/detail',
                id: id
            })
        },
        /**
         * 展示订单详情
         */
        showOrderDetail(id) {
            this.btnLoading = true
            request({
                params: {
                    r: 'star-chain/order/detail',
                },
                method: 'post',
                data: {
                    id: id,
                },
            }).then(e => {
                if (e.data.code === 0) {
                    this.orderDetail = e.data.data
                    this.btnLoading = false
                } else {
                    this.$message.error(e.data.msg);
                }
                this.dialogVisible = true
            })
        },
        sendOrder(id) {
            this.btnLoading = true
            request({
                params: {
                    r: 'star-chain/order/resend',
                    id: id,
                },
            }).then(e => {
                if (e.data.code === 0) {
                    this.$message.success(e.data.msg);
                } else {
                    this.$message.error(e.data.msg);
                }
                this.btnLoading = false
            })
        }
    },
})
</script>

<style>
    .goods {
        display: flex;
        flex-direction: column;
    }

    .detail-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .detail-item + .detail-item {
        margin-top: 8px;
    }

    .detail-item-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 5px;
    }
    
    .detail-item-info span {
        line-height: 26px;
    }

    .num::before {
        content: '*';
        font-size: 16px;
        padding: 5px;
        color: #F56C6C;
    }
    
    .num {
        font-size: 16px;
        color: #F56C6C;
    }

    .goods-name {
        margin-left: 5px;
    }

    .page {
        margin-top: 10px;
    }
</style>