From 16f7aaefddfad35243f8e1497eda10010e6c6f16 Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Fri, 1 Aug 2025 10:13:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E4=B8=80=E4=B8=8Bxk?=
 =?UTF-8?q?Xc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/routine/kefuxuncha/xcXkkcDetail.vue  | 153 ++++++++++++++----
 1 file changed, 122 insertions(+), 31 deletions(-)

diff --git a/src/pages/view/routine/kefuxuncha/xcXkkcDetail.vue b/src/pages/view/routine/kefuxuncha/xcXkkcDetail.vue
index 45745ee..8bdc3c9 100644
--- a/src/pages/view/routine/kefuxuncha/xcXkkcDetail.vue
+++ b/src/pages/view/routine/kefuxuncha/xcXkkcDetail.vue
@@ -71,16 +71,20 @@
                 >
                   <view class="item-info flex-1">
                     <!-- 项目名称单独一行 -->
-                    <text class="item-text">{{ index + 1 }}、{{ item.xcMc }}</text>
+                    <text class="item-text"
+                      >{{ index + 1 }}、{{ item.xcMc }}</text
+                    >
                     <!-- 分值和结果同一行 -->
                     <view class="item-score-result">
-                      <text class="item-deduction mr-20">分值：{{ item.xmFz }}分</text>
+                      <text class="item-deduction mr-20">
+                        分值：{{ item.xmFz }}分
+                      </text>
                       <view class="item-result">
                         <radio-group
                           :name="'result_' + item.id"
-                          @change="e => { item.checked = e.detail.value === 'A'; }"
                           class="item-radio-group"
-                        >
+                          @change="onCheckItemChange($event, item)"
+                          >
                           <label class="item-radio-label mr-10">
                             <radio
                               :value="'A'"
@@ -107,7 +111,10 @@
               </view>
             </template>
             <template v-else>
-              <view class="no-check-items" style="text-align:center;color:#999;padding:20px 0;">
+              <view
+                class="no-check-items"
+                style="text-align: center; color: #999; padding: 20px 0"
+              >
                 暂无巡查项目
               </view>
             </template>
@@ -158,7 +165,10 @@
     <view v-else class="completed-inspection">
       <!-- 巡查记录列表 -->
       <view class="inspection-list">
-        <BasicListLayout @register="registerInspection" style="position: absolute;">
+        <BasicListLayout
+          @register="registerInspection"
+          style="position: absolute"
+        >
           <template v-slot="{ data, index }">
             <view class="inspection-record bg-white r-md p-15 mb-15">
               <view class="record-header">
@@ -176,22 +186,38 @@
                   <text class="item-value">{{ data.jsxm }}</text>
                 </view>
                 <view class="content-item flex-col">
-                  <text class="item-label" style="flex: 0 0 25px;">巡查项目：</text>
-                  <view class="item-value" style="width:100%">
-                    <template v-if="data.xkXcXmList && data.xkXcXmList.length > 0">
-                      <view v-for="(xm, idx) in data.xkXcXmList" :key="xm.xcXmId" style="margin-bottom: 4px;">
+                  <text class="item-label" style="flex: 0 0 25px"
+                    >巡查项目：</text
+                  >
+                  <view class="item-value" style="width: 100%">
+                    <template
+                      v-if="data.xkXcXmList && data.xkXcXmList.length > 0"
+                    >
+                      <view
+                        v-for="(xm, idx) in data.xkXcXmList"
+                        :key="xm.xcXmId"
+                        style="margin-bottom: 4px"
+                      >
                         <view>
                           <text>{{ idx + 1 }}、{{ xm.xcMc }}</text>
-                          <view style="display: flex; justify-content: space-between; margin: 4px 0;">
+                          <view
+                            style="
+                              display: flex;
+                              justify-content: space-between;
+                              margin: 4px 0;
+                            "
+                          >
                             <text>分值：{{ xm.xmFz }}分</text>
-                            <text>巡查结果：{{ xm.xcJg === 'A' ? '有' : '无' }}</text>
+                            <text
+                              >巡查结果：{{
+                                xm.xcJg === "A" ? "有" : "无"
+                              }}</text
+                            >
                           </view>
                         </view>
                       </view>
                     </template>
-                    <template v-else>
-                      无巡查项目
-                    </template>
+                    <template v-else> 无巡查项目 </template>
                   </view>
                 </view>
                 <view
@@ -199,14 +225,23 @@
                   v-if="data.images && data.images.length > 0"
                 >
                   <text class="item-label">巡查图片：</text>
-                  <view class="item-value" style="display: flex; flex-wrap: wrap; gap: 8px;">
+                  <view
+                    class="item-value"
+                    style="display: flex; flex-wrap: wrap; gap: 8px"
+                  >
                     <image
                       v-for="(img, imgIdx) in data.images"
                       :key="imgIdx"
                       :src="img"
                       mode="aspectFill"
-                      style="width: 60px; height: 60px; border-radius: 4px; border: 1px solid #eee; cursor: pointer;"
-                      @click="uni.previewImage({ current: img, urls: data.images })"
+                      style="
+                        width: 60px;
+                        height: 60px;
+                        border-radius: 4px;
+                        border: 1px solid #eee;
+                        cursor: pointer;
+                      "
+                      @click="handlePreviewImage(img, data.images)"
                     />
                   </view>
                 </view>
@@ -215,16 +250,31 @@
                   v-if="data.videos && data.videos.length > 0"
                 >
                   <text class="item-label">巡查视频：</text>
-                  <view class="item-value" style="display: flex; flex-wrap: wrap; gap: 8px;">
+                  <view
+                    class="item-value"
+                    style="display: flex; flex-wrap: wrap; gap: 8px"
+                  >
                     <view
                       v-for="(video, vIdx) in data.videos"
                       :key="vIdx"
-                      style="width: 80px; height: 60px; position: relative; border-radius: 4px; overflow: hidden; border: 1px solid #eee; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #000;"
-                      @click="uni.previewMedia ? uni.previewMedia({ sources: data.videos.map(v => ({ url: v, type: 'video' })), current: vIdx }) : uni.showToast({ title: '当前平台不支持视频预览', icon: 'none' })"
+                      style="
+                        width: 80px;
+                        height: 60px;
+                        position: relative;
+                        border-radius: 4px;
+                        overflow: hidden;
+                        border: 1px solid #eee;
+                        cursor: pointer;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        background: #000;
+                      "
+                      @click="handlePreviewVideo(data.videos, vIdx)"
                     >
                       <video
                         :src="video"
-                        style="width: 100%; height: 100%; object-fit: cover;"
+                        style="width: 100%; height: 100%; object-fit: cover"
                         :controls="false"
                         :show-center-play-btn="false"
                         :show-play-btn="false"
@@ -237,8 +287,23 @@
                         :muted="true"
                         :poster="''"
                       ></video>
-                      <view style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
-                        <u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
+                      <view
+                        style="
+                          position: absolute;
+                          left: 0;
+                          top: 0;
+                          width: 100%;
+                          height: 100%;
+                          display: flex;
+                          align-items: center;
+                          justify-content: center;
+                        "
+                      >
+                        <u-icon
+                          name="play-right-fill"
+                          color="#fff"
+                          size="28"
+                        ></u-icon>
                       </view>
                     </view>
                   </view>
@@ -338,14 +403,14 @@ const xcBeforeMinute = ref<number>(0);
 let inspectionParams = ref({
   rows: 10,
   xkkcId: xkkc.value.id,
-  jsId: js.value.id
+  jsId: js.value.id,
 });
 
 // 巡查记录列表
 const [registerInspection, { reload }] = useLayout({
   api: xkXcFindPageApi,
   componentProps: {},
-  param: inspectionParams.value
+  param: inspectionParams.value,
 });
 
 // 加载巡查项目
@@ -356,8 +421,8 @@ const loadCheckItems = async () => {
       checkItems.value = res.result.map((item: any) => {
         return {
           ...item,
-          checked: false
-        }
+          checked: false,
+        };
       });
     } else {
       // 如果API调用失败，使用默认数据
@@ -450,6 +515,10 @@ const confirmStatus = (e: any) => {
   statusPickerVisible.value = false;
 };
 
+const onCheckItemChange = (e: any, item: any) => {
+  item.checked = e.detail.value === "A";
+};
+
 // 处理图片上传
 const handleImageUploadSuccess = (res: any) => {
   console.log("图片上传成功:", res);
@@ -460,6 +529,28 @@ const handleVideoUploadSuccess = (res: any) => {
   console.log("视频上传成功:", res);
 };
 
+// 图片预览
+const handlePreviewImage = (img: string, images: string[]) => {
+  // 兼容uni-app的图片预览API
+  uni.previewImage({
+    current: img,
+    urls: images,
+  });
+};
+
+// 视频预览
+const handlePreviewVideo = (videos: string[], index: number) => {
+  // 兼容uni-app的视频预览API
+  // uni.previewMedia 仅在H5/小程序/APP支持
+  uni.previewMedia({
+    current: index,
+    sources: videos.map((url) => ({
+      url,
+      type: "video",
+    })),
+  });
+};
+
 // 切换tab
 const onTabClick = (e: any) => {
   currentTab.value = e.currentIndex;
@@ -552,7 +643,7 @@ const submit = async () => {
       const newItem = {
         ...item,
         xcXmId: item.id,
-        xcJg: item.checked ? "A" : "B",      
+        xcJg: item.checked ? "A" : "B",
         xkXcId: "", // 这个会在后端设置
       };
       newItem.id = "";
@@ -801,7 +892,7 @@ onMounted(async () => {
     .item-score-result {
       display: flex;
       align-items: center;
-      justify-content: space-between;;
+      justify-content: space-between;
     }
 
     &:first-child {
@@ -841,7 +932,7 @@ onMounted(async () => {
 .inspection-list {
   position: relative;
   height: calc(100vh - 50px);
-  
+
   .inspection-record {
     .record-header {
       display: flex;