fix: 复核报告

src/views/old_mini/achievement_report/index.vue

@@ -69,7 +69,7 @@
 
             <div class="bottom-btn">
                 <div class="btn-item second" @click="handleDownload">保存图片</div>
-                <div class="btn-item primay" @click="handleForward">转发</div>
+                <div class="btn-item primay" @click="handleDownload">转发</div>
             </div>
         </div>
 
@@ -103,6 +103,22 @@
             </div>
         </div>
     </div>
+
+    <popup class="cavans-popup" v-model:show="showPopup">
+        <div class="cavans-content">
+            <img class="current-img" :src="pageImg" alt="" />
+        </div>
+        <!-- 底部操作按钮 -->
+        <div class="bottom-actions" @click.stop="showPopup = false">
+            <div class="action-buttons">
+                
+                <div class="action-btn text-btn">
+                    &lt;&lt;长按图片保存或转发&gt;&gt;
+                </div>
+            </div>
+            <div class="cancel-btn" @click="handleCancel">取消</div>
+        </div>
+    </popup>
 </template>
 
 <script setup>
@@ -113,6 +129,7 @@ import html2canvas from "html2canvas";
 import { uploadBase64 } from "@/common/uploadImg";
 import { detectRuntimeEnvironment } from "@/common/commonFun";
 import { useRoute } from "vue-router";
+import { Popup } from "vant";
 import { base_img_url2 } from "@/api/config";
 import wx from "weixin-js-sdk";
 import AlbumDrawBox from "@/components/album_compoents/albumDrawBox.vue";
@@ -120,7 +137,7 @@ import AlbumDrawBox from "@/components/album_compoents/albumDrawBox.vue";
 const route = useRoute();
 const loading = ref(false);
 const workItem = ref({});
-
+const showPopup = ref(false);
 function formatArea(val) {
     const num = typeof val === "number" ? val : parseFloat(val);
     if (Number.isNaN(num)) return val;
@@ -130,7 +147,6 @@ const paramsPage = ref({});
 onActivated(() => {
     window.scrollTo(0, 0);
     paramsPage.value = route.query.miniJson ? JSON.parse(route.query.miniJson) : {};
-    console.log('paramsPage', paramsPage.value);
     getDetail();
     getResultReport();
 });
@@ -159,8 +175,9 @@ const getDetail = () => {
 
 const isDowload = ref(true);
 const reportDom = ref(null);
+const pageImg = ref(null);
 
-async function handleDownload(isShare = false) {
+async function handleDownload() {
     isDowload.value = false;
     setTimeout(async () => {
         // 获取要截图的DOM元素
@@ -179,32 +196,20 @@ async function handleDownload(isShare = false) {
 
             // 转换为图片并下载
             const image = canvas.toDataURL("image/png");
-            const process = detectRuntimeEnvironment();
-            if (process === "wechat-webview") {
-                const imgUrl = await uploadBase64(image, false);
-                const params = {
-                    miniUserId: 766,
-                    key: "report",
-                };
-                // VE_API.garden.editPopSave({ ...params, text: imgUrl }).then((res) => {
-                //     if (res.success) {
-                //         wx.miniProgram.navigateTo({
-                //             url: `/pages/subPages/report_page/index`,
-                //         });
-                //     } else {
-                //         ElMessage.error("保存失败");
-                //     }
-                // });
-            } else {
-                downloadImage(image, "成果报告");
-            }
-            isDowload.value = true;
+            pageImg.value = image;
+            nextTick(() => {
+                showPopup.value = true;
+            })
         } catch (error) {
             isDowload.value = true;
         }
     });
 }
 
+const handleCancel = () => {
+    showPopup.value = false;
+};
+
 function downloadImage(dataUrl, filename) {
     const link = document.createElement("a");
     link.href = dataUrl;
@@ -683,4 +688,90 @@ onUnmounted(() => {
         }
     }
 }
+
+
+.cavans-popup {
+    width: 100%;
+    max-width: 100%;
+    max-height: 92vh;
+    background: none;
+    border-radius: 12px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: 4px;
+    .cavans-content {
+        text-align: center;
+        padding: 0 12px;
+        height: fit-content;
+        overflow: auto;
+        .current-img {
+            width: 100%;
+        }
+    }
+
+    // 底部操作按钮
+    .bottom-actions {
+        flex-shrink: 0;
+
+        .action-buttons {
+            padding: 12px 0 4px 0;
+            display: flex;
+            justify-content: space-around;
+
+            .action-btn {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                cursor: pointer;
+                &.text-btn {
+                    font-size: 12px;
+                    color: rgba(255, 255, 255, 0.7);
+                }
+
+                .icon-circle {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #fff;
+                    margin-bottom: 4px;
+
+                    .el-icon {
+                        color: #fff;
+                    }
+                    img {
+                        width: 50px;
+                    }
+                }
+
+                &.blue-btn .icon-circle {
+                    background: #2199f8;
+                }
+
+                &.green-btn .icon-circle {
+                    background: #07c160;
+                }
+
+                &.orange-btn .icon-circle {
+                    background: #ff790b;
+                }
+
+                .btn-label {
+                    font-size: 12px;
+                    color: #fff;
+                }
+            }
+        }
+
+        .cancel-btn {
+            text-align: center;
+            font-size: 18px;
+            color: #fff;
+            cursor: pointer;
+        }
+    }
+}
 </style>