171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<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>
|