个股搜索添加

pages/geGuCenter/detail.vue

@@ -5,9 +5,15 @@
 		<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
 			<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
 			<input class="flex1" type="text" v-model="keywords" placeholder="输入股票代码或名称"
-				placeholder-style="color:#eeeeee" confirm-type="search" @confirm="clickSearch()" />
+				placeholder-style="color:#eeeeee" confirm-type="search" @input="clickSearch()" />
+		</view>
+<view v-if="searchShow" class="searchResultList fixed" :style="'top:'+searchResultTop+'px;'" @click="clickSearchResultBg()">
+			<view class="list">
+				<view class="item" v-for="(item,index) in searchResultList" :key="index" @click.stop="clickSearchResultListItem(item)">
+					{{item.stock_code}} {{item.stock_name}}
+				</view>
+			</view>
 		</view>
-
 		<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
 			<view>
 				<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin: 0 20rpx;">
@@ -60,7 +66,9 @@
 		inject
 	} from 'vue'
 	import {
-		marketHeatmap
+		marketHeatmap,
+		searchStockInfo,
+		stockBasicInfo
 	} from '@/request/api'
 
 	export default {
@@ -71,6 +79,12 @@
 				allStockData: [],
 				filteredData: [],
 				currentDate: '', // 最终要赋值的日期
+				searchResultTop:'',		//搜索结果
+				contentTop: '',
+				keywords: '',			//搜索关键字
+				searchShow:false,		//是否展示搜索结果
+				searchResultList:[],	//搜索结果
+				selectSearchStockInfo:null,	//选中的搜索股票信息
 				topLists: [{
 						title: '超大盘股',
 						value: '（>1000亿）',
@@ -89,10 +103,66 @@
 		},
 		onLoad(e) {
 			this.currentDate = e.currentDate
+			  this.searchResultTop = this.navH + (20 + 70) / 750 * inject('windowWidth')
 			this.contentTop = this.navH + (20 + 70 + 25) / 750 * inject('windowWidth')
 			this.marketHeatmap()
 		},
 		methods: {
+			/**
+			 * 点击搜索
+			 */
+			clickSearch() {
+				if(this.keywords) {
+					this.getSearchStockInfoListData()
+				}else 
+					this.selectSearchStockInfo = null
+			},
+			/**
+			 * 点击搜索结果背景
+			 */
+			clickSearchResultBg()
+			{
+				this.searchShow = false
+			},
+			/**
+			 * 点击搜索结果列表项
+			 */
+			clickSearchResultListItem(item) {
+				this.selectSearchStockInfo = item 
+				this.searchShow = false
+				this.getStockBasicInfoData()
+				//this.getQuoteDetailsData()
+			},
+			/**
+			 * 根据输入内容获取搜索列表项
+			 */
+			getSearchStockInfoListData() {
+				let param = {q:this.keywords,limit:10}
+				searchStockInfo(param).then(res=>{
+					this.searchResultList = res.data
+					this.searchShow = this.searchResultList.length>0
+				}).catch(error=>{
+					
+				})
+			},
+			/**
+			 * 获取股票基本信息
+			 */
+			getStockBasicInfoData() {
+				let code = this.stockCode 
+				if (this.selectSearchStockInfo) {
+					code = this.selectSearchStockInfo.stock_code
+				}
+				// stockBasicInfo(code).then(res=>{
+				// 	this.stockBasicInfo = res.data
+				// 	this.navTitle = res.data.SECNAME+'('+res.data.SECCODE+')'
+				// }).catch(error=>{
+					
+				// })
+				uni.navigateTo({
+					url: '/pagesStock/stockCenterDetails/stockCenterDetails?code=' + code
+				})
+			},
 			handleTypeClick(index) {
 				this.list2Index = index;
 				// 先请求数据，再筛选
@@ -130,8 +200,10 @@
 		},
 			marketHeatmap() {
 				let param = {
-					limit: 500,
-					date: this.currentDate
+					limit: 500
+				}
+				if (this.currentDate && this.currentDate !== 'undefined' && this.currentDate.trim() !== '') {
+					param.date = this.currentDate;
 				}
 				marketHeatmap(param).then(res => {
 					// 存储原始数据
@@ -218,4 +290,25 @@
 		background-color: white;
 		border-radius: 10rpx;
 	}
+	.searchResultList {
+		background-color: #00000080;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 0 25rpx;
+		.list 
+		{
+			background-color: white;
+			border-radius: 10rpx;
+			.item
+			{
+				padding: 0 42rpx;
+				line-height: 60rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #333;
+			}
+		}
+		z-index: 20;
+	}
 </style>