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

<template>
    <view class="search-result-page">
        <image class="top-bg-image" src="/pages-sell/static/top-bg.png" mode="widthFix"></image>

        <Navbar title="书嗨" :titleSize="36" :title-color="navbarTitleColor" :back-icon-color="navbarIconColor"
            :background="navbarBackground"></Navbar>

        <!-- Custom Header -->
        <view class="search-bar-wrapper">
            <u-search style="width: 100%;" v-model="keyword" placeholder="书名/作者/ISBN" :show-action="true"
                action-text="反馈" :action-style="{ color: '#fff' }" bg-color="#fff" shape="round" :clearabled="true"
                search-icon="/pages-sell/static/search-icon.png" @custom="toFeedback" @search="onSearch"></u-search>
        </view>

        <!-- Banner -->
        <view class="banner-section">
            <image src="/pages-sell/static/top-banner.png" class="top-banner" mode="widthFix"></image>
        </view>

        <!-- Content Area -->
        <view class="content-area">
            <!-- Everyone is watching -->
            <view class="section-block" v-if="hotBook && hotBook.isbn">
                <text class="section-title">大家都在看</text>
                <HotRecommendItem :item="hotBook" @add-cart="addToCart"></HotRecommendItem>
            </view>

            <!-- Filter Bar -->
            <view class="filter-bar">
                <view class="filter-item" :class="{ active: sort === 1 }" @click="handleSort(1)">
                    <text>综合</text>
                    <view class="sort-icons">
                        <u-icon name="arrow-down-fill" :color="sort === 1 ? '#38C148' : '#cccccc'" size="14"></u-icon>
                    </view>
                </view>
                <view class="filter-item" :class="{ active: sort === 4 || sort === 5 }" @click="handleSort('sales')">
                    <text>销量</text>
                    <view class="sort-icons">
                        <u-icon name="arrow-up-fill" :color="sort === 4 ? '#38C148' : '#cccccc'" size="14"></u-icon>
                        <u-icon name="arrow-down-fill" :color="sort === 5 ? '#38C148' : '#cccccc'" size="14"></u-icon>
                    </view>
                </view>
                <view class="filter-item" :class="{ active: sort === 2 || sort === 3 }" @click="handleSort('price')">
                    <text>价格</text>
                    <view class="sort-icons">
                        <u-icon name="arrow-up-fill" :color="sort === 2 ? '#38C148' : '#cccccc'" size="14"></u-icon>
                        <u-icon name="arrow-down-fill" :color="sort === 3 ? '#38C148' : '#cccccc'" size="14"></u-icon>
                    </view>
                </view>
                <view class="filter-item" @click="showFilter = true">
                    <text>筛选</text>
                    <image src="/pages-sell/static/search-result/icon-filter.png" class="icon-filter"></image>
                </view>
            </view>

            <!-- Book List -->
            <view class="book-list">
                <RecommendItem v-for="(item, index) in bookList" :key="index" :item="item" @add-cart="addToCart"
                    :show-desc="false">
                </RecommendItem>
                <u-loadmore :status="loadStatus" margin-top="30" margin-bottom="30"></u-loadmore>
            </view>
        </view>

        <!-- Filter Popup -->
        <u-popup v-model="showFilter" mode="bottom">
            <view class="filter-popup">
                <view class="filter-content">
                    <view class="filter-title">价格区间</view>
                    <view class="price-inputs">
                        <u-input v-model="tempMinPrice" type="number" placeholder="最低价" border="surround"></u-input>
                        <view class="divider">-</view>
                        <u-input v-model="tempMaxPrice" type="number" placeholder="最高价" border="surround"></u-input>
                    </view>
                </view>
                <view class="filter-footer">
                    <view class="btn reset" @click="resetFilter">重置</view>
                    <view class="btn confirm" @click="confirmFilter">确定</view>
                </view>
            </view>
        </u-popup>

        <!-- 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 ref="packetDialog"></PacketDialog>
    </view>
</template>

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

    export default {
        components: {
            RecommendItem,
            HotRecommendItem,
            Navbar,
            PacketDialog
        },
        data() {
            return {
                keyword: '',
                pageNum: 1,
                pageSize: 10,
                hotBook: {},
                bookList: [],
                loadStatus: 'loadmore',
                navbarBackground: 'transparent',
                navbarTitleColor: '#ffffff',
                navbarIconColor: '#ffffff',
                sort: 1, // 1-综合 2-价格升序 3-价格降序 4-销量升序 5-销量降序
                showFilter: false,
                tempMinPrice: '',
                tempMaxPrice: '',
                minPrice: '',
                maxPrice: '',
                timestamp: 86400, // 24 hours countdown
            }
        },
        onPullDownRefresh() {
            this.pageNum = 1;
            this.loadStatus = 'loading';
            this.loadData();
        },
        onReachBottom() {
            if (this.loadStatus === 'nomore') return;
            this.pageNum++;
            this.loadStatus = 'loading';
            this.loadData();
        },
        onPageScroll(e) {
            if (e.scrollTop > 50) {
                this.navbarBackground = '#ffffff';
                this.navbarTitleColor = '#000000';
                this.navbarIconColor = '#000000';
            } else {
                this.navbarBackground = 'transparent';
                this.navbarTitleColor = '#ffffff';
                this.navbarIconColor = '#ffffff';
            }
        },
        onLoad(options) {
            this.keyword = options.keyword ? decodeURIComponent(options.keyword) : '';
            this.loadData();
        },
        methods: {
            loadData() {
                const params = {
                    keyword: this.keyword,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    sort: this.sort
                };
                if (this.minPrice) params.minPrice = this.minPrice;
                if (this.maxPrice) params.maxPrice = this.maxPrice;

                this.$u.api.getSearchKeywordAjax(params).then(res => {
                    uni.stopPullDownRefresh();
                    const rows = res.data.rows || [];
                    if (this.pageNum === 1) {
                        this.bookList = rows;
                    } else {
                        this.bookList = [...this.bookList, ...rows];
                    }

                    if (rows.length < this.pageSize) {
                        this.loadStatus = 'nomore';
                    } else {
                        this.loadStatus = 'loadmore';
                    }

                    if(res.data.couponName){
                        this.openPacket({
                            couponName: res.data.couponName,
                            faceMoney: res.data.faceMoney,
                            thresholdMoney: res.data.thresholdMoney,
                        });
                    }
                }).catch(() => {
                    uni.stopPullDownRefresh();
                    this.loadStatus = 'loadmore';
                });

                if (this.pageNum === 1) {
                    this.$u.api.getSearchRecommendAjax().then(res => {
                        if (res.code == 200) {
                            res.data.discountDesc = res.data.productPrice ? (res.data.productPrice / res.data.price) + '折' : '';
                            res.data.discountPrice = res.data.productPrice ? res.data.price - res.data.productPrice : '';
                            this.hotBook = res.data;
                        }
                    });
                }
            },
            handleSort(type) {
                if (type === 1) {
                    if (this.sort === 1) return;
                    this.sort = 1;
                } else if (type === 'price') {
                    if (this.sort === 2) {
                        this.sort = 3;
                    } else {
                        this.sort = 2;
                    }
                } else if (type === 'sales') {
                    if (this.sort === 5) {
                        this.sort = 4;
                    } else {
                        this.sort = 5;
                    }
                }
                this.pageNum = 1;
                this.loadStatus = 'loading';
                this.loadData();
            },
            resetFilter() {
                this.tempMinPrice = '';
                this.tempMaxPrice = '';
            },
            confirmFilter() {
                this.minPrice = this.tempMinPrice;
                this.maxPrice = this.tempMaxPrice;
                this.showFilter = false;
                this.pageNum = 1;
                this.loadStatus = 'loading';
                this.loadData();
            },
            goBack() {
                uni.navigateBack();
            },
            toFeedback() {
                uni.navigateTo({
                    url: '/pages-sell/pages/feedback'
                });
            },
            onSearch(val) {
                console.log('Search:', val);
                this.keyword = val;
                this.pageNum = 1;
                this.loadData();
            },
            addToCart(data) {
                // data now contains { product, quality, quantity } from the popup
                console.log('Added to cart:', data);
                uni.showToast({
                    title: '已加入购物车',
                    icon: 'success'
                });
            },
            openPacket(data) {
                this.$refs.packetDialog.open(data);
            },
            closePacket() {
                this.$refs.packetDialog.close();
            }
        }
    }
</script>

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

    /* 顶部大背景图 */
    .top-bg-image {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
        display: block;
    }

    .search-bar-wrapper {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        height: 88rpx;
        width: 100%;
    }

    .banner-section {
        position: relative;
        width: 100%;
        z-index: 1;
        padding: 10rpx 30rpx;

        .top-banner {
            width: 100%;
            display: block;
        }
    }

    .content-area {
        position: relative;
        z-index: 2;
        padding: 30rpx 30rpx;
        border-radius: 30rpx 30rpx 0 0;
        min-height: 500rpx;

        .section-block {
            margin-bottom: 30rpx;
            background-color: #fff;
            padding: 30rpx 24rpx;
            border-radius: 20rpx;

            .section-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
                display: block;
            }
        }
    }

    .filter-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .filter-item {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #666;

            &.active {
                color: #333;
                font-weight: bold;

                .triangle-icon {
                    border-top-color: #333;
                }
            }

            text {
                margin-right: 6rpx;
            }

            .triangle-icon {
                width: 0;
                height: 0;
                border-left: 8rpx solid transparent;
                border-right: 8rpx solid transparent;
                border-top: 10rpx solid #666;
            }

            .sort-icons {
                display: flex;
                flex-direction: column;
                margin-left: 4rpx;
                justify-content: center;
                gap: 4rpx;
                
                u-icon {
                    margin: -2rpx 0;
                }
            }

            .icon-filter {
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
            }
        }
    }

    .book-list {
        background: #fff;
        border-radius: 20rpx;
        padding: 0 24rpx;
        padding-bottom: 40rpx;
    }

    .filter-popup {
        background-color: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;

        .filter-content {
            flex: 1;
            padding: 30rpx;

            .filter-title {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 30rpx;
            }

            .price-inputs {
                display: flex;
                align-items: center;
                justify-content: space-between;

                u-input {
                    flex: 1;
                }

                .divider {
                    margin: 0 20rpx;
                    color: #999;
                }
            }
        }

        .filter-footer {
            display: flex;
            height: 100rpx;

            .btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;

                &.reset {
                    background-color: #fff;
                    color: #666;
                    border-top: 1rpx solid #eee;
                }

                &.confirm {
                    background-color: #38C148;
                    color: #fff;
                }
            }
        }
    }

    .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>