feat: 优化匿名，和详情页

wzp

2025-05-04 45e02578775f7e05e41923af4294c3617e26bd13

 ruoyi-ui/src/views/system/order/detail.vue

@@ -45,10 +45,10 @@
            <div slot="header"><b>服务要求</b></div>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="出发地">{{ serviceInfo.startAddress }}</el-descriptions-item>
              <el-descriptions-item label="出发地位置">{{ serviceInfo.startLocation }}</el-descriptions-item>
              <!-- <el-descriptions-item label="出发地位置">{{ serviceInfo.startLocation }}</el-descriptions-item> -->
              <el-descriptions-item label="目的地">{{ serviceInfo.endAddress }}</el-descriptions-item>
              <el-descriptions-item label="目的地位置">{{ serviceInfo.endLocation }}</el-descriptions-item>
              <el-descriptions-item label="转运里程">{{ serviceInfo.distance }}</el-descriptions-item>
              <!-- <el-descriptions-item label="目的地位置">{{ serviceInfo.endLocation }}</el-descriptions-item> -->
              <el-descriptions-item label="转运里程">{{ serviceInfo.distance }} 公里</el-descriptions-item>
              <el-descriptions-item label="搬抬服务">{{ serviceInfo.liftService }}</el-descriptions-item>
              <el-descriptions-item label="搬抬楼层">{{ serviceInfo.liftFloor }}</el-descriptions-item>
              <el-descriptions-item label="医护要求">{{ serviceInfo.medicalStaff }}</el-descriptions-item>
@@ -64,7 +64,7 @@
              <el-descriptions-item label="是否有意识">{{ medicalInfo.hasConsciousness }}</el-descriptions-item>
              <el-descriptions-item label="病人情况">{{ medicalInfo.patientCondition }}</el-descriptions-item>
              <el-descriptions-item label="使用呼吸机">{{ medicalInfo.useVentilator }}</el-descriptions-item>
              <el-descriptions-item label="诊断病情">{{ medicalInfo.diagnosis }}</el-descriptions-item>
              <el-descriptions-item label="诊断病情">{{ medicalInfo.complaint }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
@@ -79,7 +79,7 @@
              <el-descriptions-item label="调度时间">{{ dispatchInfo.dispatchTime }}</el-descriptions-item>
              <el-descriptions-item label="调度状态">{{ dispatchInfo.dispatchStatus }}</el-descriptions-item>
              <el-descriptions-item label="司机">{{ dispatchInfo.driver }}</el-descriptions-item>
              <el-descriptions-item label="车牌">{{ dispatchInfo.carNo }}</el-descriptions-item>
              <el-descriptions-item label="车牌">{{ dispatchInfo.carLicense }}</el-descriptions-item>
              <el-descriptions-item label="医生">{{ dispatchInfo.doctor }}</el-descriptions-item>
              <!-- <el-descriptions-item label="职位">{{ dispatchInfo.doctorPosition }}</el-descriptions-item> -->
              <el-descriptions-item label="护士">{{ dispatchInfo.nurse }}</el-descriptions-item>
@@ -97,44 +97,55 @@
              style="width: 100%"
              :size="isMobile ? 'mini' : 'medium'"
              class="responsive-table">
              <el-table-column prop="paymentNo" label="收款流水" min-width="120" />
              <el-table-column prop="paymentTime" label="收款时间" min-width="140" />
              <el-table-column prop="amount" label="金额" min-width="100" />
              <el-table-column prop="method" label="方式" min-width="100" />
              <el-table-column prop="remark" label="备注" min-width="120" />
              <el-table-column prop="id" label="收款流水" min-width="120" />
              <el-table-column
                prop="paidMoneyTime"
                label="收款时间"
                min-width="140"
                :formatter="(row, column, cellValue) => formatDateTime(cellValue)"
              />
              <el-table-column prop="paidMoney" label="金额(元)" min-width="100" />
              <el-table-column prop="vtext" label="方式" min-width="100" />
              <el-table-column prop="paidMoneyMono" label="备注" min-width="120" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>

      <!-- 运行情况 -->
      <el-row>
        <el-col :span="24">

      <!-- 订单情况 -->
      <el-row :gutter="20">
        <!-- 调度信息 -->
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card class="inner-card">
            <div slot="header">
              <b>运行情况</b>
              <span style="float: right">粤A102311</span>
            </div>
            <el-table
              :data="operationInfo"
              border
              style="width: 100%"
              :size="isMobile ? 'mini' : 'medium'"
              class="responsive-table">
              <el-table-column prop="status" label="出车状态" min-width="100" />
              <el-table-column prop="operator" label="操作人" min-width="100" />
              <el-table-column prop="operateTime" label="操作时间" min-width="140" />
              <el-table-column prop="location" label="坐标位置" min-width="200" show-overflow-tooltip />
            </el-table>
            <div slot="header"><b>详情</b></div>
            <el-descriptions :column="isMobile ? 1 : 2" border>
              <el-descriptions-item label="服务评价">{{ otherInfo.serviceOrdVisit }}</el-descriptions-item>
              <el-descriptions-item label="发票状态">{{ otherInfo.invoiceStatus }}</el-descriptions-item>
              <el-descriptions-item label="知情同意书">
                <div v-if="otherInfo.imageUrls && otherInfo.imageUrls.length > 0" class="image-container">
                  <el-image
                    v-for="image in otherInfo.imageUrls"
                    :key="image"
                    :src="image"
                    :preview-src-list="otherInfo.imageUrls"
                    class="preview-image"
                  />
                </div>
                <span v-else>暂无图片</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import { getOrderDetail } from '@/api/system/order'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'OrderDetail',
@@ -147,7 +158,7 @@
      medicalInfo: {},
      dispatchInfo: {},
      paymentInfo: [],
      operationInfo: [],
      otherInfo: [],
      screenWidth: document.documentElement.clientWidth // 屏幕宽度
    }
  },
@@ -157,8 +168,19 @@
    }
  },
  created() {
    // 获取路由参数中的订单ID
    const orderId = this.$route.params.id
    this.getDetail(orderId)

    // 获取URL查询参数
    const urlParams = new URLSearchParams(window.location.search)
    const params = {
      appId: urlParams.get('appId'),
      timestamp: urlParams.get('timestamp'),
      sign: urlParams.get('sign')
    }

    // 调用获取详情方法，传入所有参数
    this.getDetail(orderId, params)
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
@@ -168,8 +190,8 @@
  },
  methods: {
    /** 获取订单详情 */
    getDetail(orderId) {
      getOrderDetail(orderId).then(response => {
    getDetail(orderId, params) {
      getOrderDetail(orderId, params).then(response => {
        const { data } = response
        // 根据后端返回的数据结构设置各个对象的值
        this.orderInfo = data.orderInfo || {}
@@ -178,7 +200,7 @@
        this.medicalInfo = data.medicalInfo || {}
        this.dispatchInfo = data.dispatchInfo || {}
        this.paymentInfo = data.paymentInfo || []
        this.operationInfo = data.operationInfo || []
        this.otherInfo = data.otherInfo || []

        console.log(this.orderInfo)

@@ -187,6 +209,12 @@
    // 处理窗口大小变化
    handleResize() {
      this.screenWidth = document.documentElement.clientWidth
    },
    formatDateTime(time) {
      if (!time) {
        return '';
      }
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
    }
  }
}
@@ -220,4 +248,15 @@
  .el-descriptions-item { padding: 8px !important; }
  .el-descriptions-item__label { width: 100px !important; }
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.preview-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
}
</style>