book-hi/pages-sell/pages/search.vue

<template>
    <view class="search-page">
        <!-- Navbar -->
        <Navbar title="搜索"></Navbar>
        <!-- Search Bar Area -->
        <view class="search-area">
            <view class="search-box">
                <image src="/pages-sell/static/search/icon-scan.png" class="search-icon-left" mode="aspectFit" @click="onScan"></image>
                <input class="search-input" v-model="keyword" placeholder="书名 / 作者 / ISBN" confirm-type="search"
                    @confirm="onSearch" :focus="true" />
                <u-icon name="close-circle-fill" color="#c0c4cc" size="32" v-if="keyword" @click="keyword = ''"
                    class="clear-icon"></u-icon>
                <view class="search-btn" @click="onSearch">
                    <text>搜索</text>
                </view>
            </view>
        </view>

        <!-- Search Prompt -->
        <view class="prompt-list" v-if="keyword.trim()">
            <view class="prompt-item" v-for="(item, index) in promptList" :key="index" @click="doSearch(item)">
                <rich-text :nodes="highlightKeyword(item, keyword)" class="prompt-text"></rich-text>
                <view class="arrow-wrap" @click.stop="fillKeyword(item)">
                    <u-icon name="arrow-up" color="#ccc" size="28" style="transform: rotate(45deg);"></u-icon>
                </view>
            </view>
        </view>

        <view v-else>
            <!-- History -->
            <view class="section history-section" v-if="historyList.length">
                <view class="section-header">
                    <text class="title">搜索历史</text>
                    <image src="/pages-sell/static/search/icon-delete.png" class="icon-delete" mode="aspectFit"
                        @click="clearHistory"></image>
                </view>
                <view class="tags-list">
                    <view class="tag-item history-tag" v-for="(item, index) in historyList" :key="index"
                        @click="fillKeyword(item)">
                        {{ item }}
                    </view>
                </view>
            </view>

            <!-- Hot Search -->
            <view class="section hot-section">
                <view class="section-header">
                    <view class="left">
                        <image src="/pages-sell/static/search/icon-fire.png" class="icon-fire" mode="aspectFit"></image>
                        <text class="title">热门搜索</text>
                    </view>
                    <image
                        :src="hotVisible ? '/pages-sell/static/search/icon-view.png' : '/pages-sell/static/search/icon-view.png'"
                        class="icon-view" mode="aspectFit" @click="toggleHot" :style="{ opacity: hotVisible ? 1 : 0.5 }">
                    </image>
                </view>
                <view class="tags-list" v-if="hotVisible">
                    <view class="tag-item" v-for="(item, index) in hotList" :key="index" @click="fillKeyword(item.name)"
                        :class="item.className">
                        <image v-if="item.tag === 'NEW'" src="/pages-sell/static/search/icon-new.png" class="tag-icon-new"
                            mode="heightFix"></image>
                        <image v-if="item.tag === 'HOT'" src="/pages-sell/static/search/icon-fire.png" class="tag-icon-fire"
                            mode="heightFix"></image>
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import Navbar from '@/components/navbar/navbar.vue';

    export default {
        components: {
            Navbar,
        },
        data() {
            return {
                keyword: '',
                historyList: [],
                hotVisible: true,
                hotList: [],
                promptList: [],
                inputTimer: null
            }
        },
        watch: {
            keyword(val) {
                if (!val.trim()) {
                    this.promptList = [];
                    return;
                }
                if (this.inputTimer) clearTimeout(this.inputTimer);
                this.inputTimer = setTimeout(() => {
                    this.getPromptData(val.trim());
                }, 300);
            }
        },
        onShow() {
            this.getHistoryData();
            this.getHotData();
        },
        methods: {
            getPromptData(keyword) {
                this.$u.api.getSearchPromptAjax({ keyword }).then(res => {
                    if (res.code == 200) {
                        this.promptList = res.data || [];
                    }
                })
            },
            highlightKeyword(text, keyword) {
                if (!text) return '';
                // 如果后端返回了 <em> 标签，直接替换样式
                if (text.includes('<em>')) {
                    return text
                        .replace(/<em>/g, '<span style="color: #37C148; font-style: normal;">')
                        .replace(/<\/em>/g, '</span>');
                }

                if (!keyword) return text;
                // escape keyword for regex
                const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const reg = new RegExp(`(${escapedKeyword})`, 'gi');
                return text.replace(reg, '<span style="color: #37C148; font-style: normal;">$1</span>');
            },
            getHistoryData() {
                this.$u.api.getSearchHistoryAjax().then(res => {
                    this.historyList = res.data || [];
                })
            },
            getHotData() {
                this.$u.api.getHotSearchListAjax().then(res => {
                    this.hotList = res.data.map((v, index) => ({
                        name: v,
                        className: index % 2 == 0 ? 'hot-tag' : 'history-tag'
                    })) || [];
                })
            },
            onSearch() {
                if (!this.keyword.trim()) return;
                this.doSearch(this.keyword);
            },
            onScan() {
                uni.scanCode({
                    success: (res) => {
                        if (res.result) {
                            this.keyword = res.result;
                        }
                    },
                    fail: (err) => {
                        console.log('扫码失败', err);
                    }
                });
            },
            doSearch(key) {
                if (!key) return;
                // 去除可能包含的 HTML 标签 (如后端返回的 <em>)
                const cleanKey = key.replace(/<[^>]+>/g, '');
                console.log('Search:', cleanKey);
                this.keyword = cleanKey;
                // Navigate to result page or show results
                uni.showToast({
                    title: '搜索: ' + cleanKey,
                    icon: 'none'
                });
                uni.navigateTo({
                    url: '/pages-sell/pages/search-result?keyword=' + cleanKey
                });
            },
            fillKeyword(key) {
                if (!key) return;
                const cleanKey = key.replace(/<[^>]+>/g, '');
                this.keyword = cleanKey;
            },
            clearHistory() {
                uni.showModal({
                    title: '提示',
                    content: '确定清空搜索历史吗？',
                    success: (res) => {
                        if (res.confirm) {
                            this.$u.api.clearSearchHistoryAjax().then(res => {
                                if (res.code == 200) {
                                    this.historyList = [];
                                    uni.showToast({
                                        title: '已清空',
                                        icon: 'none'
                                    });
                                }
                            });
                        }
                    }
                });
            },
            toggleHot() {
                this.hotVisible = !this.hotVisible;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-page {
        min-height: 100vh;
        background-color: #fff;
        font-family: 'Source Han Sans SC', sans-serif;
    }

    .search-area {
        padding: 30rpx 30rpx;
    }

    .search-box {
        display: flex;
        align-items: center;
        background-color: #F6F6F6;
        border-radius: 40rpx;
        height: 80rpx;
        padding: 0 10rpx 0 30rpx;

        .search-icon-left {
            width: 36rpx;
            height: 36rpx;
            margin-right: 20rpx;
        }

        .search-input {
            flex: 1;
            height: 100%;
            font-size: 28rpx;
            color: #333;
        }

        .clear-icon {
            margin: 0 10rpx;
        }

        .search-btn {
            width: 120rpx;
            height: 60rpx;
            background: linear-gradient(0deg, #37C148 0%, #6ADD83 100%);
            border-radius: 48rpx; // 24px
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 20rpx;

            text {
                color: #fff;
                font-size: 28rpx;
                font-weight: 500;
            }
        }
    }

    .section {
        padding: 0 30rpx 30rpx;

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .left {
                display: flex;
                align-items: center;
            }

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .icon-delete,
            .icon-view {
                width: 32rpx;
                height: 32rpx;
            }

            .icon-fire {
                width: 36rpx;
                height: 36rpx;
                margin-right: 10rpx;
            }
        }

        .tags-list {
            display: flex;
            flex-wrap: wrap;

            .tag-item {
                background: #F8F7F0;
                border-radius: 30rpx;
                padding: 8rpx 30rpx;
                font-size: 26rpx;
                color: #666;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;

                &.history-tag {
                    background-color: #EBF8EE;
                }

                &.hot-item {
                    background: #F5F3F9;
                }

                .tag-icon-new {
                    height: 16rpx;
                    margin-right: 8rpx;
                }

                .tag-icon-fire {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 8rpx;
                }
            }
        }
    }

    .prompt-list {
        padding: 0 30rpx;

        .prompt-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 0;
            border-bottom: 1rpx solid #F5F5F5;

            .prompt-text {
                font-size: 28rpx;
                color: #333;
                flex: 1;
            }

            .arrow-wrap {
                padding: 10rpx;
            }
        }
    }
</style>