feiniao-farm-h5/src/components/popup/priceSheetPopup.vue

<template>
    <popup class="price-sheet-popup" v-model:show="showPopup">
        <div class="price-sheet-content">
            <div class="price-sheet-content-inner" ref="contentEl">
                <!-- 顶部标题区域 -->
                <div class="header-section">
                    <div class="header-left">
                        <div class="main-title">服务报价单</div>
                    </div>
                    <div class="header-right">
                        <div class="qr-icon">
                            <img src="@/assets/img/home/qrcode.png" alt="" />
                        </div>
                        <div class="qr-text">扫码查看详情</div>
                    </div>
                </div>
                <div class="sheet-content">
                    <!-- 报价详情区域 -->
                    <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">
                            <span class="info-label">执行时间</span>
                            <span class="info-value">{{ quotationData?.executeDate || '--' }}</span>
                        </div>
                        <div class="info-item catalog-label">
                            <span class="info-label">报价目录</span>

                            <div class="edit-btn-box">
                                <div class="edit-btn" @click="handleEdit">编辑报价</div>
                            </div>
                        </div>
                        <div class="total-bar">
                            <span class="total-label">报价合计：</span>
                            <span class="total-value">{{ priceData?.totalCost ? formatArea(priceData.totalCost) : '--' }}</span>
                            <span class="total-unit">元</span>
                        </div>
                    </div>
    
                    <!-- 肥药费用区域 -->
                    <div class="fertilizer-cost-section">
                        <div class="section-header">
                            <div class="section-title">肥药费用</div>
                            <div class="section-total">{{ priceData?.pesticideFertilizerCost ? formatArea(priceData.pesticideFertilizerCost) : '--' }}<span class="unit-text">元</span></div>
                        </div>
                        <div class="cost-table">
                            <div class="table-header">
                                <div class="col-1">功效</div>
                                <div class="col-2">名称</div>
                                <div class="col-3">品牌</div>
                                <div class="col-4">单价</div>
                                <div class="col-5">用量</div>
                                <div class="col-6">总价</div>
                            </div>
                            <div 
                                class="table-row"
                                v-for="(item, index) in processedPrescriptionList"
                                :key="index"
                            >
                                <div class="col-1">{{ item.typeName || '--' }}</div>
                                <div class="col-2">{{ item.defaultName || '--' }}</div>
                                <div class="col-3">{{ item.brand || '--' }}</div>
                                <div class="col-4">{{ item.price || '--' }}</div>
                                <div class="col-5">{{ item.usageDisplay || '--' }}</div>
                                <div class="col-6">{{ item.totalDisplay === '--' ? '--' : (item.totalDisplay + '元') }}</div>
                            </div>
                        </div>
                    </div>
    
                    <!-- 服务费用区域 -->
                    <div class="service-cost-section">
                        <div class="section-header">
                            <div class="section-title">服务费用</div>
                            <div class="section-total">{{ priceData?.farmWorkServiceCost ? getServiceCost(priceData.farmWorkServiceCost, quotationData.area) : '--' }}<span class="unit-text">元</span></div>
                        </div>
                        <div class="service-details">
                            <div class="detail-item">
                                <div class="detail-value">{{ priceData?.executionMethodName || '--' }}</div>
                                <div class="detail-label">执行方式</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-value">{{ (priceData?.farmWorkServiceCost ? priceData.farmWorkServiceCost + '元/亩' : '--') }}</div>
                                <div class="detail-label">亩单价</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-value">{{ quotationData?.area ? (formatArea(quotationData?.area) + '亩') : '--' }}</div>
                                <div class="detail-label">亩数</div>
                            </div>
                        </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, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import wx from "weixin-js-sdk";
import html2canvas from "html2canvas";
import { formatArea } from "@/common/commonFun";

const router = useRouter();
const showPopup = ref(false);
const contentEl = ref(null);

// 报价数据
const quotationData = ref({});
const priceData = ref({});

onActivated(() => {
    fetchPriceData()
})

// 处理后的处方列表（展平并匹配价格）
const processedPrescriptionList = computed(() => {
    if (!quotationData.value?.prescriptionList || !Array.isArray(quotationData.value.prescriptionList)) {
        return [];
    }

    // 创建价格映射表，方便快速查找
    const priceMap = new Map();
    console.log('priceData.value',priceData.value )
    if (priceData.value?.itemsList && Array.isArray(priceData.value.itemsList)) {
        priceData.value.itemsList.forEach(item => {
            priceMap.set(String(item.pesticideFertilizerId), { price: item.price, brand: item.brand, totalPrice: item.totalPrice });
        });
    }
    // 展平 prescriptionList 中的所有 pesticideFertilizerList
    const result = [];
    quotationData.value.prescriptionList.forEach(prescription => {
        if (prescription.pesticideFertilizerList && Array.isArray(prescription.pesticideFertilizerList)) {
            prescription.pesticideFertilizerList.forEach(item => {
                const pesticideFertilizerId = String(item.pesticideFertilizerId || '');
                const mapped = priceMap.get(pesticideFertilizerId) || {};
                const price = mapped.price || 0;
                const brand = mapped.brand || item.brand || '';
                const total = mapped.totalPrice || item.total || '';
                const muUsage = item.muUsage || 0;
                const unit = item.unit || '';

                result.push({
                    typeName: item.typeName || '--',
                    defaultName: item.defaultName || item.pesticideFertilizerName || '--',
                    brand: brand,
                    price: price ? `${price}元` : '--',
                    unit: unit,
                    muUsage: muUsage,
                    // total: total,
                    // 显示的格式化字符串
                    priceDisplay: price > 0 ? `${price}元/${unit}` : '--',
                    usageDisplay: muUsage > 0 ? `${muUsage}${unit}` : '--',
                    totalDisplay: total > 0 ? `${total.toFixed(2)}` : '--'
                });
            });
        }
    });

    return result;
});

function getServiceCost(cost, area) {
    if (!cost || !area) return '--';
    return (parseFloat(cost) * parseFloat(area)).toFixed(2);
}

const handleShowPopup = (data) => {
    if (data) {
        quotationData.value = data;
        fetchPriceData();
    }
    showPopup.value = true;
};

function fetchPriceData() {
    if (!quotationData.value?.id) {
        return;
    }
    VE_API.z_farm_work_record_cost.getByRecordId({ farmWorkRecordId: quotationData.value.id }).then(({ data }) => {
        priceData.value = data;
    }).catch(() => {
        // 获取价格数据失败
    });
}

const handleShare = () => {
    if (!priceData.value?.id || !priceData.value?.itemsList || priceData.value?.itemsList?.length === 0) {
        ElMessage.warning('请补全报价数据')
        return;
    }
    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", quotationData.value, priceData.value);
    if (!priceData.value?.id || !priceData.value?.itemsList || priceData.value?.itemsList?.length === 0) {
        ElMessage.warning('请补全报价数据')
        return;
    }
    // router.push({
    //     path: "/completed_work",
    //     query: { 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({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=priceSheet`,
    });
};

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 = () => {
    // 编辑报价逻辑
    // 可以触发编辑事件或打开编辑页面
    router.push({
        path: "/price_detail",
        query: { data: JSON.stringify(quotationData.value), priceData: JSON.stringify(priceData.value) },
    });
};

// 清空数据
const clearData = () => {
    quotationData.value = {};
    priceData.value = {};
};

// 监听弹窗关闭，清空数据
watch(showPopup, (newVal) => {
    if (!newVal) {
        clearData();
    }
});

const handleCancel = () => {
    showPopup.value = false;
};

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

<style lang="scss" scoped>
.price-sheet-popup {
    width: 90%;
    max-height: 82vh;
    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: 82vh;
    // height: 95vh;
    .price-sheet-content-inner {
        background: #fff;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
}

// 顶部标题区域
.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 10px 12px 16px;
    // background: linear-gradient(180deg, rgba(33, 153, 248, 0) 8%, rgba(139, 199, 252, 0.519) 94%, rgba(237, 241, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(33, 153, 248, 0) 2%, rgba(139, 199, 252, 0.519) 50%, #c4e3fd);
    flex-shrink: 0;

    .header-left {
        flex: 1;

        .main-title {
            font-family: "PangMenZhengDao";
            font-size: 28px;
            color: #0387EF;
        }
    }

    .header-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 16px;

        .qr-icon {
            color: #2199F8;
            margin-bottom: 4px;
            img {
                width: 40px;
                height: 40px;
            }
        }

        .qr-text {
            font-size: 12px;
            color: #171717;
        }
    }
}

.sheet-content {
    padding: 24px 16px 12px 16px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

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

    .info-item {
        font-size: 16px;
        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>