forestry-wx/src/plant/port/port-create/models/baseinfo.vue

<template>
    <view class="border-#AFDDBB pd-26 pb-10 pt-10 bg-#FBFDFB p-rtv">
        <!-- 关闭按钮 -->
        <view v-if="showClose" class="c-#F81242 f-s-36 ab2-10-10 pl-20 pr-10" style="position: absolute; right: 10rpx; top: 0rpx" @click="handleClose"> × </view>
        <!-- 标签显示：GAP和三无一全 -->
        <view v-if="+modeValue?.gapFlag || +modeValue?.swyqRes" class="pt-8 pb-8 d-flex pr-20 pl-20" style="width: max-content; margin-top: -10rpx; margin-left: -26rpx; background: linear-gradient(90deg, #5eba75, #c6e391); border-bottom-right-radius: 88rpx">
            <view v-if="+modeValue?.gapFlag && !+modeValue?.swyqRes" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.medicineName }}GAP基地</view>
            <view v-if="+modeValue?.swyqRes && !+modeValue?.gapFlag" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.swyqMedicineName }}三无一全基地</view>
            <view v-if="+modeValue?.gapFlag && +modeValue?.swyqRes" class="c-#fff f-s-24 f-w-6">获评{{ modeValue?.medicineName }}GAP基地和{{ modeValue?.swyqMedicineName }}三无一全基地</view>
        </view>
        <view class="c-#333 f-s-34 f-w-5 pt-8 pb-8 pr-16">{{ modeValue?.baseName }}</view>
        <view class="pt-8 pb-8">
            <text class="c-#666 f-s-28">基地面积:</text>
            <text class="c-#333 f-s-28 f-w-5">{{ modeValue?.area }}{{ modeValue?.areaUnit }}</text>
        </view>
        <view class="pt-8 pb-8">
            <text class="c-#666 f-s-28">基地地址:</text>
            <text class="c-#333 f-s-28 f-w-5">{{ modeValue?.adcodeName }}{{ modeValue?.address }}</text>
        </view>
        <view style="margin-left: -26rpx; margin-right: -26rpx; border-bottom: 1rpx solid #d4ecda"></view>
        <view class="pt-16 pb-8">
            <text v-if="+modeValue?.data?.[0]?.landType == 1" class="c-#666 f-s-28">地块信息:</text>
            <text v-if="+modeValue?.data?.[0]?.landType == 2" class="c-#666 f-s-28">圈舍信息:</text>
            <text v-if="+modeValue?.data?.[0]?.landType == 3" class="c-#666 f-s-28">培养架信息:</text>
            <text v-if="!modeValue?.aloneChecked" class="c-#333 f-s-28 f-w-5">{{ modeValue?.data?.length }}个</text>
            <text v-if="modeValue?.aloneChecked" class="c-#333 f-s-28 f-w-5">该基地所有{{ +modeValue?.data?.[0]?.landType == 1 ? '地块' : +modeValue?.data?.[0]?.landType == 2 ? '圈舍' : '培养架' }}</text>
        </view>
        <view v-if="!modeValue?.aloneChecked" class="pt-8 pb-8" v-for="(item, index) in modeValue?.data" :key="index">
            <text class="c-#666 f-s-28 mr-20">{{ item?.landName }}:</text>
            <text v-if="+modeValue?.data?.[0]?.landType == 3" class="c-#333 f-s-28 f-w-5">{{ item?.capacityAmount }}{{ item?.capacityUnit }}</text>
            <text v-else class="c-#333 f-s-28 f-w-5">{{ item?.area }}{{ item?.areaUnit }}</text>
        </view>
    </view>
</template>
<script setup lang="ts">
// 定义props接口
interface ModeValue {
    baseName?: string;
    area?: string | number;
    areaUnit?: string;
    address?: string;
    adcodeName?: string;
    gapFlag?: any;
    swyqRes?: any;
    aloneChecked?: boolean;
    data?: any[];
    // 保留原有字段以保持向后兼容
    checkBox?: any[];
    medicineName: string | null;
    swyqMedicineName: string | null;
}

// 接收modeValue对象
const props = withDefaults(
    defineProps<{
        modeValue?: ModeValue;
        baseType: string;
        showClose?: boolean;
    }>(),
    {
        showClose: true,
    },
);
setTimeout(() => {
    console.log(props?.modeValue);
}, 1000);
// 定义emit事件
const emit = defineEmits<{
    (e: 'update:modeValue', value: ModeValue | null): void;
    (e: 'close'): void;
}>();

// 处理关闭
const handleClose = () => {
    // 触发事件清空modeValue
    console.log('?');

    emit('update:modeValue', null);
    emit('close');
};
</script>

<style scoped lang="scss">
.label {
    font-size: 24rpx;
    color: #37a954;
    border-radius: 100rpx;
    background-color: #e3efe6;
    width: max-content;
    padding-left: 14rpx;
    padding-right: 14rpx;
    padding-top: 6rpx;
    padding-bottom: 6rpx;
}
</style>