From 02c1a92a379214e049762081545cd94b24139573 Mon Sep 17 00:00:00 2001
From: sunlizhou <296190577@qq.com>
Date: Thu, 31 Aug 2023 17:41:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=90=9C=E7=B4=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2&&=E6=90=9C=E7=B4=A2=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/search.ts                             | 11 +++
 src/app.config.ts                             |  2 +
 src/pages/preview/search/list/index.config.ts |  5 +
 .../preview/search/list/index.module.scss     | 32 ++++++
 src/pages/preview/search/list/index.tsx       | 95 ++++++++++++++++++
 .../preview/search/search/index.config.ts     |  5 +
 .../preview/search/search/index.module.scss   | 49 ++++++++++
 src/pages/preview/search/search/index.tsx     | 97 +++++++++++++++++++
 8 files changed, 296 insertions(+)
 create mode 100644 src/api/search.ts
 create mode 100644 src/pages/preview/search/list/index.config.ts
 create mode 100644 src/pages/preview/search/list/index.module.scss
 create mode 100644 src/pages/preview/search/list/index.tsx
 create mode 100644 src/pages/preview/search/search/index.config.ts
 create mode 100644 src/pages/preview/search/search/index.module.scss
 create mode 100644 src/pages/preview/search/search/index.tsx

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<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
+
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<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