174 lines
3.5 KiB
Vue
174 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<u-sticky :enable="true">
|
|
<view class="search-box">
|
|
<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" :show-action="true"
|
|
:animation="true" action-text="取消" v-model="datas.keyword" @custom="goBack()"
|
|
@search="doSearch()"></u-search>
|
|
</view>
|
|
</u-sticky>
|
|
</view>
|
|
<view class="search-keyword" v-if="datas.isSearch">
|
|
<view class="keyword-block" v-if="datas.hotKeywordList.length != 0">
|
|
<view class="keyword-list-header">
|
|
<view>热搜</view>
|
|
</view>
|
|
<view class="keyword">
|
|
<view v-for="(keyword, index) in datas.hotKeywordList" @tap="doSearchs(keyword)" :key="index">
|
|
{{ keyword }}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view class="search-list" v-else>
|
|
<view class="search-list-box">
|
|
<videoList @success="posterSuccess" :list="datas.keywordList" />
|
|
</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 videoList from './videoList.vue'
|
|
import {
|
|
reactive
|
|
} from 'vue';
|
|
import {
|
|
onShow,
|
|
onReachBottom
|
|
} from '@dcloudio/uni-app'
|
|
let datas = reactive({
|
|
hotKeywordList: [], //热搜
|
|
keywordList: [], // 搜索列表
|
|
keyword: "", // 搜索关键字
|
|
page: 1,
|
|
isSearch: true,
|
|
})
|
|
onShow(() => {
|
|
getList()
|
|
})
|
|
|
|
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) {
|
|
datas.keywordList = res.list
|
|
} else {
|
|
datas.keywordList = [...datas.keywordList, ...res.list]
|
|
}
|
|
|
|
}
|
|
|
|
// 取消返回首页
|
|
function goBack() {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.search-box {
|
|
width: 100%;
|
|
/* background-color: rgb(242, 242, 242); */
|
|
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;
|
|
width: 686rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |