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.
329 lines
6.7 KiB
329 lines
6.7 KiB
<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">
|
|
<image class="img" :src="showImg(item.ext.headimg)" mode="aspectFill"></image>
|
|
<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':'活动'
|
|
},
|
|
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 => {
|
|
|
|
this.list = [...this.list, ...res.data.list];
|
|
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>
|
|
|