feiniao-farm-h5/src/views/old_mini/offer_price/component/fertilizerPrice.vue

<template>
    <div class="fertilizer-price">
        <search v-model="searchVal" placeholder="搜索专家" />
        <div class="record-filter">
            <div
                class="filter-item"
                v-for="(item, index) in filterType"
                :key="index"
                @click="handlePlanClick(index)"
                :class="{ active: activePlanIndex === index }"
            >
                {{ item }}
            </div>
        </div>
        <div class="fertilizer-list">
            <div class="fertilizer-card" @click.stop="handleEdit(item)" v-for="(item, index) in priceList" :key="index">
                <div class="card-header">
                    <div class="title">{{ item.name }}</div>
                    <div class="action-btn">
                        <el-icon @click.stop="handleEdit(item)" color="#2199F8" size="18"><Edit /></el-icon>
                        <!-- <el-icon @click.stop="openDelete" color="#E04C4C" size="18"><Delete /></el-icon> -->
                    </div>
                </div>
                <div class="info">
                    <div class="row">
                        <span class="label">药物品牌</span>
                        <span class="value">{{ item.brand }}</span>
                    </div>
                    <div class="row">
                        <span class="label">药费类型</span>
                        <span class="value">{{ item.typeName }}</span>
                    </div>
                    <div class="row">
                        <span class="label">施用方式</span>
                        <span class="value">{{ item.useMode }}</span>
                    </div>
                    <transition name="collapse">
                        <div class="extra-info" v-show="isExpanded(index)">
                            <div class="row">
                                <span class="label">计量单位</span>
                                <span class="value">{{ item.unit }}</span>
                            </div>
                            <div class="row">
                                <span class="label">单位兑水量</span>
                                <span class="value">{{ item.unitUsage }}</span>
                            </div>
                            <div class="row">
                                <span class="label">适用品类</span>
                                <span class="value tag-group">
                                    <span class="tag-item">{{ item.unitWaterAmount }}</span>
                                </span>
                            </div>
                        </div>
                    </transition>
                </div>
                <div class="expand" @click.stop="toggleExpand(index)">
                    <span>{{ isExpanded(index) ? '收起' : '展开更多' }}</span>
                    <el-icon :class="{ rotate: isExpanded(index) }"><ArrowDown /></el-icon>
                </div>
                <div class="stats">
                    <div class="col">
                        <div class="num">{{ item.price }}<span class="unit"> 元/{{ item.unit }}</span></div>
                        <div class="desc">成本</div>
                    </div>
                    <div class="col">
                        <div class="num">{{ item.cost }}<span class="unit"> 元/{{ item.unit }}</span></div>
                        <div class="desc">报价</div>
                    </div>
                    <div class="col">
                        <div class="num">{{ item.stock }}<span class="unit"> {{ item.unit }}</span></div>
                        <div class="desc">库存</div>
                    </div>
                </div>
            </div>
            <div class="page-action">
                <div class="btn-primary" @click="handleAdd">新增药肥报价</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from 'vant';
import { useRouter } from "vue-router";
import { ElMessageBox } from 'element-plus'

const router = useRouter();
const searchVal = ref("");

const filterType = ref(["全部", "农药", "调节", "肥料"]);
const activePlanIndex = ref(0);
// 记录已展开卡片索引的集合
const expandedSet = ref(new Set());

const priceList = ref([
    { name: "46%尿素", brand: "东巨", typeName: "农药类/杀虫剂/胃毒性", useMode: "根部施", unit: "克", unitUsage: "5-7.5公斤", unitWaterAmount: "水稻", price: "0.02", cost: '0.007', stock: "43015" },
    { name: "硫酸铵", brand: "东巨", typeName: "农药类/杀虫剂/胃毒性", useMode: "根部施", unit: "克", unitUsage: "5-7.5公斤", unitWaterAmount: "水稻", price: "0.01", cost: '0.005', stock: "33426" },
    { name: "磷酸钙", brand: "兴发", typeName: "农药类/杀虫剂/胃毒性", useMode: "根部施", unit: "千克", unitUsage: "10-15公斤", unitWaterAmount: "水稻", price: "1.6", cost: '1.2', stock: "6745" },
    { name: "0.2%磷酸二氢钾溶液", brand: "亚泰", typeName: "农药类/杀虫剂/胃毒性", useMode: "叶面施", unit: "克", unitUsage: "50-100克", unitWaterAmount: "水稻", price: "0.04", cost: '0.01', stock: "17236" },
    { name: "0.15%-0.25%矮壮素", brand: "瑞普生", price: "0.03", cost: '0.01', stock: "2542", unit: "毫升", unitUsage: "按使用说明", typeName: "农药类/杀虫剂/胃毒性", useMode: "叶面施", unitWaterAmount: "水稻" },
    { name: "20%氯虫苯甲酰胺悬浮剂", brand: "立占", price: "0.08", cost: '0.02', stock: "3125", unit: "克", unitUsage: "10-15毫升", typeName: "农药类/杀虫剂/胃毒性", useMode: "叶面施", unitWaterAmount: "水稻" },
]);

const handlePlanClick = (index) => {
    activePlanIndex.value = index;
};
const isExpanded = (index) => expandedSet.value.has(index);
const toggleExpand = (index) => {
    const next = new Set(expandedSet.value);
    if (next.has(index)) {
        next.delete(index);
    } else {
        next.add(index);
    }
    expandedSet.value = next;
};
const handleEdit = (item) => {
    router.push({
        path: "/edit_price",
        query: { id: item.id }
    });
};

const openDelete = () => {
  ElMessageBox.confirm(
    '确认要删除该报价吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
const handleAdd = () => {
    router.push({
        path: "/edit_price",
        query: { isAdd: true }
    });
};
</script>

<style lang="scss" scoped>
.fertilizer-price {
    ::v-deep {
        .van-search {
            background: #F5F7FB;
            .van-search__content {
                background: #FFFFFF;
                border-radius: 16px;
            }
        }
    }
    .record-filter {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 0;
        .filter-item {
            color: rgba(0, 0, 0, 0.5);
            padding: 0 16px;
            height: 32px;
            line-height: 32px;
            border-radius: 20px;
            color: #8B8B8B;
            &.active {
                color: #fff;
                background: #2199F8;
            }
        }
        .filter-item + .filter-item {
            margin-left: 8px;
        }
    }
    .fertilizer-list {
        padding: 8px 12px 80px;
        .fertilizer-card {
            margin-bottom: 10px;
            background: #FFFFFF;
            border-radius: 8px;
            // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            padding: 12px 10px;
            .card-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #000;
                }
                .action-btn {
                    display: flex;
                    gap: 10px;
                }
            }
            .info {
                padding-top: 4px;
                border-top: 1px solid #F5F5F5;
                margin-top: 8px;
                font-size: 14px;
                .row {
                    display: flex;
                    padding: 4px 0;
                    .label {
                        width: 80px;
                        color: rgba(0, 0, 0, 0.2);
                        flex-shrink: 0;
                    }
                    .value {
                        color: #767676;
                    }
                }
                .extra-info {
                    overflow: hidden;
                }
            }
            .tag-group {
                display: flex;
                align-items: center;
                gap: 4px;
                .tag-item {
                    font-size: 12px;
                    color: #2199F8;
                    background: #E8F3FF;
                    border-radius: 2px;
                    padding: 0 8px;
                    height: 20px;
                    line-height: 20px;
                }
            }
            .expand {
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(0, 0, 0, 0.2);
                font-size: 12px;
                margin: 6px 0 12px;
                span { margin-right: 4px; }
                cursor: pointer;
                .el-icon { transition: transform .3s ease; }
                .el-icon.rotate { transform: rotate(180deg); }
            }
            .stats {
                display: flex;
                align-items: stretch;
                justify-content: space-between;
                background: rgba(33, 153, 248, 0.1);
                border: 1px solid rgba(33, 153, 248, 0.2);
                border-radius: 10px;
                padding: 10px 8px;
                font-size: 14px;
                .col {
                    flex: 1;
                    text-align: center;
                    .num {
                        color: #2199F8;
                        font-weight: 600;
                        font-size: 16px;
                        .unit { font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, 0.5); }
                    }
                    .desc { color: #000; margin-top: 4px; }
                }
                .col + .col { border-left: 1px solid rgba(33, 153, 248, 0.4); }
            }
        }
        .page-action {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            padding: 10px 16px;
            background: #fff;
            box-shadow: 2px 2px 4.5px rgba(0, 0, 0, 0.4);
            .btn-primary {
                margin: 0 auto;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                width: fit-content;
                padding: 0 20px;
                color: #fff;
                font-size: 14px;
                background: linear-gradient(#76C3FF, #2199F8);
            }
        }
    }
}

/* 折叠动画：使用 max-height + 透明度 以获得平滑过渡 */
.collapse-enter-active,
.collapse-leave-active { transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0, 0.2, 1); }
.collapse-enter-from,
.collapse-leave-to { max-height: 0; opacity: 0; }
.collapse-enter-to,
.collapse-leave-from { max-height: 90px; opacity: 1; }
</style>