优化手写信息查看订单效果

src/api/member/handwriteCollection/handwriteCollection.js

@@ -50,3 +50,11 @@ export function checkOrderCode(orderCode) {
     method: 'get'
   })
 }
+
+// 根据订单号获取订单主键id
+export function getOrderCodeInfo(orderCode) {
+  return request({
+    url: '/handwrite/collection/getOrderCodeInfo/' + orderCode,
+    method: 'get'
+  })
+}

src/views/member/handwriteCollection/index.vue

@@ -62,7 +62,7 @@
 
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="手写信息采集表" prop="billImgUrl">
           <image-upload v-model="form.billImgUrl" :limit="1" />
@@ -74,9 +74,30 @@
           <el-input v-model="form.patientPhone" placeholder="请输入患者电话" />
         </el-form-item>
         <el-form-item label="订单号" prop="orderCode">
-          <el-input v-model="form.orderCode" placeholder="请输入订单号" />
+          <el-input v-model="form.orderCode" placeholder="请输入订单号" style="width: 90%;">
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="fetchOrderInfo" style="cursor: pointer;"></i>
+          </el-input>
+          <!-- 订单信息展示区域（仅在点击搜索后显示） -->
+          <div v-if="orderInfoVisible" class="order-info-card" style="margin-top: 10px;">
+            <el-card shadow="never">
+              <div slot="header">
+                <span>订单基本信息</span>
+                <el-button type="text" style="float: right;" @click="orderInfoVisible = false">关闭</el-button>
+              </div>
+              <el-descriptions :column="2" border size="small">
+                <el-descriptions-item label="订单号">{{ orderInfo.orderCode || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="收货人">{{ orderInfo.realName || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="联系电话">{{ orderInfo.userPhone || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="收货地址">{{ orderInfo.userAddress || '-' }}</el-descriptions-item>
+                <el-descriptions-item label="订单状态">
+                  <el-tag size="small" v-if="orderInfo.statusText">{{ orderInfo.statusText }}</el-tag>
+                  <span v-else>-</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="实付金额">￥{{ orderInfo.payMoney ? orderInfo.payMoney.toFixed(2) : '-' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-card>
+          </div>
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -87,7 +108,8 @@
 </template>
 
 <script>
-import { listCollection, getCollection, addCollection, updateCollection, delCollection, checkOrderCode } from "@/api/member/handwriteCollection/handwriteCollection";
+import { listCollection, getCollection, addCollection, updateCollection, delCollection, checkOrderCode, getOrderCodeInfo } from "@/api/member/handwriteCollection/handwriteCollection";
+import { getStoreOrder } from "@/api/hisStore/storeOrder";
 import ImageUpload from "@/components/ImageUpload";
 
 export default {
@@ -106,6 +128,7 @@ export default {
       multiple: true,
       // 记录原始订单号，用于修改时判断是否变化
       originalOrderCode: null,
+      orderInfoVisible: false,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -152,6 +175,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加手写信息采集表";
+      this.orderInfoVisible = false; // 新增时关闭订单信息展示
     },
     handleUpdate(row) {
       this.reset();
@@ -162,9 +186,62 @@ export default {
         this.originalOrderCode = this.form.orderCode;
         this.open = true;
         this.title = "修改手写信息采集表";
+        this.orderInfoVisible = false; // 新增时关闭订单信息展示
       });
     },
-    // 修改 submitForm 为异步方法
+    // 点击搜索图标：获取订单信息并展示
+    async fetchOrderInfo() {
+      const orderCode = this.form.orderCode;
+      if (!orderCode || orderCode.trim() === '') {
+        this.$message.warning('请输入订单号');
+        return;
+      }
+      // 校验格式？可略
+      try {
+        // 1. 获取订单主键ID
+        const res = await getOrderCodeInfo(orderCode);
+        if (res.code !== 200 || !res.data) {
+          this.$message.error(res.msg || '订单号无效或不存在');
+          this.orderInfoVisible = false;
+          return;
+        }
+        const orderId = res.data.id;
+        // 2. 获取订单详情
+        const orderDetailRes = await getStoreOrder(orderId);
+        if (orderDetailRes.code !== 200) {
+          this.$message.error('获取订单详情失败');
+          this.orderInfoVisible = false;
+          return;
+        }
+        const order = orderDetailRes.order;
+        if (order) {
+          // 映射状态文本（如果有状态字典）
+          let statusText = '';
+          if (this.statusOptions && this.statusOptions.length) {
+            const statusObj = this.statusOptions.find(item => item.dictValue == order.status);
+            statusText = statusObj ? statusObj.dictLabel : '';
+          }
+          this.orderInfo = {
+            orderCode: order.orderCode,
+            realName: order.realName,
+            userPhone: order.userPhone,
+            userAddress: order.userAddress,
+            payMoney: order.payMoney,
+            statusText: statusText
+          };
+          this.orderInfoVisible = true;
+          this.$message.success('已加载订单信息，请对照核对');
+        } else {
+          this.$message.warning('订单信息不完整');
+          this.orderInfoVisible = false;
+        }
+      } catch (error) {
+        console.error(error);
+        this.$message.error('请求失败，请稍后重试');
+        this.orderInfoVisible = false;
+      }
+    },
+
     async submitForm() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
@@ -257,3 +334,10 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.order-info-card {
+  border-radius: 4px;
+  overflow: hidden;
+}
+</style>