Merge remote-tracking branch 'origin/master'

v2
king 1 year ago
commit eb218db694
  1. 11
      src/api/search.ts
  2. 2
      src/app.config.ts
  3. 5
      src/pages/preview/search/list/index.config.ts
  4. 32
      src/pages/preview/search/list/index.module.scss
  5. 95
      src/pages/preview/search/list/index.tsx
  6. 5
      src/pages/preview/search/search/index.config.ts
  7. 49
      src/pages/preview/search/search/index.module.scss
  8. 97
      src/pages/preview/search/search/index.tsx

@ -0,0 +1,11 @@
import {request} from "@/api/request";
export const SearchApi = {
/** 品牌列表 */
list(page: number , page_size: number, search_content: string) {
return request<{
data: any[],
total: number
}>(`/home/v1/search/home?page=${page}&page_size=${page_size}&keywords=${search_content}&sort_type=1&sort=0` , "GET")
},
}

@ -93,6 +93,8 @@ export default defineAppConfig({
'illness/list/list', 'illness/list/list',
'illness/article/article', 'illness/article/article',
'webView/webView', 'webView/webView',
'search/search/index',
'search/list/index',
] ]
}, },
], ],

@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '搜索列表',
navigationBarBackgroundColor:'#F2F8F6',
onReachBottomDistance: 50
})

@ -0,0 +1,32 @@
.box {
display: flex;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
box-sizing: border-box;
}
.image{
width: 128rpx;
height:128rpx;
background-color: #ededed;
border-radius: 8rpx;
}
.rightBox{
padding-left: 24rpx;
box-sizing: border-box;
flex: 1;
}
.desc{
font-size: 24rpx;
font-weight: 500;
color: #909795;
line-height: 34rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}

@ -0,0 +1,95 @@
import {FC, useCallback, useEffect, useState} from "react";
import {View} from "@tarojs/components";
import styles from './index.module.scss'
import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Spinner from "@/components/spinner";
import Img from "@/components/image/image";
import { SearchApi } from "@/api/search";
const SearchList: FC = () => {
const {name} = useRouter().params as unknown as { name: string}
const [page, setPage] = useState(1)
const [brands, setBrands] = useState<any[]>([])
const [total, setTotal] = useState(0)
const [text, setText] = useState('')
const [loading, setLoading] = useState(true)
useEffect(() => {
getData()
}, [page,name])
const getData = useCallback(async () => {
try {
const data = await SearchApi.list(page, 10,name)
if (page === 1) {
if (data.data.length < 10) {
setText('没有更多了~')
} else {
setText('上拉加载更多~')
}
}
setTotal(data.total)
setBrands([
...brands,
...data.data
])
} catch (e) {
}
setLoading(false)
}, [page])
function jumpInfo(id: number,type:string) {
console.log(type,'type')
let url = ''
switch (type){
case 'brand':
url = '/pages/preview/brand/info/info';
break;
case 'illness':
url = '/pages/preview/illness/list/list';
break;
case 'article':
url = '/pages/preview/illness/article/article'
break
case 'video_record':
url = '/pages/preview/videoFull/videoFull'
break
}
Taro.navigateTo({url: `${url}?id=${id}`})
}
useReachBottom(useCallback(() => {
if (brands?.length < total) {
setPage(page + 1)
} else {
setText('没有更多了~')
}
}, [total, brands]))
return (
<View className='p-2'>
<Spinner enable={loading} overlay/>
{
brands.length ?
<>
{brands.map((d) => <View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}>
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
<View className={styles.rightBox}>
<View className='font-weight mb-2 font-28'>{d.data.title}</View>
<View className={styles.desc}>{d.graphic_introduction}</View>
</View>
</View>)
}
<View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View>
</> : <Empty name='空空如也'/>
}
</View>
)
}
export default SearchList

@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '课程搜索',
navigationBarBackgroundColor:'#F2F8F6',
onReachBottomDistance: 50
})

@ -0,0 +1,49 @@
page{
background-color:#F2F8F6;
padding-left: 30rpx;
.searchBox{
width: 690rpx;
height: 68rpx;
background: #FFFFFF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
padding:0 24rpx;
.input{
font-size: 28rpx;
font-weight: 500;
margin-left: 24rpx;
}
}
.titleBox{
margin-top: 60rpx;
width: 100%;
display: flex;
box-sizing: border-box;
padding-right: 30rpx;
justify-content: space-between;
.title{
font-size: 28rpx;
font-weight: bold;
color: #323635;
}
}
.contentBox{
display: flex;
flex-wrap: wrap;
.items{
display: inline-block;
background: #FFFFFF;
border-radius:32rpx;
padding: 10rpx 24rpx;
font-size: 24rpx;
font-weight: 500;
color: #323635;
line-height: 24rpx;
margin-top: 24rpx;
margin-right: 24rpx;
}
}
}

@ -0,0 +1,97 @@
import {Input, View, Text} from "@tarojs/components";
import {FC, useState} from "react";
import { AtIcon } from 'taro-ui'
import styles from './index.module.scss'
import Taro from "@tarojs/taro";
import { useReady, useDidShow } from '@tarojs/taro'
const Search:FC = () => {
const [value, setValue] = useState('')
const [recentSearch, setRecentSearch] = useState<string[]>([])
const [hotSearch,setHotSearch] = useState<any[]>([])
useReady(()=>{
console.log('onReady')
})
useDidShow(()=>{
getRecentSearch()
})
function inpFn(e){
setValue(e.detail.value)
}
function clearSearch(){
Taro.removeStorageSync('recentSearch')
getRecentSearch()
}
function getRecentSearch () {
setRecentSearch(Taro.getStorageSync('recentSearch'))
}
function getSearchItem(value) {
Taro.navigateTo({
url:`/pages/preview/search/list/index?name=${value}`
})
}
function searchInput(){
if (value === "") return;
getSearchItem(value)
//记录最近搜索
let recentSearch = Taro.getStorageSync('recentSearch') || [];
recentSearch.unshift(value);
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
}
return (
<View className="flex flex-column">
<View className={styles.searchBox}>
<AtIcon value='search' size='20' color='#ccc'></AtIcon>
<Input className={styles.input} placeholder="输入关键字搜索课程" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
</View>
{
recentSearch.length >= 1 &&
<>
<View className={styles.titleBox} >
<Text className={styles.title}></Text>
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
</View>
<View className={styles.contentBox}>
{
recentSearch.length &&
recentSearch?.map(d =>
<View className={styles.items}>
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
</View>)
}
</View>
</>
}
{
hotSearch.length >= 1 &&
<>
<View className={`flex justify-between ${styles.titleBox}`} >
<Text className="font-32 fwb"></Text>
</View>
<View className="wid100 pt-3 pl-3 box-b">
<View className="wid100 flex flex-wrap">
{
hotSearch.length &&
hotSearch.map(d =>
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
</View>)
}
</View>
</View>
</>
}
</View>
)
}
export default Search
Loading…
Cancel
Save