baoshi-was/resources/views/order/index/_workOrkerInfoModal.blade.php

<div class="modal fade " id="work-order-info" tabindex="-1" role="dialog" aria-labelledby="checkModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="work-order-info-modal">已有工单详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-light mb-0 border border-top">
                    <div class="">
                        <div>
                            <span class="text-monospace">客户订单号：</span>
                            <span v-text="workOrderInfo.clientCode"></span>
                        </div>
                        <div>
                            <span class="text-monospace">工单类型：</span>
                            <span v-text="workOrderInfo.type"></span>
                        </div>
                        <div>
                            <span class="text-monospace">内容：</span>
                            <span v-text="workOrderInfo.remark"></span>
                        </div>
                    </div>

                    <div class="">
                        <span class="text-monospace">当前工单号:</span>
                        <span v-text="workOrderInfo.id"></span>
                    </div>

                    <div class=""
                         v-if="workOrderInfo?.logistic_numbers.length >0 ">
                        <span class="text-monospace">快递单号:</span>
                        <span v-for="logistic_number in (workOrderInfo?.logistic_numbers || [])"
                              v-text="logistic_number"></span>
                    </div>

                    <div class="" v-if="workOrderInfo?.details.length > 0">
                        <div class="" v-for="detail in (workOrderInfo?.details || [])">
                            <div>
                                <span class="text-monospace">价值：</span>
                                <span v-text="detail.price"></span>
                            </div>
                            <div v-if="detail.return_logistic_number">
                                <span class="text-monospace">退回单号：</span>
                                <span v-text="detail.return_logistic_number"></span>
                            </div>
                            <div v-if="detail.reissue_logistic_number">
                                <span class="text-monospace">补发单号：</span>
                                <span v-text="detail.reissue_logistic_number"></span>
                            </div>
                        </div>
                    </div>

                    <div class=""
                         v-if="workOrderInfo.packagesImages && workOrderInfo.packagesImages.length > 0">
                        <div class="col-12">
                            <span class="text-monospace">外包装截图</span>
                        </div>
                        <div class="card-body col-sm-6"
                             v-for="image in workOrderInfo.packagesImages">
                            <div class="">
                                <img class="image-w" style="width: 100%"
                                     :src="image.src"
                                     alt="外包装截图">
                            </div>
                        </div>
                    </div>


                    <div class="" v-if="workOrderInfo.commodityImages && workOrderInfo.commodityImages.length > 0">
                        <div class="col-12">
                            <span class="text-monospace">内物破损图</span>
                        </div>
                        <div class="card-body col-sm-6"
                             v-for="image in workOrderInfo.commodityImages">
                            <div class="">
                                <img class="image-w" style="width: 100%"
                                     :src="image.src"
                                     alt="内物破损图">
                            </div>
                        </div>
                    </div>


                    <div class="" v-if="workOrderInfo.dealImages  && workOrderInfo.dealImages.length > 0">
                        <div class="col-12">
                            <span class="text-monospace">交易截图</span>
                        </div>
                        <div class="card-body col-sm-6"
                             v-for="image in workOrderInfo.dealImages">
                            <div class="">
                                <img class="image-w" style="width: 100%"
                                     :src="image.src"
                                     alt="交易截图">
                            </div>
                        </div>
                    </div>


                    <div class="" v-if="workOrderInfo.refundImages && workOrderInfo.refundImages.length > 0">
                        <div class="col-12">
                            <span class="text-monospace">退款截图</span>
                        </div>
                        <div class="card-body col-sm-6"
                             v-for="image in workOrderInfo.refundImages">
                            <div class="">
                                <img class="image-w" style="width: 100%"
                                     :src="image.src"
                                     alt="退款截图">
                            </div>
                        </div>
                    </div>

                    <div class="" v-if="workOrderInfo.commodities && workOrderInfo.commodities.length > 0">
                        <table class="table">
                            <thead>
                            <tr class="text-center">
                                <td>快递单号</td>
                                <td>sku</td>
                                <td>商品名称</td>
                                <td>订单数量</td>
                                <td>异常数量</td>
                                <td>核实数量</td>
                                <td>核实原因</td>
                                <td>处理结果</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="text-center" v-for="commodity in workOrderInfo.commodities">
                                <td v-text="commodity.logistic_number"></td>
                                <td v-text="commodity.sku"></td>
                                <td v-text="commodity.name"></td>
                                <td v-text="commodity.amount"></td>
                                <td v-text="commodity.abnormal_amount"></td>
                                <td v-text="commodity.check_amount"></td>
                                <td v-text="commodity.check_result"></td>
                                <td v-text="commodity.process_result"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-sm-offset-4">
                            <button class="btn btn-sm btn-outline-primary"
                                    @click="selectWorkOrderIndex(workOrderIndex-1)">
                                上一单
                            </button>
                            <button class="btn btn-sm btn-outline-primary" @click="selectWorkOrderIndex(workOrderIndex+1)">
                                下一单
                            </button>
                            <span  v-text="workOrderIndex+1"></span>/<span v-text="workOrderInfos.length"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                </button>
                {{--继续生成工单--}}
                <button type="button" class="btn btn-outline-primary" @click="showCreateWorkOrder">继续生成工单
                </button>
            </div>
        </div>
    </div>
</div>