订单处理UI重构并修复接单拼写问题

src/components/page/admin/order/OrderManage1.vue

@@ -0,0 +1,764 @@
+<template>
+  <div class="page-wrap">
+    <div class="crumbs">
+      <el-breadcrumb separator="/">
+        <i class="el-icon-eleme"></i> 订单处理
+      </el-breadcrumb>
+    </div>
+    <div class="background">
+      <div class="topbox">
+        <div class="topbox-left">
+          <span class="page-title">订单处理</span>
+        </div>
+      </div>
+      <div class="searchbox searchbox-multi">
+        <div class="filter-group filter-full">
+          <span>订单状态</span>
+          <el-radio-group v-model="tabIndex" @change="getDataList">
+            <el-radio-button label="all">全部</el-radio-button>
+            <el-radio-button label="0">待支付</el-radio-button>
+            <el-radio-button label="10">待接单</el-radio-button>
+            <el-radio-button label="20">
+              已接单
+              <div class="high-light-number" v-if="receivedNum != 0 && receivedNum != null">{{receivedNum}}</div>
+            </el-radio-button>
+            <el-radio-button label="30">待配送</el-radio-button>
+            <el-radio-button label="40">配送中</el-radio-button>
+            <el-radio-button label="60">已完成</el-radio-button>
+            <el-radio-button label="-20">
+              已完成 (退款)
+              <div class="high-light-number" v-if="refundNum != 0 && refundNum != null">{{refundNum}}</div>
+            </el-radio-button>
+            <el-radio-button label="50">待自取</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="filter-group">
+          <span>所属门店</span>
+          <el-select v-model="storeId" style="width:180px;" clearable filterable>
+            <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId"></el-option>
+          </el-select>
+        </div>
+        <div class="filter-group">
+          <span>下单时间</span>
+          <el-date-picker v-model="createDateS" value-format="yyyy-MM-dd" placeholder="开始日期" style="width:140px;"></el-date-picker>
+          <span class="time-separator">至</span>
+          <el-date-picker v-model="createDateE" value-format="yyyy-MM-dd" placeholder="结束日期" style="width:140px;"></el-date-picker>
+        </div>
+        <div class="filter-group">
+          <span>顾客姓名</span>
+          <el-input v-model="orderName" style="width:150px;" placeholder="根据顾客姓名查询" clearable></el-input>
+        </div>
+        <div class="filter-group">
+          <span>手机号</span>
+          <el-input v-model="orderTel" style="width:150px;" placeholder="根据顾客手机号查询" clearable></el-input>
+        </div>
+        <span style="flex:1"></span>
+        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
+      </div>
+      <div class="tablebox">
+        <div class="order-table">
+        <table style="margin-top: 15px;width:100%;border-collapse: collapse;">
+          <tbody v-for="(order, index) in tableData" :key="order.orderId">
+            <tr class="sep"></tr>
+            <tr class="trhead">
+              <td colspan="4" class="td1">
+                <span style="font-size: 24px; font-weight: bolder; color: rgb(25, 137, 250);margin-left: 13px;">{{ order.takeupCode }}</span>
+                <span style="padding-left: 20px; font-size: 14px; font-weight: bold;">{{typeFormatter(order.orderType)}}</span>
+                <span style="float:right;margin-top: 5px;margin-right: 12px;">{{order.statusName}}({{order.sourceTypeStr}})</span>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+               <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTcuNSA4YTMuNSAzLjUgMCAxIDAgMC03IDMuNSAzLjUgMCAwIDAgMCA3em0wIDFhNC41IDQuNSAwIDEgMSAwLTkgNC41IDQuNSAwIDAgMSAwIDl6bTYuMzYgNmMuNjg1LTMuMTIyLTEuMjEtNC41NDUtNi4zNTMtNC41NDVTLjQ2MiAxMS44NzkgMS4xMzYgMTVIMTMuODZ6TTcuNTA3IDkuNDU1YzYuMTEgMCA4LjQ4NCAyLjE4MSA3LjEyIDYuNTQ1SC4zNjdjLTEuMzUtNC4zNjQgMS4wMy02LjU0NSA3LjE0LTYuNTQ1eiIvPgo8L3N2Zz4K">
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.orderName }}&nbsp;&nbsp;{{ order.orderTel }}
+                  <b style="float:right">{{order.storeName}}</b>
+                </span>
+                <p style="text-align: left;">{{ order.orderAddress }}</p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td style="text-align:right;">
+                备注:
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.customerMes }}
+                </span>
+              </td>
+            </tr>
+            <tr class="tr-border" >
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDIwIDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE0LjgyNiA5LjY5NGwtMi4zNTYgMS4yNDhhLjUuNSAwIDAgMS0uMjM0LjA1OEg3LjVhLjUuNSAwIDAgMS0uNS0uNXYtM2EuNS41IDAgMCAwLS41LS41aC01YS41LjUgMCAwIDAtLjUuNVYxMmEzIDMgMCAwIDAgNS42IDEuNWwuMjg4LS41aDYuMjI0bC4yODkuNWEzIDMgMCAxIDAgMy45OC00LjE2M2wtLjM4Mi0uMi0xLjY1LTUuNzc0QS41LjUgMCAwIDAgMTQuODcgM2gtLjg4NGEuNS41IDAgMCAwLS40OC42MzhsMS41NjggNS40NzZhLjUuNSAwIDAgMS0uMjQ3LjU4ek0yMCAxMmE0IDQgMCAwIDEtNy40NjUgMmgtNS4wN0E0IDQgMCAwIDEgMCAxMlY3YTEgMSAwIDAgMSAxLTFoNmExIDEgMCAwIDEgMSAxdjNoNC4xMTFMMTQgOWwtMS43MTgtNmgtMS42OTZhLjUuNSAwIDAgMS0uMDAyLTFIMTZsMS44NDIgNi40NDlBNCA0IDAgMCAxIDIwIDEyek0xIDBoNWExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0uNSA0aDRhLjUuNSAwIDAgMCAuNS0uNXYtMmEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXYyYS41LjUgMCAwIDAgLjUuNXoiLz4KPC9zdmc+Cg==">
+              </td>
+              <td colspan="3" style="text-align: left;">
+                <p><span>{{deliveryTypeFormatter( order.orderType )}}</span></p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEuNSA2aDRhLjUuNSAwIDAgMCAuNS0uNXYtNGEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXY0YS41LjUgMCAwIDAgLjUuNXpNMSAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFIMWExIDEgMCAwIDEtMS0xVjFhMSAxIDAgMCAxIDEtMXptOS41IDZoNGEuNS41IDAgMCAwIC41LS41di00YS41LjUgMCAwIDAtLjUtLjVoLTRhLjUuNSAwIDAgMC0uNS41djRhLjUuNSAwIDAgMCAuNS41ek0xMCAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMVYxYTEgMSAwIDAgMSAxLTF6TTEuNSAxNWg0YS41LjUgMCAwIDAgLjUtLjV2LTRhLjUuNSAwIDAgMC0uNS0uNWgtNGEuNS41IDAgMCAwLS41LjV2NGEuNS41IDAgMCAwIC41LjV6TTEgOWg1YTEgMSAwIDAgMSAxIDF2NWExIDEgMCAwIDEtMSAxSDFhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xem0xMCA2aDNhMSAxIDAgMCAwIDEtMXYtM2ExIDEgMCAwIDAtMS0xaC0zYTEgMSAwIDAgMC0xIDF2M2ExIDEgMCAwIDAgMSAxem0tMS02aDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xeiIvPgo8L3N2Zz4K">
+              </td>
+              <td colspan="3" style="text-align: left;">
+                <span style="display: block; font: 15px bolder; color: rgb(45, 47, 51);">
+                  {{order.buyCount}}&nbsp;件商品 <b class="state_b_3168206771703696" style="color: rgb(25, 137, 250);float:right;margin-right: 12px;" @click="expand(index)">{{ !order.buttonText ? '展开' : order.buttonText }}</b>
+                </span>
+              </td>
+            </tr>
+              <tr v-show="order.isExpand" v-for="item in order.detailList" :key="item.orderDetailId" class="product_table_3168206771703696 tr-border" style="display: table-row;">
+                <td></td>
+                <td style="text-align: left;padding: 10px 0;">
+                  {{item.goodsName}}<span>{{item.propertys == '' ? '' : '(' + item.propertys + ')'}}</span>
+                </td>
+                <td style="text-align: right;">× {{item.buyCount}}</td>
+                <td style="text-align: right;padding-right: 12px;padding-left: 5px;">{{moneyConverter(item.salesPrice)}}</td>
+              </tr>
+            <tr v-if="order.isExpand" class="product_table_3168206771703696 tr-border" style="display: table-row;">
+              <td></td>
+              <td class="first-td" colspan="3" style="text-align: left;">
+                <span style="font-size: 12px; color: rgb(135, 141, 153);">其他</span>
+                <p>餐盒费
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.packingFee )}}</span>
+                </p>
+                <p>配送费
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                </p>
+                <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
+                  <span style="float: right; margin-right: 15px;">{{-moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                </p>
+                <p>新客立减
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.newcusDiscounts) }}</span>
+                </p>
+                <p>满减
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.fullDiscounts) }}</span>
+                </p>
+                <p>优惠券
+                  <span style="float: right; margin-right: 15px;">{{order.couponName == '' || order.couponName == null ? '' : '（' + order.couponName + '）'}}{{moneyConverter(order.couponCost) }}</span>
+                </p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxnIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMSAwaDEzYTEgMSAwIDAgMSAxIDF2MTRhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0wIDEuNXYxM2EuNS41IDAgMCAwIC41LjVoMTJhLjUuNSAwIDAgMCAuNS0uNXYtMTNhLjUuNSAwIDAgMC0uNS0uNWgtMTJhLjUuNSAwIDAgMC0uNS41eiIvPgogICAgICAgIDxwYXRoIGQ9Ik02Ljg0NCA3SDVhLjUuNSAwIDAgMCAwIDFoMnYxSDVhLjUuNSAwIDAgMCAwIDFoMnYyLjVhLjUuNSAwIDEgMCAxIDBWMTBoMmEuNS41IDAgMSAwIDAtMUg4VjhoMmEuNS41IDAgMSAwIDAtMUg4LjE1MmwyLjQzLTIuODc3YS41LjUgMCAxIDAtLjc2NC0uNjQ2bC0yLjMyIDIuNzQ4LTIuMzItMi43NDhhLjUuNSAwIDEgMC0uNzY0LjY0Nkw2Ljg0NCA3eiIvPgogICAgPC9nPgo8L3N2Zz4K">
+              </td>
+              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);">顾客实付</td>
+              <td colspan="2" style="text-align: right;"><b style="color: rgb(90, 94, 102);padding-right: 12px;">¥{{moneyConverter(order.orderFee)}}</b></td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);padding: 10px 0;">
+                商家预计收入
+                <el-tooltip class="item" effect="dark" placement="top-end">
+                  <div slot="content" class="shouru_div sr_tc_3168206771703696">
+                    <p>订单总额<span>¥{{moneyConverter(order.orderFee)}}</span></p>
+                    <p>配送费<span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span></p>
+                    <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
+                      <span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                    </p>
+                    <p>微信扣点<span>¥-{{moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee ))}}</span></p>
+                    <p>平台扣点<span>¥-{{moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee)))}}</span></p>
+                    <p style="border-bottom: none;">商家预计收入<span>¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</span></p> <i class="layui-edge"></i>
+                  </div>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </td>
+              <td colspan="2" style="text-align: right;">
+                <b style="color: rgb(250, 85, 85);padding-right: 12px;">¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</b>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td colspan="2" style="text-align: left;padding: 10px 0;">
+                <p>下单时间:{{order.createDateStr}}</p>
+                <p>订单号:{{order.orderCode}}</p>
+              </td>
+            </tr>
+            <tr class="tr-border" v-if="order.reason != null && order.reason.length > 0">
+              <td style="text-align:right;">
+                退款原因:
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.reason }}
+                </span>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td colspan="2" style="text-align: right;padding: 10px 0;width: 100%;">
+                <el-button v-if="order.status == 10" @click="printOrder(order.orderId)">
+                  打印订单
+                </el-button>
+                <el-button style="margin-right: 20px;" @click="orderPayedInfo(order.orderCode)">
+                  查询支付状态
+                </el-button>
+                <el-button v-if="order.status == 10" style="margin-right: 20px;" v-action="'edit'" @click="refuseOrder(order.orderId)">
+                  拒绝
+                </el-button>
+                <el-button v-action="'edit'" v-if="order.status != 50 && order.status > 0 && order.status != 0 && order.status != 10" style="margin-right: 20px;" @click="allRefund(order.orderId)">
+                  全部退单
+                </el-button>
+                <el-button v-action="'edit'" v-if="order.status == 50" style="margin-right: 20px;" @click="completeOrder(order.orderId)">
+                  客户已取货
+                </el-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+        <el-pagination
+          style="margin-top: 16px; text-align: right;"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog title="全部退款" :visible.sync="dialogVisible" :before-close="closeDialog" width="500px">
+      <div style="line-height: 72px;">
+        <span>退款原因</span>
+        <el-input type="textarea" rows="3" placeholder="请输入退款原因" v-model="refundReason" style="margin-left: 15px;width: 350px;"></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="doRefund">保存</el-button>
+        <el-button @click="closeDialog">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="支付明细" :visible.sync="payedDialogVisible" :before-close="closePayedDialog" width="80%">
+      <div style="padding-bottom: 30px">
+        <div>
+            <div>
+                  <div>
+                      <div class="crumbs">
+                          <el-breadcrumb separator="/">
+                              <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>支付信息</el-breadcrumb-item>
+                          </el-breadcrumb>
+                      </div>
+                      <el-form ref="form" :model="payedInfo" label-width="120px">
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="通信标识：">
+                                  <span>{{payedInfo.return_code}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="业务结果： ">
+                                      <span>{{payedInfo.result_code}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="错误描述： ">
+                                      <span>{{payedInfo.err_code_des}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="交易状态：">
+                                      <span>{{payedInfo.trade_state}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="状态描述： ">
+                                      <span>{{payedInfo.trade_state_desc}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="付款银行：">
+                                          <span>{{payedInfo.bank_type}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="付款金额(分)： ">
+                                      <span>{{payedInfo.total_fee}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="交易时间：">
+                                      <span>{{payedInfo.time_end}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                      </el-form>
+                  </div>
+            </div>
+        </div>
+        <el-button style="margin-top: 20px;" v-if="payedInfo.trade_state == 'REFUND' && refundFlg" type="primary" @click="orderRefundInfo(cOrderCode)">查询退款信息</el-button>
+        <div v-if="refundShow" style="margin-top:20px">
+            <div>
+                <div>
+                    <div class="crumbs">
+                        <el-breadcrumb separator="/">
+                            <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>退款信息</el-breadcrumb-item>
+                        </el-breadcrumb>
+                    </div>
+                    <el-form ref="form" :model="refundInfo" label-width="120px">
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="订单金额(分)：">
+                                  <span>{{refundInfo.total_fee}}</span>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="总退货额(分)： ">
+                                    <span>{{refundInfo.refund_fee}}</span>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                    <dptable :columns="columns3" :dataSource="refundList" :options="options3"/>
+                </div>
+            </div>
+        </div>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+<script>
+import dptable from '@/components/common/Dptable.vue'
+export default {
+  components: {
+    dptable
+  },
+	data(){
+		return {
+      tabIndex: "all",
+      storeList: [],
+      url: '/orderManage/orderPage',
+      numUrl: '/orderManage/getReceivedAndRefundOrderNum',
+      detailUrl: '/orderManage/getOrderDetails',
+      refundUrl: '/refund/orderRefund',
+      printUrl: '/orderManage/printOrder',
+      refuseUrl: '/orderManage/refuseOrder',
+      completeUrl: '/orderManage/completeOrder',
+      storeUrl: '/storeManage/getStoreList',
+      payedInfoUrl: '/orderManage/getOrderPayedInfo',
+      refundInfoUrl: '/orderManage/getOrderRefundInfo',
+      storeId: '',
+      dateArray: [],
+      orderName: '',
+      orderTel: '',
+      dialogVisible: false,
+      receivedNum: 0,
+      refundNum: 0,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      tableData: [],
+      createDateS: null,
+      createDateE: null,
+      refundOrderId: null,
+      refundReason: null,
+      payedDialogVisible: false,
+      payedInfo: {
+        return_code: '',
+        result_code: '',
+        err_code_des: '',
+        trade_state: '',
+        trade_state_desc: '',
+        bank_type: '',
+        total_fee: '',
+        time_end: ''
+      },
+      cOrderCode: '',
+      refundFlg: true,
+      refundShow: false,
+      refundInfo: {
+        total_fee: '',
+        refund_fee: ''
+      },
+      refundList: [],
+      columns3: [
+          {
+              prop: 'refund_fee', label: '申请退款金额(分)', width: 200
+          },
+          {
+              prop: 'refund_status', label: '退款状态', width: 200
+          },
+          {
+              prop: 'refund_channel', label: '退款渠道', width: 250
+          },
+          {
+              prop: 'refund_recv_accout', label: '退款入账账户', width: 250
+          },
+          {
+              prop: 'refund_success_time', label: '退款成功时间',
+          }
+      ],
+      options3: {
+          index: false, // 显示序号， 多选则 mutiSelect
+          initTable: false, // 是否一挂载就加载数据
+          border:true
+      },
+		};
+	},
+  created() {
+      const date = new Date();
+      this.createDateS = this.$moment(date).format("YYYY-MM-DD");
+      this.createDateE = this.$moment(date).format("YYYY-MM-DD");
+      this.getStoreList();
+      this.getDataList();
+  },
+	methods: {
+		closeDialog() {
+      this.dialogVisible = false
+      this.refundReason = null;
+    },
+    expand(index) {
+      let order = this.tableData[index]
+      if (!order.isExpand) {
+        if (!!order.detailList && order.detailList.length > 0) {
+          this.$set(order, 'buttonText', '收起')
+          this.$set(order, 'isExpand', true)
+        } else {
+          // 获取详情数据
+          const querystring = require('querystring');
+          this.$axios.post(this.detailUrl, querystring.stringify({orderId: order.orderId})).then(res => {
+            if (res.data.rtnBean.rtnCode == 0) {
+              this.$set(order, 'detailList', res.data.list);
+              this.$set(order, 'buttonText', '收起')
+              this.$set(order, 'isExpand', true)
+            }
+          }).catch((error) => {
+            console.log(error);
+          })
+        }
+      } else if (order.isExpand) {
+        this.$set(order, 'buttonText', '展开')
+        this.$set(order, 'isExpand', false)
+      }
+    },
+    allRefund(id) {
+      this.refundOrderId = id;
+      this.dialogVisible = true;
+    },
+    doRefund() {
+      const querystring = require("querystring");
+      this.$confirm('确认退单并退款给用户?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.refundUrl, querystring.stringify({
+          orderId: this.refundOrderId, reason: this.refundReason
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '退款成功!'
+          });
+          this.dialogVisible = false;
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    toFixed2(money) {
+			return Math.round(money * 100) / 100
+		},
+    getDataList() {
+      var dateS;
+      var dateE;
+      if (this.createDateS != "" && this.createDateS != null) {
+        dateS = this.$moment(this.createDateS).format("YYYY/MM/DD");
+      }
+      if (this.createDateE != "" && this.createDateE != null) {
+        dateE = this.$moment(this.createDateE).format("YYYY/MM/DD");
+      }
+      // 开始时间不能大于结束时间
+      if(dateS !='' && dateS != null && dateE != '' && dateE != null){
+        if(dateS > dateE){
+          this.$message.error("开始时间不能大于结束时间，请更换查询条件重新再试");
+          return;
+        }
+      }
+      const querystring = require("querystring");
+      let obj = {
+        storeId: this.storeId,
+        beginDate: dateS,
+        endDate: dateE,
+        orderName: this.orderName,
+        orderTel: this.orderTel,
+        pageSize: this.pageSize,
+        currentPage: this.currentPage
+      }
+      if (this.tabIndex != "all") {
+        obj.status = this.tabIndex
+      }
+      this.$axios.post(this.url, querystring.stringify(obj)).then(res => {
+        if (res.data.list.length == 0) {
+          this.$message("数据不存在，请更换查询条件重新再试");
+        }
+        this.tableData = res.data.list;
+        this.receivedNum = res.data.obj.receivedNum;
+        this.refundNum = res.data.obj.refundNum;
+        this.total = res.data.page.resultCount;
+        this.currentPage = res.data.page.currentPage;
+      }).catch(error => {
+      });
+    },
+    getStoreList() {
+      this.$axios.post(this.storeUrl, {}).then(res => {
+        this.storeList = res.data.list;
+      }).catch(error => {
+      });
+
+    },
+    typeFormatter(type) {
+      let str = (type == 1 || type == 2) ? '配送订单' : '自提订单'
+      return str;
+    },
+    statusFormatter(status) {
+      if (status == 0 || status == -1 || status == 5 || status == 10 || status == -10 || status == -30 || status == -40) {
+        return "未生效订单"
+      } else if (status == 20 || status == 30 || status == 40 || status == 50 || status == 60) {
+        return "已生效订单"
+      } else if (status == -20 || status == -50) {
+        return "退款订单"
+      }
+    },
+    deliveryTypeFormatter(type) {
+      if (type == 1) {
+        return '楼下自提'
+      } else if (type == 2) {
+        return '直达宿舍'
+      } else if (type == 3) {
+        return '自提外带'
+      } else if (type == 4) {
+        return '自提堂食'
+      }
+    },
+    dateChange() {
+      if (null != this.dateArray && this.dateArray.length > 0) {
+        this.createDateS = this.dateArray[0];
+        this.createDateE = this.dateArray[1];
+      } else {
+        this.createDateS = null;
+        this.createDateE = null;
+      }
+    },
+    printOrder(orderId) {
+      const querystring = require("querystring");
+      this.$axios.post(this.printUrl, querystring.stringify({
+        orderId: orderId
+      })).then(res => {
+        this.$message({
+          type: 'success',
+          message: '已成功发起打印!'
+        });
+        this.getDataList();
+      }).catch(error => {
+      });
+    },
+    refuseOrder(orderId) {
+      const querystring = require("querystring");
+      this.$confirm('确认拒绝接单并退款给用户?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.refuseUrl, querystring.stringify({
+          orderId: orderId
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '拒绝成功!'
+          });
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    completeOrder(orderId) {
+      const querystring = require("querystring");
+      this.$confirm('确认客户已取货?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.completeUrl, querystring.stringify({
+          orderId: orderId
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          });
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    handleSizeChange(size) { // 切换每页显示的数量
+			this.pageSize = size;
+			this.getDataList();
+		},
+		handleCurrentChange(current) { // 切换页码
+			this.currentPage = current;
+			this.getDataList();
+		},
+    calcPoints(rate, orderFee) {
+      return (Number(orderFee) * Number(rate));
+    },
+    orderPayedInfo(orderCode) {
+      const querystring = require("querystring");
+      this.$axios.post(this.payedInfoUrl, querystring.stringify({
+        orderCode: orderCode
+      })).then(res => {
+        this.cOrderCode = orderCode;
+        this.payedDialogVisible = true;
+        if (res.data.rtnBean.rtnCode == 0) {
+          this.payedInfo = res.data.obj
+        }
+      }).catch(error => {
+      });
+    },
+    closePayedDialog() {
+      this.payedDialogVisible = false;
+      this.refundFlg = true;
+      this.refundShow = false;
+    },
+    orderRefundInfo(orderCode) {
+      this.refundFlg = false;
+      this.refundShow = true;
+      const querystring = require("querystring");
+      this.$axios.post(this.refundInfoUrl, querystring.stringify({
+        orderCode: orderCode
+      })).then(res => {
+        if (res.data.rtnBean.rtnCode == 0) {
+          this.refundInfo = res.data.obj;
+          this.refundList = res.data.obj.refundList;
+        }
+      }).catch(error => {
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-wrap{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.crumbs{
+    color: #666;
+    flex-shrink: 0;
+}
+.background{
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 10px 10px;
+}
+.topbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    flex-shrink: 0;
+}
+.topbox-left{ flex-shrink: 0; }
+.page-title{
+    font-size: 14px;
+    color: #409EFF;
+    font-weight: 600;
+}
+.searchbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: #606266;
+}
+.searchbox-multi{
+    flex-wrap: wrap;
+    max-height: 160px;
+    overflow-y: auto;
+}
+.searchbox > span{ flex: 1; }
+.filter-group{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+}
+.filter-group > span{
+    white-space: nowrap;
+    color: #606266;
+}
+.filter-full{
+    flex-basis: 100%;
+}
+.tablebox{
+    flex: 1;
+    min-height: 0;
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 16px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+.order-table {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    box-sizing: border-box;
+    font-size: 13px;
+}
+.order-info {
+    margin-top: 15px;
+}
+.trhead {
+    background: #f2f2f2;
+    width: 100%;
+    height: 36px;
+}
+.tr-border {
+    border-bottom: 1px solid #E6E6E6;
+}
+.first-td {
+    width: 50px;
+    padding: 10px 17px;
+}
+table {
+    font-size: 13px;
+}
+.high-light-number{
+    float: right;
+    margin-left: 5px;
+    background: #FF5722;
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 2px;
+    margin-top: -1px;
+}
+.time-separator{
+    margin: 0 2px;
+    color: #909399;
+}
+</style>

src/components/page/third/order/OrderManage1.vue

@@ -0,0 +1,777 @@
+<template>
+  <div class="page-wrap">
+    <div class="crumbs">
+      <el-breadcrumb separator="/">
+        <i class="el-icon-eleme"></i> 订单处理
+      </el-breadcrumb>
+    </div>
+    <div class="background">
+      <div class="topbox">
+        <div class="topbox-left">
+          <span class="page-title">订单处理</span>
+        </div>
+      </div>
+      <div class="searchbox searchbox-multi">
+        <div class="filter-group filter-full">
+          <span>订单状态</span>
+          <el-radio-group v-model="tabIndex" @change="getDataList">
+            <el-radio-button label="all">全部</el-radio-button>
+            <el-radio-button label="0">待支付</el-radio-button>
+            <el-radio-button label="10">待接单</el-radio-button>
+            <el-radio-button label="20">
+              已接单
+              <div class="high-light-number" v-if="receivedNum != 0 && receivedNum != null">{{receivedNum}}</div>
+            </el-radio-button>
+            <el-radio-button label="30">待配送</el-radio-button>
+            <el-radio-button label="40">配送中</el-radio-button>
+            <el-radio-button label="60">已完成</el-radio-button>
+            <el-radio-button label="-20">
+              已完成 (退款)
+              <div class="high-light-number" v-if="refundNum != 0 && refundNum != null">{{refundNum}}</div>
+            </el-radio-button>
+            <el-radio-button label="50">待自取</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="filter-group">
+          <span>下单时间</span>
+          <el-date-picker v-model="createDateS" value-format="yyyy-MM-dd" placeholder="开始日期" style="width:140px;"></el-date-picker>
+          <span class="time-separator">至</span>
+          <el-date-picker v-model="createDateE" value-format="yyyy-MM-dd" placeholder="结束日期" style="width:140px;"></el-date-picker>
+        </div>
+        <div class="filter-group">
+          <span>顾客姓名</span>
+          <el-input v-model="orderName" style="width:150px;" placeholder="根据顾客姓名查询" clearable></el-input>
+        </div>
+        <div class="filter-group">
+          <span>手机号</span>
+          <el-input v-model="orderTel" style="width:150px;" placeholder="根据顾客手机号查询" clearable></el-input>
+        </div>
+        <span style="flex:1"></span>
+        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
+      </div>
+      <div class="tablebox">
+        <div class="order-table">
+        <table style="margin-top: 15px;width:100%;border-collapse: collapse;">
+          <tbody v-for="(order, index) in tableData" :key="order.orderId">
+            <tr class="sep"></tr>
+            <tr class="trhead">
+              <td colspan="4" class="td1">
+                <span style="font-size: 24px; font-weight: bolder; color: rgb(25, 137, 250);margin-left: 13px;">{{ order.takeupCode }}</span>
+                <span style="padding-left: 20px; font-size: 14px; font-weight: bold;">{{typeFormatter(order.orderType)}}</span>
+                <span style="float:right;margin-top: 5px;margin-right: 12px;">{{order.statusName}}({{order.sourceTypeStr}})</span>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+               <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTcuNSA4YTMuNSAzLjUgMCAxIDAgMC03IDMuNSAzLjUgMCAwIDAgMCA3em0wIDFhNC41IDQuNSAwIDEgMSAwLTkgNC41IDQuNSAwIDAgMSAwIDl6bTYuMzYgNmMuNjg1LTMuMTIyLTEuMjEtNC41NDUtNi4zNTMtNC41NDVTLjQ2MiAxMS44NzkgMS4xMzYgMTVIMTMuODZ6TTcuNTA3IDkuNDU1YzYuMTEgMCA4LjQ4NCAyLjE4MSA3LjEyIDYuNTQ1SC4zNjdjLTEuMzUtNC4zNjQgMS4wMy02LjU0NSA3LjE0LTYuNTQ1eiIvPgo8L3N2Zz4K">
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.orderName }}&nbsp;&nbsp;{{ order.orderTel }}
+                  <b style="float:right">{{order.storeName}}</b>
+                </span>
+                <p style="text-align: left;">{{ order.orderAddress }}</p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td style="text-align:right;">
+                备注:
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.customerMes }}
+                </span>
+              </td>
+            </tr>
+            <tr class="tr-border" >
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDIwIDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE0LjgyNiA5LjY5NGwtMi4zNTYgMS4yNDhhLjUuNSAwIDAgMS0uMjM0LjA1OEg3LjVhLjUuNSAwIDAgMS0uNS0uNXYtM2EuNS41IDAgMCAwLS41LS41aC01YS41LjUgMCAwIDAtLjUuNVYxMmEzIDMgMCAwIDAgNS42IDEuNWwuMjg4LS41aDYuMjI0bC4yODkuNWEzIDMgMCAxIDAgMy45OC00LjE2M2wtLjM4Mi0uMi0xLjY1LTUuNzc0QS41LjUgMCAwIDAgMTQuODcgM2gtLjg4NGEuNS41IDAgMCAwLS40OC42MzhsMS41NjggNS40NzZhLjUuNSAwIDAgMS0uMjQ3LjU4ek0yMCAxMmE0IDQgMCAwIDEtNy40NjUgMmgtNS4wN0E0IDQgMCAwIDEgMCAxMlY3YTEgMSAwIDAgMSAxLTFoNmExIDEgMCAwIDEgMSAxdjNoNC4xMTFMMTQgOWwtMS43MTgtNmgtMS42OTZhLjUuNSAwIDAgMS0uMDAyLTFIMTZsMS44NDIgNi40NDlBNCA0IDAgMCAxIDIwIDEyek0xIDBoNWExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0uNSA0aDRhLjUuNSAwIDAgMCAuNS0uNXYtMmEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXYyYS41LjUgMCAwIDAgLjUuNXoiLz4KPC9zdmc+Cg==">
+              </td>
+              <td colspan="3" style="text-align: left;">
+                <p><span>{{deliveryTypeFormatter( order.orderType )}}</span></p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTEuNSA2aDRhLjUuNSAwIDAgMCAuNS0uNXYtNGEuNS41IDAgMCAwLS41LS41aC00YS41LjUgMCAwIDAtLjUuNXY0YS41LjUgMCAwIDAgLjUuNXpNMSAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFIMWExIDEgMCAwIDEtMS0xVjFhMSAxIDAgMCAxIDEtMXptOS41IDZoNGEuNS41IDAgMCAwIC41LS41di00YS41LjUgMCAwIDAtLjUtLjVoLTRhLjUuNSAwIDAgMC0uNS41djRhLjUuNSAwIDAgMCAuNS41ek0xMCAwaDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMVYxYTEgMSAwIDAgMSAxLTF6TTEuNSAxNWg0YS41LjUgMCAwIDAgLjUtLjV2LTRhLjUuNSAwIDAgMC0uNS0uNWgtNGEuNS41IDAgMCAwLS41LjV2NGEuNS41IDAgMCAwIC41LjV6TTEgOWg1YTEgMSAwIDAgMSAxIDF2NWExIDEgMCAwIDEtMSAxSDFhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xem0xMCA2aDNhMSAxIDAgMCAwIDEtMXYtM2ExIDEgMCAwIDAtMS0xaC0zYTEgMSAwIDAgMC0xIDF2M2ExIDEgMCAwIDAgMSAxem0tMS02aDVhMSAxIDAgMCAxIDEgMXY1YTEgMSAwIDAgMS0xIDFoLTVhMSAxIDAgMCAxLTEtMXYtNWExIDEgMCAwIDEgMS0xeiIvPgo8L3N2Zz4K">
+              </td>
+              <td colspan="3" style="text-align: left;">
+                <span style="display: block; font: 15px bolder; color: rgb(45, 47, 51);">
+                  {{order.buyCount}}&nbsp;件商品 <b class="state_b_3168206771703696" style="color: rgb(25, 137, 250);float:right;margin-right: 12px;" @click="expand(index)">{{ !order.buttonText ? '展开' : order.buttonText }}</b>
+                </span>
+              </td>
+            </tr>
+              <tr v-show="order.isExpand" v-for="item in order.detailList" :key="item.orderDetailId" class="product_table_3168206771703696 tr-border" style="display: table-row;">
+                <td></td>
+                <td style="text-align: left;padding: 10px 0;">
+                  {{item.goodsName}}<span>{{item.propertys == '' ? '' : '(' + item.propertys + ')'}}</span>
+                </td>
+                <td style="text-align: right;">× {{item.buyCount}}</td>
+                <td style="text-align: right;padding-right: 12px;padding-left: 5px;">{{moneyConverter(item.salesPrice)}}</td>
+              </tr>
+            <tr v-if="order.isExpand" class="product_table_3168206771703696 tr-border" style="display: table-row;">
+              <td></td>
+              <td class="first-td" colspan="3" style="text-align: left;">
+                <span style="font-size: 12px; color: rgb(135, 141, 153);">其他</span>
+                <p>餐盒费
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.packingFee )}}</span>
+                </p>
+                <p>配送费
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                </p>
+                <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
+                  <span style="float: right; margin-right: 15px;">{{-moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                </p>
+                <p>新客立减
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.newcusDiscounts) }}</span>
+                </p>
+                <p>满减
+                  <span style="float: right; margin-right: 15px;">{{moneyConverter(order.fullDiscounts) }}</span>
+                </p>
+                <p>优惠券
+                  <span style="float: right; margin-right: 15px;">{{order.couponName == '' || order.couponName == null ? '' : '（' + order.couponName + '）'}}{{order.couponCost ? moneyConverter(order.couponCost) : '' }}</span>
+                </p>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td class="first-td">
+                <img style="margin-left: 6px;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE1IDE2Ij4KICAgIDxnIGZpbGw9IiM4NzhEOTkiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMSAwaDEzYTEgMSAwIDAgMSAxIDF2MTRhMSAxIDAgMCAxLTEgMUgxYTEgMSAwIDAgMS0xLTFWMWExIDEgMCAwIDEgMS0xem0wIDEuNXYxM2EuNS41IDAgMCAwIC41LjVoMTJhLjUuNSAwIDAgMCAuNS0uNXYtMTNhLjUuNSAwIDAgMC0uNS0uNWgtMTJhLjUuNSAwIDAgMC0uNS41eiIvPgogICAgICAgIDxwYXRoIGQ9Ik02Ljg0NCA3SDVhLjUuNSAwIDAgMCAwIDFoMnYxSDVhLjUuNSAwIDAgMCAwIDFoMnYyLjVhLjUuNSAwIDEgMCAxIDBWMTBoMmEuNS41IDAgMSAwIDAtMUg4VjhoMmEuNS41IDAgMSAwIDAtMUg4LjE1MmwyLjQzLTIuODc3YS41LjUgMCAxIDAtLjc2NC0uNjQ2bC0yLjMyIDIuNzQ4LTIuMzItMi43NDhhLjUuNSAwIDEgMC0uNzY0LjY0Nkw2Ljg0NCA3eiIvPgogICAgPC9nPgo8L3N2Zz4K">
+              </td>
+              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);">顾客实付</td>
+              <td colspan="2" style="text-align: right;"><b style="color: rgb(90, 94, 102);padding-right: 12px;">¥{{moneyConverter(order.orderFee)}}</b></td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td style="text-align: left; font: 15px bolder; color: rgb(45, 47, 51);padding: 10px 0;">
+                商家预计收入
+                <el-tooltip class="item" effect="dark" placement="top-end">
+                  <div slot="content" class="shouru_div sr_tc_3168206771703696">
+                    <p>订单总额<span>¥{{moneyConverter(order.orderFee)}}</span></p>
+                    <p>配送费<span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span></p>
+                    <p v-if="order.deliveryDiscountsFlag == 1" >免配送费
+                      <span>¥-{{moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) }}</span>
+                    </p>
+                    <p>微信扣点<span>¥-{{moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee ))}}</span></p>
+                    <p>平台扣点<span>¥-{{moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee)))}}</span></p>
+                    <p style="border-bottom: none;">商家预计收入<span>¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</span></p> <i class="layui-edge"></i>
+                  </div>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </td>
+              <td colspan="2" style="text-align: right;">
+                <b style="color: rgb(250, 85, 85);padding-right: 12px;">¥{{toFixed2(moneyConverter( order.orderFee) - moneyConverter(order.deliveryFee + order.climbingFee + order.sortingFee) - moneyConverter(calcPoints((order.wxPoint / 1000), order.orderFee)) - moneyConverter(calcPoints((Number(order.commissionRate) / Number(1000)), order.orderFee - (order.deliveryFee + order.climbingFee + order.sortingFee))))}}</b>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td colspan="2" style="text-align: left;padding: 10px 0;">
+                <p>下单时间:{{order.createDateStr}}</p>
+                <p>订单号:{{order.orderCode}}</p>
+              </td>
+            </tr>
+            <tr class="tr-border" v-if="order.reason != null && order.reason.length > 0">
+              <td style="text-align:right;">
+                退款原因:
+              </td>
+              <td colspan="3" style="min-height: 60px; height: 60px;">
+                <span style="display: block; text-align: left;">
+                  {{ order.reason }}
+                </span>
+              </td>
+            </tr>
+            <tr class="tr-border">
+              <td></td>
+              <td colspan="2" style="text-align: right;padding: 10px 0;width: 100%;">
+                <el-button v-if="order.status == 10" @click="printOrder(order.orderId)">
+                  打印订单
+                </el-button>
+                <el-button  v-if="order.status == 10" @click="acceptOrder(order.orderId)">
+                  接单
+                </el-button>
+                <el-button style="margin-right: 20px;" @click="orderPayedInfo(order.orderId)">
+                  查询支付状态
+                </el-button>
+                <el-button v-if="order.status == 10" style="margin-right: 20px;" @click="refuseOrder(order.orderId)">
+                  拒绝
+                </el-button>
+                <el-button v-if="order.status != 50 && order.status > 0 && order.status != 0 && order.status != 10" style="margin-right: 20px;" @click="allRefund(order.orderId)">
+                  全部退单
+                </el-button>
+                <el-button v-if="order.status == 50" style="margin-right: 20px;" @click="completeOrder(order.orderId)">
+                  客户已取货
+                </el-button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+        <el-pagination
+          style="margin-top: 16px; text-align: right;"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </div>
+    <el-dialog title="全部退款" :visible.sync="dialogVisible" :before-close="closeDialog" width="500px">
+      <div style="line-height: 72px;">
+        <span>退款原因</span>
+        <el-input type="textarea" rows="3" placeholder="请输入退款原因" v-model="refundReason" style="margin-left: 15px;width: 350px;"></el-input>
+      </div>
+      <span slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="doRefund">保存</el-button>
+        <el-button @click="closeDialog">关闭</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="支付明细" :visible.sync="payedDialogVisible" :before-close="closePayedDialog" width="80%">
+      <div style="padding-bottom: 30px">
+        <div>
+            <div>
+                  <div>
+                      <div class="crumbs">
+                          <el-breadcrumb separator="/">
+                              <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>支付信息</el-breadcrumb-item>
+                          </el-breadcrumb>
+                      </div>
+                      <el-form ref="form" :model="payedInfo" label-width="120px">
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="通信标识：">
+                                  <span>{{payedInfo.return_code}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="业务结果： ">
+                                      <span>{{payedInfo.result_code}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="错误描述： ">
+                                      <span>{{payedInfo.err_code_des}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="交易状态：">
+                                      <span>{{payedInfo.trade_state}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="状态描述： ">
+                                      <span>{{payedInfo.trade_state_desc}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="付款银行：">
+                                          <span>{{payedInfo.bank_type}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                          <el-row>
+                              <el-col :span="8">
+                                  <el-form-item label="付款金额(分)： ">
+                                      <span>{{payedInfo.total_fee}}</span>
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="8">
+                                  <el-form-item label="交易时间：">
+                                      <span>{{payedInfo.time_end}}</span>
+                                  </el-form-item>
+                              </el-col>
+                          </el-row>
+                      </el-form>
+                  </div>
+            </div>
+        </div>
+        <el-button style="margin-top: 20px;" v-if="payedInfo.trade_state == 'REFUND' && refundFlg" type="primary" @click="orderRefundInfo(cOrderCode)">查询退款信息</el-button>
+        <div v-if="refundShow" style="margin-top:20px">
+            <div>
+                <div>
+                    <div class="crumbs">
+                        <el-breadcrumb separator="/">
+                            <el-breadcrumb-item style="font-size: 16px;"><i class="el-icon-lx-calendar"></i>退款信息</el-breadcrumb-item>
+                        </el-breadcrumb>
+                    </div>
+                    <el-form ref="form" :model="refundInfo" label-width="120px">
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="订单金额(分)：">
+                                  <span>{{refundInfo.total_fee}}</span>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="总退货额(分)： ">
+                                    <span>{{refundInfo.refund_fee}}</span>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                    <dptable :columns="columns3" :dataSource="refundList" :options="options3"/>
+                </div>
+            </div>
+        </div>
+      </div>
+    </el-dialog>
+	</div>
+</template>
+<script>
+import dptable from '@/components/common/Dptable.vue'
+export default {
+  components: {
+    dptable
+  },
+	data(){
+		return {
+      tabIndex: "all",
+      storeList: [],
+      url: '/thirdOrderManage/orderPage',
+      numUrl: '/thirdOrderManage/getReceivedAndRefundOrderNum',
+      detailUrl: '/thirdOrderManage/getOrderDetails',
+      refundUrl: '/thirdOrderManage/orderRefund',
+      acceptUrl: '/thirdOrderManage/acceptOrder',
+      printUrl: '/thirdOrderManage/printOrder',
+      refuseUrl: '/thirdOrderManage/refuseOrder',
+      completeUrl: '/thirdOrderManage/completeOrder',
+      storeUrl: '/thirdStoreManage/getStoreList',
+      payedInfoUrl: '/thirdOrderManage/getOrderPayedInfo',
+      refundInfoUrl: '/thirdOrderManage/getOrderRefundInfo',
+      storeId: '',
+      dateArray: [],
+      orderName: '',
+      orderTel: '',
+      dialogVisible: false,
+      receivedNum: 0,
+      refundNum: 0,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      tableData: [],
+      createDateS: null,
+      createDateE: null,
+      refundOrderId: null,
+      refundReason: null,
+      storeInfo: null,
+      payedDialogVisible: false,
+      payedInfo: {
+        return_code: '',
+        result_code: '',
+        err_code_des: '',
+        trade_state: '',
+        trade_state_desc: '',
+        bank_type: '',
+        total_fee: '',
+        time_end: ''
+      },
+      cOrderCode: '',
+      refundFlg: true,
+      refundShow: false,
+      refundInfo: {
+        total_fee: '',
+        refund_fee: ''
+      },
+      refundList: [],
+      columns3: [
+          {
+              prop: 'refund_fee', label: '申请退款金额(分)', width: 200
+          },
+          {
+              prop: 'refund_status', label: '退款状态', width: 200
+          },
+          {
+              prop: 'refund_channel', label: '退款渠道', width: 250
+          },
+          {
+              prop: 'refund_recv_accout', label: '退款入账账户', width: 250
+          },
+          {
+              prop: 'refund_success_time', label: '退款成功时间',
+          }
+      ],
+      options3: {
+          index: false, // 显示序号， 多选则 mutiSelect
+          initTable: false, // 是否一挂载就加载数据
+          border:true
+      },
+		};
+	},
+  created() {
+    this.storeInfo = JSON.parse(localStorage.getItem("storeInfo"));
+    const date = new Date();
+    this.createDateS = this.$moment(date).format("YYYY-MM-DD");
+    this.createDateE = this.$moment(date).format("YYYY-MM-DD");
+    this.getStoreList();
+    this.getDataList();
+  },
+	methods: {
+		closeDialog() {
+      this.dialogVisible = false
+      this.refundReason = null;
+    },
+    expand(index) {
+      let order = this.tableData[index]
+      if (!order.isExpand) {
+        if (!!order.detailList && order.detailList.length > 0) {
+          this.$set(order, 'buttonText', '收起')
+          this.$set(order, 'isExpand', true)
+        } else {
+          // 获取详情数据
+          const querystring = require('querystring');
+          this.$axios.post(this.detailUrl, querystring.stringify({orderId: order.orderId})).then(res => {
+            if (res.data.rtnBean.rtnCode == 0) {
+              this.$set(order, 'detailList', res.data.list);
+              this.$set(order, 'buttonText', '收起')
+              this.$set(order, 'isExpand', true)
+            }
+          }).catch((error) => {
+            console.log(error);
+          })
+        }
+      } else if (order.isExpand) {
+        this.$set(order, 'buttonText', '展开')
+        this.$set(order, 'isExpand', false)
+      }
+    },
+    allRefund(id) {
+      this.refundOrderId = id;
+      this.dialogVisible = true;
+    },
+    doRefund() {
+      const querystring = require("querystring");
+      this.$confirm('确认退单并退款给用户?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.refundUrl, querystring.stringify({
+          orderId: this.refundOrderId, reason: this.refundReason
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '退款成功!'
+          });
+          this.dialogVisible = false;
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    toFixed2(money) {
+			return Math.round(money * 100) / 100
+		},
+    getDataList() {
+      var dateS;
+      var dateE;
+      if (this.createDateS != "" && this.createDateS != null) {
+        dateS = this.$moment(this.createDateS).format("YYYY/MM/DD");
+      }
+      if (this.createDateE != "" && this.createDateE != null) {
+        dateE = this.$moment(this.createDateE).format("YYYY/MM/DD");
+      }
+      // 开始时间不能大于结束时间
+      if(dateS !='' && dateS != null && dateE != '' && dateE != null){
+        if(dateS > dateE){
+          this.$message.error("开始时间不能大于结束时间，请更换查询条件重新再试");
+          return;
+        }
+      }
+      const querystring = require("querystring");
+      let obj = {
+        storeId: this.storeInfo.storeId,
+        beginDate: dateS,
+        endDate: dateE,
+        orderName: this.orderName,
+        orderTel: this.orderTel,
+        pageSize: this.pageSize,
+        currentPage: this.currentPage
+      }
+      if (this.tabIndex != "all") {
+        obj.status = this.tabIndex
+      }
+      this.$axios.post(this.url, querystring.stringify(obj)).then(res => {
+        if (res.data.list.length == 0) {
+          this.$message("数据不存在，请更换查询条件重新再试");
+        }
+        this.tableData = res.data.list;
+        this.receivedNum = res.data.obj.receivedNum;
+        this.refundNum = res.data.obj.refundNum;
+        this.total = res.data.page.resultCount;
+        this.currentPage = res.data.page.currentPage;
+      }).catch(error => {
+      });
+    },
+    getStoreList() {
+      this.$axios.post(this.storeUrl, {}).then(res => {
+        this.storeList = res.data.list;
+      }).catch(error => {
+      });
+
+    },
+    typeFormatter(type) {
+      let str = (type == 1 || type == 2) ? '配送订单' : '自提订单'
+      return str;
+    },
+    statusFormatter(status) {
+      if (status == 0 || status == -1 || status == 5 || status == 10 || status == -10 || status == -30 || status == -40) {
+        return "未生效订单"
+      } else if (status == 20 || status == 30 || status == 40 || status == 50 || status == 60) {
+        return "已生效订单"
+      } else if (status == -20 || status == -50) {
+        return "退款订单"
+      }
+    },
+    deliveryTypeFormatter(type) {
+      if (type == 1) {
+        return '楼下自提'
+      } else if (type == 2) {
+        return '直达宿舍'
+      } else if (type == 3) {
+        return '自提外带'
+      } else if (type == 4) {
+        return '自提堂食'
+      }
+    },
+    dateChange() {
+      if (null != this.dateArray && this.dateArray.length > 0) {
+        this.createDateS = this.dateArray[0];
+        this.createDateE = this.dateArray[1];
+      } else {
+        this.createDateS = null;
+        this.createDateE = null;
+      }
+    },
+    printOrder(orderId) {
+      const querystring = require("querystring");
+      this.$axios.post(this.printUrl, querystring.stringify({
+        orderId: orderId
+      })).then(res => {
+        this.$message({
+          type: 'success',
+          message: '已成功发起打印!'
+        });
+        this.getDataList();
+      }).catch(error => {
+      });
+    },
+    acceptOrder(orderId) {
+      const querystring = require("querystring");
+      this.$axios.post(this.acceptUrl, querystring.stringify({
+        orderId: orderId
+      })).then(res => {
+        this.$message({
+          type: 'success',
+          message: '接单成功'
+        });
+        this.getDataList();
+      }).catch(error => {
+      })
+    },
+    refuseOrder(orderId) {
+      const querystring = require("querystring");
+      this.$confirm('确认拒绝接单并退款给用户?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.refuseUrl, querystring.stringify({
+          orderId: orderId
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '拒绝成功!'
+          });
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    completeOrder(orderId) {
+      const querystring = require("querystring");
+      this.$confirm('确认客户已取货?', '询问', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.post(this.completeUrl, querystring.stringify({
+          orderId: orderId
+        })).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          });
+          this.getDataList();
+        }).catch(error => {
+        });
+      });
+    },
+    handleSizeChange(size) { // 切换每页显示的数量
+			this.pageSize = size;
+			this.getDataList();
+		},
+		handleCurrentChange(current) { // 切换页码
+			this.currentPage = current;
+			this.getDataList();
+		},
+    calcPoints(rate, orderFee) {
+      return (Number(orderFee) * Number(rate));
+    },
+    orderPayedInfo(orderId) {
+      const querystring = require("querystring");
+      this.$axios.post(this.payedInfoUrl, querystring.stringify({
+        orderId: orderId
+      })).then(res => {
+        this.cOrderCode = orderId;
+        this.payedDialogVisible = true;
+        if (res.data.rtnBean.rtnCode == 0) {
+          this.payedInfo = res.data.obj
+        }
+      }).catch(error => {
+      });
+    },
+    closePayedDialog() {
+      this.payedDialogVisible = false;
+      this.refundFlg = true;
+      this.refundShow = false;
+    },
+    orderRefundInfo(orderCode) {
+      this.refundFlg = false;
+      this.refundShow = true;
+      const querystring = require("querystring");
+      this.$axios.post(this.refundInfoUrl, querystring.stringify({
+        orderCode: orderCode
+      })).then(res => {
+        if (res.data.rtnBean.rtnCode == 0) {
+          this.refundInfo = res.data.obj;
+          this.refundList = res.data.obj.refundList;
+        }
+      }).catch(error => {
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-wrap{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.crumbs{
+    color: #666;
+    flex-shrink: 0;
+}
+.background{
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 10px 10px;
+}
+.topbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    flex-shrink: 0;
+}
+.topbox-left{ flex-shrink: 0; }
+.page-title{
+    font-size: 14px;
+    color: #409EFF;
+    font-weight: 600;
+}
+.searchbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: #606266;
+}
+.searchbox-multi{
+    flex-wrap: wrap;
+    max-height: 160px;
+    overflow-y: auto;
+}
+.searchbox > span{ flex: 1; }
+.filter-group{
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+}
+.filter-group > span{
+    white-space: nowrap;
+    color: #606266;
+}
+.filter-full{
+    flex-basis: 100%;
+}
+.tablebox{
+    flex: 1;
+    min-height: 0;
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 16px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+.order-table {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    box-sizing: border-box;
+    font-size: 13px;
+}
+.order-info {
+    margin-top: 15px;
+}
+.trhead {
+    background: #f2f2f2;
+    width: 100%;
+    height: 36px;
+}
+.tr-border {
+    border-bottom: 1px solid #E6E6E6;
+}
+.first-td {
+    width: 50px;
+    padding: 10px 17px;
+}
+table {
+    font-size: 13px;
+}
+.high-light-number{
+    float: right;
+    margin-left: 5px;
+    background: #FF5722;
+    color: #fff;
+    padding: 1px 4px;
+    border-radius: 2px;
+    margin-top: -1px;
+}
+.time-separator{
+    margin: 0 2px;
+    color: #909399;
+}
+</style>

src/router/index.js

@@ -152,7 +152,7 @@ export default new Router({
                   path: "/order/orderManage",
                   component: resolve =>
                         require([
-                            "@/components/page/admin/order/OrderManage.vue"
+                            "@/components/page/admin/order/OrderManage1.vue"
                         ], resolve),
                     meta: { titile: "订单处理" }
                 },
@@ -571,7 +571,7 @@ export default new Router({
                 path: "/third/orderManage",
                 component: resolve =>
                       require([
-                          "@/components/page/third/order/OrderManage.vue"
+                          "@/components/page/third/order/OrderManage1.vue"
                       ], resolve),
                   meta: { titile: "订单处理" }
               },