|
|
@@ -69,7 +69,7 @@
|
|
|
|
|
|
<div class="bottom-btn">
|
|
|
<div class="btn-item second" @click="handleDownload">保存图片</div>
|
|
|
- <div class="btn-item primay">转发</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">
|
|
|
+ <<长按图片保存或转发>>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cancel-btn" @click="handleCancel">取消</div>
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -113,13 +129,15 @@ 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";
|
|
|
|
|
|
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;
|
|
|
@@ -129,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();
|
|
|
});
|
|
|
@@ -158,6 +175,7 @@ const getDetail = () => {
|
|
|
|
|
|
const isDowload = ref(true);
|
|
|
const reportDom = ref(null);
|
|
|
+const pageImg = ref(null);
|
|
|
|
|
|
async function handleDownload() {
|
|
|
isDowload.value = false;
|
|
|
@@ -178,32 +196,20 @@ async function handleDownload() {
|
|
|
|
|
|
// 转换为图片并下载
|
|
|
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;
|
|
|
@@ -304,6 +310,65 @@ function coverImageToBase64HD(imgUrl, cssWidth, cssHeight) {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+const userInfoStr = localStorage.getItem("localUserInfo");
|
|
|
+const userInfo = userInfoStr ? JSON.parse(userInfoStr) : {};
|
|
|
+
|
|
|
+async function handleForward() {
|
|
|
+ setTimeout(async () => {
|
|
|
+ // 获取要截图的DOM元素
|
|
|
+ const element = reportDom.value;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const canvas = await html2canvas(element, {
|
|
|
+ scrollY: -window.scrollY, // 处理滚动条位置
|
|
|
+ allowTaint: true, // 允许跨域图片
|
|
|
+ useCORS: true, // 使用CORS
|
|
|
+ scale: 2, // 提高分辨率（2倍）
|
|
|
+ height: element.scrollHeight, // 设置完整高度
|
|
|
+ width: element.scrollWidth, // 设置完整宽度
|
|
|
+ logging: true, // 开启日志（调试用）
|
|
|
+ });
|
|
|
+
|
|
|
+ // 转换为图片并下载
|
|
|
+ const image = canvas.toDataURL("image/png");
|
|
|
+ const process = detectRuntimeEnvironment();
|
|
|
+ // if (process === "wechat-webview") {
|
|
|
+ const imgUrl = await uploadBase64(image, false);
|
|
|
+ const params = {
|
|
|
+ val: 'share',
|
|
|
+ key: "report",
|
|
|
+ };
|
|
|
+ VE_API.mine.saveSessionStore({ ...params, text: imgUrl }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: `/pages/subPages/report_page/index`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ isDowload.value = true;
|
|
|
+ } catch (error) {
|
|
|
+ isDowload.value = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // const image = await handleDownload(true);
|
|
|
+ // const imgUrl = await uploadBase64(image, false);
|
|
|
+ // const params = {
|
|
|
+ // miniUserId: 766,
|
|
|
+ // key: "report",
|
|
|
+ // };
|
|
|
+ // VE_API.mine.saveSessionStore({ ...params, text: imgUrl }).then((res) => {
|
|
|
+ // if (res.success) {
|
|
|
+ // wx.miniProgram.navigateTo({
|
|
|
+ // url: `/pages/subPages/report_page/index`,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+}
|
|
|
+
|
|
|
watch(
|
|
|
() => [workItem.value.executeEvidence, workItem.value.reviewImage],
|
|
|
([preImgs, reviewImgs]) => {
|
|
|
@@ -623,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>
|
wangsisi