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

<template>
    <popup class="price-sheet-popup" v-model:show="showPopup" :close-on-click-overlay="false">
        <div class="price-sheet-content">
            <div class="price-sheet-content-inner">
                <!-- 顶部标题区域 -->
                <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 catalog-label">
                            <span class="info-label">报价目录</span>
                        </div>
                        <div class="total-bar">
                            <span class="total-label">报价合计：</span>
                            <span class="total-value">{{ 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 || '--' }}<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.priceDisplay || '--' }}</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 || '--' }}<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 + '元/亩') || '--元/亩' }}</div>
                                <div class="detail-label">亩单价</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-value">{{ quotationData?.area ? (quotationData?.area + '亩') : '--' }}</div>
                                <div class="detail-label">亩数</div>
                            </div>
                        </div>
                        <div class="edit-btn-box">
                            <div class="edit-btn" @click="handleEdit">编辑报价</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作按钮 -->
            <div class="bottom-actions">
                <div class="action-buttons">
                    <div class="action-btn blue-btn">
                        <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">
                        <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 } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const showPopup = ref(false);

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

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

    // 创建价格映射表，方便快速查找
    const priceMap = new Map();
    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 });
        });
    }
    // 展平 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 muUsage = item.muUsage || 0;
                const unit = item.unit || '';
                
                // 计算总价
                const total = price * muUsage;

                result.push({
                    typeName: item.typeName || '--',
                    defaultName: item.defaultName || item.pesticideFertilizerName || '--',
                    brand: brand,
                    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;
});

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

function fetchPriceData() {
    if (!quotationData.value?.orderId) {
        return;
    }
    VE_API.z_farm_work_record_cost.listByOrderId({ farmWorkOrderId: quotationData.value.orderId }).then(({ data }) => {
        if (data && data.length > 0) {
            priceData.value = data[0];
        }
    }).catch(() => {
        // 获取价格数据失败
    });
}

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

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

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

<style lang="scss" scoped>
.price-sheet-popup {
    width: 90%;
    max-height: 95vh;
    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: 94vh;
    // 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;
}

// 报价详情区域
.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;

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