feiniao-farm-h5/src/components/pageComponents/FarmInfoCard.vue

<template>
    <div class="farm-info-card" :class="{ 'has-footer': showFooter }" @click="handleClick">
        <div class="item-content">
            <div class="item-left" :style="{ width: data.maxWidth ? 'calc(100% - 80px)' : 'auto' }">
                <img class="map-img" src="@/assets/img/home/farm.png" alt="地图" />
                <div class="item-info">
                    <div class="item-header">
                        <div class="farm-name van-ellipsis" :style="{ maxWidth: data.maxWidth || 'calc(100% - 90px)' }">{{ data.farmName }}</div>
                        <div class="tags">
                            <span class="tag" :class="data.className || 'tag-variety'" v-show="data.variety || data.roleName">{{ data.variety || data.roleName }}</span>
                            <span class="tag" :class="data.className || 'tag-gray'" v-show="data.area">{{ data.area }}</span>
                        </div>
                    </div>
                    <div class="farm-address van-ellipsis">{{ data.address }}</div>
                </div>
            </div>
            <!-- 右侧按钮插槽 -->
            <div v-if="hasRightSlot" class="item-right-btn" @click.stop>
                <slot name="right"></slot>
            </div>
        </div>
        <!-- 底部内容：服务次数或自定义内容 -->
        <div v-if="showFooter" :class="{'item-footer': data.serviceCount != 0}">
            <slot name="footer">
                <template v-if="data.serviceCount != 0">
                    农事服务过<span class="service-count">{{ data.serviceCount }}</span
                    >次
                    <span class="view-detail">查看详情</span>
                </template>
            </slot>
        </div>
        <!-- 底部提示框：需求信息和预计收益 -->
        <template v-if="data.broadcasts && data.broadcasts.length > 0">
            <slot name="bottomTip">
                <div class="item-footer remind-footer">
                    <div class="remind-cont" v-html="data.broadcasts[0].content"></div>
                    <span class="remind-text" @click.stop="handleRemind">提醒他</span>
                </div>
            </slot>
        </template>
        <upload-execute ref="uploadExecuteRef" :onlyShare="true" />
    </div>
</template>

<script setup>
import { computed, useSlots, ref } from "vue";
import uploadExecute from "@/views/old_mini/task_condition/components/uploadExecute.vue";
const props = defineProps({
    data: {
        type: Object,
        required: true,
        validator: (value) => {
            return (
                value.farmName !== undefined &&
                value.address !== undefined &&
                (value.variety !== undefined || value.roleName !== undefined)
            );
        },
    },
});

const emit = defineEmits(["click"]);
const slots = useSlots();
const showFooter = computed(() => {
    return props.data.serviceCount !== undefined || !!slots.footer;
});

const hasRightSlot = computed(() => {
    return !!slots.right;
});

const handleClick = () => {
    emit("click", props.data);
};

const uploadExecuteRef = ref(null);
const handleRemind = () => {
    // const data = {
    //     ...props.data,
    //     farmMiniUserId: props.data.receiveUserId,
    //     farmId: props.data.id,
    //     type: "remindUser"
    // }
    // uploadExecuteRef.value.showPopup(data);
};
</script>

<style lang="scss" scoped>
.farm-info-card {
    background: #fff;
    border-radius: 8px;
    position: relative;

    &.has-footer {
        padding: 12px 10px;
        border-radius: 5px;
    }

    &:not(.has-footer) {
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .item-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .map-img {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: cover;
        }
        .item-left {
            display: flex;
            align-items: center;
            gap: 8px;
            width: calc(100% - 80px);
        }
        .item-info {
            width: 100%;
            .item-header {
                display: flex;
                gap: 10px;
                font-size: 14px;
                margin-bottom: 4px;
                .farm-name {
                    font-weight: 600;
                    color: #000;
                    max-width: calc(100% - 90px);
                    // max-width: 100px;
                }
                .tags {
                    display: flex;
                    gap: 6px;
                    align-items: center;
                    .tag {
                        padding: 1px 8px;
                        border-radius: 2px;
                        font-size: 12px;
                        &.tag-gray {
                            background: rgba(243, 243, 243, 0.5);
                            color: #7D7D7D;
                        }
                        &.tag-role {
                            background: rgba(255, 149, 61, 0.2);
                            color: #FF953D;
                        }
                        &.tag-variety {
                            background: rgba(232, 243, 255, 1);
                            color: #2199f8;
                        }
                    }
                }
            }
            .farm-address {
                font-size: 12px;
                color: #86909c;
                max-width: 190px;
            }
        }
    }

    .item-footer {
        background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, transparent 100%);
        padding: 6px 8px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        margin-top: 10px;
        color: #2e2e2e;
        font-size: 12px;
        &.remind-footer {
            justify-content: space-between;
        }
        .remind-cont{
            width: calc(100% - 42px);
            ::v-deep{
                p{
                    margin: 0;
                }
            }
        }
        .remind-text {
            color: #2199f8;
            font-weight: 500;
            width: 40px;
        }
        .service-count {
            margin: 0 2px;
        }
        .view-detail {
            margin-left: 10px;
        }
        .remind-text {
            font-weight: 400;
        }
    }

    .item-right-btn {
        text-align: center;
        color: #888b8d;
        font-size: 12px;
        padding: 5px 12px;
        border-radius: 20px;
        border: 1px solid #888b8d;
    }

    .item-bottom-tip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(90deg, rgba(254, 164, 94, 0.2) 0%, transparent 100%);
        span {
            color: #eb7b20;
            font-weight: 500;
        }
        .income-text {
            color: #efb789;
        }
    }
}

.farm-info-card + .farm-info-card {
    margin-top: 12px;
}
</style>
<style>
.share-sheet{
    bottom: 50px;
}
</style>