Bläddra i källkod

fix: 忽略权限,保存

刘秀芳 17 timmar sedan
förälder
incheckning
b7fc932258

+ 2 - 1
src/components/pageComponents/AgriculturalInteractionCard.vue

@@ -10,7 +10,7 @@
                 <div class="date">
                     <span class="work-name">{{ timelineItem.farmWorkName }}</span>
                     <!-- <span v-show="timelineItem.expectedRisk">({{ timelineItem.expectedRisk }})</span> -->
-                    <span class="ignore-btn" @click="handleIgnore(item,timelineItem)"> 忽略 </span>
+                    <span class="ignore-btn" v-if="hasPlanPermission" @click="handleIgnore(item,timelineItem)"> 忽略 </span>
                 </div>
                 <div class="text">
                     预计报价<span class="price">{{ timelineItem.estimatedCost }}元</span>
@@ -206,6 +206,7 @@ const showPriceSheetPopup = (id, item) => {
     }
 }
 .task-tips-popup {
+    z-index: 1000 !important;
     width: 90%;
     padding: 28px 28px 20px;
     display: flex;

+ 181 - 60
src/components/popup/priceSheetPopup.vue

@@ -124,11 +124,27 @@
             </div>
         </div>
     </popup>
+
+    <!-- 图片预览弹窗 -->
+    <popup class="sheet-cavans-popup" v-model:show="showImagePopup">
+        <div class="cavans-content">
+            <img class="current-img" :src="pageImg" alt="" />
+        </div>
+        <!-- 底部操作按钮 -->
+        <div class="bottom-actions" @click.stop="showImagePopup = false">
+            <div class="action-buttons">
+                <div class="action-btn text-btn">
+                    &lt;&lt;长按图片保存或转发&gt;&gt;
+                </div>
+            </div>
+            <div class="cancel-btn" @click="handleCancelImage">取消</div>
+        </div>
+    </popup>
 </template>
 
 <script setup>
 import { Popup } from "vant";
-import { ref, computed, onActivated, watch } from "vue";
+import { ref, computed, onActivated, watch, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import wx from "weixin-js-sdk";
@@ -139,7 +155,9 @@ import PriceTable from "@/views/old_mini/agri_work/components/priceTable.vue";
 const router = useRouter();
 const route = useRoute();
 const showPopup = ref(false);
+const showImagePopup = ref(false);
 const contentEl = ref(null);
+const pageImg = ref(null);
 
 // 报价数据
 const quotationData = ref({});
@@ -310,67 +328,77 @@ const serviceCostTotal = computed(() => {
 });
 
 const handleSaveImage = async () => {
-    try {
-        if (!contentEl.value) return;
-        const element = contentEl.value;
-        const scroller = element.querySelector('.sheet-content');
-
-        // 记录原样式
-        const prev = {
-            elementOverflow: element.style.overflow,
-            elementMaxHeight: element.style.maxHeight,
-            elementHeight: element.style.height,
-            scrollerOverflow: scroller ? scroller.style.overflow : undefined,
-            scrollerMaxHeight: scroller ? scroller.style.maxHeight : undefined,
-            scrollerHeight: scroller ? scroller.style.height : undefined,
-        };
-
-        // 展开内容,去除滚动限制,确保截图包含全部内容
-        element.style.overflow = 'visible';
-        element.style.maxHeight = 'none';
-        element.style.height = 'auto';
-        if (scroller) {
-            scroller.style.overflow = 'visible';
-            scroller.style.maxHeight = 'none';
-            scroller.style.height = 'auto';
-        }
+    setTimeout(async () => {
+        try {
+            if (!contentEl.value) return;
+            const element = contentEl.value;
+            const scroller = element.querySelector('.sheet-content');
+            const editBtn = element.querySelector('.edit-btn-box');
+
+            // 记录原样式
+            const prev = {
+                elementOverflow: element.style.overflow,
+                elementMaxHeight: element.style.maxHeight,
+                elementHeight: element.style.height,
+                scrollerOverflow: scroller ? scroller.style.overflow : undefined,
+                scrollerMaxHeight: scroller ? scroller.style.maxHeight : undefined,
+                scrollerHeight: scroller ? scroller.style.height : undefined,
+                editBtnDisplay: editBtn ? editBtn.style.display : undefined,
+            };
+
+            // 隐藏编辑按钮
+            if (editBtn) {
+                editBtn.style.display = 'none';
+            }
+
+            // 展开内容,去除滚动限制,确保截图包含全部内容
+            element.style.overflow = 'visible';
+            element.style.maxHeight = 'none';
+            element.style.height = 'auto';
+            if (scroller) {
+                scroller.style.overflow = 'visible';
+                scroller.style.maxHeight = 'none';
+                scroller.style.height = 'auto';
+            }
 
-        // 计算完整尺寸
-        const width = element.scrollWidth;
-        const height = element.scrollHeight;
-
-        const canvas = await html2canvas(element, {
-            backgroundColor: '#ffffff',
-            useCORS: true,
-            allowTaint: true,
-            scale: Math.min(2, window.devicePixelRatio || 2),
-            width,
-            height,
-            windowWidth: width,
-            windowHeight: height,
-            scrollX: 0,
-            scrollY: 0,
-        });
-        const dataUrl = canvas.toDataURL('image/png');
-        const link = document.createElement('a');
-        link.href = dataUrl;
-        link.download = '服务报价单.png';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-
-        // 还原样式
-        element.style.overflow = prev.elementOverflow;
-        element.style.maxHeight = prev.elementMaxHeight;
-        element.style.height = prev.elementHeight;
-        if (scroller) {
-            scroller.style.overflow = prev.scrollerOverflow;
-            scroller.style.maxHeight = prev.scrollerMaxHeight;
-            scroller.style.height = prev.scrollerHeight;
+            handleCancel()
+
+            // 等待样式应用
+            await nextTick();
+
+            const canvas = await html2canvas(element, {
+                scrollY: -window.scrollY, // 处理滚动条位置
+                allowTaint: true, // 允许跨域图片
+                useCORS: true, // 使用CORS
+                scale: 2, // 提高分辨率(2倍)
+                height: element.scrollHeight, // 设置完整高度
+                width: element.scrollWidth, // 设置完整宽度
+                backgroundColor: '#ffffff',
+            });
+
+            // 转换为图片并显示
+            const image = canvas.toDataURL('image/png');
+            pageImg.value = image;
+            nextTick(() => {
+                showImagePopup.value = true;
+            });
+
+            // 还原样式
+            element.style.overflow = prev.elementOverflow;
+            element.style.maxHeight = prev.elementMaxHeight;
+            element.style.height = prev.elementHeight;
+            if (scroller) {
+                scroller.style.overflow = prev.scrollerOverflow;
+                scroller.style.maxHeight = prev.scrollerMaxHeight;
+                scroller.style.height = prev.scrollerHeight;
+            }
+            if (editBtn) {
+                editBtn.style.display = prev.editBtnDisplay || '';
+            }
+        } catch (e) {
+            // 保存图片失败
         }
-    } catch (e) {
-        // 保存图片失败
-    }
+    }, 100);
 };
 
 // 检查是否有"转入农事"权限
@@ -429,6 +457,10 @@ const handleCancel = () => {
     showPopup.value = false;
 };
 
+const handleCancelImage = () => {
+    showImagePopup.value = false;
+};
+
 defineExpose({
     handleShowPopup,
 });
@@ -844,4 +876,93 @@ defineExpose({
         cursor: pointer;
     }
 }
+
+.sheet-cavans-popup {
+    width: calc(100% - 20px);
+    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;
+        height: fit-content;
+        overflow: auto;
+        .current-img {
+            max-width: 100%;
+            width: auto;
+            height: auto;
+            display: block;
+            margin: 0 auto;
+        }
+    }
+
+    // 底部操作按钮
+    .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>