chenkainan
1 year ago
5 changed files with 413 additions and 3 deletions
@ -0,0 +1,221 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<title-header title='搜索'></title-header> |
|||
<div class="search-box"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" /> |
|||
<div class="btn" @click="search()">搜索</div> |
|||
</div> |
|||
<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; |
|||
} |
|||
|
|||
.search-box { |
|||
width: 697rpx; |
|||
height: 68rpx; |
|||
margin: 34rpx auto; |
|||
border-radius: 60rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background-color: #F2F2F2; |
|||
} |
|||
|
|||
.search-box img { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
|
|||
.search-box .input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
|
|||
.search-box .btn { |
|||
background-color: #00AAFF; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
} |
|||
|
|||
.search-title { |
|||
color: #000000; |
|||
font-size: 32rpx; |
|||
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: 24rpx; |
|||
color: #333; |
|||
line-height: 42rpx; |
|||
border-radius: 20rpx; |
|||
background: #ECECEC; |
|||
margin-right: 22rpx; |
|||
margin-bottom: 23rpx; |
|||
} |
|||
|
|||
.road-list { |
|||
display: flex; |
|||
margin: 20rpx 0; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.road-item { |
|||
width: 332rpx; |
|||
border-radius: 10rpx; |
|||
box-shadow: 0px 0px 10rpx 0px rgba(4, 0, 0, 0.16); |
|||
margin-bottom: 26rpx; |
|||
min-height: 156rpx; |
|||
} |
|||
|
|||
.road-item image { |
|||
border-top-right-radius: 10rpx; |
|||
border-top-left-radius: 10rpx; |
|||
width: 332rpx; |
|||
height: 246rpx; |
|||
object-fit: cover; |
|||
display: block; |
|||
} |
|||
|
|||
.road-info { |
|||
padding: 10rpx 15rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.road-title { |
|||
font-size: 32rpx; |
|||
line-height: 32rpx; |
|||
font-weight: 500; |
|||
margin-top: 6rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.hotel-subtitle { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
line-height: 24rpx; |
|||
margin-bottom: 18rpx; |
|||
min-height: 48rpx; |
|||
} |
|||
|
|||
.hotel-price { |
|||
text-align: right; |
|||
color: #FC524B; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 30rpx; |
|||
} |
|||
|
|||
.hotel-price:after { |
|||
content: "起"; |
|||
font-size: 20rpx; |
|||
color: #999; |
|||
margin-left: 5rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<title-header title='搜索'></title-header> |
|||
<div class="search-box"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" /> |
|||
<div class="btn" @click="search()">搜索</div> |
|||
</div> |
|||
<div class="search-list"> |
|||
<div @click="gotoDetail(item.search_data)" v-for="(item, key) in list" :key="item.id" class="search-item"> |
|||
<p class="search-title"> |
|||
{{item.title}} |
|||
</p> |
|||
<p class="search-tip"> |
|||
{{item.search_data ? item.search_data.type_name || item.search_data.article_type_text || item.search_data.scenic_type_text : ''}} |
|||
| {{types[item.type]}} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="list-common-empty" v-if="list.length==0"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/noData.png" /> |
|||
<p class="list-common-empty-tip">暂无内容</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Search", |
|||
data() { |
|||
return { |
|||
list: [], |
|||
keywords: "", |
|||
ajaxFlag: true, |
|||
types: { |
|||
'goods': "商品", |
|||
'scenic': "景点", |
|||
'article': "文章" |
|||
}, |
|||
options: {} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.options = options |
|||
this.keywords = options.keywords; |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.pushHis(this.keywords); |
|||
this.list = []; |
|||
this.getList(); |
|||
}, |
|||
pushHis(keywords) { |
|||
let history = JSON.parse(uni.getStorageSync('tz_trip_keyowrds')) || []; |
|||
let index = history.findIndex(item => item == keywords); |
|||
if (index >= 0) history.splice(index, 1); |
|||
history.unshift(keywords); |
|||
uni.setStorageSync('tz_trip_keyowrds',JSON.stringify(history)) |
|||
}, |
|||
gotoDetail(item) { |
|||
if (!item) return |
|||
// 7东台制造 8场馆预约 9壹+团建 10演出票务 11全域旅游 12东台有礼 |
|||
let url = '' |
|||
switch (item.type_id){ |
|||
case 8: |
|||
url = '/subPackages/venue/venueDetail?id=' + item.scenic_id |
|||
break; |
|||
case 11: |
|||
url = '/subPackages/line/lineDetail?id=' + item.id |
|||
break; |
|||
case 9: |
|||
url = '/subPackages/oneplus/oneplusDetails?id=' + item.id |
|||
break; |
|||
case 10: |
|||
url = '/subPackages/ticket/ticketDetails?id=' + item.id |
|||
break; |
|||
case 7: |
|||
url = '/subPackages/store/storeInfo?id=' + item.id |
|||
break; |
|||
case 12: |
|||
url = '/subPackages/store/storeInfo?id=' + item.id |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
uni.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
getList() { |
|||
this.Post({ |
|||
name: this.keywords, |
|||
offset: this.list.length, |
|||
limit: 30, |
|||
}, '/api/search/search').then(res => { |
|||
this.list = [...this.list, ...res.data]; |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: white; |
|||
padding: 0 30rpx; |
|||
} |
|||
.search-box { |
|||
width: 697rpx; |
|||
height: 68rpx; |
|||
margin: 34rpx auto; |
|||
border-radius: 60rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background-color: #F2F2F2; |
|||
} |
|||
|
|||
.search-box img { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
|
|||
.search-box .input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
margin: 0 20rpx; |
|||
} |
|||
|
|||
.search-box .btn { |
|||
background-color: #00AAFF; |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
} |
|||
|
|||
.search-list {} |
|||
|
|||
.search-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 38rpx 0; |
|||
border-bottom: 1px solid #d9d9d9; |
|||
} |
|||
|
|||
.search-title { |
|||
font-size: 30rpx; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
.search-tip { |
|||
flex-shrink: 0; |
|||
margin-left: 30rpx; |
|||
flex-shrink: 26rpx; |
|||
color: #656565; |
|||
} |
|||
.list-common-empty{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
.list-common-empty-tip{ |
|||
color:#999; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue