jiazhipeng
3 months ago
5 changed files with 577 additions and 7 deletions
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<view style="width: 100%;height: 1px;"></view> |
||||
|
<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: #019B67; |
||||
|
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,295 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<view style="width: 100%;height: 1px;"></view> |
||||
|
<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)" v-for="(item, key) in list" :key="item.id" class="search-item"> |
||||
|
<image class="search-img" :src="item.ext.headimg" mode="aspectFill"></image> |
||||
|
<div class="search-content"> |
||||
|
<div class="search-title text-overflowRows">{{item.ext.title}}</div> |
||||
|
<!-- 门票+美食+酒店+年卡+文创特产 --> |
||||
|
<template v-if="['ticket','food','room','scenic','post'].includes(item.ext.type)"> |
||||
|
<div class="text-overflow" style="color: #019B67;padding-top: 10rpx;flex-shrink: 0;" |
||||
|
v-if="item.ext.display_tags"> |
||||
|
{{item.ext.display_tags.split(",").slice(0,2).join(" | ")}} |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 演出 --> |
||||
|
<template v-else-if="['show'].includes(item.ext.type)"> |
||||
|
<div class="text-overflow" style="font-size: 27rpx;color: #606060;;padding-top: 10rpx;flex-shrink: 0;" |
||||
|
v-if="item.ext.subtitle"> |
||||
|
{{item.ext.subtitle}} |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 线路 --> |
||||
|
<template v-else-if="['line'].includes(item.ext.type)"> |
||||
|
<div class="text-overflow" style="font-size:21rpx;padding-top: 10rpx;flex-shrink: 0;"> |
||||
|
<text style="color: #019B67">{{item.ext.rate}}分</text> |
||||
|
<text style="padding: 0 5rpx;">|</text> |
||||
|
<text style="color: #606060;" v-if="item.ext.sales_number">销量{{item.ext.sales_number}}份</text> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<div class="search-info"> |
||||
|
<div style="flex: 1;width: 1rpx;padding-right: 20rpx;" v-if="['ticket','food','room','scenic'].includes(item.ext.type)"> |
||||
|
<div style="align-items: center;display: flex;" class="text-overflow" |
||||
|
v-if="item.ext.address || item.ext.scene_address"> |
||||
|
<image style="width: 24rpx;height: 24rpx;flex-shrink: 0;" src="https://kswtgl.com/uploads/20250716/b8e82f15960e56f476e75e35c39dad7c.png"></image> |
||||
|
<view class="text-overflow" style="color: #606060;padding-left: 10rpx;">{{item.ext.address || item.ext.scene_address}}</view> |
||||
|
</div> |
||||
|
<div class="text-overflow" style="color: #000000;padding-top: 10rpx;" v-if="item.ext.distance">距您直线距离{{(item.ext.distance/1).toFixed(1)}}km</div> |
||||
|
</div> |
||||
|
<div v-else style="flex: 1;width: 1rpx;padding-right: 20rpx;"></div> |
||||
|
<div class="price">{{item.ext.price/100}}</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</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, |
||||
|
lat: "", |
||||
|
lon:"", |
||||
|
types: { |
||||
|
'scenic':'景点', |
||||
|
'ticket':'门票', |
||||
|
'room':'酒店', |
||||
|
'post':'特产', |
||||
|
'line':'线路', |
||||
|
'venue':'场馆', |
||||
|
'food':'美食', |
||||
|
'activity':'活动', |
||||
|
'travels':'游记', |
||||
|
'coupon':'卡券', |
||||
|
'show': '演出', |
||||
|
'calendar':'活动日历', |
||||
|
'movie':'电影', |
||||
|
'restaurant':'美食', |
||||
|
'tenscenic':'景点', //十景 |
||||
|
'cinema':'影院', |
||||
|
'relic':'文物', |
||||
|
'units':'文化单位', |
||||
|
'red_map':'红色地图' |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
let _this = this |
||||
|
this.options = options |
||||
|
this.keywords = options.keywords; |
||||
|
this.finished = false; |
||||
|
uni.getLocation({ |
||||
|
success: data => { |
||||
|
_this.lat = data.latitude; |
||||
|
_this.lon = data.longitude; |
||||
|
_this.getList() |
||||
|
}, |
||||
|
fail: res=> { |
||||
|
_this.getList() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
search() { |
||||
|
if (this.keywords.trim().length<=0) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入搜索关键字', |
||||
|
icon:"none", |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.pushHis(this.keywords); |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
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) { |
||||
|
console.log(item) |
||||
|
|
||||
|
this.gotoDetailByTypeToJdsz(item.ext) |
||||
|
}, |
||||
|
getList() { |
||||
|
uni.showLoading({}) |
||||
|
uni.request({ |
||||
|
method: 'POST', |
||||
|
url: 'https://api.cloud.sz-trip.com/api/search/kunshan', |
||||
|
// url: "https://test.api.cloud.sz-trip.com/api/search/kunshan", |
||||
|
header: {'content-type': 'application/json'}, |
||||
|
data: { |
||||
|
name: this.keywords, |
||||
|
offset: this.list.length, |
||||
|
limit: 30, |
||||
|
lon: this.lon ||"", |
||||
|
lat: this.lat||"", |
||||
|
key: "changshu" |
||||
|
}, |
||||
|
success: res => { |
||||
|
console.log(res) |
||||
|
if (res.data.code==1) { |
||||
|
let resData = res.data |
||||
|
this.list = [...this.list, ...resData.data.list]; |
||||
|
if (resData.data.list.length<30) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
complete: () => { |
||||
|
uni.hideLoading() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.Post({name: this.keywords,limit:1},"/api/search/search") |
||||
|
} |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (!this.finished) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: white; |
||||
|
padding: 0 30rpx; |
||||
|
} |
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 68rpx; |
||||
|
margin: 34rpx auto; |
||||
|
margin-bottom: 0; |
||||
|
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: #019B67; |
||||
|
border-radius: 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
padding: 10rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.search-list { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.search-item { |
||||
|
display: flex; |
||||
|
padding: 32rpx 0; |
||||
|
border-bottom: 1px solid #d9d9d9; |
||||
|
|
||||
|
.search-img{ |
||||
|
width: 215rpx; |
||||
|
height: 185rpx; |
||||
|
border-radius: 13rpx 13rpx 13rpx 13rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.search-content{ |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
padding-left: 25rpx; |
||||
|
font-weight: 400; |
||||
|
font-size: 20rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.search-info{ |
||||
|
padding-top: 10rpx; |
||||
|
height: 1rpx; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
.search-title { |
||||
|
font-weight: 500; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.price{ |
||||
|
font-size: 32rpx; |
||||
|
color: #D62829; |
||||
|
flex-shrink: 0; |
||||
|
&::before{ |
||||
|
content: '￥'; |
||||
|
font-size: 21rpx; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: '起'; |
||||
|
font-size: 21rpx; |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.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