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"></image>
                <input class="search-input" v-model="keyword" placeholder="书名 / 作者 / ISBN" confirm-type="search"
                    @confirm="onSearch" :focus="true" />
                <view class="search-btn" @click="onSearch">
                    <text>搜索</text>
                </view>
            </view>
        </view>

        <!-- 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="doSearch(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="doSearch(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>

        <!-- Red Packet Float -->
        <view class="red-packet-float" @click="openPacket">
            <view class="time-badge">
                <text>剩</text>
                <u-count-down :timestamp="timestamp" separator="colon" color="#DF1407" bg-color="transparent"
                    font-size="18" separator-size="18" separator-color="#DF1407"></u-count-down>
            </view>
            <image src="/pages-sell/static/search/icon-red-packet.png" class="packet-img" mode="aspectFit"></image>
        </view>

        <!-- Surprise Packet Dialog -->
        <PacketDialog v-model="showPacketDialog"></PacketDialog>
    </view>
</template>

<script>
    import Navbar from '@/components/navbar/navbar.vue';
    import PacketDialog from '@/pages-sell/components/packet-dialog/index.vue';

    export default {
        components: {
            Navbar,
            PacketDialog
        },
        data() {
            return {
                keyword: '',
                historyList: [],
                hotVisible: true,
                hotList: [],
                timestamp: 86400, // 24 hours countdown
                showPacketDialog: false
            }
        },
        onShow() {
            this.getHistoryData();
            this.getHotData();
        },
        methods: {
            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);
            },
            doSearch(key) {
                console.log('Search:', key);
                this.keyword = key;
                // Navigate to result page or show results
                uni.showToast({
                    title: '搜索: ' + key,
                    icon: 'none'
                });
                uni.navigateTo({
                    url: '/pages-sell/pages/search-result?keyword=' + key
                });
            },
            clearHistory() {
                uni.showModal({
                    title: '提示',
                    content: '确定清空搜索历史吗？',
                    success: (res) => {
                        if (res.confirm) {
                            this.historyList = [];
                        }
                    }
                });
            },
            toggleHot() {
                this.hotVisible = !this.hotVisible;
            },
            openPacket() {
                this.showPacketDialog = true;
            },
            closePacket() {
                this.showPacketDialog = false;
            }
        }
    }
</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;
        }

        .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: 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;
                }
            }
        }
    }

    .red-packet-float {
        position: fixed;
        bottom: 200rpx;
        right: 40rpx;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;

        .time-badge {
            background: #FFE173;
            color: #DF1407;
            font-size: 18rpx;
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            position: absolute;
            top: -40rpx;
            right: -20rpx;
            white-space: nowrap;
            z-index: 2;
            display: flex;
            align-items: center;

            text {
                margin-right: 4rpx;
            }
        }

        .packet-img {
            width: 100rpx;
            height: 120rpx;
        }
    }
</style>