|
|
@@ -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">
|
|
|
+ <<长按图片保存或转发>>
|
|
|
+ </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>
|