feiniao-farm-h5/src/views/old_mini/task_condition/components/reviewPopup.vue

<template>
    <popup class="price-sheet-popup" v-model:show="showPopup">
        <div class="price-sheet-content">
            <div class="price-sheet-content-inner">
                <div class="sheet-content">
                    <div class="review-image">
                        <div class="vs-wrap" v-if="preImg">
                            <img src="@/assets/img/home/vs.png" alt="" />
                        </div>
                        <div class="review-image-item" v-if="preImg">
                            <div class="review-image-item-title">农事前</div>
                            <img class="review-image-item-img" :src="preImg" alt="" />
                        </div>
                        <div class="review-image-item" v-if="resImg">
                            <div class="review-image-item-title">农事后</div>
                            <img class="review-image-item-img" :src="resImg" alt="" />
                        </div>
                    </div>
                    <!-- 报价详情区域 -->
                    <div class="quotation-info">
                        <div class="info-item">
                            <span class="info-label">执行农资</span>
                            <span class="info-value">{{ quotationData.serviceMain || "--" }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">农事名称</span>
                            <span class="info-value">{{ quotationData?.farmWorkName || "--" }}</span>
                        </div>
                        <div class="info-item flex-wrap">
                            <div class="info-label">复核成效</div>
                            <div class="info-value">
                                促进分蘖芽萌发、加快分蘖生长，同时补充氮素等关键养分，增强植株长势，为形成足够穗数、提高群体产量打基础。
                            </div>
                        </div>
                    </div>

                    <div class="bottom-info">
                        <div class="bottom-l">
                            <div class="l-img">
                                <img src="@/assets/img/home/bird.png" alt="" />
                            </div>
                            <div class="l-text">
                                <div class="l-text-title">飞鸟管家</div>
                                <div class="l-text-time">扫描二维码，查看更多详情</div>
                            </div>
                        </div>
                        <div class="bottom-r">
                            <img src="@/assets/img/home/qrcode.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作按钮 -->
            <div class="bottom-actions" @click.stop="showPopup = false">
                <div class="action-buttons">
                    <div class="action-btn blue-btn" @click.stop="handleShare">
                        <div class="icon-circle">
                            <img src="@/assets/img/home/bird.png" alt="" />
                        </div>
                        <span class="btn-label">飞鸟用户</span>
                    </div>
                    <div class="action-btn green-btn" @click.stop="handleWechat">
                        <div class="icon-circle">
                            <img src="@/assets/img/home/wechat.png" alt="" />
                        </div>
                        <span class="btn-label">微信</span>
                    </div>
                    <div class="action-btn orange-btn">
                        <div class="icon-circle">
                            <el-icon :size="24"><Download /></el-icon>
                        </div>
                        <span class="btn-label">保存图片</span>
                    </div>
                </div>
                <div class="cancel-btn" @click="handleCancel">取消</div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref, computed, onActivated } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import wx from "weixin-js-sdk";
import html2canvas from "html2canvas";

const router = useRouter();
const showPopup = ref(false);
const contentEl = ref(null);
const preImg = ref("");
const resImg = ref("");
// 报价数据
const quotationData = ref({});

onActivated(() => {});
const recordId = ref("");
const handleShowPopup = async (id, preImgVal, resImgVal) => {
    recordId.value = id;
    await getDetail();
    preImg.value = preImgVal;
    resImg.value = resImgVal;
    showPopup.value = true;
};

async function getDetail() {
    const { data } = await VE_API.z_farm_work_record.getDetail({ id: recordId.value });
    quotationData.value = data[0];
}

const handleShare = () => {
    const userId = quotationData.value.users[0]?.userId;
    const parmasPage = {
        farmWorkOrderId: quotationData.value.orderId,
        farmMiniUserId: userId,
        farmMiniUserName: quotationData.value.expertUserName,
        farmId: quotationData.value.farmId,
        farmWorkName: quotationData.value.farmWorkName,
        id: quotationData.value.id,
        type: "quotation",
    };
    if (userId) {
        router.push(
            `/chat_frame?userId=${userId}&name=${parmasPage.farmMiniUserName}&farmId=${
                parmasPage.farmId
            }&pageParams=${JSON.stringify(parmasPage)}`
        );
    } else {
        ElMessage.warning("尚未绑定用户,暂时无法分享");
    }
};

const handleWechat = () => {
    console.log("handleWechat");
    // router.push({
    //     path: "/completed_work",
    //     query: { id: quotationData.value.id, farmWorkOrderId: quotationData.value.orderId, isAssign: true },
    // });
    const query = {
        askInfo: { title: "农事执行成果", content: "是否分享该农事执行成果给好友" },
        shareText: "向您分享了农事执行成果",
        id: recordId.value,
        postImg: resImg.value,
    };

    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=reviewWork`,
    });
};

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 handleCancel = () => {
    showPopup.value = false;
};

defineExpose({
    handleShowPopup,
});
</script>

<style lang="scss" scoped>
.price-sheet-popup {
    width: 90%;
    max-height: 84vh;
    background: none;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: 4px;

    ::v-deep {
        .van-popup__close-icon {
            color: #000;
            font-size: 18px;
            top: 12px;
            right: 12px;
        }
    }
}

.price-sheet-content {
    display: flex;
    flex-direction: column;
    max-height: 84vh;
    // height: 95vh;
    .price-sheet-content-inner {
        background: #fff;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
}

.sheet-content {
    padding: 12px 12px 10px 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
.bottom-info {
    padding: 16px 16px 16px 16px;
    border-top: 1px dotted rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-l {
        display: flex;
        align-items: center;
        gap: 8px;
        .l-img {
            img {
                width: 40px;
            }
        }
        .l-text-time {
            font-size: 12px;
        }
    }
    .bottom-r {
        width: 40px;
        height: 40px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.review-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    .vs-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        z-index: 10;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .review-image-item {
        position: relative;
        flex: 1;
        .review-image-item-title {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(54, 52, 52, 0.6);
            padding: 4px 10px;
            border-radius: 8px 0 8px 0;
            backdrop-filter: 4px;
            font-size: 12px;
            color: #fff;
        }
        .review-image-item-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
    }
}

// 报价详情区域
.quotation-info {
    margin-top: 12px;

    .flex-wrap {
        display: flex;
        .info-label {
            flex: none;
        }
    }

    .info-item {
        font-size: 14px;
        color: #000;
        margin-bottom: 8px;

        .info-label {
            padding-right: 8px;
            color: rgba(0, 0, 0, 0.5);
        }

        .info-value {
            color: #000;
        }

        &.catalog-label {
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
            position: relative;

            .info-label {
                color: #000;
            }
        }
    }

    .total-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(33, 153, 248, 0.1);
        border: 1px solid rgba(33, 153, 248, 0.5);
        height: 38px;
        border-radius: 4px;

        .total-label {
            font-size: 14px;
            color: #000000;
        }

        .total-value {
            font-size: 22px;
            font-weight: bold;
            color: #2199f8;
        }

        .total-unit {
            font-size: 14px;
            color: #000;
            margin-left: 4px;
        }
    }
}

// 肥药费用区域
.fertilizer-cost-section {
    margin-bottom: 10px;

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .section-title {
            font-size: 14px;
            color: #000;
        }

        .section-total {
            font-size: 16px;
            font-weight: bold;
            color: #000;

            .unit-text {
                padding-left: 2px;
                font-size: 12px;
                font-weight: normal;
            }
        }
    }

    .cost-table {
        border: 1px solid rgba(225, 225, 225, 0.5);
        border-radius: 5px;
        overflow: hidden;

        .table-header {
            display: flex;
            background: rgba(241, 241, 241, 0.4);
            padding: 8px 6px;
            font-size: 12px;
            color: #767676;
            border-bottom: 1px solid rgba(225, 225, 225, 0.5);

            .col-1 {
                width: 40px;
                text-align: center;
            }

            .col-2 {
                flex: 1;
                text-align: center;
            }

            .col-3 {
                width: 52px;
                text-align: center;
            }

            .col-4 {
                width: 56px;
                text-align: center;
            }

            .col-5 {
                width: 52px;
                text-align: center;
            }

            .col-6 {
                width: 52px;
                text-align: center;
            }
        }

        .table-row {
            display: flex;
            padding: 8px 6px;
            font-size: 11px;
            color: rgba(0, 0, 0, 0.6);
            background: #fff;
            border-bottom: 1px solid rgba(225, 225, 225, 0.3);

            &:last-child {
                border-bottom: none;
            }

            .col-1,
            .col-2,
            .col-3,
            .col-4,
            .col-5,
            .col-6 {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .col-1 {
                width: 40px;
            }

            .col-2 {
                flex: 1;
            }

            .col-3 {
                width: 52px;
            }

            .col-4 {
                width: 56px;
            }

            .col-5 {
                width: 52px;
            }

            .col-6 {
                width: 52px;
            }
        }
    }
}

// 服务费用区域
.service-cost-section {
    position: relative;

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .section-title {
            font-size: 14px;
            color: #000;
        }

        .section-total {
            font-size: 16px;
            font-weight: bold;
            color: #000;

            .unit-text {
                padding-left: 2px;
                font-size: 12px;
                font-weight: normal;
            }
        }
    }

    .service-details {
        display: flex;
        align-items: center;
        border: 1px solid rgba(206, 206, 206, 0.5);
        padding: 8px 0;
        border-radius: 4px;
        margin-bottom: 10px;

        .detail-item {
            font-size: 14px;
            flex: 1;
            text-align: center;

            .detail-label {
                color: rgba(0, 0, 0, 0.2);
                margin-top: 6px;
            }

            .detail-value {
                color: rgba(0, 0, 0, 0.8);
            }
        }
        .detail-item + .detail-item {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 1px;
                height: 20px;
                background: rgba(0, 0, 0, 0.1);
            }
        }
    }
}
.edit-btn-box {
    display: flex;
    justify-content: end;
    position: absolute;
    right: 0;
    top: -8px;
    z-index: 10;
}
.edit-btn {
    background: rgba(33, 153, 248, 0.1);
    color: #2199f8;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    width: fit-content;
    cursor: pointer;
}

// 底部操作按钮
.bottom-actions {
    flex-shrink: 0;

    .action-buttons {
        padding: 16px;
        display: flex;
        justify-content: space-around;

        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;

            .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>