快速工单列表

刘淇
1 parent 0d1a4181
Showing 4 changed files with 430 additions and 306 deletions
pages-sub/daily/patrol-manage/add-patrol-record/index.vue
pages-sub/daily/quick-order/add-order.vue
pages-sub/daily/quick-order/index.vue
pages-sub/daily/quick-order/order-detail.vue
 <template>
   <view class="u-page">
-    <!-- 表单容器：统一label单位为rpx -->
-    <up-form
-        :model="form"
-        ref="uFormRef"
-        :rules="rules"
-        label-position="left"
-    >
-      <!-- 1. 文本域（必填，无label但保留必填验证） -->
-      <up-form-item
-          prop="content"
-          class="form-item"
+    <!-- 核心：将所有 up-form-item 包裹在同一个 up-form 内 -->
+    <view class="inspect-form-content commonPageLRpadding">
+      <up-form
+          label-position="left"
+          :model="inspectForm"
+          ref="inspectFormRef"
+          labelWidth="140rpx"
       >
-        <up-textarea
-            v-model="form.content"
-            placeholder="请输入巡查描述"
-            maxlength="200"
-            :show-word-limit="true"
-            border
-            :count="true"
-            class="textarea"
-        ></up-textarea>
-      </up-form-item>
-
-      <!-- 2. 上传图片：修复labelWidth单位为rpx -->
-      <up-form-item
-          prop="images"
-          class="form-item"
-          required
-          label="上传图片"
-          label-width="140rpx"
-      >
-        <up-upload
-            v-model="form.images"
-            :action="uploadUrl"
-            :max-count="3"
-            :multiple="true"
-            @after-read="handleAfterRead"
-            @delete="handleDelete"
-            @on-exceed="handleExceed"
-            upload-text="选择图片"
-            del-color="#ff4d4f"
-            class="upload-wrap"
-        ></up-upload>
-        <view class="tips">（最少1张，最多3张）</view>
-      </up-form-item>
-
-      <!-- 3. 转为工单：修复radio绑定 + labelWidth单位 -->
-      <up-form-item
-          prop="isWorkOrder"
-          class="form-item"
-          required
-          label="转为工单"
-          label-width="140rpx"
-      >
-        <up-radio-group
-            v-model="form.isWorkOrder"
-            active-color="#1989fa"
-            direction="row"
-            class="radio-group"
+        <!-- 1. 巡查描述（文本域） -->
+        <up-form-item
+            prop="content"
+            class="form-item"
+        >
+          <up-textarea
+              v-model="inspectForm.content"
+              placeholder="请输入巡查描述"
+              maxlength="200"
+              count
+          ></up-textarea>
+        </up-form-item>
+
+        <!-- 2. 上传图片 -->
+        <up-form-item
+            label="上传图片"
+            prop="images"
+            required
+            border-bottom
+            class="form-item"
+        >
+          <up-upload
+              :file-list="imagesList"
+              @after-read="(event) => uploadImgs(event)"
+              @delete="(event) => deleteImg(event)"
+              @on-exceed="handleExceed"
+              multiple
+              :max-count="3"
+              upload-text="选择图片"
+              del-color="#ff4d4f"
+              class="upload-wrap"
+          ></up-upload>
+          <view class="tips">（最少1张，最多3张）</view>
+        </up-form-item>
+
+        <!-- 3. 转为工单（单选框） -->
+        <up-form-item
+            label="转为工单"
+            prop="isWorkOrder"
+            required
+            class="form-item"
         >
-          <!-- 修复：radio绑定value而非name -->
-          <up-radio
-              :custom-style="{marginRight: '40rpx'}"
-              v-for="(item, index) in radioList"
-              :label="item.label"
-              :name="item.value"
+          <up-radio-group
+              v-model="inspectForm.isWorkOrder"
+              active-color="#1989fa"
+              direction="row"
+              class="radio-group"
           >
-            {{ item.label }}
-          </up-radio>
-        </up-radio-group>
-      </up-form-item>
-    </up-form>
+            <up-radio
+                :custom-style="{marginRight: '40rpx'}"
+                v-for="(item, index) in radioList"
+                :key="index"
+                :label="item.label"
+                :name="item.value"
+            >
+              {{ item.label }}
+            </up-radio>
+          </up-radio-group>
+        </up-form-item>
+
+      </up-form>
+    </view>
  
     <!-- 底部提交按钮 -->
     <view class="fixed-bottom-btn-wrap">
       <up-button
           type="primary"
-          size="default"
-          @click="submit"
+          text="提交"
+          @click="submitInspect"
           :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
-      >
-        提交
-      </up-button>
+      ></up-button>
     </view>
   </view>
 </template>
  
-<script setup>
-import { ref, reactive } from 'vue';
-// 表单数据
-const form = reactive({
-  content: '',       // 文本域内容
-  images: [],        // 上传图片列表
-  isWorkOrder: '1'    // 是否转为工单 1:是 2:否
-});
-// 图片上传地址
-const uploadUrl = ref('');
-// 单选列表
-const radioList = ref([
-  {label: '是', value: '1'},
-  {label: '否', value: '2'}
-]);
-// 校验规则
-const rules = reactive({
-  content: [
-    {required: true, message: '请输入巡查描述', trigger: ['blur', 'change']},
-    {max: 200, message: '内容不能超过200字', trigger: ['blur', 'change']}
-  ],
-  images: [
-    {
-      validator: (rule, value, callback) => {
-        if (value.length < 1) callback(new Error('最少需要上传1张图片'));
-        else if (value.length > 3) callback(new Error('最多只能上传3张图片'));
-        else callback();
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { UniFormRef } from '@/uni_modules/uview-plus/types'
+// 定义ref供选项式API使用
+const inspectFormRef = ref<UniFormRef>(null)
+</script>
+
+<script lang="ts">
+import { uploadImages } from '@/common/utils/upload';
+
+export default {
+  data() {
+    return {
+      // 图片列表
+      imagesList: [],
+      // 单选列表
+      radioList: [
+        { label: '是', value: '1' },
+        { label: '否', value: '2' }
+      ],
+      // 巡查表单数据
+      inspectForm: {
+        content: '',        // 巡查描述
+        isWorkOrder: '1'    // 是否转为工单 1:是（默认） 2:否
       },
-      trigger: ['change']
-    }
-  ],
-  isWorkOrder: [
-    {required: true, message: '请选择是否转为工单', trigger: ['change']}
-  ]
-});
-// 表单引用
-const uFormRef = ref(null);
-// 图片上传/删除/超出处理
-const handleAfterRead = (event) => {
-  const {file} = event;
-  setTimeout(() => {
-    form.images.push({url: file.url, name: file.name || 'image.png', status: 'success'});
-    uFormRef.value.validateField('images');
-  }, 500);
-};
-const handleDelete = (index) => {
-  form.images.splice(index, 1);
-  uFormRef.value.validateField('images');
-};
-const handleExceed = () => uni.$u.toast('最多只能上传3张图片', 'none');
-// 提交方法
-const submit = () => {
-  uFormRef.value.validate().then(valid => {
-    if (valid) {
-      uni.showLoading({title: '提交中...'});
-      setTimeout(() => {
-        uni.hideLoading();
-        uni.$u.toast('提交成功');
-        uFormRef.value.resetFields();
-        form.images = [];
-      }, 1500);
+      // 表单校验规则
+      inspectFormRules: {
+        images: [
+          {
+            required: true,
+            message: '请上传图片',
+            trigger: 'change',
+            validator: (rule, value, callback) => {
+              // 自定义校验规则：检查是否有成功上传的图片
+              const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
+              const imgCount = this.imagesList.filter(item => item.status === 'success').length
+
+              if (!hasSuccessImg || imgCount < 1) {
+                callback(new Error('最少需要上传1张图片'))
+              } else if (imgCount > 3) {
+                callback(new Error('最多只能上传3张图片'))
+              } else {
+                callback()
+              }
+            }
+          }
+        ],
+        isWorkOrder: [
+          { type: 'string', required: true, message: '请选择是否转为工单', trigger: ['change'] }
+        ]
+      }
     }
-  }).catch(() => uni.$u.toast('表单验证失败，请检查必填项', 'none'));
-};
-</script>
+  },
+  onReady() {
+    // 兼容微信小程序，通过setRules设置校验规则
+    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
+    console.log('巡查表单规则初始化完成')
+  },
+  methods: {
+    /**
+     * 删除图片
+     */
+    deleteImg(event) {
+      console.log('删除图片事件：', event)
+      this.imagesList.splice(event.index, 1)
+      // 删除图片后重新校验图片字段
+      this.$refs.inspectFormRef.validateField('images')
+      uni.showToast({ title: '图片删除成功', icon: 'success' })
+    },
  
-<style scoped lang="scss">
-// 基础布局：避免内容重叠
-.u-page {
-  padding: 20rpx;
-}
+    /**
+     * 上传图片
+     */
+    async uploadImgs(event) {
+      console.log('上传图片事件：', event)
+      const fileList = Array.isArray(event.file) ? event.file : [event.file]
+      const targetImgList = this.imagesList
  
-// 表单项样式：分隔区域，避免label和内容重叠
-.form-item {
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding:0 30rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
-  position: relative; // 为文本域必填*号定位
-}
+      const filePaths = fileList.map(item => item.url)
+      const tempItems = fileList.map(item => ({
+        ...item,
+        status: 'uploading',
+        message: '上传中'
+      }))
+      const startIndex = targetImgList.length
+      targetImgList.push(...tempItems)
  
-// 文本域样式
-.textarea {
-  margin-bottom: 10rpx;
-}
+      try {
+        const uploadResultUrls = await uploadImages({
+          filePaths: filePaths,
+          ignoreError: true
+        })
+        console.log('上传成功的URL列表：', uploadResultUrls)
  
-// 上传区域样式
-.upload-wrap {
-  margin-top: 10rpx;
-}
+        uploadResultUrls.forEach((url, index) => {
+          if (targetImgList[startIndex + index]) {
+            targetImgList.splice(startIndex + index, 1, {
+              ...fileList[index],
+              status: 'success',
+              message: '',
+              url: url
+            })
+          }
+        })
  
-.tips {
-  font-size: 24rpx;
-  color: #999;
-  margin-top: 10rpx;
-}
+        if (uploadResultUrls.length < fileList.length) {
+          const failCount = fileList.length - uploadResultUrls.length
+          for (let i = uploadResultUrls.length; i < fileList.length; i++) {
+            if (targetImgList[startIndex + i]) {
+              targetImgList.splice(startIndex + i, 1, {
+                ...fileList[i],
+                status: 'failed',
+                message: '上传失败'
+              })
+            }
+          }
+          uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
+        } else {
+          uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
+        }
  
-// ========== 核心：修复必填*号显示 ==========
-// 1. 放大+高亮uView默认必填*号
-:deep(.up-form-item__required) {
-  color: #ff4d4f !important; // 醒目红色
-  font-size: 28rpx !important; // 放大字号
-  font-weight: bold !important; // 加粗
-  margin-left: 5rpx !important; // 与label保持间距
-}
+        // 上传完成后重新校验图片字段
+        this.$refs.inspectFormRef.validateField('images')
+      } catch (err) {
+        console.error('图片上传失败：', err)
+        for (let i = 0; i < fileList.length; i++) {
+          if (targetImgList[startIndex + i]) {
+            targetImgList.splice(startIndex + i, 1, {
+              ...fileList[i],
+              status: 'failed',
+              message: '上传失败'
+            })
+          }
+        }
+        uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
+
+        // 上传失败后重新校验图片字段
+        this.$refs.inspectFormRef.validateField('images')
+      }
+    },
+
+    /**
+     * 处理图片超出数量限制
+     */
+    handleExceed() {
+      uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
+    },
+
+    /**
+     * 提取图片URL数组
+     */
+    getImgUrlList(imgList) {
+      return imgList.filter(item => item.status === 'success').map(item => item.url)
+    },
+
+    /**
+     * 提交巡查表单
+     */
+    async submitInspect() {
+      console.log('当前选择是否转为工单：', this.inspectForm.isWorkOrder)
+      try {
+        // 先执行表单校验
+        await this.$refs.inspectFormRef.validate()
+
+        // 构造提交数据
+        const submitData = {
+          content: this.inspectForm.content,
+          images: this.getImgUrlList(this.imagesList),
+          isWorkOrder: this.inspectForm.isWorkOrder // 1=是，2=否
+        }
+
+        // 显示加载中
+        uni.showLoading({ title: '提交中...' })
+
+        // 这里替换为实际的接口调用
+        // const res = await yourSubmitApi(submitData)
+
+        // 模拟接口调用延迟
+        await new Promise(resolve => setTimeout(resolve, 1500))
  
+        uni.hideLoading()
+        uni.showToast({
+          title: '提交成功',
+          icon: 'success',
+          duration: 1500
+        })
  
+        // 重置表单（保留默认值：转为工单=是）
+        setTimeout(() => {
+          this.$refs.inspectFormRef.resetFields()
+          this.imagesList = []
+          this.inspectForm = {
+            content: '',
+            isWorkOrder: '1' // 重置后仍默认选中“是”
+          }
+        }, 1500)
  
+      } catch (error) {
+        // 隐藏加载框
+        uni.hideLoading()
+
+        // 区分是表单校验失败还是接口调用失败
+        if (Array.isArray(error)) {
+          // 表单校验失败 - 静默处理（uView会自动提示）
+        } else {
+          // 接口调用失败
+          console.error('巡查表单提交失败：', error)
+          uni.showToast({
+            title: '提交失败，请重试',
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 全局页面样式
+.u-page {
+}
+
+// 巡查表单内容容器
+.inspect-form-content {
+  background: #fff;
+  padding: 20rpx;
+}
  
 </style>
 \ No newline at end of file
@@ -230,10 +230,7 @@ export default {
             }
           }
         ],
-        handleResultDesc: [
-          // 移除required，改为可选字段
-          {type: 'string', min: 3, max: 200, message: '处理结果需3-200字', trigger: ['change', 'blur']}
-        ]
+
       }
     }
   },
 <template>
-  <view class="work-order-page">
+  <view class="u-page">
     <!-- 顶部固定搜索栏 -->
     <up-sticky>
       <view class="search-header">
-        <!-- 左侧下拉框 -->
-        <view class="dropdown-wrap">
-          <up-dropdown ref="uDropdownRef" @open="open" @close="close">
-            <up-dropdown-item
-                v-model="selectedSortValue"
-                title="距离"
-                :options="sortOptions"
-                @change="handleSortChange"
-            />
-          </up-dropdown>
+        <!-- 左侧下拉框：替换为uView Plus的Select组件 -->
+        <view class="select-wrap">
+          <up-select
+              v-model:current="selectedSortValue"
+              :options="sortOptions"
+              :showOptionsLabel="true"
+              @select="handleSortChange"
+              border="surround"
+              :style="{ flex: 1 }"
+          />
         </view>
  
         <!-- 右侧搜索框 -->
@@ -38,32 +38,32 @@
         v-model="orderList"
         @query="queryList"
         :top="100"
-    :bottom="120"
+        :bottom="120"
     >
-    <template #empty>
-      <view class="empty-tip">暂无工单数据</view>
-    </template>
-
-    <!-- 修复：新增列表容器，配置顶部内边距 -->
-    <view class="order-list">
-      <view class="order-card" v-for="item in orderList" :key="item.orderNo">
-        <view class="order-item up-line-1">工单编号：{{ item.orderNo }}</view>
-        <view class="order-item up-line-1">工单位置：{{ item.roadName || '未填写' }}</view>
-        <view class="order-item up-line-1">工单名称：{{ item.orderName || '未填写' }}</view>
-        <view class="order-item up-line-1">情况描述：{{ item.remark || '无' }}</view>
-        <view class="order-footer">
-          <view class="submit-time up-line-1">提交时间：{{ timeFormat(item.createTime,'yyyy-mm-dd') }}</view>
-          <up-button
-              type="primary"
-              size="mini"
-              @click="handleDetail(item)"
-              :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
-          >
-            工单详情
-          </up-button>
+      <template #empty>
+        <empty-view/>
+      </template>
+
+      <!-- 修复：新增列表容器，配置顶部内边距 -->
+      <view class="order-list">
+        <view class="order-card" v-for="item in orderList" :key="item.orderNo">
+          <view class="order-item up-line-1">工单编号：{{ item.orderNo }}</view>
+          <view class="order-item up-line-1">工单位置：{{ item.roadName || '未填写' }}</view>
+          <view class="order-item up-line-1">工单名称：{{ item.orderName || '未填写' }}</view>
+          <view class="order-item up-line-1">情况描述：{{ item.remark || '无' }}</view>
+          <view class="order-footer">
+            <view class="submit-time up-line-1">提交时间：{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+            <up-button
+                type="primary"
+                size="mini"
+                @click="handleDetail(item)"
+                :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
+            >
+              工单详情
+            </up-button>
+          </view>
         </view>
       </view>
-    </view>
     </z-paging>
  
     <!-- 修复：补充底部按钮样式层级 -->
@@ -76,18 +76,19 @@
 </template>
  
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { workorderPage } from "@/api/quick-order/quick-order";
 import { timeFormat } from '@/uni_modules/uview-plus';
 // ========== 修复1：声明所有核心响应式变量 ==========
 // 顶部/底部高度（rpx）
-const headerHeight = 100;
-const bottomBtnHeight = 120;
-// 排序相关
+// 排序相关：适配up-select的格式
 const selectedSortValue = ref(1);
+// 1 位置 2 工单名称 3 情况描述 4 工单编号
 const sortOptions = ref([
-  { label: '默认排序', value: 1 },
-  { label: '距离优先', value: 2 }
+  {name: '位置', id: 1},
+  {name: '名称', id: 2},
+  {name: '描述', id: 3},
+  {name: '编号', id: 4},
 ]);
 // 分页相关（核心：声明orderList）
 const pageNo = ref(1);
@@ -96,70 +97,53 @@ const paging = ref(null);
 const orderList = ref([]); // 修复：新增列表变量
 // 搜索相关
 const searchValue = ref('');
-
-
-
 // ========== 修复3：适配z-paging回调参数 ==========
-const queryList = async (pageNo,pageSize) => {
+const queryList = async (pageNo, pageSize) => {
   try {
     // 修复：z-paging的query回调参数是对象 {pageNo, pageSize}
     const apiParams = {
       searchContent: searchValue.value.trim() || '',
       pageNo: pageNo,
       pageSize: pageSize,
-      type:1 //  1 位置 2 工单名称 3 情况描述 4 工单编号
+      type: selectedSortValue.value //  1 位置 2 工单名称 3 情况描述 4 工单编号
     };
     console.log('请求参数：', apiParams);
     const res = await workorderPage(apiParams);
     console.log('接口返回：', res);
-
-
     paging.value.complete(res.list);
   } catch (error) {
     console.error('加载失败：', error);
     paging.value?.complete(false);
-    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+    uni.showToast({title: '加载失败，请重试', icon: 'none'});
   }
 };
-
 // ========== 其他方法补充 ==========
 const handleSortChange = (val) => {
   console.log('排序变更：', val);
+  searchValue.value = ''
+  selectedSortValue.value = val.id; // 更新选中值
   paging.value?.reload(); // 排序后刷新列表
 };
-
 const handleSearch = (val) => {
   console.log('搜索内容：', val);
   searchValue.value = val;
   paging.value?.reload(); // 搜索后刷新列表
 };
-
 const handleDetail = (item) => {
   console.log('工单详情：', item);
   uni.navigateTo({
     url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
   });
 };
-
 const handleAddOrder = () => {
   uni.navigateTo({
     url: '/pages-sub/daily/quick-order/add-order'
   });
 };
-
-// 空方法（避免下拉框报错）
-const open = () => {};
-const close = () => {};
 </script>
  
 <style scoped lang="scss">
-// 修复：页面基础样式
-.work-order-page {
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding-bottom: env(safe-area-inset-bottom);
-  box-sizing: border-box;
-}
+
  
 // 顶部搜索栏
 .search-header {
@@ -167,17 +151,26 @@ const close = () =&gt; {};
   align-items: center;
   padding: 20rpx;
   background-color: #fff;
-  border-bottom: 1px solid #f0f0f0;
-  height: v-bind(headerHeight + 'rpx');
   box-sizing: border-box;
  
-  .dropdown-wrap {
-    flex: 1;
+  // 下拉选择框容器
+  .select-wrap {
+    width: 80px;
+    color: #333;
     margin-right: 20rpx;
+    // 适配up-select样式
+    :deep(.u-select) {
+      width: 100%;
+      font-size: 28rpx;
+    }
+
+    :deep(.u-input__placeholder) {
+      font-size: 28rpx;
+    }
   }
  
   .search-input-wrap {
-    flex: 2;
+    flex: 3;
   }
 }
  
@@ -187,14 +180,6 @@ const close = () =&gt; {};
   box-sizing: border-box;
 }
  
-// 空状态样式
-.empty-tip {
-  text-align: center;
-  padding: 100rpx 0;
-  color: #999;
-  font-size: 28rpx;
-}
-
 // 工单卡片样式
 .order-card {
   background-color: #fff;
@@ -214,13 +199,16 @@ const close = () =&gt; {};
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 12rpx;
  
     .submit-time {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-size: 26rpx;
       color: #666;
-      line-height: 40rpx;
     }
+
   }
 }
  
 <template>
   <view class="u-page">
-
-
-    <!-- 页面级加载组件（up-loading-page，uview-plus标准组件） -->
+    <!-- 页面级加载组件 -->
     <up-loading-page
         v-if="loading"
         :loading="true"
@@ -10,10 +8,17 @@
         color="#3c9cff"
     ></up-loading-page>
  
-    <!-- 内容容器（仅在非加载状态显示） -->
+    <!-- 内容容器 -->
     <view v-else class="content-wrap">
-      <!-- 单元格分组（核心uview组件） -->
-      <up-cell-group :border="false" inset style="margin: 20rpx;" >
+      <!-- 空状态 -->
+      <view v-if="!Object.keys(orderDetail).length" class="empty-wrap">
+        <text class="empty-icon">📄</text>
+        <text class="empty-text">暂无工单详情</text>
+        <text class="empty-subtext">请检查工单ID是否正确</text>
+      </view>
+
+      <!-- 工单详情内容 -->
+      <up-cell-group :border="false" inset style="margin: 20rpx;" v-else>
         <!-- 1. 工单编号 -->
         <up-cell
             title="工单编号"
@@ -46,36 +51,38 @@
             align="middle"
         ></up-cell>
  
-        <!-- 5. 问题照片 -->
-        <up-cell title="问题照片" align="top">
+        <!-- 5. 问题照片（核心修复：判断条件+空值处理） -->
+        <up-cell title="问题照片" >
+          <template #value>
           <view class="cell-content-wrap">
+
+            <!-- 修复1：正确判断problemImgsList，补充空数组默认值 -->
             <up-album
-                v-if="orderDetail.imgs && orderDetail.imgs.length"
-                :list="formatAlbumList(orderDetail.imgs)"
-                :column="3"
-                :max-count="9"
+                v-if="!!orderDetail.problemImgsList?.length"
+                :urls="orderDetail.problemImgsList || []"
+                singleSize="70"
                 :preview-full-image="true"
-                disabled
-                style="width: 100%;"
+
             ></up-album>
             <text v-else class="empty-text">暂无问题照片</text>
           </view>
+          </template>
         </up-cell>
  
-        <!-- 6. 完成照片 -->
+        <!-- 6. 完成照片（优化：空值处理+容错） -->
         <up-cell title="完成照片" align="top">
+          <template #value>
           <view class="cell-content-wrap">
             <up-album
-                v-if="orderDetail.longRangeImgList && orderDetail.longRangeImgList.length"
-                :list="formatAlbumList(orderDetail.longRangeImgList)"
-                :column="3"
-                :max-count="9"
+                v-if="!!orderDetail.completeImgsList?.length"
+                :urls="orderDetail.completeImgsList || []"
+                singleSize="70"
                 :preview-full-image="true"
-                disabled
-                style="width: 100%;"
+
             ></up-album>
             <text v-else class="empty-text">暂无完成照片</text>
           </view>
+          </template>
         </up-cell>
  
         <!-- 7. 处理结果 -->
@@ -87,13 +94,6 @@
             :border="false"
         ></up-cell>
       </up-cell-group>
-
-      <!-- 空状态（原生样式，替代up-empty） -->
-      <view v-if="!Object.keys(orderDetail).length" class="empty-wrap">
-        <text class="empty-icon">📄</text>
-        <text class="empty-text">暂无工单详情</text>
-        <text class="empty-subtext">请检查工单ID是否正确</text>
-      </view>
     </view>
   </view>
 </template>
@@ -101,22 +101,12 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { inspectionPlanDetail } from "@/api/quick-order/quick-order";
-
 import { onLoad, onShow } from '@dcloudio/uni-app';
+
 // 状态管理
 const loading = ref(true);
 const orderDetail = ref({});
  
-/**
- * 格式化相册列表（适配up-album）
- */
-const formatAlbumList = (imgUrls: string[]) => {
-  return imgUrls.map(url => ({
-    url,
-    thumb: url,
-    name: `图片-${Date.now()}`
-  }));
-};
  
 /**
  * 获取工单详情
@@ -125,9 +115,13 @@ const getOrderDetail = async (id: string) =&gt; {
   try {
     loading.value = true;
     const res = await inspectionPlanDetail({ id });
-    console.log('接口返回：', res)
-    orderDetail.value = res
-
+    console.log('接口返回：', res);
+    // 优化：确保图片数组为数组类型，避免非数组导致渲染错误
+    orderDetail.value = {
+      ...res,
+      problemImgsList: Array.isArray(res.problemImgsList) ? res.problemImgsList : [],
+      completeImgsList: Array.isArray(res.completeImgsList) ? res.completeImgsList : []
+    };
   } catch (error) {
     console.error('获取工单详情失败：', error);
     uni.showToast({ title: '加载失败，请重试', icon: 'none' });
@@ -149,22 +143,23 @@ onLoad((options) =&gt; {
 </script>
  
 <style scoped lang="scss">
+// 页面基础样式
+.u-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  box-sizing: border-box;
+}
  
-
-// 内容容器（原生滚动）
+// 内容容器
 .content-wrap {
   background: #fff;
   width: 100%;
   box-sizing: border-box;
   overflow-y: auto;
+  min-height: calc(100vh - 40rpx);
 }
  
-// 单元格内容包裹层
-.cell-content-wrap {
-  width: 100%;
-  padding: 10rpx 0;
-  box-sizing: border-box;
-}
+
  
 // 空文本样式
 .empty-text {
@@ -181,6 +176,7 @@ onLoad((options) =&gt; {
   --u-cell-group-border-radius: 12rpx;
   --u-cell-group-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
+
 :deep(.up-cell) {
   --u-cell-title-font-size: 28rpx;
   --u-cell-value-font-size: 28rpx;
@@ -189,9 +185,33 @@ onLoad((options) =&gt; {
   --u-cell-padding: 20rpx 15rpx;
   --u-cell-border-color: #f5f5f5;
 }
+
+// 相册样式优化（关键：适配图片展示）
+:deep(.up-album) {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.up-album__list) {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+}
+
 :deep(.up-album__item) {
-  margin: 10rpx 5rpx;
+  width: calc(33.333% - 10rpx);
+  height: 200rpx; // 固定图片高度，避免变形
+  margin: 5rpx;
   border-radius: 8rpx;
+  overflow: hidden;
+  background-color: #f8f8f8;
+}
+
+:deep(.up-album__image) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; // 图片裁剪填充，避免拉伸
 }
  
 // 原生空状态样式
@@ -199,17 +219,20 @@ onLoad((options) =&gt; {
   margin-top: 200rpx;
   text-align: center;
 }
+
 .empty-icon {
   font-size: 80rpx;
   display: block;
   margin-bottom: 20rpx;
   color: #ddd;
 }
+
 .empty-text {
   font-size: 28rpx;
   color: #999;
   display: block;
 }
+
 .empty-subtext {
   font-size: 24rpx;
   color: #ccc;
@@ -217,7 +240,7 @@ onLoad((options) =&gt; {
   display: block;
 }
  
-// 适配up-loading-page样式
+// 加载组件样式
 :deep(.up-loading-page) {
   margin-top: 100rpx;
 }