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

<template>
    <view class="search-result-page">
        <page-meta :page-style="showPrompt ? 'overflow: hidden;' : ''"></page-meta>
        <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"
                @focus="onSearchFocus" @blur="onSearchBlur"></u-search>
            <scroll-view scroll-y class="prompt-panel" v-if="showPrompt" style="height: 100vh;">
                <view class="prompt-item" v-for="(item, index) in promptList" :key="index" @click="selectPrompt(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>
            </scroll-view>
        </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" :search-word="resultKeyword" @add-cart="addToCart" @update-item="updateHotBook"></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"
                    @update-item="updateBookItem($event, index)" :show-desc="false" :source-from="1"
                    :search-word="resultKeyword">
                </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>
        <select-good-popup-host />
    </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';
import SelectGoodPopupHost from '@/components/select-good-popup-host.vue';

export default {
    components: {
        RecommendItem,
        HotRecommendItem,
        Navbar,
        PacketDialog,
        SelectGoodPopupHost,
    },
    data() {
        return {
            keyword: '',
            resultKeyword: '',
            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
            promptList: [],
            inputFocused: false,
            inputTimer: null,
            blurTimer: null,
        }
    },
    computed: {
        showPrompt() {
            return this.inputFocused && !!String(this.keyword || '').trim() && this.promptList.length > 0;
        }
    },
    watch: {
        keyword(val) {
            if (!this.inputFocused) return;
            const keyword = String(val || '').trim();
            if (!keyword) {
                this.promptList = [];
                return;
            }
            if (this.inputTimer) clearTimeout(this.inputTimer);
            this.inputTimer = setTimeout(() => {
                this.getPromptData(keyword);
            }, 300);
        }
    },
    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;

            const requestKeyword = params.keyword;
            // 首屏列表还没出来时，「大家都在看」也可能先被加购，先记下本次搜索词
            if (this.pageNum === 1 && !this.bookList.length) {
                this.resultKeyword = requestKeyword;
            }
            this.$u.api.getSearchKeywordAjax(params).then(res => {
                uni.stopPullDownRefresh();
                const rows = res.data.rows || [];
                if (this.pageNum === 1) {
                    this.bookList = rows;
                    // 用真正发起搜索的词做归因，避免输入框未提交的新词串到旧列表上
                    this.resultKeyword = requestKeyword;
                } 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(this.keyword).then(res => {
                    if (res.code == 200) {
                        res.data.discountDesc = res.data.productPrice ? ((res.data.productPrice / res.data.price) * 10).toFixed(2) + '折' : '';
                        res.data.discountPrice = res.data.productPrice ? (res.data.price - res.data.productPrice).toFixed(2) : '';
                        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) {
            const key = String(val || this.keyword || '').replace(/<[^>]+>/g, '').trim();
            if (!key) return;
            this.keyword = key;
            this.promptList = [];
            this.inputFocused = false;
            this.pageNum = 1;
            this.loadData();
        },
        onSearchFocus() {
            if (this.blurTimer) clearTimeout(this.blurTimer);
            this.inputFocused = true;
            const keyword = String(this.keyword || '').trim();
            if (keyword) this.getPromptData(keyword);
        },
        onSearchBlur() {
            // 延迟收起，避免点击联想词时先失焦导致点不到
            this.blurTimer = setTimeout(() => {
                this.inputFocused = false;
            }, 300);
        },
        getPromptData(keyword) {
            this.$u.api.getSearchPromptAjax({ keyword }).then(res => {
                if (res.code == 200 && this.inputFocused && String(this.keyword || '').trim() === keyword) {
                    this.promptList = res.data || [];
                }
            })
        },
        highlightKeyword(text, keyword) {
            if (!text) return '';
            if (text.includes('<em>')) {
                return text
                    .replace(/<em>/g, '<span style="color: #37C148; font-style: normal;">')
                    .replace(/<\/em>/g, '</span>');
            }
            if (!keyword) return text;
            const escapedKeyword = String(keyword).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const reg = new RegExp('(' + escapedKeyword + ')', 'gi');
            return text.replace(reg, '<span style="color: #37C148; font-style: normal;">$1</span>');
        },
        selectPrompt(item) {
            if (this.blurTimer) clearTimeout(this.blurTimer);
            this.onSearch(item);
        },
        fillKeyword(key) {
            if (!key) return;
            if (this.blurTimer) clearTimeout(this.blurTimer);
            this.inputFocused = true;
            this.keyword = String(key).replace(/<[^>]+>/g, '');
        },
        addToCart(data) {
            // data now contains { product, quality, quantity } from the popup
            console.log('Added to cart:', data);
            uni.showToast({
                title: '已加入购物车',
                icon: 'success',
                duration: 3000
            });
        },
        updateBookItem(updatedItem, index) {
            this.$set(this.bookList, index, { ...this.bookList[index], ...updatedItem });
        },
        updateHotBook(updatedItem) {
            this.hotBook = { ...this.hotBook, ...updatedItem };
        },
        openPacket(data) {
            this.$refs.packetDialog.open(data);
        },
        closePacket() {
            this.$refs.packetDialog.close();
        }
    },
    onShareAppMessage(res) {
        if (res.from === "button" && res.target && res.target.dataset && res.target.dataset.shareType === "reduce") {
            let reduceCode = uni.getStorageSync("reduceCodeShare");
            if (this.$u && this.$u.api && this.$u.api.goToReduceShareAjax) {
                this.$u.api.goToReduceShareAjax({ reduceCode: reduceCode });
            } else {
                uni.$u && uni.$u.http && uni.$u.http.get('/token/shop/order/goToShare', { reduceCode: reduceCode });
            }
            return {
                title: "快来帮我减钱买书吧！",
                path: "/pages/sell/index?reduceCode=" + reduceCode,
                imageUrl: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg",
                desc: "书嗨，专注于书籍交易的平台，提供新书和二手书的买卖服务",
            };
        }
        return {
            title: "书嗨",
            path: "/pages-sell/pages/search-result?keyword=" + (this.keyword || ""),
        };
    }
}
</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: 20;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 88rpx;
    width: 100%;
}

.prompt-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 80rpx;
    background: #fff;
    z-index: 30;
}

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

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

    .arrow-wrap {
        padding: 10rpx 0 10rpx 20rpx;
    }
}

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