fix: 详情二维码弹窗

src/router/globalRoutes.js

@@ -423,6 +423,7 @@ export default [
     {
         path: "/status_detail",
         name: "StatusDetail",
+        meta: { keepAlive: true },
         component: () => import("@/views/old_mini/agri_record/subPages/statusDetail.vue"),
     },
 ];

src/views/old_mini/agri_record/subPages/statusDetail.vue

@@ -10,12 +10,14 @@
                         <div class="status-icon">
                             <el-icon :size="24" color="#fff"><Warning /></el-icon>
                         </div>
-                        <span>等待执行</span>
+                        <span v-show="status === 0">未执行</span>
+                        <span v-show="status === 1">等待执行</span>
+                        <span v-show="status === 2">已执行未认证</span>
                     </div>
                     <div class="status-sub-text">距离执行时间还差一天</div>
                 </div>
             </div>
-    
+
             <div class="card-wrap">
                 <!-- 内容卡片 -->
                 <div class="card-box content-card">
@@ -26,7 +28,7 @@
                         </div>
                         <div class="forward-link" @click="handleForward">转发处方</div>
                     </div>
-    
+
                     <div class="card-info">
                         <div class="info-item">
                             <span class="info-label">下发专家</span>
@@ -41,13 +43,13 @@
                             <span class="info-value">内膛喷施</span>
                         </div>
                     </div>
-    
+
                     <div class="card-actions">
                         <div class="action-btn" @click="handleViewPrescription">查看药物处方</div>
                         <div class="action-btn" @click="handleViewArea">查看执行区域</div>
                     </div>
                 </div>
-    
+
                 <div class="card-box action-video">
                     <div class="card-header">
                         <div class="card-title-wrap">
@@ -67,25 +69,60 @@
                         ></video>
                     </div>
                 </div>
-    
+
                 <!-- 执行档案 -->
                 <div class="card-box execution-file">
                     <div class="card-header">
                         <div class="card-title-wrap">
                             <div class="card-title">执行档案</div>
                         </div>
-                        <div class="forward-link" @click="handleForward">邀请拍照</div>
+                        <div class="forward-link" @click="handleShowQrCodePopup(1)">邀请拍照</div>
                     </div>
                     <div class="exe-upload">
                         <upload ref="uploadRef" exampleImg class="upload-wrap" @handleUpload="handleUpload">
                             <img class="example" src="@/assets/img/home/example-4.png" alt="" />
-                            <img class="example" src="@/assets/img/home/plus.png" alt="">
+                            <img class="example" src="@/assets/img/home/plus.png" alt="" />
+                        </upload>
+                    </div>
+                    <div class="no-text">暂未检测到拍照</div>
+                </div>
+
+                <!-- 执行轨迹 -->
+                <div class="card-box execution-file">
+                    <div class="card-header">
+                        <div class="card-title-wrap">
+                            <div class="card-title">执行轨迹</div>
+                        </div>
+                        <div class="forward-link" @click="handleShowQrCodePopup(2)">转发执行二维码</div>
+                    </div>
+                    <div class="exe-upload">
+                        <upload :key="2" ref="uploadRef2" exampleImg class="upload-wrap" @handleUpload="handleUpload2">
+                            <img class="example" src="@/assets/img/home/example-4.png" alt="" />
+                            <img class="example" src="@/assets/img/home/plus.png" alt="" />
                         </upload>
                     </div>
                     <div class="no-text">暂未检测到拍照</div>
                 </div>
             </div>
         </div>
+
+        <!-- 二维码弹窗 -->
+        <popup v-model:show="showQrCodePopup" closeable class="code-popup">
+            <div class="code-popup-wrap">
+                <div class="qr-code-content">
+                    <img class="qr-code-img" src="@/assets/img/home/qrcode.png" alt="" />
+                </div>
+                <div class="text-wrap">
+                    <div class="qr-code-text">
+                        此二维码为
+                        <span v-if="qrCodeType === 1"><span class="work-name">梢期杀虫</span> 执行码</span>
+                        <span v-if="qrCodeType === 2"><span class="work-name">梢期杀虫</span> 上传执行照片邀请码</span>
+                    </div>
+                    <div class="qr-code-text">有效期：2025.07.15之前</div>
+                </div>
+                <div class="code-tips">&lt;&lt;长按二维码保存或转发&gt;&gt;</div>
+            </div>
+        </popup>
     </div>
 </template>
 
@@ -95,6 +132,7 @@ import { ref } from "vue";
 import customHeader from "@/components/customHeader.vue";
 import { Warning } from "@element-plus/icons-vue";
 import upload from "@/components/upload";
+import { Popup } from "vant";
 
 const router = useRouter();
 
@@ -120,18 +158,30 @@ const handleViewArea = () => {
 };
 
 const uploadRef = ref(null);
+const uploadRef2 = ref(null);
 const images = ref([]);
-
+const images2 = ref([]);
 const handleUpload = ({ imgArr }) => {
     images.value = imgArr;
 };
+
+const handleUpload2 = ({ imgArr }) => {
+    images2.value = imgArr;
+};
+
+const qrCodeType = ref(null);
+const showQrCodePopup = ref(false);
+const handleShowQrCodePopup = (type) => {
+    qrCodeType.value = type;
+    showQrCodePopup.value = true;
+};
 </script>
 
 <style lang="scss" scoped>
 .status-detail {
     height: 100vh;
     width: 100%;
-    background: #F2F3F5;
+    background: #f2f3f5;
     .detail-content {
         height: calc(100% - 44px);
         overflow: auto;
@@ -300,10 +350,10 @@ const handleUpload = ({ imgArr }) => {
 .execution-file {
     margin-top: 10px;
     padding: 10px;
-    
+
     .exe-upload {
         padding-top: 4px;
-        
+
         .upload-wrap {
             .example {
                 width: 80px;
@@ -321,7 +371,45 @@ const handleUpload = ({ imgArr }) => {
         line-height: 24px;
         height: 24px;
         text-align: center;
-        padding: 10px 0;
+        padding: 16px 0 6px 0;
+    }
+}
+
+.code-popup {
+    width: 330px;
+    border-radius: 8px;
+    padding: 36px 10px 20px 10px;
+    box-sizing: border-box;
+    background: linear-gradient(360deg, #ffffff 74.2%, #d1ebff 100%);
+    ::v-deep {
+        .van-popup__close-icon {
+            color: #333333;
+        }
+    }
+    .code-popup-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .text-wrap {
+            padding: 8px 0 36px 0;
+            .qr-code-text {
+                font-size: 14px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.6);
+                text-align: center;
+            }
+        }
+        .code-tips {
+            color: #666666;
+            font-size: 14px;
+        }
+    }
+    .qr-code-content {
+        .qr-code-img {
+            width: 197px;
+            min-height: 197px;
+        }
     }
 }
 </style>