qimall/backend/modules/mall/views/order/detail.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('component/order-shipping', __DIR__);
ComponentHelper::loadComponentView('component/order-proactive-refund', __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;
    }

    .merchant-remarks{
        width:300px !important;
    }
</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" style="height: 24px;display:flex;align-items:center;">
            <template v-if="fromRouteKey">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item >
                        <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:previousLevelRoute,fromRouteKey})">返回上级</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>订单详情</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
            <template v-else>
                <span>订单详情</span>
            </template>
        </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 v-if="orderDetail.marketing_type == 'BusinessActivity'">
                            {{marketing_type_map[orderDetail.marketing_type]}}订单
                        </span>
                        <span v-else>
                            普通订单
                        </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">
                        <span>卖家备注</span>
                        <span>{{ orderDetail.seller_remark || '--' }}</span>
                        <span><el-button type="text" size="mini" @click="handle('remark')">备注</el-button></span>
                    </div>
                    <div class="text-item">
                        <span>卖家留言</span>
                        <span>{{ orderDetail.leave || '--' }}</span>
                        <span><el-button type="text" size="mini" @click="handle('leave')">留言</el-button></span>
                    </div>

                    
                    <div class="text-item" v-if="orderDetail.is_user_handle_finish == 1">
                        <span>订单标识</span>
                        <span>放弃退换货</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.WaterPurifier && orderDetail.WaterPurifier.activate_code.length > 0">
                        <span>设备激活码</span>
                        <span v-for="code in orderDetail.WaterPurifier.activate_code" :style="{'display':'flex','margin-right':'6px','text-decoration': code.status == 0 ? 'line-through': 'none'}">{{code.code}}</span>
                    </div>
                    <div>
                        <div class="text-item" v-if="orderDetail.shipping_type == 2 && orderDetail.yunmeng_store" style="margin-left:15px;">
                            <div>
                                <span>自提门店信息</span>
                                <span></span>
                            </div>
                            <div style="display:flex;flex-wrap:nowrap;flex-direction:column; margin-left:40px;margin-top:5px;">
                                <span>门店名称：{{orderDetail.yunmeng_store.store_name}}</span>
                                <span>店长名称：{{orderDetail.yunmeng_store.shop_owner}}</span>
                                <span>联系方式：{{orderDetail.yunmeng_store.shop_mobile}}</span>
                                <span>详细地址：{{orderDetail.yunmeng_store.address}}</span>
                            </div>
                        </div>
                    </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" v-if="orderDetail.is_virtual == 0">
                        <span>配送方式</span><span>{{ shipping_type_list[orderDetail.shipping_type] }}</span>
                    </div>
                    <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>
                    <div v-if="orderDetail.pickup_info">
                        <h4>自提点信息</h4>
                        <div class="text-item">
                            <span>联系人姓名</span><span>{{ orderDetail.pickup_info.head_info.contact_name }}</span>
                        </div>
                        <div class="text-item">
                            <span>手机号码</span><span>{{ orderDetail.pickup_info.head_info.contact_phone }}</span>
                        </div>
                        <div class="text-item">
                            <span>详细地址</span><span>{{ orderDetail.pickup_info.head_info.address }}</span>
                        </div>
                    </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.goods_price}}</span>
                    </div>
                    <div class="text-item">
                        <span>运费</span>
                        <span>￥{{orderDetail.shipping_money}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.reduce_shipping_money > 0">
                        <span>满邮减免</span>
                        <span>￥{{orderDetail.reduce_shipping_money}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.score_money > 0">
                        <template v-if="['DigitalMall','FunMall'].includes(orderDetail.marketing_type)">
                            <span>抵扣</span>
                            <span>{{orderDetail.extra_info}}</span>
                        </template>
                        <template v-else>
                            <span>积分抵扣</span>
                            <span>- ￥{{orderDetail.score_money}}</span>
                        </template>
                    </div>
                    <div class="text-item" v-if="orderDetail.coupon_money > 0">
                        <span>优惠券抵扣</span>
                        <span>￥{{orderDetail.coupon_money}}</span>
                    </div>
                    <div class="text-item" v-if="orderDetail.rand_fee">
                        <span>随机减</span>
                        <span>￥{{orderDetail.rand_fee}}</span>
                    </div>
                    <div class="text-item">
                        <span>实付款</span>
                        <span>￥{{orderDetail.pay_money}}</span>
                    </div>
                    <template v-if="orderDetail.payment && orderDetail.payment.paidItem && orderDetail.payment.paidItem.length > 0">
                        <div class="text-item" v-for="item in orderDetail.payment.paidItem">
                            <span>{{ getPayTypeName(item.pay_type) }}</span>
                            <span>￥{{ item.pay_fee }}</span>
                        </div>
                    </template>
                    <template v-if="orderDetail.pay_group_list && orderDetail.pay_group_list.length > 0">
                        <div class="text-item" v-for="(item,index) in orderDetail.pay_group_list">
                            <span>{{item.pay_type_text}}</span>
                            <span>￥{{item.pay_fee}}</span>
                        </div>
                    </template>
                </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">
                            <el-tag size="small">
                                {{ scope.row.goods_attr_name || '无规格' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" width="210">
                        <template slot-scope="scope">
                            <div>{{ scope.row.price }}
                                <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 - scope.row.score_money).toFixed(2)}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="小计" width="210">
                        <template slot-scope="scope">
                            <div>{{ getOrderPrice(scope.row) }}</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-column label="操作">
                        <template slot-scope="scope">
                            <span><el-button type="text" size="mini" @click="handle('refund', scope.row)" v-if="(scope.row.order_status == 1 || (orderDetail.is_community_order && [1,2,3].includes(Number(scope.row.order_status)))) && scope.row.is_feedback == 0">主动退款</el-button></span>
                        </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>{{ item.express_name }}</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 || orderDetail.order_status == 1) && item.created_at == item.updated_at && orderDetail.show_botton"
                                                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="width:100%;overflow-y:auto;">
                                            <template v-for="val in (JSON.parse(item.order_detail_ids))">
                                                <li v-if="goodDetails[val]"><el-image :src="goodDetails[val].pic_url"></el-image></li>

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

                                                    数量：<span style="color: red">{{item?.nums?.[val] ?? 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 v-if="item.memo" class="package-item">
                                        <template v-if="!canParseJSON(item.memo)">
                                            <span>商家备注：</span><span class="range-right">{{item.memo}}</span>
                                        </template>
                                        <template v-if="canParseJSON(item.memo)">
                                            <template v-for="(val,index2) in (JSON.parse(item.memo))">
                                                <div class="package-item">
                                                    <span class="merchant-remarks">商家备注{{index2+1}}：{{val}}</span>
                                                </div>                                           
                                            </template>
                                        </template>
                                    </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>
                                    <div class="package-item" v-if="(orderDetail.order_status == 2 || orderDetail.order_status == 1) && item.shipping_type == 1 && supply_express.indexOf(orderDetail.marketing_type) == -1 && orderDetail.show_botton">
                                        <span>操作：</span>
                                        <el-button type="text" @click="handle('cancel_shipment', item)" style="padding: 0px;">取消发货</el-button>
                                    </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 && orderDetail.show_botton" size="small"
                       @click="handle('shipping', orderDetail)">发货
            </el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 2 && orderDetail.show_botton" size="small"
                       @click="handle('take-delivery', orderDetail)">确认收货
            </el-button>
            <el-button type="primary" v-if="orderDetail.order_status == 3 && orderDetail.show_botton" size="small"
                       @click="handle('sales', orderDetail)">订单完成
            </el-button>
        </el-card>

    </el-card>

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

    <!-- 商家备注 -->
    <el-dialog title="商家备注" width="600px" :visible.sync="isShowRemark" :close-on-click-modal="false">
        <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>

    <!--留言管理-->
    <el-dialog :close-on-click-modal="false" ref="orderInquiryDialog" :title="orderBatchDialog.title" width="600px" :visible.sync="orderBatchDialog.is_order_batch_show" @close="clearOrderBatch">
        <el-form :model="orderInquiry"  label-width="80px" size="small" style="width: 95%;margin: 0 auto;">
            <el-form-item label="" prop="remark" label-width="0px">
                <el-input type="textarea"
                          v-model="orderBatchDialog.content"
                          :placeholder="orderBatchDialog.title"
                          :rows="10"
                          resize="none">
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="clearOrderBatch">取 消</el-button>
            <el-button type="primary" @click.stop.prevent="orderBatchSubmit" :disabled="orderBatchDialog.is_order_button_disabled" :loading="remarkLoading">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 主动退款 -->
    <order-proactive-refund :is_show="isShowChangeRefund" :change-refund-loading="changeRefundLoading"
                    :order_info="orderDetail" :goods_id = "goodsId" :refund_reason = "refundReason"
                    @close="isShowChangeRefund = false" @success="handleSuccess"></order-proactive-refund>
    <!-- <el-dialog title="主动退款" width="600px" :visible.sync="isShowRefund" :close-on-click-modal="false">
        <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="isShowRefund = false">取 消</el-button>
            <el-button type="primary" @click="handle('remark',remark_form,true)" :loading="remarkLoading">确 定</el-button>
</div>
    </el-dialog>

</div>
    </el-dialog> -->

</div>


<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                id: 0,
                count: 6,
                detail: {},
                isShowChangeShipping: false,
                changeShippingLoading: false,
                isShowChangeRefund: false,
                changeRefundLoading: false,
                goodsId: 0,
                // goodsRefund: [],
                refundReason: {},
                remarkLoading: false,
                isShowRemark: false,
                // isShowRefund: false,
                shipping_form: {},
                remark_form: {
                    seller_remark: null,
                },
                orderInquiry: {// 订单批量查询
                    order_no: null,
                    is_order_inquiry_show: false,
                },
                orderBatchDialog: {// 订单留言弹框
                    is_order_batch_show: false,
                    content: null,
                    order_type: null,
                    title: null,
                    order_ids: null,
                    is_order_button_disabled: false,
                },
                supply_express: ['JuheShop'],// 供应链订单禁止任何物流操作
                activePackage: '0',
                cardLoading: false,
                logLoading: false,
                goodDetails: [],
                orderAction: [],
                repeal_list: {
                    '1': '售后中',
                    '2': '售后完成',
                },
                marketing_type_map:{},
                stepArr: [
                    {
                        title: '买家下单',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '买家付款',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '商家发货',
                        created_at: '0',
                        is_step: 0,
                    },
                    {
                        title: '交易完成',
                        created_at: '0',
                        is_step: 0,
                    }
                ],
                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'
                }],
                fromRouteKey: '',
                previousLevelRoute: '',
            };
        },
        created() {
            this.id = getQuery('id');
            this.fromRouteKey = getQuery('fromRouteKey');
            this.previousLevelRoute = getQuery('previousLevelRoute');
        },
        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: 'mall/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.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.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;
                        self.refundReason = data.refund_reason;
                        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) {
                    if (typeof(order[item.field]) != "undefined" && order[item.field] >= 0) {
                        let step = {};
                        var field_key = item.field;
                        step['title'] = item.title;
                        step['created_at'] = order[field_key];
                        step['is_step'] = order[field_key] > 0 ? 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 = 'mall/order/operate'
                switch (type) {
                    // 订单详情
                    case 'detail':
                        let params = {
                            r: 'mall/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('mall/order/close', param)
                        }).catch((err) => {
                        })
                        break;
                    // 修改订单价格
                    case 'change_price':
                        if (submit) {
                            this.changePriceLoading = true;
                            this.send('mall/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('mall/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('mall/order/remark', this.remark_form, (resp) => {
                                if (resp.code == 0) this.isShowRemark = false;
                            });
                            setTimeout(() => {
                                this.remarkLoading = false;
                            }, 100);
                        } else {
                            this.isShowRemark = true
                        }
                        break;
                    case 'leave': // 留言
                        this.orderBatchDialog.is_order_batch_show = true;
                        this.orderBatchDialog.content = this.orderDetail.leave;
                        this.orderBatchDialog.title = '留言';
                        this.orderBatchDialog.order_type = 'leave';
                        this.orderBatchDialog.order_ids = [this.orderDetail.id];
                        break;
                    // 物流发货
                    case 'shipping':
                        if (submit) {
                            this.changeShippingLoading = true;
                            this.send('mall/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('mall/order/take-delivery', param)
                        }).catch((err) => {
                        })
                        break;
                    // 取消发货
                    case 'cancel_shipment':
                        param = {
                            id: id,
                            order_id: data.order_id
                        };
                        this.$confirm('确定取消发货吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('mall/order/cancel-shipment', param)
                        }).catch((err) => {
                        })
                        break;
                    // 订单完成
                    case 'sales':
                        param = {
                            id: id
                        };
                        this.$confirm('确定完成订单吗?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send('mall/order/sales-order', param)
                        }).catch((err) => {
                        })
                        break;
                    case 'refund':

                        if (submit) {
                            this.changeRefundLoading = true;
                            console.log(data);
                            // this.send('mall/order/shipping', data, (resp) => {
                            //     if (resp.code == 0) this.isShowChangeRefund = false;
                            // });
                            setTimeout(() => {
                                this.changeRefundLoading = false;
                            }, 100);
                        } else {
                            this.isShowChangeRefund = true;
                            this.goodsId = data.id;
                        }
                        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.goods_price;
                        if (data.score > 0 ) text += '+' + data.score + '积分';
                        break;
                    default :
                        text = '￥'+data.goods_price;
                }
                return text;
            },
            /* 订单批量操作 */
            clearOrderBatch() {// 批量操作数据清除
                this.orderBatchDialog = {
                    is_order_batch_show: false,
                    content: null,
                    order_type: null,
                    order_ids: this.orderBatchDialog.order_ids,
                    title: null,
                }
            },
            orderBatchSubmit() {// 订单数据批量提交
                if (this.orderBatchDialog.order_ids === '' ||  this.orderBatchDialog.order_ids == null){
                    return this.$message.error("请选择要操作订单!");
                }
                if (this.orderBatchDialog.content === '' ||  this.orderBatchDialog.content == null){
                    return this.$message.error("请填写" + this.orderBatchDialog.title + "内容!");
                }
                this.orderBatchDialog.is_order_button_disabled = true;// 防止订单二次点击
                let order_ids = this.orderBatchDialog.order_ids.join(',');
                request({
                    params: {
                        r: 'mall/order/order-batch',
                    },
                    method: 'post',
                    data: {
                        order_type: this.orderBatchDialog.order_type,
                        content: this.orderBatchDialog.content,
                        order_ids: order_ids,
                    }
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message({
                            message: e.data.msg,
                            type: 'success',
                            duration: 2000,
                            onClose: () => {
                                this.orderBatchDialog.is_order_batch_show = false;
                                this.orderBatchDialog.is_order_button_disabled = false;
                                window.location.reload();
                            }
                        });
                    } else {
                        this.orderBatchDialog.is_order_button_disabled = false;
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            //本地更新数据
            handleSuccess() {
                this.isShowChangeRefund = false,
                this.getDetail();
                // this.getList()
            },
            getPayTypeName(type) {
                return this.payment_type_list[type] ?? '未知类型'
            },
            /**
             * 判断字符串是否可以解析为JSON
             */
            canParseJSON(str) {
                try {
                    const parsed = JSON.parse(str);
                    // 检查解析后的类型是否为对象或数组，且排除 null（因为 typeof null === 'object'）
                    return (typeof parsed === 'object' && parsed !== null) || Array.isArray(parsed);
                } catch (e) {
                    return false;
                }
            }
        }
    });
</script>