From 5b5e9ea959e6c1daf36e87c9055ea55a977517a2 Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Mon, 9 Dec 2024 11:50:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                           |  14 ++
 pages/index/index.vue                |   2 +-
 subPackages/onlineService/search.vue |   4 +-
 subPackages/search/search.vue        | 169 ++++++++++++++++
 subPackages/search/searchList.vue    | 280 +++++++++++++++++++++++++++
 5 files changed, 467 insertions(+), 2 deletions(-)
 create mode 100644 subPackages/search/search.vue
 create mode 100644 subPackages/search/searchList.vue

diff --git a/pages.json b/pages.json
index b5a7201..34f3614 100644
--- a/pages.json
+++ b/pages.json
@@ -47,6 +47,20 @@
 					"navigationBarTitleText": "填写订单"
 				}
 			},
+			{
+				"path": "search/search",
+				"style": {
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false
+				}
+			},
+			{
+				"path": "search/searchList",
+				"style": {
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false
+				}
+			},
 			{
 				"path": "onlineService/index",
 				"style": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8f2f107..5d9dffd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="bg">
 		<view class="search-box flex-between">
-			<view class="search">
+			<view class="search" @click="gotoPath('/subPackages/search/search')">
 				<image src="https://static.ticket.sz-trip.com/tourist/index/search.png" class="search-img"></image>
 				请输入导游姓名/产品名称
 			</view>
diff --git a/subPackages/onlineService/search.vue b/subPackages/onlineService/search.vue
index c88b266..71c8d33 100644
--- a/subPackages/onlineService/search.vue
+++ b/subPackages/onlineService/search.vue
@@ -113,13 +113,15 @@
 			display: flex;
 			align-items: center;
 			padding: 15rpx 19rpx;
+			font-size: 28rpx;
 			.input {
 				flex: 1;
 				border: none;
 				outline: none;
 				background: none;
-				color: #666;
+				color: #000000;
 				margin: 0 20rpx;
+				font-size: 28rpx;
 			}
 		}
 		.btn {
diff --git a/subPackages/search/search.vue b/subPackages/search/search.vue
new file mode 100644
index 0000000..ac908f0
--- /dev/null
+++ b/subPackages/search/search.vue
@@ -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>
diff --git a/subPackages/search/searchList.vue b/subPackages/search/searchList.vue
new file mode 100644
index 0000000..1913b62
--- /dev/null
+++ b/subPackages/search/searchList.vue
@@ -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>