jiazhipeng
1 month ago
3 changed files with 588 additions and 7 deletions
@ -0,0 +1,225 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<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: {}, |
||||
|
type: '', // techan时跳转techanResult |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
if (options.type) { |
||||
|
this.type = options.type |
||||
|
} |
||||
|
}, |
||||
|
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) { |
||||
|
let url = '/subPackages/search/result' |
||||
|
if (this.type == 'techan') { url = '/subPackages/search/techanResult' } |
||||
|
if (this.keywords) { |
||||
|
this.pushHis(this.keywords); |
||||
|
uni.navigateTo({ |
||||
|
url: url+`?keywords=${this.keywords}` |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
gotoHot(name) { |
||||
|
let url = '/subPackages/search/result' |
||||
|
if (this.type == 'techan') { url = '/subPackages/search/techanResult' } |
||||
|
uni.navigateTo({ |
||||
|
url: url+`?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 lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #FFFFFF; |
||||
|
padding: 20rpx 26rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 67rpx; |
||||
|
margin: 0 auto 30rpx; |
||||
|
background: #F2F2F2; |
||||
|
border-radius: 33rpx; |
||||
|
padding: 6rpx 7rpx 6rpx 26rpx; |
||||
|
font-size: 26rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
img { |
||||
|
width: 28rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
.input { |
||||
|
flex: 1; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
background: none; |
||||
|
color: #666; |
||||
|
margin: 0 20rpx; |
||||
|
} |
||||
|
.btn { |
||||
|
background: #6A8A27; |
||||
|
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: #000; |
||||
|
line-height: 42rpx; |
||||
|
border-radius: 7rpx; |
||||
|
background: #F1F1F1; |
||||
|
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,344 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<view class="top-bg"> |
||||
|
<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> |
||||
|
<view class="common-box"> |
||||
|
<view class="common-types com-flex-tao"> |
||||
|
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" |
||||
|
:class="['common-type', typeIndex == index ? 'active' : '']"> |
||||
|
{{ item.name }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<div class="search-list"> |
||||
|
<view @click="gotoDetailByType(item.ext)" v-for="(item, key) in list" :key="item.id" class="search-item"> |
||||
|
<view class="img" style="position: relative;"> |
||||
|
<image class="img" :src="showImg(item.ext.headimg)" mode="aspectFill"></image> |
||||
|
<view class="hover-use-type" v-if="item.ext.type=='post'&&item.ext.delivery_method"> |
||||
|
{{item.ext.delivery_method_str.join('/')}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content"> |
||||
|
<view class="title text-overflowRows"> |
||||
|
{{item.ext.title}} |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="flex-between"> |
||||
|
<view class="distance text-overflow" > |
||||
|
<image v-if="item.ext.address||item.ext.scene_address" :src="showImg('https://static.ticket.sz-trip.com/uploads/20250619/0e16bffb0cd3648faa47879d0d532842.png')" class="icon-tip"></image> |
||||
|
<text v-if="item.ext.address">{{item.ext.address}}</text> |
||||
|
<text v-else-if="item.ext.scene_address">{{item.ext.scene_address}}</text> |
||||
|
</view> |
||||
|
<view class="bottom"> |
||||
|
<view class="price ticlet-price"> |
||||
|
{{item.ext.price/100}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="no-data-zhanwei" v-if="list.length<=0"> |
||||
|
<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image> |
||||
|
<view style="padding:50rpx 0 67rpx">暂无数据</view> |
||||
|
</view> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "Search", |
||||
|
data() { |
||||
|
return { |
||||
|
typeList: [ |
||||
|
{name: '全部', type: ''}, |
||||
|
{name: '游玩', type: 'ticket'}, |
||||
|
{name: '民宿', type: 'hotel'}, |
||||
|
{name: '线路', type: 'line'}, |
||||
|
{name: '农产品', type: 'post'}, |
||||
|
], |
||||
|
typeIndex: 0, |
||||
|
showMore: true, |
||||
|
list: [], |
||||
|
keywords: "", |
||||
|
|
||||
|
types: { |
||||
|
'goods': "商品", |
||||
|
// 'scenic': "景点", |
||||
|
'article': "文章", |
||||
|
'activity':'活动' |
||||
|
}, |
||||
|
deliveryMethod: { |
||||
|
"1":"邮寄","2":"自提", "3":"配送" |
||||
|
}, |
||||
|
options: {} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.options = options |
||||
|
this.keywords = options.keywords; |
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
setType(index) { |
||||
|
if (this.typeIndex!==index) { |
||||
|
this.typeIndex = index; |
||||
|
this.list = [] |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
search() { |
||||
|
this.pushHis(this.keywords); |
||||
|
this.list = []; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
pushHis(keywords) { |
||||
|
if (!keywords.trim()) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
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) { |
||||
|
|
||||
|
}, |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
name: this.keywords, |
||||
|
offset: this.list.length, |
||||
|
type: this.typeList[this.typeIndex].type, |
||||
|
limit: 10, |
||||
|
lon: uni.getStorageSync('location').lon || '120', |
||||
|
lat: uni.getStorageSync('location').lat || '36', |
||||
|
}, '/api/search/search').then(res => { |
||||
|
let resData = res.data.list |
||||
|
resData.forEach(v=>{ |
||||
|
if (v.ext.delivery_method) { |
||||
|
v.ext.delivery_method_str = this.getDeliveryMethodStr(v.ext.delivery_method) |
||||
|
} |
||||
|
}) |
||||
|
this.list = [...this.list, ...resData]; |
||||
|
this.showMore = true |
||||
|
if (res.data.length<10) { |
||||
|
this.showMore = false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if (this.showMore) this.getList() |
||||
|
},1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
|
||||
|
// padding: 0 30rpx; |
||||
|
} |
||||
|
.top-bg{ |
||||
|
padding: 20rpx 30rpx; |
||||
|
background: #FFFFFF; |
||||
|
.search-box { |
||||
|
width: 100%; |
||||
|
|
||||
|
height: 67rpx; |
||||
|
background: #F2F2F2; |
||||
|
border-radius: 33rpx; |
||||
|
padding: 6rpx 7rpx 6rpx 26rpx; |
||||
|
font-size: 26rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
img { |
||||
|
width: 28rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
.input { |
||||
|
flex: 1; |
||||
|
border: none; |
||||
|
outline: none; |
||||
|
background: none; |
||||
|
color: #666; |
||||
|
margin: 0 20rpx; |
||||
|
} |
||||
|
.btn { |
||||
|
background-color: #6A8A27; |
||||
|
border-radius: 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
padding: 10rpx 26rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-list { |
||||
|
padding: 26rpx 30rpx; |
||||
|
background: #F7F7F7; |
||||
|
} |
||||
|
|
||||
|
.search-item { |
||||
|
width: 100%; |
||||
|
height: 200rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
display: flex; |
||||
|
margin-bottom: 26rpx; |
||||
|
.img { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
background: #87CD93; |
||||
|
border-radius: 13rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding:13rpx 20rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
} |
||||
|
.title { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.distance { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
padding-right: 10rpx; |
||||
|
|
||||
|
image{ |
||||
|
width: 26rpx; |
||||
|
height: 26rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
text{ |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
height: 26rpx; |
||||
|
line-height: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 33.33rpx; |
||||
|
color: #C3282E; |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
.price::before{ |
||||
|
content: '￥'; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.ticlet-price::after{ |
||||
|
content: '起'; |
||||
|
font-size: 24rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list-common-empty{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
margin: 26rpx 0; |
||||
|
|
||||
|
} |
||||
|
.list-common-empty-tip{ |
||||
|
color:#999; |
||||
|
} |
||||
|
|
||||
|
.common-box { |
||||
|
height: 90rpx; |
||||
|
.common-types { |
||||
|
background: white; |
||||
|
height: 90rpx; |
||||
|
font-size: 31rpx; |
||||
|
z-index: 10; |
||||
|
margin: auto; |
||||
|
color: #666; |
||||
|
overflow-x: scroll; |
||||
|
overflow-y: hidden; |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.common-types::-webkit-scrollbar { |
||||
|
width: 0rpx; |
||||
|
height: 0; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-type { |
||||
|
margin: 0 26rpx; |
||||
|
line-height: 90rpx; |
||||
|
height: 90rpx; |
||||
|
position: relative; |
||||
|
color: #000000; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.common-type.active { |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #6A8A27; |
||||
|
} |
||||
|
|
||||
|
.common-type.active:after { |
||||
|
display: block; |
||||
|
width: 60%; |
||||
|
font-size: 0; |
||||
|
content: '1'; |
||||
|
margin: auto; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 1rpx; |
||||
|
height: 4rpx; |
||||
|
background: #6A8A27; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.icon-tip{ |
||||
|
width: 26rpx; |
||||
|
height: 26rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
.bottom{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue