ソースを参照

金牛:积分商城功能添加

dengweize 1 週間 前
コミット
fb0b3c436e
2 ファイル変更707 行追加292 行削除
  1. 16 0
      src/api/his/integralOrder.js
  2. 691 292
      src/views/components/his/integralOrderDetails.vue

+ 16 - 0
src/api/his/integralOrder.js

@@ -87,3 +87,19 @@ export function cancelOrder(orderCode) {
     data: {orderCode}
   })
 }
+//申请退款
+export function mandatoryRefunds(orderCode) {
+  return request({
+    url: '/his/integralOrder/mandatoryRefunds',
+    method: 'post',
+    data: {orderCode}
+  })
+}
+
+// 确认收货
+export function finishOrder(orderCode) {
+  return request({
+    url: '/his/integralOrder/finishOrder/' + orderCode,
+    method: 'get'
+  })
+}

+ 691 - 292
src/views/components/his/integralOrderDetails.vue

@@ -1,348 +1,747 @@
 <template>
-    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
-      <div style="padding: 20px; background-color: #fff;">
-         积分订单详情
+  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; ">
+    <div style="padding: 20px; background-color: #fff;">
+      积分订单详情
+    </div>
+    <div class="contentx" v-if="item != null">
+      <div class="desct"> 积分订单信息</div>
+      <div class="order-status" v-if="item != null && item.status != 5">
+        <el-steps :active="getStepActive(item.status)" align-center finish-status="success">
+          <el-step title="待支付"></el-step>
+          <el-step title="待发货"></el-step>
+          <el-step title="待收货"></el-step>
+          <el-step title="已完成"></el-step>
+        </el-steps>
       </div>
-<div class="contentx" v-if="item!=null">
-        <div class="desct"> 积分订单信息</div>
-        <div class="order-status" v-if="item!=null && item.status != 5" >
-                  <el-steps  :active="item.status==4?0:item.status" align-center finish-status="success">
-                    <el-step title="待支付"></el-step>
-                    <el-step title="待发货"></el-step>
-                    <el-step title="待收货"></el-step>
-                    <el-step title="已完成"></el-step>
-                  </el-steps>
+      <el-card shadow="never" style="margin-top: 15px">
+        <div class="operate-container" v-if="item != null">
+          <span style="margin-left: 20px" class="color-danger">订单状态:
+            <el-tag prop="status" v-for="(ite, index) in statusOptions" v-if="item.status == ite.dictValue">{{
+              ite.dictLabel }}</el-tag>
+          </span>
+          <div class="operate-button-container" v-if="item.status == 1" v-hasPermi="['his:integralOrder:sendGoods']">
+            <!-- <el-button size="mini" @click="sendVisible=true" >发货</el-button> -->
+            <el-button size="mini" @click="showSend()">发货</el-button>
+          </div>
+          <div class="operate-button-container" v-if="item.deliverySn != null"
+            v-hasPermi="['his:integralOrder:express']">
+            <el-button size="mini" @click="showExpress()">查看物流</el-button>
+          </div>
+
+          <div class="operate-button-container" v-if="item.status!=-1" v-hasPermi="['his:integralOrder:edit']">
+            <el-button size="mini" @click="updateOrder()">修改订单</el-button>
+          </div>
+
+          <div class="operate-button-container" v-if="item.status==2">
+            <el-button size="mini" @click="handleFinishOrder">确认收货</el-button>
+          </div>
+          <div class="operate-button-container" v-if="item.status>1" v-hasPermi="['his:integralOrder:cancel']">
+            <el-button size="mini" @click="applyRefund">申请退款</el-button>
+          </div>
         </div>
-         <el-card shadow="never" style="margin-top: 15px">
-           <div class="operate-container"  v-if="item!=null">
-             <span style="margin-left: 20px" class="color-danger">订单状态:
-                <el-tag prop="status" v-for="(ite, index) in statusOptions"    v-if="item.status==ite.dictValue">{{ite.dictLabel}}</el-tag>
-             </span>
-             <div class="operate-button-container"  v-if="item.status==1" v-hasPermi="['his:integralOrder:sendGoods']">
-                <!-- <el-button size="mini" @click="sendVisible=true" >发货</el-button> -->
-                <el-button size="mini" @click="showSend()" >发货</el-button>
-             </div>
-            <div class="operate-button-container"   v-if="item.deliverySn!=null" v-hasPermi="['his:integralOrder:express']">
-              <el-button size="mini" @click="showExpress()" >查看物流</el-button>
-            </div>
+        <div class="desct">
+          基本信息
+        </div>
+        <el-descriptions title="" :column="3" border>
+          <el-descriptions-item label="订单编号"><span v-if="item != null">{{ item.orderCode
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="会员ID"><span v-if="item != null">{{ item.userId }}</span></el-descriptions-item>
+          <el-descriptions-item label="会员"><span v-if="item.nickName != null">{{ item.nickName }}({{ item.phone
+              }})</span></el-descriptions-item>
+          <el-descriptions-item label="用户名称"><span v-if="item != null">{{ item.userName }}</span></el-descriptions-item>
+          <el-descriptions-item label="用户电话"><span v-if="item != null">{{ item.userPhone }}</span>
+            <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle
+              v-hasPermi="['his:integralOrder:queryPhone']"></el-button>
+          </el-descriptions-item>
+          <el-descriptions-item label="用户地址"><span v-if="item != null">{{ item.userAddress
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="支付积分"><span v-if="item != null">{{ item.integral }}</span></el-descriptions-item>
+          <el-descriptions-item label="状态"><span v-if="item != null"> <dict-tag :options="statusOptions"
+                :value="item.status" /></span></el-descriptions-item>
+          <el-descriptions-item label="快递公司编号"><span v-if="item != null">{{ item.deliveryCode
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="快递名称"><span v-if="item != null">{{ item.deliveryName
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="快递单号"><span v-if="item != null">{{ item.deliverySn
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="发货时间"><span v-if="item != null">{{ item.deliveryTime
+              }}</span></el-descriptions-item>
+          <el-descriptions-item label="提交时间"><span v-if="item != null">{{ item.createTime
+              }}</span></el-descriptions-item>
+        </el-descriptions>
+      </el-card>
 
-            <div class="operate-button-container"  v-hasPermi="['his:integralOrder:edit']">
-              <el-button size="mini" @click="updateOrder()" >修改订单</el-button>
-            </div>
-           </div>
-           <div class="desct">
-            基本信息
-           </div>
-           <el-descriptions title="" :column="3" border>
-             <el-descriptions-item label="订单编号"><span v-if="item!=null">{{item.orderCode}}</span></el-descriptions-item>
-              <el-descriptions-item label="会员ID"><span v-if="item!=null">{{item.userId}}</span></el-descriptions-item>
-             <el-descriptions-item label="会员"><span v-if="item.nickName!=null">{{item.nickName}}({{item.phone}})</span></el-descriptions-item>
-             <el-descriptions-item label="用户名称"><span v-if="item!=null">{{item.userName}}</span></el-descriptions-item>
-             <el-descriptions-item label="用户电话"><span v-if="item!=null">{{item.userPhone}}</span>
-              <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['his:integralOrder:queryPhone']"></el-button>
-            </el-descriptions-item>
-              <el-descriptions-item label="用户地址"><span v-if="item!=null">{{item.userAddress}}</span></el-descriptions-item>
-             <el-descriptions-item label="支付积分"><span v-if="item!=null">{{item.integral}}</span></el-descriptions-item>
-             <el-descriptions-item label="状态"><span v-if="item!=null"> <dict-tag :options="statusOptions" :value="item.status"/></span></el-descriptions-item>
-             <el-descriptions-item label="快递公司编号"><span v-if="item!=null">{{item.deliveryCode}}</span></el-descriptions-item>
-             <el-descriptions-item label="快递名称"><span v-if="item!=null">{{item.deliveryName}}</span></el-descriptions-item>
-             <el-descriptions-item label="快递单号"><span v-if="item!=null">{{item.deliverySn}}</span></el-descriptions-item>
-             <el-descriptions-item label="发货时间"><span v-if="item!=null">{{item.deliveryTime}}</span></el-descriptions-item>
-             <el-descriptions-item label="提交时间"><span v-if="item!=null">{{item.createTime}}</span></el-descriptions-item>
-           </el-descriptions>
-         </el-card>
+    </div>
+    <div class="contentx" v-if="item != null" style="padding-bottom: 70px;">
+      <div class="desct">
+        商品信息
+      </div>
+      <el-table border v-if="prod != null" :data="prod" size="small" style="margin-top: 20px">
+        <el-table-column label="商品图片" align="center">
+          <template slot-scope="scope">
+            <img :src="scope.row.imgUrl" style="height: 80px">
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" align="center">
+          <template slot-scope="scope">
+            <p>{{ scope.row.goodsName }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="积分" align="center">
+          <template slot-scope="scope">
+            <p>¥{{ scope.row.integral }}</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="金额" align="center">
+          <template slot-scope="scope">
+            <p>¥{{ scope.row.cash || 0 }}</p>
+          </template>
+        </el-table-column>
 
+      </el-table>
     </div>
-      <div class="contentx" v-if="item!=null" style="padding-bottom: 70px;">
-       <div class="desct">
-           商品信息
-          </div>
-       <el-table
-              border
-              v-if="prod!=null"
-              :data="prod"
-              size="small"
-              style="margin-top: 20px" >
-              <el-table-column label="商品图片"  align="center">
-                <template slot-scope="scope">
-                  <img :src="scope.row.imgUrl" style="height: 80px">
-                </template>
-              </el-table-column>
-              <el-table-column label="商品名称"  align="center">
-                <template slot-scope="scope">
-                  <p>{{scope.row.goodsName}}</p>
-                </template>
-              </el-table-column>
-              <el-table-column label="积分" align="center">
+    <el-dialog width="50%" title="发货" :visible.sync="sendVisible" append-to-body @close="sendCancel">
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item label="快递名称" prop="deliveryName">
+          <el-select v-model="selectedExpress" placeholder="请选择快递名称" value-key="name">
+            <el-option v-for="item in expressOption" :key="item.name" :label="item.name" :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="快递公司编号" prop="deliveryCode">
+          <el-input v-model="form.deliveryCode" placeholder="请输入快递公司编号" disabled />
+
+        </el-form-item>
+
+        <el-form-item label="快递单号" prop="deliverySn">
+          <el-input v-model="form.deliverySn" placeholder="请输入快递单号" />
+        </el-form-item>
+
+        <!-- 代服账号选择表格 -->
+        <el-form-item label="代服账号选择" prop="selectedAccount" required>
+          <div style="border: 1px solid #e6ebf5; border-radius: 4px; padding: 10px;">
+            <el-table ref="accountTable" :data="tableData" highlight-current-row
+              @current-change="handleAccountSelectionChange" style="width: 100%" size="small" max-height="400">
+              <!-- 固定高度,超出滚动 -->
+
+              <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+              <el-table-column prop="loginAccount" label="登录账号" align="center" width="120"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="monthlyCard" label="月结账号" align="center" width="120"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="expressProductCode" label="物流产品" align="center" width="120" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <p>¥{{scope.row.integral}}</p>
+                  <dict-tag :options="expressOptions" :value="scope.row.expressProductCode" />
                 </template>
               </el-table-column>
-              <el-table-column label="金额" align="center">
-               <template slot-scope="scope">
-                 <p>¥{{scope.row.cash || 0}}</p>
-               </template>
-              </el-table-column>
+              <el-table-column prop="senderName" label="寄件人姓名" align="center" width="100"></el-table-column>
+              <el-table-column prop="senderPhone" label="寄件人手机" align="center" width="120"></el-table-column>
+              <el-table-column prop="senderProvince" label="寄件人省" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderCity" label="寄件人市" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderDistrict" label="寄件人区" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderAddress" label="寄件人地址" align="center" min-width="150"
+                show-overflow-tooltip></el-table-column>
 
             </el-table>
-       </div>
-      <el-dialog
-           width="50%"
-           title="发货"
-           :visible.sync="sendVisible"
-           append-to-body @close="sendCancel">
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-          <el-form-item label="快递名称" prop="deliveryName">
-            <el-select v-model="selectedExpress" placeholder="请选择快递名称" value-key="name">
-              <el-option
-                v-for="item in expressOption"
-                :key="item.name"
-                :label="item.name"
-                :value="item">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="快递公司编号" prop="deliveryCode">
-            <el-input v-model="form.deliveryCode" placeholder="请输入快递公司编号" disabled />
-            
-          </el-form-item>
-          
-          <el-form-item label="快递单号" prop="deliverySn">
-            <el-input v-model="form.deliverySn" placeholder="请输入快递单号" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-                          <el-button type="primary" @click="sendGoods">确 定</el-button>
-                          <el-button @click="sendCancel">取 消</el-button>
-        </div>
 
-          </el-dialog>
+            <!-- 分页 -->
+            <el-pagination small layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize"
+              :current-page="queryParams.pageNum" @current-change="handlePageChange"
+              style="margin-top: 10px; text-align: center;">
+            </el-pagination>
 
-          <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
-            <el-table style="margin-top: 20px;width: 100%"
-                      ref="orderHistoryTable"
-                      :data="traces" border>
-              <el-table-column label="操作时间"  width="160" align="center">
-                <template slot-scope="scope">
-                  {{scope.row.AcceptTime}}
-                </template>
-              </el-table-column>
-               <el-table-column label="位置" align="center">
-                <template slot-scope="scope">
-                  {{scope.row.Location}}
-                </template>
-              </el-table-column>
-              <el-table-column label="描述" align="center">
+            <div style="margin-top: 10px; color: #909399; font-size: 12px; text-align: center;">
+              提示:点击表格行选择代服账号
+            </div>
+
+            <!-- 显示选中信息 -->
+            <div v-if="selectedRow" style="margin-top: 10px; padding: 8px; background: #f5f7fa; border-radius: 4px;">
+              <span style="color: #67C23A;">已选择:</span>
+              <span>{{ selectedRow.loginAccount }} ({{ selectedRow.senderName }})</span>
+            </div>
+          </div>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="sendGoods">确 定</el-button>
+        <el-button @click="sendCancel">取 消</el-button>
+      </div>
+
+    </el-dialog>
+
+    <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
+      <el-table style="margin-top: 20px;width: 100%" ref="orderHistoryTable" :data="traces" border>
+        <el-table-column label="操作时间" width="160" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.AcceptTime }}
+          </template>
+        </el-table-column>
+        <el-table-column label="位置" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.Location }}
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.AcceptStation }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog :title="editOrder.title" :visible.sync="editOrder.open" width="600px" append-to-body>
+      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
+        <el-form-item label="订单状态" prop="status">
+          <el-select v-model="editForm.status" placeholder="请选择状态" clearable size="small" filterable>
+            <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
+              :value="dict.dictValue" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="详情地址" prop="userAddress">
+          <el-input v-model="editForm.userAddress" placeholder="请输入" />
+        </el-form-item>
+
+        <!-- 修改:快递信息改为下拉选择 -->
+        <el-form-item label="快递名称" prop="deliveryName">
+          <el-select v-model="editSelectedExpress" placeholder="请选择快递名称" value-key="name" clearable>
+            <el-option v-for="item in expressOption" :key="item.name" :label="item.name" :value="item">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="快递公司编号" prop="deliveryCode">
+          <el-input v-model="editForm.deliveryCode" placeholder="快递公司编号" disabled />
+        </el-form-item>
+        <el-form-item label="快递单号" prop="deliverySn">
+          <el-input v-model="editForm.deliverySn" placeholder="请输入快递单号" />
+        </el-form-item>
+
+        <!-- 代服账号选择表格 - 使用同一个数据源 -->
+        <el-form-item label="代服账号" prop="loginAccount">
+          <div style="border: 1px solid #e6ebf5; border-radius: 4px; padding: 10px;">
+            <el-table ref="editAccountTable" :data="tableData" highlight-current-row
+              @current-change="handleEditAccountSelectionChange" style="width: 100%" size="small" max-height="300">
+
+              <!-- 列定义与发货弹窗相同 -->
+              <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+              <el-table-column prop="loginAccount" label="登录账号" align="center" width="120"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="monthlyCard" label="月结账号" align="center" width="120"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="expressProductCode" label="物流产品" align="center" width="120" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  {{scope.row.AcceptStation}}
+                  <dict-tag :options="expressOptions" :value="scope.row.expressProductCode" />
                 </template>
               </el-table-column>
+              <el-table-column prop="senderName" label="寄件人姓名" align="center" width="100"></el-table-column>
+              <el-table-column prop="senderPhone" label="寄件人手机" align="center" width="120"></el-table-column>
+              <el-table-column prop="senderProvince" label="寄件人省" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderCity" label="寄件人市" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderDistrict" label="寄件人区" align="center" width="100"
+                show-overflow-tooltip></el-table-column>
+              <el-table-column prop="senderAddress" label="寄件人地址" align="center" min-width="150"
+                show-overflow-tooltip></el-table-column>
+
             </el-table>
-          </el-dialog>
-
-          <el-dialog :title="editOrder.title" :visible.sync="editOrder.open" width="600px" append-to-body>
-            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
-              <el-form-item label="订单状态" prop="status" >
-                <el-select v-model="editForm.status" placeholder="请选择状态" clearable size="small" filterable>
-                    <el-option
-                      v-for="dict in statusOptions "
-                      :key="dict.dictValue"
-                      :label="dict.dictLabel"
-                      :value="dict.dictValue"
-                    />
-                  </el-select>
-                </el-form-item>
-              <el-form-item label="详情地址" prop="userAddress"  >
-                <el-input v-model="editForm.userAddress" placeholder="请输入" />
-              </el-form-item>
-              <el-form-item label="备注" prop="remark"  >
-                <el-input v-model="editForm.remark" placeholder="请输入备注" />
-              </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-              <el-button type="primary" @click="submitEditForm">确 定</el-button>
+
+            <!-- 分页 - 使用同一个分页数据 -->
+            <el-pagination small layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize"
+              :current-page="queryParams.pageNum" @current-change="handlePageChange"
+              style="margin-top: 10px; text-align: center;">
+            </el-pagination>
+
+            <div style="margin-top: 10px; color: #909399; font-size: 12px; text-align: center;">
+              提示:点击表格行选择代服账号
             </div>
-          </el-dialog>
-    </div>
+
+            <!-- 显示选中信息 -->
+            <div v-if="editSelectedRow"
+              style="margin-top: 10px; padding: 8px; background: #f5f7fa; border-radius: 4px;">
+              <span style="color: #67C23A;">已选择:</span>
+              <span>{{ editSelectedRow.loginAccount }} ({{ editSelectedRow.senderName }})</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="editForm.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitEditForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import {getExpress, listIntegralOrder, sendgoods,getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder, exportIntegralOrder,getOrderUserPhone } from "@/api/his/integralOrder";
-import {getExpressList } from "@/api/his/express";
-  export default {
-    name: "integralOrder",
-    data() {
-      return {
-        selectedExpress:null,
-        expressOption:[],
-        expressDialog:{
-          title:"物流信息",
-          open:false,
-        },
-        editOrder:{
-          title:"修改订单",
-          open:false,
-        },
-        editForm:{
-          orderId:null,
-          status:null,
-          userAddress:null,
-          remark:"",
-        },
-        editRules:{},
-        item:null,
-        express:null,
-        traces:[],
-        rules:{
-      deliveryCode: [
-        { required: true, message: '请输入快递公司编号', trigger: 'blur' }
-      ],
-      deliveryName: [
-        { required: true, message: '请输入快递名称', trigger: 'blur' }
-      ],
-      deliverySn: [
-        { required: true, message: '请输入快递单号', trigger: 'blur' }
-      ]
+import { getExpress,mandatoryRefunds,finishOrder, listIntegralOrder, sendgoods, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder, exportIntegralOrder, getOrderUserPhone } from "@/api/his/integralOrder";
+import { getExpressList } from "@/api/his/express";
+import { listAccount } from "@/api/his/dfAccount";
+export default {
+  name: "integralOrder",
+  data() {
+    return {
+      selectedExpress: null,
+      expressOption: [],
+      expressDialog: {
+        title: "物流信息",
+        open: false,
+      },
+      editOrder: {
+        title: "修改订单",
+        open: false,
+      },
+      editForm: {
+        orderId: null,
+        status: null,
+        userAddress: null,
+        remark: "",
+        loginAccount: null,
+        // 新增快递相关字段
+        deliveryName: null,
+        deliveryCode: null,
+        deliverySn: null
+      },
+      editRules: {
+        deliveryName: [
+          { required: false, message: '请输入快递名称', trigger: 'blur' }
+        ],
+        deliveryCode: [
+          { required: false, message: '请输入快递公司编号', trigger: 'blur' }
+        ],
+        deliverySn: [
+          { required: false, message: '请输入快递单号', trigger: 'blur' }
+        ]
+      },
+      item: null,
+      express: null,
+      traces: [],
+      rules: {
+        deliveryCode: [
+          { required: true, message: '请输入快递公司编号', trigger: 'blur' }
+        ],
+        deliveryName: [
+          { required: true, message: '请输入快递名称', trigger: 'blur' }
+        ],
+        deliverySn: [
+          { required: true, message: '请输入快递单号', trigger: 'blur' }
+        ],
+        selectedAccount: [  // 添加这一项
+          { required: true, message: '请选择代服账号', trigger: 'change' }
+        ]
+      },
+      sendVisible: false,
+      form: {
+        deliveryCode: null,
+        deliveryName: null,
+        deliverySn: null,
+        orderId: null,
+        loginAccount: null  // 在 form 中也添加这个字段
+      },
+      tableData: [], // 清空模拟数据,改为空数组
+      selectedRow: null,
+      editSelectedRow: null, // 修改订单弹窗选中的行
+      queryParams: { // 查询参数
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0, // 总条数,
+      expressOptions: [], // 物流产品字典
+      editSelectedExpress: null,
+    }
+  },
+  created() {
+    this.getDicts("sys_integral_order_status").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("df_account_express").then(response => {
+      this.expressOptions = response.data;
+    });
+  },
+  watch: {
+    selectedExpress(newVal) {
+      console.log('选中的快递:', newVal); // 调试用
+      if (newVal && newVal.name && newVal.code) {
+        this.form.deliveryName = newVal.name;
+        this.form.deliveryCode = newVal.code;
+      } else {
+        this.form.deliveryName = '';
+        this.form.deliveryCode = '';
+      }
     },
-        sendVisible:false,
-        form: {
-          deliveryCode: null,
-          deliveryName:null,
-          deliverySn:null,
-          orderId:null,
+    // 新增:修改订单弹窗的快递选择监听
+    editSelectedExpress(newVal) {
+      console.log('修改订单弹窗选中的快递:', newVal);
+      if (newVal && newVal.name && newVal.code) {
+        this.editForm.deliveryName = newVal.name;
+        this.editForm.deliveryCode = newVal.code;
+      } else {
+        this.editForm.deliveryName = '';
+        this.editForm.deliveryCode = '';
+      }
+    },
+    'editOrder.open': function (newVal) {
+      if (!newVal) {
+        // 修改订单弹窗关闭时清理选择状态
+        this.editSelectedRow = null;
+        if (this.$refs.editAccountTable) {
+          this.$refs.editAccountTable.setCurrentRow();
         }
       }
     },
-    created() {
-      this.getDicts("sys_integral_order_status").then(response => {
-        this.statusOptions = response.data;
-      });
+    'expressDialog.open': function (newVal) {
+      if (!newVal) {
+        // 查看物流弹窗关闭时清理数据
+        this.express = null;
+        this.traces = [];
+      }
     },
-    watch: {
-      selectedExpress(newVal) {
-        if (newVal) {
-          this.form.deliveryName = newVal.name;
-          this.form.deliveryCode = newVal.code;
-        } else {
-          this.form.deliveryName = '';
-          this.form.deliveryCode = '';
+  },
+  methods: {
+    getStepActive(status) {
+      const statusMap = {
+        4: 1, // 待支付 -> 激活第1步(显示到待支付)
+        1: 2, // 待发货 -> 激活第2步(显示到待发货)
+        2: 3, // 待收货 -> 激活第3步(显示到待收货)
+        3: 4  // 已完成 -> 激活第4步(全部完成)
+      };
+      return statusMap[status] || 0;
+    },
+    handlePhone() {
+      const orderId = this.item.orderId;
+      getOrderUserPhone(orderId).then(response => {
+        this.item.userPhone = response.userPhone;
+      })
+    },
+    async updateOrder() {
+      this.editOrder.open = true;
+      this.editForm.orderId = this.item.orderId;
+      this.editForm.remark = this.item.remark;
+      this.editForm.status = this.item.status.toString();
+      this.editForm.userAddress = this.item.userAddress.toString();
+      this.editForm.loginAccount = this.item.loginAccount;
+
+      // 设置快递字段的初始值
+      this.editForm.deliveryName = this.item.deliveryName;
+      this.editForm.deliveryCode = this.item.deliveryCode;
+      this.editForm.deliverySn = this.item.deliverySn;
+
+      // 重置选择状态
+      this.editSelectedRow = null;
+      this.editSelectedExpress = null;
+
+      try {
+        // 1. 先确保快递选项数据已加载
+        if (this.expressOption.length === 0) {
+          await getExpressList().then(response => {
+            this.expressOption = response.data;
+          });
+        }
+
+        // 2. 设置选中的快递(在快递数据加载完成后)
+        if (this.item.deliveryName && this.expressOption.length > 0) {
+          const currentExpress = this.expressOption.find(item =>
+            item.name === this.item.deliveryName
+          );
+          if (currentExpress) {
+            this.editSelectedExpress = currentExpress;
+          }
         }
+
+        // 3. 等待代服账号数据加载完成
+        await this.getAccountList();
+
+        // 4. 在数据都加载完成后尝试选中对应的行
+        if (this.item.loginAccount) {
+          this.$nextTick(() => {
+            this.selectCurrentAccount();
+          });
+        }
+      } catch (error) {
+        console.error('加载数据失败:', error);
       }
     },
-    methods: {
-      handlePhone(){
-        const orderId = this.item.orderId;
-        getOrderUserPhone(orderId).then(response =>{
-            this.item.userPhone = response.userPhone;
-        })
-      },
-      updateOrder(){
-        this.editOrder.open=true;
-        this.editForm.orderId=this.item.orderId;
-        this.editForm.remark=this.item.remark;
-        this.editForm.status = this.item.status.toString();
-        this.editForm.userAddress = this.item.userAddress.toString();
-      },
-     //修改订单状态
-     submitEditForm(){
-        this.$refs["editForm"].validate(valid => {
+    // 选中当前账号(修改订单弹窗使用)
+    selectCurrentAccount() {
+      if (!this.item.loginAccount || !this.tableData || this.tableData.length === 0) {
+        console.log('无法选中账号:数据未就绪');
+        return;
+      }
+
+      const currentAccount = this.tableData.find(item =>
+        item.loginAccount === this.item.loginAccount
+      );
+
+      if (currentAccount) {
+        this.editSelectedRow = currentAccount;
+        this.$nextTick(() => {
+          if (this.$refs.editAccountTable) {
+            this.$refs.editAccountTable.setCurrentRow(currentAccount);
+            console.log('成功选中代服账号:', currentAccount.loginAccount);
+          }
+        });
+      } else {
+        console.log('未找到对应的代服账号:', this.item.loginAccount);
+      }
+    },
+    //修改订单状态
+    submitEditForm() {
+      this.$refs["editForm"].validate(valid => {
         if (valid) {
           updateIntegralOrder(this.editForm).then(response => {
             if (response.code === 200) {
               this.msgSuccess("操作成功");
               this.editOrder.open = false;
               this.getDetails(this.item.orderId);
-              }
-            });
-          }
-        });
-      },
-      sendCancel(){
-           this.sendVisible = false;
-           this.form={
-             deliveryCode: null,
-             deliveryName:null,
-             deliverySn:null,
-             orderId:null,
-           }
-      },
-      showSend(){
-        //获取快递公司信息
-        getExpressList().then(response=>{
-          this.expressOption = response.data;
-        })
-        console.log(this.expressOption)
-        this.sendVisible = true
-      },
-      showExpress(){
-        this.expressDialog.open=true;
-        getExpress(this.item.orderId).then(response => {
-            this.express = response.data;
-            if(this.express!=null&&this.express.Traces!=null){
-                this.traces=this.express.Traces
             }
+          });
+        }
+      });
+    },
+    sendCancel() {
+      this.sendVisible = false;
+      this.form = {
+        deliveryCode: null,
+        deliveryName: null,
+        deliverySn: null,
+        orderId: null,
+        loginAccount: null
+      };
+      this.selectedExpress = null;
+      this.selectedRow = null;
+      if (this.$refs.accountTable) {
+        this.$refs.accountTable.setCurrentRow();
+      }
+    },
+    showSend() {
+      // 重置表单和选择状态
+      this.form = {
+        deliveryCode: null,
+        deliveryName: null,
+        deliverySn: null,
+        orderId: null,
+        loginAccount: null
+      };
+      this.selectedExpress = null;
+      this.selectedRow = null;
+
+      // 获取快递公司信息
+      getExpressList().then(response => {
+        this.expressOption = response.data;
+      });
+
+      // 获取代服账号列表
+      this.getAccountList();
+
+      this.sendVisible = true;
+    },
+    showExpress() {
+      this.expressDialog.open = true;
+      getExpress(this.item.orderId).then(response => {
+        this.express = response.data;
+        if (this.express != null && this.express.Traces != null) {
+          this.traces = this.express.Traces
+        }
+      });
+    },
+    sendGoods() {
+      // 手动验证所有必填字段
+      if (!this.selectedRow) {
+        this.msgError('请选择代服账号');
+        return;
+      }
+
+      if (!this.form.deliveryName || !this.form.deliveryCode) {
+        this.msgError('请选择快递公司');
+        return;
+      }
+
+      if (!this.form.deliverySn) {
+        this.msgError('请输入快递单号');
+        return;
+      }
+
+      // 所有验证通过,直接发送
+      this.form.orderId = this.item.orderId;
+      sendgoods(this.form).then(response => {
+        this.msgSuccess("发货成功");
+        this.sendVisible = false;
+        getIntegralOrder(this.item.orderId).then(response => {
+          this.item = response.data;
+          this.$parent.$parent.getList();
         });
-      },
-    sendGoods(){
-        this.form.orderId=this.item.orderId;
-        sendgoods(this.form).then(response => {
-              this.msgSuccess("修改成功");
-              this.sendVisible = false;
-              getIntegralOrder(this.item.orderId).then(response => {
-                  this.item = response.data;
-                  this.$parent.$parent.getList();
-              });
-
-              this.form={
-              deliveryCode: null,
-              deliveryName:null,
-              deliverySn:null,
-              orderId:null,
-            }
+
+        this.form = {
+          deliveryCode: null,
+          deliveryName: null,
+          deliverySn: null,
+          orderId: null,
+          loginAccount: null
+        };
+        this.selectedRow = null;
+      });
+    },
+    getDetails(orderId) {
+      this.item = null;
+      getIntegralOrder(orderId).then(response => {
+        this.item = response.data;
+        this.prod = [JSON.parse(this.item.itemJson)][0];
+      });
+    },
+    // 代服账号选择变化
+    handleAccountSelectionChange(currentRow, oldRow) {
+      this.selectedRow = currentRow;
+      if (currentRow) {
+        this.form.loginAccount = currentRow.loginAccount;
+      }
+    },
+    // 修改订单弹窗的代服账号选择
+    handleEditAccountSelectionChange(currentRow, oldRow) {
+      this.editSelectedRow = currentRow;
+      if (currentRow) {
+        this.editForm.loginAccount = currentRow.loginAccount;
+      }
+    },
+    // 获取代服账号列表
+    getAccountList() {
+      return new Promise((resolve, reject) => {
+        listAccount(this.queryParams).then(response => {
+          this.tableData = response.rows || response.data || [];
+          this.total = response.total || 0;
+          resolve(this.tableData); // 数据加载完成
+        }).catch(error => {
+          this.tableData = [];
+          reject(error);
         });
-      },
-      getDetails(orderId) {
-        this.item=null;
-        getIntegralOrder(orderId).then(response => {
-            this.item = response.data;
-            this.prod=[JSON.parse(this.item.itemJson)][0];
+      });
+    },
+    handlePageChange(page) {
+      this.queryParams.pageNum = page;
+      this.getAccountList();
+    },
+    // 取消订单
+    applyRefund() {
+      this.$confirm('确定要取消该订单吗?取消后订单将无法恢复。', '取消订单确认', {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '再想想',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }).then(() => {
+        this.cancelOrder();
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消操作'
         });
-      },
-    }
+      });
+    },
+
+    // 执行取消订单请求
+    cancelOrder() {
+      const orderCode = this.item.orderCode;
+      mandatoryRefunds(orderCode).then(response => {
+        if (response.code === 200) {
+          this.msgSuccess("取消订单成功");
+          // 刷新订单详情
+          this.getDetails(this.item.orderId);
+          // 刷新父组件列表(如果有)
+          if (this.$parent && this.$parent.$parent && this.$parent.$parent.getList) {
+            this.$parent.$parent.getList();
+          }
+        } else {
+          this.msgError(response.msg || "取消订单失败");
+        }
+      }).catch(error => {
+        this.msgError("取消订单失败");
+        console.error('取消订单失败:', error);
+      });
+    },
+    // 完成订单
+    handleFinishOrder() {
+      this.$confirm('确定要完成该订单吗?完成后订单状态将变为已完成。', '完成订单确认', {
+        confirmButtonText: '确定完成',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 用户点击确定
+        this.executeFinishOrder();
+      }).catch(() => {
+        // 用户点击取消
+        this.$message({
+          type: 'info',
+          message: '已取消操作'
+        });
+      });
+    },
+    
+    // 执行完成订单请求
+    executeFinishOrder() {
+      const orderCode = this.item.orderCode;
+      console.log("请问请问",orderCode)
+      finishOrder(orderCode).then(response => {
+        if (response.code === 200) {
+          this.msgSuccess("订单完成成功");
+          // 刷新订单详情
+          this.getDetails(this.item.orderId);
+          // 刷新父组件列表(如果有)
+          if (this.$parent && this.$parent.$parent && this.$parent.$parent.getList) {
+            this.$parent.$parent.getList();
+          }
+        } else {
+          this.msgError(response.msg || "订单完成失败");
+        }
+      }).catch(error => {
+        this.msgError("订单完成失败");
+        console.error('完成订单失败:', error);
+      });
+    },
   }
+}
 </script>
 <style>
-  .contentx{
-      height: 100%;
-      background-color: #fff;
-      padding: 0px 20px 20px;
+.contentx {
+  height: 100%;
+  background-color: #fff;
+  padding: 0px 20px 20px;
 
 
-      margin: 20px;
-  }
-  .el-descriptions-item__label.is-bordered-label{
-    font-weight: normal;
-  }
-  .el-descriptions-item__content {
-    max-width: 150px;
-    min-width: 100px;
-  }
-  .desct{
-      padding-top: 20px;
-      padding-bottom: 20px;
-      color: #524b4a;
-      font-weight: bold;
-    }
+  margin: 20px;
+}
+
+.el-descriptions-item__label.is-bordered-label {
+  font-weight: normal;
+}
+
+.el-descriptions-item__content {
+  max-width: 150px;
+  min-width: 100px;
+}
+
+.desct {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #524b4a;
+  font-weight: bold;
+}
+
 .operate-container {
   background: #F2F6FC;
   height: 60px;
   margin: -20px -20px 0;
   line-height: 60px;
 }
-.order-content{
+
+.order-content {
   margin: 10px;
 
 }
+
 .operate-button-container {
   float: right;
   margin-right: 20px