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: [
                { name: '毛概 2023', tag: 'NEW' },
                { name: '吸引力法则', tag: 'HOT' },
                { name: '神农本草经书', tag: '' }
            ],
            timestamp: 86400, // 24 hours countdown
            showPacketDialog: false
        }
    },
    methods: {
        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'
            });
        },
        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>