You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

233 lines
4.7 KiB

<template>
<view class="container">
<!-- 搜索板块 -->
<view class="header">
<view class="tui-search">
<image class="search-icon" src="../../static/img/home/search.png"></image>
<input class="text-search" type="text" v-model="searchValue" placeholder="输入搜索内容" />
</view>
<view @tap='rtBubble' class="btn">搜索</view>
</view>
<view class="main">
<view class="rsTitle">热搜</view>
<view class="listitem" v-for="(item, index) in topSearch" :key="index">
<view class="title">
<view class="item">
<view @click="itemClick(item)">
<view class="item-text">{{ item }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="main">
<view class="rsTitle">历史记录<image class="del" @click="del" src="../../static/img/my/del.png"></image>
</view>
<view class="listitem" v-for="(item, index) in selectOption" :key="index">
<view class="title">
<view class="item">
<view @click="itemClick(item.keyword)">
<view class="item-text">{{ item.keyword }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selectOption: [],
topSearch: [],
localKeyword: 'orange-tyh-keyword',
searchValue: ''
};
},
onLoad() {
this.getReSou();
},
onShow() {
this.selectOption = this.$queue.get(this.localKeyword);
},
methods: {
getReSou() {
this.$Request.getT('/wm/topSearch').then(res => {
if (res.code === 0) {
this.topSearch = res.data;
}
});
},
goLogin() {
uni.navigateTo({
url: '/pages/public/login'
});
},
rtBubble() {
if (this.searchValue === '' || this.searchValue === ' ') {
uni.showToast({
icon: 'none',
title: '搜索框输入为空'
});
} else {
let keywords = this.$queue.get(this.localKeyword);
if (JSON.stringify(keywords).indexOf(this.searchValue) === -1) {
this.$queue.insert({
key: this.localKeyword,
value: {
keyword: this.searchValue
},
capacityNum: 20 //队列容量
});
}
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
console.log(token)
if (token) {
uni.navigateTo({
url: '/pages/task/tasklist?searchValue=' + this.searchValue +
'&classifyId=-1&type=fuzzySearch'
});
} else {
this.goLogin();
}
this.searchValue = ''
}
},
itemClick(item) {
let keywords = this.$queue.get(this.localKeyword);
if (JSON.stringify(keywords).indexOf(item) === -1) {
this.$queue.insert({
key: this.localKeyword,
value: {
keyword: item
},
capacityNum: 20 //队列容量
});
}
let token = this.$queue.getData('token');
if (token) {
uni.navigateTo({
url: '/pages/task/tasklist?searchValue=' + item
});
} else {
this.goLogin();
}
},
del() {
//清空最近搜索的关键词
this.selectOption = [];
this.$queue.remove(this.localKeyword);
}
}
};
</script>
<style lang="scss">
page {
background: #FFFFFF;
}
.container {
.header {
width: 100%;
height: 88upx;
background-color: #FFF;
padding: 0 20upx;
display: flex;
align-items: center;
// border-bottom: 1upx solid #dcdcdc;
// justify-content: space-between;
// position: fixed;
.tui-search {
width: 650rpx;
flex: 1;
height: 60upx;
background: #F6F8F7;
border-radius: 50upx;
padding: 0 30upx;
display: flex;
align-items: center;
.search-icon {
width: 35upx;
height: 34upx;
}
.text-search {
flex: 1;
font-weight: 500;
margin-left: 10upx;
height: 60upx;
color: #333333;
font-size: 28upx;
}
}
.btn {
color: #333333;
background-color: #FFFFFF;
font-size: 30upx;
margin-left: 30upx;
}
}
.main {
padding: 0 30upx;
.title {
// padding: 20upx;
}
.item-text-title {
color: #000000;
font-size: 15px;
font-weight: bold;
margin-left: 20upx;
margin: 10upx;
color: #333;
}
.item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item-text {
margin-left: 20upx;
// border-radius: 50upx;
margin: 10upx;
// border: 1px solid #dee0de;
padding: 10upx;
padding-left: 20upx;
padding-right: 20upx;
font-size: 13px;
color: #999999;
background: #F5F5F5;
}
}
.rsTitle {
margin: 30upx 0;
font-size: 32upx;
color: #333;
font-weight: 600;
}
.listitem {
display: inline-block;
}
.del {
width: 20px;
height: 20px;
position: absolute;
right: 30px;
}
}
</style>