|
|
@@ -0,0 +1,259 @@
|
|
|
+<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="#ffffff" back-icon-color="#ffffff"></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="goBack" @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">
|
|
|
+ <text class="section-title">大家都在看</text>
|
|
|
+ <HotRecommendItem :item="hotBook" @add-cart="addToCart"></HotRecommendItem>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Filter Bar -->
|
|
|
+ <view class="filter-bar">
|
|
|
+ <view class="filter-item active">
|
|
|
+ <text>综合</text>
|
|
|
+ <view class="triangle-icon"></view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-item">
|
|
|
+ <text>销量</text>
|
|
|
+ </view>
|
|
|
+ <view class="filter-item">
|
|
|
+ <text>价格</text>
|
|
|
+ <view class="sort-icons">
|
|
|
+ <image src="/pages-sell/static/search-result/icon-top.png" class="icon-sort"></image>
|
|
|
+ <image src="/pages-sell/static/search-result/icon-bottom.png" class="icon-sort"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-item">
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </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';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ RecommendItem,
|
|
|
+ HotRecommendItem,
|
|
|
+ Navbar
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: '习近平新时代思想',
|
|
|
+ hotBook: {
|
|
|
+ id: 1,
|
|
|
+ title: '山河岁月',
|
|
|
+ cover: '/static/img/1.png', // Assuming a placeholder or from static
|
|
|
+ price: '6.80',
|
|
|
+ discount: '5.3折',
|
|
|
+ discountDesc: '省9.8元'
|
|
|
+ },
|
|
|
+ bookList: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '山河岁月',
|
|
|
+ author: '本书编写组',
|
|
|
+ cover: '/static/img/1.png',
|
|
|
+ price: '6.80',
|
|
|
+ originalPrice: '36.80',
|
|
|
+ desc: '“山河岁月”以宏大的历史视野，讲述了... '
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '山河岁月',
|
|
|
+ author: '本书编写组',
|
|
|
+ cover: '/static/img/1.png',
|
|
|
+ price: '6.80',
|
|
|
+ originalPrice: '36.80',
|
|
|
+ desc: '“山河岁月”以宏大的历史视野，讲述了... '
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '山河岁月',
|
|
|
+ author: '本书编写组',
|
|
|
+ cover: '/static/img/1.png',
|
|
|
+ price: '6.80',
|
|
|
+ originalPrice: '36.80',
|
|
|
+ desc: '“山河岁月”以宏大的历史视野，讲述了... '
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '山河岁月',
|
|
|
+ author: '本书编写组',
|
|
|
+ cover: '/static/img/1.png',
|
|
|
+ price: '6.80',
|
|
|
+ originalPrice: '36.80',
|
|
|
+ desc: '“山河岁月”以宏大的历史视野，讲述了... '
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ onSearch(val) {
|
|
|
+ console.log('Search:', val);
|
|
|
+ },
|
|
|
+ addToCart(item) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '已加入购物车',
|
|
|
+ icon: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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: 100;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ .icon-sort {
|
|
|
+ width: 12rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ margin: 2rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-filter {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.book-list {
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+}
|
|
|
+</style>
|
