搜索页、行业报告分包

2022-12-18 21:03:41 +08:00
parent 48393c72ed
commit 49a52425c5
9 changed files with 67 additions and 57 deletions
--- a/packageSearch/search/search.vue
+++ b/packageSearch/search/search.vue
@@ -0,0 +1,170 @@
+<template>
+	<view>
+		<!-- 顶部导航栏 -->
+		<view class="top-search">
+			<customer-searchbar ref="search" :queryParam="queryParam" :search-bar-top="searchBarTop"
+				:search-bar-height="searchBarHeight" @search="goSearch" @back="goBack" />
+		</view>
+		<!-- 最近搜索 -->
+		<view class="recent-search" :style="{marginTop: Number(searchBarTop + searchBarHeight) + 'px',}">
+			<view class="title">
+				<text class="title-text">最近搜索</text>
+				<u-icon name="trash" color="#666666" size="24" @click="clearRecentSearch" />
+			</view>
+			<view class="recent-record">
+				<view v-if="recentRecordList.length > 0" class="no-empty-record">
+					<view v-for="(item, index) in recentRecordList" :key="index" class="tag-item">
+						<u-tag bg-color="#eee" borderColor="#eee" color="#666" :text="item"
+							@click="recentSearch(item)" />
+					</view>
+				</view>
+				<view v-else>
+					<view class="empty-record">
+						<text>暂无搜索记录</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 搜索发现 -->
+		<view class="search-found">
+			<view class="title">
+				<text class="title-text">搜索发现</text>
+			</view>
+			<view class="found-record">
+				<view v-for="(item, index) in foundList" :key="index" class="tag-item">
+					<u-tag bg-color="#eee" borderColor="#eee" color="#666" :text="item" @click="recentSearch(item)" />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		toast
+	} from 'service/request.js'
+	export default {
+		data() {
+			return {
+				searchBarTop: 0, //搜索栏的外边框高度，单位px
+				searchBarHeight: 0, //搜索栏的高度，单位px
+				queryParam: '',
+				recentRecordList: [
+					'烘焙宝典1',
+					'烘焙宝典2',
+					'烘焙宝典3',
+					'烘焙宝典4',
+					'无添加剂5',
+					'烘焙宝典&无添加剂',
+					'无添加剂6'
+				],
+				foundList: [
+					'烘焙宝典1',
+					'烘焙宝典2',
+					'烘焙宝典3',
+					'烘焙宝典4',
+					'烘焙宝典&无添加剂',
+					'无添加剂5'
+				]
+			}
+		},
+		onLoad() {
+			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+			this.searchBarTop = menuButtonInfo.top;
+			this.searchBarHeight = menuButtonInfo.height;
+		},
+		methods: {
+			goSearch(param) {
+				if (!param) {
+					toast.warn('请输入搜索内容')
+					return
+				}
+				this.queryParam = param
+				const index = this.recentRecordList.findIndex(item => {
+					return item === param
+				})
+				if (index > -1) {
+					this.recentRecordList.splice(index, 1)
+				}
+				this.recentRecordList.unshift(param)
+			},
+			goBack() {
+				uni.navigateBack()
+			},
+			recentSearch(obj) {
+				this.queryParam = obj
+				// console.log(obj)
+			},
+			clearRecentSearch() {
+				this.recentRecordList = []
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.top-search {
+		position: relative;
+	}
+
+	.recent-search {
+		.title {
+			padding: 32rpx 10rpx;
+			display: flex;
+			justify-content: space-between;
+
+			.title-text {
+				font-size: 32rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #3E3E3E;
+				line-height: 42rpx;
+			}
+		}
+
+		.recent-record {
+			.empty-record {
+				font-size: 28rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #666666;
+				line-height: 28rpx;
+				text-align: center;
+			}
+
+			.no-empty-record {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 0 10rpx;
+
+				.tag-item {
+					margin: 0 20rpx 20rpx 0;
+				}
+			}
+		}
+	}
+
+	.search-found {
+		.title {
+			padding: 32rpx 10rpx;
+
+			.title-text {
+				font-size: 32rpx;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #3E3E3E;
+				line-height: 42rpx;
+			}
+		}
+
+		.found-record {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 10rpx;
+
+			.tag-item {
+				margin: 0 20rpx 20rpx 0;
+			}
+		}
+	}
+</style>