提交

mixins/myMixins.js

@@ -31,10 +31,10 @@ export const myMixins ={
 		
 		}
 		return {
-			title: '吴优游', //分享的名称
+			title: '盐都文旅', //分享的名称
 			path: `${view.route}`,
 			imageUrl: "https://static.ticket.sz-trip.com/dongtai/images/index/share.jpg",
-			mpId: 'wx9e7d5346a3b09f56' //此处配置微信小程序的AppId
+			mpId: 'wxb8f15afe2765976d' //此处配置微信小程序的AppId
 		}
 	}
 }

pages.json

@@ -275,6 +275,20 @@
 			        "navigationBarTitleText" : "公告详情",
 					"navigationStyle": "custom"
 			    }
+			},
+			{
+				"path" : "search/search",
+				"style" : {
+					"navigationBarTitleText" : "搜索",
+					"enablePullDownRefresh" : false
+				}
+			},
+			{
+				"path" : "search/searchList",
+				"style" : {
+					"navigationBarTitleText" : "搜索结果",
+					"enablePullDownRefresh" : false
+				}
 			}
 		]
 	}],

pages/index/index.vue

@@ -2,7 +2,7 @@
 	<view class="content">
 		<view class="top-box">
 			<!-- 搜索 -->
-			<view class="search-box">
+			<view class="search-box" @click="gotoPath('/subPackages/search/search')">
 				<image src="https://static.ticket.sz-trip.com/yandu/images/index/search.png" mode=""></image>
 				搜一搜您想要的产品
 			</view>

subPackages/search/search.vue

@@ -0,0 +1,221 @@
+<template>
+	<div class="bg">
+		<title-header title='搜索'></title-header>
+		<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-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;
+	}
+
+	.search-box {
+		width: 697rpx;
+		height: 68rpx;
+		margin: 34rpx auto;
+		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: #00AAFF;
+		border-radius: 27rpx;
+		font-size: 28rpx;
+		color: #FFFFFF;
+		padding: 10rpx 26rpx;
+	}
+
+	.search-title {
+		color: #000000;
+		font-size: 32rpx;
+		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: 24rpx;
+		color: #333;
+		line-height: 42rpx;
+		border-radius: 20rpx;
+		background: #ECECEC;
+		margin-right: 22rpx;
+		margin-bottom: 23rpx;
+	}
+
+	.road-list {
+		display: flex;
+		margin: 20rpx 0;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.road-item {
+		width: 332rpx;
+		border-radius: 10rpx;
+		box-shadow: 0px 0px 10rpx 0px rgba(4, 0, 0, 0.16);
+		margin-bottom: 26rpx;
+		min-height: 156rpx;
+	}
+
+	.road-item image {
+		border-top-right-radius: 10rpx;
+		border-top-left-radius: 10rpx;
+		width: 332rpx;
+		height: 246rpx;
+		object-fit: cover;
+		display: block;
+	}
+
+	.road-info {
+		padding: 10rpx 15rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.road-title {
+		font-size: 32rpx;
+		line-height: 32rpx;
+		font-weight: 500;
+		margin-top: 6rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.hotel-subtitle {
+		font-size: 24rpx;
+		color: #999;
+		line-height: 24rpx;
+		margin-bottom: 18rpx;
+		min-height: 48rpx;
+	}
+
+	.hotel-price {
+		text-align: right;
+		color: #FC524B;
+		font-size: 36rpx;
+		font-weight: 500;
+		line-height: 30rpx;
+	}
+
+	.hotel-price:after {
+		content: "起";
+		font-size: 20rpx;
+		color: #999;
+		margin-left: 5rpx;
+	}
+</style>

subPackages/search/searchList.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="bg">
+		<title-header title='搜索'></title-header>
+		<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.search_data)" v-for="(item, key) in list" :key="item.id" class="search-item">
+				<p class="search-title">
+					{{item.title}}
+				</p>
+				<p class="search-tip">
+					{{item.search_data ? item.search_data.type_name || item.search_data.article_type_text || item.search_data.scenic_type_text : ''}}
+					| {{types[item.type]}}
+				</p>
+			</div>
+		</div>
+		<div class="list-common-empty" v-if="list.length==0">
+			<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,
+				types: {
+					'goods': "商品",
+					'scenic': "景点",
+					'article': "文章"
+				},
+				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))
+			},
+			gotoDetail(item) {
+				if (!item) return
+				// 7东台制造 8场馆预约 9壹+团建 10演出票务 11全域旅游 12东台有礼
+				let url = ''
+				switch (item.type_id){
+					case 8:
+						url = '/subPackages/venue/venueDetail?id=' + item.scenic_id
+						break;
+					case 11:
+						url = '/subPackages/line/lineDetail?id=' + item.id
+						break;
+					case 9:
+						url = '/subPackages/oneplus/oneplusDetails?id=' + item.id
+						break;
+					case 10:
+						url = '/subPackages/ticket/ticketDetails?id=' + item.id
+						break;
+					case 7:
+						url = '/subPackages/store/storeInfo?id=' + item.id
+						break;
+					case 12:
+						url = '/subPackages/store/storeInfo?id=' + item.id
+						break;
+					default:
+						break;
+				}
+				uni.navigateTo({
+					url: url
+				});
+			},
+			getList() {
+				this.Post({
+					name: this.keywords,
+					offset: this.list.length,
+					limit: 30,
+				}, '/api/search/search').then(res => {
+					this.list = [...this.list, ...res.data];
+				})
+			}
+		},
+	}
+</script>
+<style scoped>
+	.bg {
+		min-height: 100vh;
+		background: white;
+		padding: 0 30rpx;
+	}
+.search-box {
+		width: 697rpx;
+		height: 68rpx;
+		margin: 34rpx auto;
+		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: #00AAFF;
+		border-radius: 27rpx;
+		font-size: 28rpx;
+		color: #FFFFFF;
+		padding: 10rpx 26rpx;
+	}
+
+	.search-list {}
+
+	.search-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 38rpx 0;
+		border-bottom: 1px solid #d9d9d9;
+	}
+
+	.search-title {
+		font-size: 30rpx;
+		line-height: 36rpx;
+	}
+
+	.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>