forestry-wx/src/plant/species/models/speList.vue

<template>
    <view class="spe-list-item" @click="handleClick">
        <!-- 左侧搜索图标 -->
        <!-- <up-icon name="search" size="50rpx" color="#ccc" class="search-icon" /> -->
        <img class="w-34 h-34 search-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/searchGrey.png" mode="widthFix" alt="" />
        <!-- 中间文本区域（间隔30rpx） -->
        <view class="text-container">
            <!-- 使用 view + text 显示高亮文本 -->
            <view class="text-content">
                <text v-for="(part, index) in textParts" :key="index" :style="part.isHighlight ? highlightStyle : {}">
                    {{ part.text }}
                </text>
            </view>
        </view>
        <!-- 右侧勾选图标（根据check状态显示） -->
        <!-- <up-icon v-if="check" name="checkmark" size="45rpx" color="#37A954" class="check-icon" /> -->
        <img v-if="check === '1'" class="w-30 h-30" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/chooseSuccessfully.png" mode="widthFix" alt="" />
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
    // 显示的完整文本
    text: {
        type: String,
        required: true,
    },
    // 搜索文本，用于高亮匹配部分
    searchText: {
        type: String,
        default: '',
    },
    // 高亮颜色
    highlightColor: {
        type: String,
        default: '#37A954',
    },
    // 是否选中状态（字符串格式：0-未选中，1-选中）
    check: {
        type: String,
        default: '0',
    },
});

const emit = defineEmits<{
    // 更新check状态的事件
    'update:check': [check: string];
    // 点击事件
    click: [];
}>();

// 高亮样式
const highlightStyle = computed(() => ({
    color: props.highlightColor,
    fontWeight: 'bold',
}));

// 将文本分割为高亮和非高亮部分
const textParts = computed(() => {
    if (!props.searchText || !props.text) {
        return [{ text: props.text || '', isHighlight: false }];
    }

    // 创建正则表达式进行匹配（不区分大小写）
    const regex = new RegExp(`(${props.searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
    const parts = props.text.split(regex);

    // 过滤空字符串并标记高亮部分
    return parts
        .filter((part) => part !== '')
        .map((part) => ({
            text: part,
            isHighlight: part.toLowerCase() === props.searchText.toLowerCase(),
        }));
});

// 处理点击事件
const handleClick = () => {
    const newValue = props.check === '1' ? '0' : '1';
    emit('update:check', newValue);
    emit('click');
};
</script>

<style lang="scss" scoped>
.spe-list-item {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    background-color: #fff;
    margin-bottom: 16rpx;
    transition: all 0.2s ease;
}

.search-icon {
    flex-shrink: 0;
    margin-right: 25rpx;
}

.text-container {
    flex: 1;
    overflow: hidden;
}

.text-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
}

.check-icon {
    flex-shrink: 0;
    margin-left: 20rpx;
}
.search_icon {
    width: 38rpx;
    height: 38rpx;
}
</style>