182 lines
4.2 KiB
Vue
182 lines
4.2 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="top">
|
|
<view class="search">
|
|
<view style="width: 550rpx; height: 61.94rpx;">
|
|
<!-- <up-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" placeholder-color="#FF0000"></up-search> -->
|
|
<view style="position: relative;">
|
|
<u-search :clearabled="false" color="#414141"
|
|
v-model="keyword" :show-action="false" borderColor="#B3D7FF" bgColor="#ffffff20"></u-search>
|
|
<view class="scan">
|
|
<u-icon name="scan" size="22" @click="toScan()"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<up-text @click.stop="onSearch" bold="true" size="28rpx" text="搜索"></up-text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 无内容 -->
|
|
<view class="noSearch" v-if="noSearch">
|
|
<view class="row">
|
|
<img style="width: 400rpx;" src="../../static/images/icon/noSearchData.png" alt="" />
|
|
</view>
|
|
<view class="row">
|
|
<text>没有找到相关内容噢，换个词试试吧！</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 搜索历史 -->
|
|
<view class="history" v-else>
|
|
<view class="history-title">
|
|
<text>搜索历史</text>
|
|
<uni-icons @click.stop="clearHistory()" type="trash" size="20" color="#C0C0C0" ></uni-icons>
|
|
</view>
|
|
<view class="history-content" v-if="historyList.length!=0">
|
|
<view class="history-item" v-for="(historyItem,historyIndex) in historyList" :key="historyIndex">
|
|
{{historyItem}}
|
|
</view>
|
|
</view>
|
|
<view class="history-none" v-else>
|
|
<text style="color: #757575;">无搜索历史</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
toRefs,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
|
|
const keyword = ref('')
|
|
const historyList = ref(['丢东西了'])
|
|
const noSearch = ref(false)
|
|
|
|
function onSearch() {
|
|
console.log('搜索 ' + keyword.value)
|
|
//把搜索的关键字保存到historyList中
|
|
saveHistory()
|
|
if(keyword.value == 'null') {
|
|
noSearch.value = true
|
|
}
|
|
}
|
|
|
|
// 保存历史记录
|
|
function saveHistory() {
|
|
// if (historyList.value.indexOf(keyword.value) == -1) {
|
|
historyList.value.unshift(keyword.value);
|
|
// 将非空的数组转换为字符串后再保存
|
|
uni.setStorageSync('kw', JSON.stringify(historyList.value));
|
|
// }
|
|
}
|
|
|
|
// 清空历史记录
|
|
function clearHistory(){
|
|
historyList.value=[]
|
|
uni.setStorageSync('kw','[]')
|
|
// if(his.length==0){
|
|
// this.his=!this.his
|
|
}
|
|
|
|
|
|
function onLoad() {
|
|
// 从缓存中读取历史记录
|
|
historyList.value=JSON.parse(uni.getStorageSync('kw'))
|
|
}
|
|
|
|
onLoad()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top {
|
|
background-color: #FAF9FA;
|
|
height: 80rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
|
|
.scan {
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 30rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
.noSearch {
|
|
display: flex;
|
|
flex-direction: column; /* 垂直方向排列 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
height: 600rpx; /* 设置合适的高度，可以是页面的高度 */
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: center; /* 水平居中 */
|
|
margin-bottom: 20rpx; /* 可以根据需要调整行之间的间距 */
|
|
}
|
|
|
|
/* 图片样式 */
|
|
.noSearch .row img {
|
|
/* 图片样式 */
|
|
}
|
|
|
|
/* 文字样式 */
|
|
.noSearch .row text {
|
|
/* 文字样式 */
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
|
|
|
|
.history{
|
|
margin-top: 30rpx;
|
|
.history-title{
|
|
width: 90%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
text{
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
.history-content{
|
|
width: 90%;
|
|
margin: 10rpx auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.history-item{
|
|
font-size: 27rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
color: #797979;
|
|
background-color: #F8F8F8;
|
|
margin-top: 25rpx;
|
|
margin-right: 10rpx;
|
|
padding:0 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.history-none{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
}
|
|
</style> |