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.
169 lines
3.5 KiB
169 lines
3.5 KiB
<template>
|
|
<div class="bg">
|
|
<view class="top-box">
|
|
<uni-icons color="#333333" type="left" size="18" @click.native="goBack()"></uni-icons>
|
|
<view class="search-box">
|
|
<uni-icons color="#96684F" type="search" size="20" ></uni-icons>
|
|
<input type="text" class="input" placeholder="请输入导游姓名/产品名称" v-model="keywords" @confirm="search" />
|
|
</view>
|
|
<view class="btn" @click="search()">搜索</view>
|
|
</view>
|
|
|
|
|
|
<div class="search-title com-flex-tao">
|
|
搜索历史
|
|
<img @click="delHis()" src="https://static.ticket.sz-trip.com/taizhou/images/delete.png" alt="">
|
|
</div>
|
|
<div class="search-list">
|
|
<div v-for="his,hisIndex in history.slice(0,10)" @click="gotoHot(his)" :key="hisIndex"
|
|
class="search-item textOver">{{his}}</div>
|
|
</div>
|
|
<div class="search-title">大家在搜</div>
|
|
<div class="search-list">
|
|
<div @click="gotoHot(hot.name)" class="search-item textOver" v-for="hot,hotIndex in hot" :key="hotIndex">
|
|
{{hot.name}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Search",
|
|
data() {
|
|
return {
|
|
list: [],
|
|
keywords: '',
|
|
history: [],
|
|
hot: [],
|
|
keywords_name: 'tz_trip_keyowrds',
|
|
options: {}
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
this.history = uni.getStorageSync(this.keywords_name) ? JSON.parse(uni.getStorageSync(this.keywords_name)) :
|
|
[];
|
|
this.getHot()
|
|
},
|
|
methods: {
|
|
getHot() {
|
|
this.Post({
|
|
limit: 10,
|
|
}, '/api/Search/hot').then(res => {
|
|
this.hot = res.data;
|
|
})
|
|
},
|
|
delHis() {
|
|
this.history = [];
|
|
uni.removeStorageSync(this.keywords_name)
|
|
uni.showToast({
|
|
title: '删除成功'
|
|
})
|
|
},
|
|
search(e) {
|
|
if (this.keywords) {
|
|
this.pushHis(this.keywords);
|
|
uni.navigateTo({
|
|
url: `./searchList?keywords=${this.keywords}`
|
|
})
|
|
}
|
|
},
|
|
gotoHot(name) {
|
|
uni.navigateTo({
|
|
url: `./searchList?keywords=${name}`
|
|
})
|
|
this.pushHis(name)
|
|
},
|
|
pushHis(keywords) {
|
|
let history = this.history;
|
|
let index = history.findIndex(item => item == keywords);
|
|
if (index >= 0) history.splice(index, 1);
|
|
history.unshift(keywords);
|
|
uni.setStorageSync(this.keywords_name, JSON.stringify(history))
|
|
this.history = history;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.bg {
|
|
min-height: 100vh;
|
|
background: white;
|
|
padding: 0 30rpx;
|
|
position: relative;
|
|
}
|
|
.top-box {
|
|
height: 84rpx;;
|
|
padding: 12rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: white;
|
|
.search-box{
|
|
width: 493rpx;
|
|
height: 60rpx;
|
|
border: 1px solid #96684F;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 19rpx;
|
|
font-size: 28rpx;
|
|
.input {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
background: none;
|
|
color: #000000;
|
|
margin: 0 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.btn {
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
background: #96684F;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
.search-title {
|
|
color: #000000;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
margin: 36rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-title img {
|
|
width: 30rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.search-list {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-item {
|
|
padding: 0 25rpx;
|
|
font-size: 25rpx;
|
|
color: #000;
|
|
height: 47rpx;
|
|
line-height: 47rpx;
|
|
border-radius: 7rpx;
|
|
background: #F1F1F1;
|
|
margin-right: 22rpx;
|
|
margin-bottom: 23rpx;
|
|
}
|
|
|
|
</style>
|
|
|