forestry-wx/src/plant/models/warehouseCard/product-item.vue

<template>
    <view class="b-radius bg-#fff pd-20 p-rtv" @click.stop="handleClick">
        <!-- 顶部类型标签和日期 -->
        <view class="d-flex j-sb a-c li-item-head mb-16">
            <view :class="['li-left-tag', typeBgClass]">{{ selectDictLabel(pt_product_type, item.instoreBizInfo?.productType) }}</view>
            <view class="f-s-22 c-#666">{{ item?.productDate || '' }}</view>
        </view>
        <!-- 主标题和状态 -->
        <view class="d-flex flex1 mb-10">
            <view class="flex1">
                <span class="f-s-34 c-#333 f-w-500 mr-10">{{ item?.instoreBizInfo?.proName || '' }}</span>
                <span v-if="item?.instoreBizInfo?.proLevel" class="f-s-24 c-#666">
                    {{ item?.instoreBizInfo?.proLevel }}
                </span>
            </view>
            <!-- <view v-if="!props.hideExtraInfo">
                <view v-if="item?.isInspected" class="tag-span c-primary bg-#EBF6EE">成品已检</view>
                <view v-else class="tag-span c-danger bg-#F9ECEA">成品未检</view>
            </view> -->
        </view>
        <view class="" v-if="+item.instoreBizInfo?.productType == 6">
            <span v-if="item?.instoreBizInfo?.finalSpecn" class="f-s-24 c-#666"> {{ item?.instoreBizInfo?.finalSpecn }}{{ item?.instoreBizInfo?.finalUnit }} </span>
        </view>
        <!-- 详细信息 -->
        <view class="pd2-4-0 f-s-28 d-flex a-c">
            <span class="c-#666">成品批号：</span>
            <span class="c-#333 f-w-500 flex1">{{ item?.batchCode || '-' }}</span>
            <up-icon v-if="!props.hideExtraInfo" name="arrow-right" size="24rpx" color="#333"></up-icon>
        </view>

        <view class="pd2-4-0 f-s-28">
            <span class="c-#666">包装批号：</span>
            <span class="c-#333 f-w-500">{{ item?.instoreBizInfo?.packSn || '-' }}</span>
        </view>

        <view class="pd2-4-0 f-s-28">
            <span class="c-#666">存放库房：</span>
            <span class="c-#333 f-w-500">{{ getStorageRoomNames(item?.warehouses) || '-' }}</span>
        </view>
        <view class="d-flex">
            <view class="pd2-4-0 f-s-28 d-flex w-50%">
                <view class="c-#666 w-s-no">入库量：</view>
                <view class="d-flex flex-cln">
                    <span class="c-#333 f-w-500 d-flex a-c">{{ item?.specn }}*{{ item?.capacity }}{{ item?.unit }}</span>
                    <span class="c-#333 f-w-500 d-flex a-c" v-if="item?.restSpecn">{{ item?.restSpecn }}*1{{ item?.unit }}</span>
                </view>
            </view>
            <view class="pd2-4-0 f-s-28 d-flex w-50%">
                <span class="c-primary w-s-no">剩余量：</span>
                <view class="d-flex flex-cln">
                    <span class="c-primary f-w-500">{{ item?.specn }}*{{ +item?.restAmount }}{{ item?.unit }}</span>
                    <span class="c-primary f-w-500 d-flex a-c" v-if="+item?.restRestAmount">{{ item?.restSpecn }}*{{ item?.restRestAmount }}{{ item?.unit }}</span>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { getStorageRoomNames } from '@/utils/common';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_product_type } = toRefs<any>(proxy?.useDict('pt_product_type'));

interface RestAmountItem {
    amount?: string | number;
    unit?: string;
    packInfo?: string;
}
const props = defineProps({
    item: {
        type: Object as () => Record<string, any>,
        default: () => ({}),
    },
    jumpUrl: {
        type: String,
        default: '',
    },
    hideExtraInfo: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits<{
    click: [value: typeof props.item];
}>();

// 类型名称映射（根据数据结构变化可调整）
const typeNameMap: Record<string, string> = {
    '1': '药材',
    '2': '鲜货',
    '3': '种源',
};

const typeName = computed(() => {
    const type = props.item?.instoreType || props.item?.typeName;
    return typeNameMap[type] || '药材';
});

const typeBgClass = computed(() => `bg-instore-${props.item.instoreBizInfo?.productType}`);

// 剩余量列表（数据结构待定，暂留空数组）
const restAmountList = computed<RestAmountItem[]>(() => {
    // 预留数据结构，等待外部传入
    // 期望格式：[{ amount: '50', unit: 'kg', packInfo: '袋*40 袋' }]
    return [];
});

const handleClick = () => {
    // 如果传入了 jumpUrl，则跳转到指定地址
    if (props.jumpUrl) {
        uni.navigateTo({
            url: `${props.jumpUrl}?id=${encodeURIComponent(props.item?.id || '')}`,
        });
    }
    emit('click', props.item);
};
</script>

<style lang="scss" scoped>
.tag-span {
    padding: 4rpx 12rpx;
    font-size: 20rpx;
    border-radius: 18rpx;
}

.li-item-head {
    margin-left: -24rpx;
    margin-top: -24rpx;
}

.li-left-tag {
    padding: 6rpx 16rpx;
    color: #fff;
    border-radius: 16rpx 0 16rpx 0;
    font-size: 20rpx;
    font-weight: 500;
}

/* 类型标签背景色 */
.bg-instore-2 {
    background-color: #2289e0;
}

/* 药材 - 绿色 */
.bg-instore-4 {
    background-color: #ff9800;
}

/* 鲜货 - 橙色 */
.bg-instore-5 {
    background-color: #1ebddc;
}

/* 种源 - 蓝色 */

.bg-instore-6 {
    background-color: #3fad5b;
}
</style>