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.
298 lines
7.3 KiB
298 lines
7.3 KiB
<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 && finished">
|
|
<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':'红色地图'
|
|
},
|
|
finished: false,
|
|
}
|
|
},
|
|
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").finally(()=>{
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
},
|
|
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>
|
|
|