首页搜索，暂无数据时显示的页面

pages/index/search/index.vue

@@ -28,139 +28,147 @@
 		</view>
 
 	</view>
-
+	<view style="display: flex;flex-direction: column;align-items: center;" v-if="!datas.isSearch&&datas.keywordList.length==0">
+		<image src="/static/index/none.png" style="width: 341rpx;height: 341rpx;" mode=""></image>
+		<text style=";">暂无数据</text>
+	</view>
 </template>
 
 <script setup>
-import { selectCourseTitles } from '@/api/index/index.js'
+	import {
-import videoList from './videoList.vue'
+		selectCourseTitles
-import {
+	} from '@/api/index/index.js'
-	reactive
+	import videoList from './videoList.vue'
-} from 'vue';
+	import {
-import {
+		reactive
-	onShow, onReachBottom
+	} from 'vue';
-} from '@dcloudio/uni-app'
+	import {
-let datas = reactive({
+		onShow,
-	hotKeywordList: [], //热搜
+		onReachBottom
-	keywordList: [],// 搜索列表
+	} from '@dcloudio/uni-app'
-	keyword: "",// 搜索关键字
+	let datas = reactive({
-	page: 1,
+		hotKeywordList: [], //热搜
-	isSearch: true,
+		keywordList: [], // 搜索列表
-})
+		keyword: "", // 搜索关键字
-onShow(() => {
+		page: 1,
-	getList()
+		isSearch: true,
-})
-
-function posterSuccess() {
-
-}
-function getList() {
-	if (uni.getStorageSync('moreSearch')) {
-		datas.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
-	} else {
-		datas.hotKeywordList = []
-	}
-}
-onReachBottom(() => {
-	++datas.page
-	doSearch()
-})
-function doSearchs(keyWord) {
-	datas.keyword = keyWord
-	doSearch()
-}
-// 搜索
-async function doSearch() {
-	datas.isSearch = false
-	let res = await selectCourseTitles({
-		title: datas.keyword,
-		limit: 20,
-		page: datas.page,
 	})
-	if (datas.page == 1) {
+	onShow(() => {
-		datas.keywordList = res.list
+		getList()
-	} else {
+	})
-		datas.keywordList = [...datas.keywordList, ...res.list]
+
+	function posterSuccess() {
+
 	}
 
-}
+	function getList() {
+		if (uni.getStorageSync('moreSearch')) {
+			datas.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
+		} else {
+			datas.hotKeywordList = []
+		}
+	}
+	onReachBottom(() => {
+		++datas.page
+		doSearch()
+	})
 
-// 取消返回首页
+	function doSearchs(keyWord) {
-function goBack() {
+		datas.keyword = keyWord
-	uni.navigateBack()
+		doSearch()
-}
+	}
+	// 搜索
+	async function doSearch() {
+		datas.isSearch = false
+		let res = await selectCourseTitles({
+			title: datas.keyword,
+			limit: 20,
+			page: datas.page,
+		})
+		if (datas.page == 1) {
+			datas.keywordList = res.list
+		} else {
+			datas.keywordList = [...datas.keywordList, ...res.list]
+		}
+
+	}
+
+	// 取消返回首页
+	function goBack() {
+		uni.navigateBack()
+	}
 </script>
 
 <style scoped lang="scss">
-.search-box {
+	.search-box {
-	width: 100%;
+		width: 100%;
-	/* background-color: rgb(242, 242, 242); */
+		/* background-color: rgb(242, 242, 242); */
-	padding: 15upx 2.5%;
+		padding: 15upx 2.5%;
-	display: flex;
-	justify-content: space-between;
-	// position: sticky;
-	// top: 0;
-	background-color: #ffffff;
-}
-
-.search-keyword {
-	width: 100%;
-}
-
-.keyword-block {
-	padding: 10rpx 0;
-}
-
-.keyword {
-	width: 94%;
-	padding: 3px 3%;
-	display: flex;
-	flex-flow: wrap;
-	justify-content: flex-start;
-
-	>view {
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-radius: 60upx;
-		padding: 0 20upx;
-		margin: 10upx 20upx 10upx 0;
-		height: 60upx;
-		font-size: 28upx;
-		// background-color: rgb(242, 242, 242);
-		background: #E6EBFF;
-		color: #6b6b6b;
-	}
-}
-
-.keyword-block .keyword-list-header {
-	width: 94%;
-	padding: 10rpx 3%;
-	font-size: 27rpx;
-	color: #333;
-	display: flex;
-	justify-content: space-between;
-}
-
-.keyword-block .keyword-list-header image {
-	width: 40rpx;
-	height: 40rpx;
-}
-
-.search-list {
-	width: 100%;
-	margin-top: 20rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	.search-list-box {
-		display: flex;
-		align-items: center;
 		justify-content: space-between;
-		flex-wrap: wrap;
+		// position: sticky;
-		width: 686rpx;
+		// top: 0;
-		height: 100%;
+		background-color: #ffffff;
+	}
+
+	.search-keyword {
+		width: 100%;
+	}
+
+	.keyword-block {
+		padding: 10rpx 0;
+	}
+
+	.keyword {
+		width: 94%;
+		padding: 3px 3%;
+		display: flex;
+		flex-flow: wrap;
+		justify-content: flex-start;
+
+		>view {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 60upx;
+			padding: 0 20upx;
+			margin: 10upx 20upx 10upx 0;
+			height: 60upx;
+			font-size: 28upx;
+			// background-color: rgb(242, 242, 242);
+			background: #E6EBFF;
+			color: #6b6b6b;
+		}
+	}
+
+	.keyword-block .keyword-list-header {
+		width: 94%;
+		padding: 10rpx 3%;
+		font-size: 27rpx;
+		color: #333;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.keyword-block .keyword-list-header image {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	.search-list {
+		width: 100%;
+		margin-top: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.search-list-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			width: 686rpx;
+			height: 100%;
+		}
 	}
-}
 </style>