jiazhipeng
11 months ago
5 changed files with 467 additions and 2 deletions
@ -0,0 +1,169 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,280 @@ |
|||||
|
<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> |
||||
|
|
||||
|
<view class="search-list"> |
||||
|
<view class="type-title">导游服务</view> |
||||
|
|
||||
|
<view v-for="(item,index) in list1" :key="index" class="item" @click="goDetail(item)"> |
||||
|
<view class="item-img"> |
||||
|
<image :src="showImg(item.guide_data?item.guide_data.avatar:item.image)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-content flex-column"> |
||||
|
<view class="item-title"> |
||||
|
<view class="title text-overflow">{{item.guide_data?item.guide_data.nickname:item.title}}</view> |
||||
|
<view class="group_data_name" v-if="item.guide_data">{{item.guide_data.group_data.name}}</view> |
||||
|
</view> |
||||
|
<view class="item-tags text-overflow" v-if="item.guide_data"> |
||||
|
{{item.guide_data.duration}} | |
||||
|
{{item.guide_data.lingo_data.name}} |
||||
|
</view> |
||||
|
<view class="item-tags text-overflow" v-else> |
||||
|
{{item.goods_new_tag?item.goods_new_tag.split(',').join(' | '):''}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<div class="list-common-empty" v-if="list1.length<=0"> |
||||
|
<p class="list-common-empty-tip">—— 暂无数据 ——</p> |
||||
|
</div> |
||||
|
|
||||
|
<view class="type-title">线路产品</view> |
||||
|
<view v-for="(item,index) in list2" :key="index" class="item" @click="goDetail(item)"> |
||||
|
<view class="item-img"> |
||||
|
<image :src="showImg(item.image)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-content flex-column"> |
||||
|
<view class="item-title text-overflowRows"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<view class="item-tags text-overflow" style="padding-top: 0;"> |
||||
|
{{item.goods_new_tag?item.goods_new_tag.split(',').join(' | '):''}} |
||||
|
</view> |
||||
|
<view class="money">{{item.money/100}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<div class="list-common-empty" v-if="list2.length<=0"> |
||||
|
<p class="list-common-empty-tip">—— 暂无数据 ——</p> |
||||
|
</div> |
||||
|
</view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "Search", |
||||
|
data() { |
||||
|
return { |
||||
|
showMore: true, |
||||
|
list1: [], // type_id 2 导游 |
||||
|
list2: [], // type_id 1 线路产品 |
||||
|
keywords: "", |
||||
|
|
||||
|
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)) |
||||
|
}, |
||||
|
goDetail(item) { |
||||
|
this.gotoDetailByTypeId(item.id, item.type_id) |
||||
|
}, |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
name: this.keywords, |
||||
|
offset: 0, |
||||
|
limit: 9999999, |
||||
|
}, '/api/Search/search').then(res => { |
||||
|
let resData = (res.data || []).map(v=>v.search_data) |
||||
|
// 导游 type_id 2 |
||||
|
this.list1 = resData.filter(v=>v.type_id == 2) |
||||
|
this.list2 = resData.filter(v=>v.type_id == 1) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onReachBottom() { |
||||
|
// setTimeout(() => { |
||||
|
// if (this.showMore) this.getList() |
||||
|
// },1000) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background: #F7F7F7; |
||||
|
padding: 110rpx 0 40rpx; |
||||
|
// padding: 0 30rpx; |
||||
|
} |
||||
|
.top-box { |
||||
|
height: 84rpx;; |
||||
|
padding: 12rpx 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background: white; |
||||
|
position: fixed; |
||||
|
z-index:99; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.type-title{ |
||||
|
padding:0 26rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
.type-title::before{ |
||||
|
content: ''; |
||||
|
width: 6rpx; |
||||
|
height: 33rpx; |
||||
|
background: #96684F; |
||||
|
display: block; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
margin: 26rpx auto; |
||||
|
width: 697rpx; |
||||
|
height: 200rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.item-img { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
border-radius: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
flex: 1; |
||||
|
width: 1rpx; |
||||
|
padding: 10rpx 10rpx 10rpx 20rpx; |
||||
|
.item-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #010101; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.title{ |
||||
|
max-width: 320rpx; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.group_data_name { |
||||
|
line-height: 30.67rpx; |
||||
|
margin-left: 5rpx; |
||||
|
background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/rankBg.png'); |
||||
|
background-size: 100% 100%; |
||||
|
padding: 0 8rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #FFFFFF; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-tags { |
||||
|
// display: flex; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #96684F; |
||||
|
padding-top: 10rpx; |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
|
||||
|
// &>view:first-child::after { |
||||
|
// content: '丨'; |
||||
|
// display: inline-block; |
||||
|
// margin: 0 5rpx; |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.money{ |
||||
|
text-align: right; |
||||
|
font-weight: bold; |
||||
|
font-size: 34rpx; |
||||
|
color: #DC2525; |
||||
|
} |
||||
|
.money::before { |
||||
|
font-size: 22rpx; |
||||
|
content: '￥'; |
||||
|
} |
||||
|
|
||||
|
.money::after { |
||||
|
font-size: 22rpx; |
||||
|
content: '起'; |
||||
|
color: #999999; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
margin: 26rpx 0; |
||||
|
|
||||
|
} |
||||
|
.list-common-empty-tip{ |
||||
|
color:#999; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue