diff --git a/src/api/search.ts b/src/api/search.ts new file mode 100644 index 0000000..1c6e93b --- /dev/null +++ b/src/api/search.ts @@ -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") + }, +} diff --git a/src/app.config.ts b/src/app.config.ts index e40a90c..3cc50b3 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -93,6 +93,8 @@ export default defineAppConfig({ 'illness/list/list', 'illness/article/article', 'webView/webView', + 'search/search/index', + 'search/list/index', ] }, ], diff --git a/src/pages/preview/search/list/index.config.ts b/src/pages/preview/search/list/index.config.ts new file mode 100644 index 0000000..632a800 --- /dev/null +++ b/src/pages/preview/search/list/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '搜索列表', + navigationBarBackgroundColor:'#F2F8F6', + onReachBottomDistance: 50 +}) diff --git a/src/pages/preview/search/list/index.module.scss b/src/pages/preview/search/list/index.module.scss new file mode 100644 index 0000000..f2d21e8 --- /dev/null +++ b/src/pages/preview/search/list/index.module.scss @@ -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; +} + diff --git a/src/pages/preview/search/list/index.tsx b/src/pages/preview/search/list/index.tsx new file mode 100644 index 0000000..ddafdfe --- /dev/null +++ b/src/pages/preview/search/list/index.tsx @@ -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([]) + 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 ( + + + { + brands.length ? + <> + {brands.map((d) => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}> + + + {d.data.title} + {d.graphic_introduction} + + ) + } + {text} + : + } + + ) +} + +export default SearchList + diff --git a/src/pages/preview/search/search/index.config.ts b/src/pages/preview/search/search/index.config.ts new file mode 100644 index 0000000..08bb2d5 --- /dev/null +++ b/src/pages/preview/search/search/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '课程搜索', + navigationBarBackgroundColor:'#F2F8F6', + onReachBottomDistance: 50 +}) diff --git a/src/pages/preview/search/search/index.module.scss b/src/pages/preview/search/search/index.module.scss new file mode 100644 index 0000000..1bba184 --- /dev/null +++ b/src/pages/preview/search/search/index.module.scss @@ -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; + } + } +} + diff --git a/src/pages/preview/search/search/index.tsx b/src/pages/preview/search/search/index.tsx new file mode 100644 index 0000000..b5acc05 --- /dev/null +++ b/src/pages/preview/search/search/index.tsx @@ -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([]) + const [hotSearch,setHotSearch] = useState([]) + + 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 ( + + + + + + + { + recentSearch.length >= 1 && + <> + + 最近搜索 + + + + { + recentSearch.length && + recentSearch?.map(d => + + {getSearchItem(d)}} className="font-28" >{d} + ) + } + + + } + { + hotSearch.length >= 1 && + <> + + + 热门搜索 + + + + { + hotSearch.length && + hotSearch.map(d => + + {getSearchItem(d)}} className="font-28" >{d} + ) + } + + + + } + + + ) +} +export default Search