qimall/addons/Mch/client/views/order/detail.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/order-shipping', __DIR__);
?>
<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">
            <el-steps :active="stepArrActive">
                <el-step v-for="(item,index) in stepArr" :key="index" :title="item.title"
                         :description="item.created_at|dateTimeFormat('Y-m-d H:i:s')">
                    <template slot="icon">
                        <div class="step-inactive" :class="item.is_step == 1 ? 'step-outside' : ''">
                            <div class="step-inside" :class="item.is_step == 1 ? 'step-active' : ''">{{ index + 1 }}
                            </div>
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </el-card>

        <el-row :gutter="20" class="el-row-flex marign-b-20">
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>订单信息</span>
                    </div>
                    <div class="text-item">
                        <span>订单状态</span><span>{{ orderDetail ? order_status_list[orderDetail.order_status] : '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>订单编号</span><span>{{ orderDetail.order_no }}</span>
                    </div>
                    <div class="text-item">
                        <span>交易单号</span><span>{{ orderDetail.out_trade_no || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>订单类型</span><span>普通订单</span>
                    </div>
                    <div class="text-item">
                        <span>订单来源</span><span>{{marketing_type_map[orderDetail.marketing_type]? marketing_type_map[orderDetail.marketing_type] : '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>支付方式</span><span>{{ payment_type_list[orderDetail.payment_type] }}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.shipping_type==2">
                        <span>自提门店</span>
                        <span>{{ store.store_name || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>卖家备注</span>
                        <span>{{ orderDetail.seller_remark || '--' }}</span>
                        <span><el-button type="text" size="mini" @click="handle('remark')">备注</el-button></span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box " shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>买家及收货信息</span>
                    </div>
                    <div class="text-item">
                        <span>买家</span><span>{{ orderDetail.base_user.nickname }}</span>
                    </div>
                    <div class="text-item">
                        <span>买家备注</span><span>{{ orderDetail.remark || '--' }}</span>
                    </div>
                    <div class="text-item">
                        <span>配送方式</span><span>{{ shipping_type_list[orderDetail.shipping_type] }}</span>
                    </div>
                    <template v-if="orderDetail.shipping_type!=2">
                        <div class="text-item">
                            <span>收货人</span><span>{{ orderDetail.receiver_name || '--' }}</span>
                        </div>
                        <div class="text-item">
                            <span>收货地址</span><span>{{ orderDetail.region_name }} {{ orderDetail.address }}</span>
                        </div>
                        <div class="text-item">
                            <span>手机号码</span><span>{{ orderDetail.mobile }}</span>
                        </div>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="card-box" shadow="never">
                    <div slot="header" class="clearfix row-card-header">
                        <span>结算信息</span>
                    </div>
                    <div class="text-item">
                        <span>商品小计</span>
                        <span>￥{{orderDetail.goods_price}}</span>
                    </div>
                    <div class="text-item">
                        <template v-if="orderDetail.shipping_type==1">
                            <span>快递费￥</span>
                            <span>￥{{orderDetail.shipping_money}}</span>
                        </template>
                        <template v-if="orderDetail.shipping_type==3">
                            <span>配送费￥</span>
                            <span>￥{{orderDetail.shipping_money}}</span>
                        </template>

                    </div>
                    <div class="text-item" v-if="orderDetail.score_money > 0">
                        <span>积分抵扣</span>
                        <span>- ￥{{orderDetail.score_money}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.coupon_money > 0">
                        <span>优惠券抵扣</span>
                        <span>￥{{orderDetail.coupon_money}}</span>
                    </div>
                    <div class="text-item">
                        <span>实付款</span>
                        <span>￥{{orderDetail.pay_money}}</span>
                    </div>

                </el-card>
            </el-col>
        </el-row>

        <el-card class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>商品信息</span>
            </div>
            <div v-if="orderDetail.detail" class="order-goods">
                <el-table :data="orderDetail.detail" style="width: 100%;"
                          :header-cell-style="{background:'#F7F7F7','border-bottom': 0}">
                    <el-table-column label="明细id" width="100">
                        <template slot-scope="scope">
                            <div>{{ scope.row.id }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品id" width="100">
                        <template slot-scope="scope">
                            <div>{{ scope.row.goods_id }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品" width="260">
                        <template slot-scope="scope">
                            <div style="position: relative;display: flex;align-items: center;">
                                <el-image style="width: 66px; height: 50px;border-radius: 5px;"
                                          :src="scope.row.pic_url"></el-image>
                                <span v-if="repeal_list[scope.row.is_feedback]" class="com-order-refund-status">{{ repeal_list[scope.row.is_feedback] }}</span>
                                <com-ellipsis :line="2" style="margin-left: 10px;">
                                    {{ scope.row.goods_name }}
                                </com-ellipsis>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="210">
                        <template slot-scope="scope">
                            <div>{{ getOrderPrice(scope.row) }}
                                <span v-if="scope.row.adjust_money != 0">(调价：￥{{ scope.row.adjust_money }})</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="购买数量" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.num }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠" width="210">
                        <template slot-scope="scope">
                            <div>￥{{(scope.row.original_goods_price - scope.row.goods_price - orderDetail.score_money).toFixed(2)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="小计" width="210">
                        <template slot-scope="scope">
                            <div>{{ getOrderPrice(orderDetail) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <div>{{ order_status_list[scope.row.order_status] }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-card v-if="orderDetail.express.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>物流包裹</span>
            </div>
            <template>
                <el-tabs class="package" v-model="activePackage" type="card">
                    <template v-for="(item,index) in orderDetail.express">
                        <el-tab-pane :label="'包裹'+(index+1)" :key="index">
                            <el-row style="width: 100%;">
                                <el-col :span="24">
                                    <div class="package-item">
                                        <span>发货方式：</span><span
                                                class="text-color-primary">{{send_type[item.shipping_type]}}</span>
                                    </div>
                                    <div class="package-item">
                                        <span>发货人：</span><span>{{item.operator_username}}</span>
                                    </div>
                                    <div class="package-item">
                                        <span>发货时间：</span><span>{{ item.created_at|dateTimeFormat('Y-m-d H:i:s')}}</span>
                                    </div>
                                    <div class="package-item">
                                        <span>运单编号：</span><span v-if="item.express_no" class="range-right">{{item.express_no}}</span>
                                        <el-button
                                                v-if="orderDetail && orderDetail.order_status == 2 && item.created_at == item.updated_at"
                                                type="text" @click="handle('shipping', item)" style="padding: 0px;">修改物流
                                        </el-button>
                                    </div>
                                    <div class="package-item" flex="dir:left">
                                        <span style="line-height: 50px;">包裹商品：</span>
                                        <ul flex="dir:left cross:center" style="with=100%;overflow-y:auto;">
                                            <template v-for="val in (JSON.parse(item.order_detail_ids))">
                                                <li><el-image :src="goodDetails[val].pic_url"></el-image></li>

                                                <li class="range-right" style="width: 150px;padding-bottom:5px">
                                                    <com-ellipsis :line="1" :text="goodDetails[val].goods_name"></com-ellipsis>

                                                    数量：<span style="color: red">{{goodDetails[val].num}}</span>

                                                    <com-ellipsis :line="1">
                                                        <template v-if="goodDetails[val].attr_list && goodDetails[val].attr_list.length > 0">
                                                            <template v-for="(attrItem, attrIndex) in goodDetails[val].attr_list" size="small">
                                                                {{ attrItem }}
                                                            </template>
                                                        </template>
                                                    </com-ellipsis>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                    <div class="package-item">
                                        <span>商家备注：</span><span class="range-right">{{item.memo}}</span>
                                    </div>

                                    <div class="package-item" style="width:100%;">
                                        <span>物流状态：</span>
                                        <span class="text-color-success">{{item.now_state?item.now_state:'暂无物流信息'}}</span>
                                        <div v-if="item.express_log && item.express_log.length > 0" style="padding: 20px;font-size: 12px">
                                            <div style="padding: 2px;height:200px;overflow-y:auto;">
                                                <div>
                                                    <el-timeline>
                                                        <el-timeline-item
                                                                v-for="(express_log, val) in item.express_log"
                                                                :key="val"
                                                                :size="normal"
                                                                :color="val==0?'#409eff':''"
                                                                :timestamp="express_log.AcceptTime">
                                                            {{express_log.AcceptStation}}
                                                        </el-timeline-item>
                                                    </el-timeline>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </template>
                </el-tabs>
            </template>
        </el-card>

        <el-card v-if="orderAction.length > 0" class="card-box marign-b-20" shadow="never">
            <div slot="header" class="clearfix row-card-header">
                <span>订单操作日志</span>
            </div>
            <el-table :data="orderAction" v-loading="logLoading" style="width: 100%;" size="small" stripe>
                <el-table-column prop="member_name" label="用户" width="90">
                    <template slot-scope="scope">
                        <div>{{ scope.row.member_name }}</div>
                    </template>
                </el-table-column>

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

                <el-table-column prop="action" label="详情">
                    <template slot-scope="scope">
                        <div>{{ scope.row.action }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card v-if="orderDetail">
            <el-button type="primary" v-if="orderDetail.order_status == 1" size="small"
                       @click="handle('shipping', orderDetail)">发货
            </el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 2" size="small"
                       @click="handle('take-delivery', orderDetail)">确认收货
            </el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 3" size="small"
                       @click="handle('sales', orderDetail)">订单完成
            </el-button>
        </el-card>

    </el-card>

    <!-- 修改物流发货 -->
    <order-shipping :is_show="isShowChangeShipping" :change-shipping-loading="changeShippingLoading"
                    :order_info="orderDetail" :shipping_form="shipping_form" @submit="handleShipping"
                    @close="isShowChangeShipping = false"></order-shipping>

    <!-- 商家备注 -->
    <el-dialog title="商家备注" width="600px" :visible.sync="isShowRemark">
        <el-form :model="remark_form" label-width="80px" size="small">
            <el-form-item label="备注" prop="seller_remark">
                <el-input type="textarea" v-model="remark_form.seller_remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isShowRemark = false">取 消</el-button>
            <el-button type="primary" @click="handle('remark',remark_form,true)" :loading="remarkLoading">确 定</el-button>
        </div>
    </el-dialog>

</div>


<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                count: 6,
                detail: {},
                store: {},
                isShowChangeShipping: false,
                changeShippingLoading: false,
                remarkLoading: false,
                isShowRemark: false,
                shipping_form: {},
                remark_form: {
                    seller_remark: null,
                },
                activePackage: '0',
                cardLoading: false,
                logLoading: false,
                goodDetails: [],
                orderAction: [],
                repeal_list: {
                    '1': '售后中',
                    '2': '售后完成',
                },
                marketing_type_map:{},
                stepArr: [],
                stepArrActive: 0,
                orderDetail: {
                    base_user: {},
                    express: []
                },
                orderExpress: [],
                order_status_list: {
                    '0': "待付款",
                    '1': "待发货",
                    '2': "已发货",
                    '3': "已收货",
                    '4': "已完成",
                    '-1': "售后申请",
                    '-2': "退款中",
                    '-3': "售后完成",
                    '-4': "已关闭",
                    '-5': "撤销申请",
                },
                payment_type_list: {
                    '0': "在线支付",
                    '1': "微信",
                    '2': "支付宝",
                    '3': "银联卡",
                    '5': "余额支付",
                    '7': "汇聚支付",
                    '8': "汇聚快捷支付",
                    '100': "线下支付"
                },
                shipping_type_list: {
                    '1': "物流配送",
                    '2': "买家自提",
                    '3': "货到付款",
                    '4': "本地配送"
                },
                send_type: {
                    '0': "无需物流",
                    '1': "快递",
                },
                activities: [{
                    content: '支持使用图标',
                    timestamp: '2018-04-12 20:46',
                    size: 'normal',
                    color: '#409eff'
                }, {
                    content: '支持自定义颜色',
                    timestamp: '2018-04-03 20:46',
                }, {
                    content: '支持自定义尺寸',
                    timestamp: '2018-04-03 20:46',
                    size: 'large'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }, {
                    content: '默认样式的节点',
                    timestamp: '2018-04-03 20:46'
                }],
            };
        },
        created() {
            this.id = getQuery('id');
        },
        mounted() {
            this.getDetail();
        },
        methods: {
            load() {
                // this.count += 2
            },
            handleShipping(data) {
                this.handle('shipping', data, true);
            },
            getDetail() {
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mch/client/order/detail',
                        id: self.id
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        var data = e.data.data;
                        self.orderDetail = data.order;
                        self.store = data.store;
                        self.orderAction = data.order_action;
                        Object.keys(self.orderDetail.detail).forEach(function (item) {
                            self.goodDetails[self.orderDetail.detail[item].id] = self.orderDetail.detail[item];
                        });

                        self.order_status_list = data.order_status_list;
                        self.stepArr = data.stepArr;
                        self.marketing_type_map = data.marketing_type_map;
                        self.payment_type_list = data.payment_type_list;
                        self.shipping_type_list = data.shipping_type_list;
                        self.remark_form.seller_remark = self.orderDetail.seller_remark;
                        if (!isEmpty(data.step_arr)) self.getStepArr(data.step_arr, data.order);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getStepArr(stepArr, order) {
                var newStepArr = [];
                var index = 0;
                stepArr.forEach(function (item) {
                    let step = {};
                    var field_key = item.field;
                    step['title'] = item.title;
                    step['created_at'] = order[field_key];
                    step['is_step'] = order[field_key] ? 1 : 0;
                    newStepArr.push(step);
                    if (step['is_step'] == 1) index++;
                });
                this.stepArrActive = index;
                this.stepArr = newStepArr;
            },
            handle(type, data = null, submit = false) {
                let id = data ? parseInt(data.id) : '';
                let url = 'mch/client/order/operate'
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'mch/client/order/detail'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    // 删除订单
                    case 'destroy':
                        param = {
                            id: data.id,
                            type
                        };
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(param)
                        }).catch((err) => {
                        })
                        break;
                    // 取消订单
                    case 'cancel':
                        param = {
                            id: id
                        };
                        this.$confirm('确定关闭订单吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('mch/client/order/close', param)
                        }).catch((err) => {
                        })
                        break;
                    // 修改订单价格
                    case 'change_price':
                        if (submit) {
                            this.changePriceLoading = true;
                            this.send('mch/client/order/change-price', this.change_price_form, (resp) => {
                                if (resp.code == 0) this.isShowChangePrice = false;
                            });
                            setTimeout(() => {
                                this.changePriceLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangePrice = true
                            var objString = JSON.stringify(data);
                            this.change_price_form = JSON.parse(objString);
                        }
                        break;
                    // 修改收货地址
                    case 'change_address':
                        if (submit) {
                            this.changeAddressLoading = true;
                            this.send('mch/client/order/change-address', data, (resp) => {
                                if (resp.code == 0) this.isShowChangeAddress = false;
                            });
                            setTimeout(() => {
                                this.changeAddressLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeAddress = true
                            var objString = JSON.stringify(data);
                            this.change_address_form = JSON.parse(objString);
                        }
                        break;
                    // 订单备注
                    case 'remark':
                        if (submit) {
                            this.remarkLoading = true;
                            this.remark_form.id = this.id;
                            this.send('mch/client/order/remark', this.remark_form, (resp) => {
                                if (resp.code == 0) this.isShowRemark = false;
                            });
                            setTimeout(() => {
                                this.remarkLoading = false;
                            }, 100);
                        } else {
                            this.isShowRemark = true
                        }
                        break;
                    // 物流发货
                    case 'shipping':
                        if (submit) {
                            this.changeShippingLoading = true;
                            this.send('mch/client/order/shipping', data, (resp) => {
                                if (resp.code == 0) this.isShowChangeShipping = false;
                            });
                            setTimeout(() => {
                                this.changeShippingLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeShipping = true
                            var objString = JSON.stringify(data);
                            this.shipping_form = JSON.parse(objString);
                        }
                        break;
                    // 收货
                    case 'take-delivery':
                        param = {
                            id: id
                        };
                        this.$confirm('确定收货吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('mch/client/order/take-delivery', param)
                        }).catch((err) => {
                        })
                        break;
                    // 订单完成
                    case 'sales':
                        param = {
                            id: id
                        };
                        this.$confirm('确定完成订单吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('mch/client/order/sales-order', param)
                        }).catch((err) => {
                        })
                        break;
                }
            },
            send(url, params, callback) {
                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.getDetail();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            format(num){
                return num.toFixed(2);
            },
            getOrderPrice(data){
                let text = '';
                switch (data.marketing_type) {
                    case 'ScoreMall' :
                        text = data.extra_info;
                        break;
                    default :
                        text = '￥'+data.goods_price;
                }
                return text;
            },
        }
    });
</script>