✨ feat(搜索): 新增删除历史记录的功能

src/api/order.ts

@@ -140,6 +140,13 @@ export const MpSearchHistoryList = () => {
     method: 'get',
   })
 }
+// 关键字搜索历史
+export const DeleteSearchHistoryList = () => {
+  return useRequest({
+    url: '/v1/mp/searchHistory/delete',
+    method: 'delete',
+  })
+}
 // 添加关键字搜索
 export const MpSearchHistory = () => {
   return useRequest({

src/pages/searchPage/index.module.scss

@@ -1,92 +1,77 @@
 page {
-    background: #ffff;
+  background: #ffff;
 }
 
 .main {
-    background: #ffff;
+  background: #ffff;
 
-    .topBox {
+  .cancelFont {
-        padding-left: 24px;
+    width: 76px;
-    }
+    font-size: 28px;
+    color: #000000;
+    margin-left: 32px;
+    margin-right: 32px;
+  }
 
-    .cancelFont {
+  .line {
-        width: 76px;
+    width: 750px;
-        font-size: 28px;
+    height: 1px;
-        font-family: PingFangSC-Regular, PingFang SC;
+    background: #000000;
-        font-weight: 400;
+    opacity: 0.05;
-        color: #000000;
+    margin-top: 16px;
+    margin-bottom: 32px;
+  }
+
+  .topBox {
+    display: flex;
+    padding: 0 24px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 32px;
+
+    .histroyLeft {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      overflow: hidden;
+
+      .histroyFonts {
         margin-left: 32px;
+        font-size: 28px;
+        color: #000000;
+      }
+
+      .back {
         margin-right: 32px;
+        font-size: 28px;
+        color: #000000;
+      }
     }
 
-    .line {
+    .icon_delect {
-        width: 750px;
+      margin-right: 45px;
-        height: 1px;
+      color: #f7f7f7;
-        background: #000000;
-        opacity: 0.05;
-        margin-top: 16px;
-        margin-bottom: 32px;
     }
+  }
 
-    .topBox {
+  .bigBox {
-        display: flex;
+    display: flex;
-        align-items: center;
+    flex-wrap: wrap;
-        justify-content: space-between;
+    padding-left: 32px;
-        margin-bottom: 32px;
 
-        .histroyLeft {
+    .itemBox {
-            display: flex;
+      background: #f7f7f7;
-            align-items: center;
+      border-radius: 8px;
-            justify-content: space-between;
+      text-align: center;
-            width: 100%;
+      padding-top: 12px;
-            overflow: hidden;
+      padding-bottom: 12px;
-
+      padding-left: 17px;
-            .histroyFonts {
+      padding-right: 17px;
-                margin-left: 32px;
+      font-size: 24px;
-                font-size: 28px;
+      color: #000000;
-                font-family: PingFangSC-Regular, PingFang SC;
+      margin-right: 16px;
-                font-weight: 400;
+      margin-bottom: 16px;
-                color: #000000;
-            }
-
-            .back {
-                margin-right: 32px;
-                font-size: 28px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #000000;
-            }
-        }
-
-
-
-        .icon_delect {
-            margin-right: 45px;
-            color: #f7f7f7;
-        }
     }
-
+  }
-
-    .bigBox {
-        display: flex;
-        flex-wrap: wrap;
-        padding-left: 32px;
-
-        .itemBox {
-            background: #F7F7F7;
-            border-radius: 8px;
-            text-align: center;
-            padding-top: 12px;
-            padding-bottom: 12px;
-            padding-left: 17px;
-            padding-right: 17px;
-            font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #000000;
-            margin-right: 16px;
-            margin-bottom: 16px;
-        }
-    }
-
 }

src/pages/searchPage/index.tsx

@@ -11,11 +11,14 @@ import { debounce, getFilterData } from '@/common/util'
 import ShopCart from '@/components/shoppingCart'
 import {
   ClientListApi,
+  DeleteSearchHistoryList,
   MpProductColorList,
   MpSearchHistory,
-  MpSearchHistoryList
+  MpSearchHistoryList,
-  , MpShoppingCartProductColorList,
+  MpShoppingCartProductColorList,
 } from '@/api/order'
+import IconFont from '@/components/iconfont/iconfont'
+import { alert } from '@/common/common'
 
 const SearchPage = () => {
   const [clientObj, setclientObj] = useState({
@@ -384,6 +387,35 @@ const SearchPage = () => {
     setHasFonts(false)
     setSearchList([])
   }
+
+  // 删除历史搜索
+  const { fetchData: deleteHistoryApi } = DeleteSearchHistoryList()
+  const handDelete = async() => {
+    Taro.showModal({
+      title: '确定删除历史搜索记录吗？',
+      async success(res) {
+        if (res.confirm) {
+          const result = await deleteHistoryApi()
+          if (result.success) {
+            Taro.showLoading({
+              title: '请稍等...',
+            })
+            alert.success('删除成功')
+            getHistory()
+            Taro.hideLoading()
+          }
+          else {
+            alert.error('删除失败')
+            Taro.hideLoading()
+          }
+        }
+        else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      },
+    })
+  }
+
   return (
     <View className={styles.main}>
       <View className={styles.topBox}>
@@ -396,7 +428,10 @@ const SearchPage = () => {
         !hasFonts && <>
           <View className={styles.topBox}>
             <View className={styles.histroyFonts}>历史搜索</View>
-            <View className={classnames('iconfont', 'icon-shaixuan', styles.icon_delect)}></View>
+            {
+              histroyList.length > 0
+                && <View onClick={() => handDelete()}><IconFont name="icon-sousuoshanchu" size={40}></IconFont></View>
+            }
           </View>
           {!!histroyList.length
                         && <View className={styles.bigBox}>