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.
280 lines
6.2 KiB
280 lines
6.2 KiB
<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.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>
|
|
|