|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<popup class="price-sheet-popup" v-model:show="showPopup">
|
|
<popup class="price-sheet-popup" v-model:show="showPopup">
|
|
|
<div class="price-sheet-content">
|
|
<div class="price-sheet-content">
|
|
|
- <div class="price-sheet-content-inner">
|
|
|
|
|
|
|
+ <div class="price-sheet-content-inner" ref="contentEl">
|
|
|
<!-- 顶部标题区域 -->
|
|
<!-- 顶部标题区域 -->
|
|
|
<div class="header-section">
|
|
<div class="header-section">
|
|
|
<div class="header-left">
|
|
<div class="header-left">
|
|
@@ -82,11 +82,11 @@
|
|
|
<div class="detail-label">执行方式</div>
|
|
<div class="detail-label">执行方式</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="detail-item">
|
|
<div class="detail-item">
|
|
|
- <div class="detail-value">{{ (priceData?.farmWorkServiceCost + '元/亩') || '--元/亩' }}</div>
|
|
|
|
|
|
|
+ <div class="detail-value">{{ (priceData?.farmWorkServiceCost ? priceData.farmWorkServiceCost + '元/亩' : '--') }}</div>
|
|
|
<div class="detail-label">亩单价</div>
|
|
<div class="detail-label">亩单价</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="detail-item">
|
|
<div class="detail-item">
|
|
|
- <div class="detail-value">{{ quotationData?.area ? (quotationData?.area + '亩') : '--' }}</div>
|
|
|
|
|
|
|
+ <div class="detail-value">{{ quotationData?.area ? (formatArea(quotationData?.area) + '亩') : '--' }}</div>
|
|
|
<div class="detail-label">亩数</div>
|
|
<div class="detail-label">亩数</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -112,7 +112,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<span class="btn-label">微信</span>
|
|
<span class="btn-label">微信</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="action-btn orange-btn" @click.stop="handleSaveImage">
|
|
|
|
|
|
|
+ <div class="action-btn orange-btn">
|
|
|
<div class="icon-circle">
|
|
<div class="icon-circle">
|
|
|
<el-icon :size="24"><Download /></el-icon>
|
|
<el-icon :size="24"><Download /></el-icon>
|
|
|
</div>
|
|
</div>
|
|
@@ -130,9 +130,11 @@ import { Popup } from "vant";
|
|
|
import { ref, computed } from "vue";
|
|
import { ref, computed } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
import wx from "weixin-js-sdk";
|
|
import wx from "weixin-js-sdk";
|
|
|
|
|
+import html2canvas from "html2canvas";
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
const showPopup = ref(false);
|
|
const showPopup = ref(false);
|
|
|
|
|
+const contentEl = ref(null);
|
|
|
|
|
|
|
|
// 报价数据
|
|
// 报价数据
|
|
|
const quotationData = ref({});
|
|
const quotationData = ref({});
|
|
@@ -186,6 +188,12 @@ const processedPrescriptionList = computed(() => {
|
|
|
return result;
|
|
return result;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+function formatArea(val) {
|
|
|
|
|
+ const num = typeof val === 'number' ? val : parseFloat(val);
|
|
|
|
|
+ if (Number.isNaN(num)) return val;
|
|
|
|
|
+ return Number.isInteger(num) ? num : num.toFixed(2);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const handleShowPopup = (data) => {
|
|
const handleShowPopup = (data) => {
|
|
|
if (data) {
|
|
if (data) {
|
|
|
quotationData.value = data;
|
|
quotationData.value = data;
|
|
@@ -217,15 +225,75 @@ const handleWechat = () => {
|
|
|
// path: "/completed_work",
|
|
// path: "/completed_work",
|
|
|
// query: { id: quotationData.value.id, farmWorkOrderId: quotationData.value.orderId, isAssign: true },
|
|
// query: { id: quotationData.value.id, farmWorkOrderId: quotationData.value.orderId, isAssign: true },
|
|
|
// });
|
|
// });
|
|
|
- const query = { shareText: "向您发送了一张 服务报价单", id: quotationData.value.id, farmWorkOrderId: quotationData.value.orderId, isAssign: true }
|
|
|
|
|
|
|
+ const query = { askInfo: {title: "服务报价单", content: "是否分享该服务报价单给好友"}, shareText: "向您发送了一张 服务报价单", id: quotationData.value.id, farmWorkOrderId: quotationData.value.orderId, isAssign: true }
|
|
|
|
|
|
|
|
wx.miniProgram.navigateTo({
|
|
wx.miniProgram.navigateTo({
|
|
|
url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=priceSheet`,
|
|
url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=priceSheet`,
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const handleSaveImage = () => {
|
|
|
|
|
- console.log("handleSaveImage");
|
|
|
|
|
|
|
+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';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 计算完整尺寸
|
|
|
|
|
+ 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;
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.error('保存图片失败', e);
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleEdit = () => {
|
|
const handleEdit = () => {
|