代码提交

pages/search/search.vue

@@ -27,18 +27,18 @@
         <label>热门搜索</label>
         <image
             class="seeIcon hotSearchListSee-icon"
-            :src="!hideHotFlag?'../../static/images/see.png':'../../static/images/notSee.png'"
+            :src="!hideHotFlag?'https://b2c-pro-static-dev.zkthink.com/static/images/see.png':'https://b2c-pro-static-dev.zkthink.com/static/images/notSee.png'"
             @click="hideHotFlag = !hideHotFlag"
         />
       </view>
-      <viewhot
+      <view
           class="hot-flex-list"
           v-if="!hideHotFlag"
       >
         <view
-            v-for="(item, index) in hotSearchList"
+            v-for="(item,index) in hotSearchList"
             :key="index"
-            class="historySearDel-box flex-items-plus mar-right-30"
+            class="historySearDel-box flex-items-plus"
         >
           <view
               class="boxContent"
@@ -46,7 +46,7 @@
           >{{ item }}
           </view>
         </view>
-      </viewhot>
+      </view>
       <view
           v-else
           class="notSeeContent"
@@ -59,13 +59,13 @@
         <label class="title">历史搜索</label>
         <image
             class="historyDel-icon"
-            @click="delSearchHistory(1)"
-            src="../../static/images/delete.png"
+            @click="showModal(0)"
+            src="https://b2c-pro-static-dev.zkthink.com/static/images/delete.png"
         />
       </view>
       <view class="historySear-box hot-flex-list">
         <view
-            v-for="item in historyList"
+            v-for="(item,index) in historyList"
             :key="index"
             class="historySearDel-box flex-items-plus"
         >
@@ -74,27 +74,19 @@
               @click="handleClickHistoryOrHot(item)"
           >{{ item }}
           </view>
-<!--          <label class="ertical-lines">|</label>-->
-<!--          <view-->
-<!--              class="historyIconBox"-->
-<!--              @click="delSearchHistory(2,item.searchId)"-->
-<!--          >-->
-<!--            <image-->
-<!--                class="historySearDel-icon text-align"-->
-<!--                src="https://ceres.zkthink.com/static/img/index/historySearDel_icon.png"-->
-<!--            />-->
-<!--          </view>-->
         </view>
       </view>
     </view>
   </layout>
+  <Modal ref="modalRef" :content="modalTitle" @confirm="confirmModal" />
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { computed, ref, unref } from 'vue';
 import { useRouter } from "@/hooks/useRouter";
 import { onShow } from '@dcloudio/uni-app'
 import { hotSearch, historySearch, clearHistorySearch } from "@/api/product";
+import Modal from "@/components/Modal/index.vue";
 const {push, goBack} = useRouter()
 
 const searchRef = ref();
@@ -103,9 +95,6 @@ const keyword = ref('');
 const hotSearchList = ref([])
 const getHotKeywordList = async () => {
   hotSearchList.value = await hotSearch(0, 10)
-  // return request(API.SelectHotSearch, {}, 'GET').then(res => {
-  //   hotSearchList.value = res.data
-  // })
 }
 
 
@@ -116,39 +105,42 @@ const getHistoryKeywordList = async () => {
   historyList.value = historData.slice(0, 20)
 }
 
-// const onSearch = () => {
-//   // refresh()
-//   push({url: '/pages/goodsList/goodsList'}, {
-//     data: {
-//       keyword: keyword.value
-//     }
-//   })
-// }
+
+const modalRef = ref()
+const modalType = ref(0) // 0删除记录 1撤销申请
+const modalTitle = computed(()=>{
+  const tipsArr = ['您确定要清空搜索记录吗？','您确定要删除这一条记录吗？']
+  return tipsArr[modalType.value]
+})
 
 /**
- * 删除历史记录
- * @param status 1全部 2单条
- * @param searchId
+ * 打开弹窗
+ * @param {number} type 0删除记录 1撤销申请
  */
-function delSearchHistory(status = 1, searchId = undefined) {
-  const tips = status === 1 ? '您确定要清空搜索记录吗？' : '您确定要删除这一条记录吗？'
-  uni.showModal({
-    title: '温馨提示',
-    content: tips,
-    success: async (res) => {
-      if (res.confirm) {
-        await clearHistorySearch()
-        uni.showToast({
-          title: '已清空',
-          duration: 2000
-        });
-        await getHistoryKeywordList()
-      } else if (res.cancel) {
-      }
-    }
-  })
+function showModal(type){
+  modalType.value = type
+  console.log(modalRef.value)
+  unref(modalRef).show()
 }
 
+/**
+ * 确认弹窗
+ */
+function confirmModal(){
+  const funcArr = [doClearAllRequest]
+  funcArr[modalType.value]()
+}
+
+/**
+ * 清空所有
+ * @returns {Promise<void>}
+ */
+async function doClearAllRequest(){
+  await clearHistorySearch()
+  await getHistoryKeywordList()
+}
+
+
 const keywordData = ref('')
 function handleClickHistoryOrHot(key) {
   keywordData.value = key
@@ -174,7 +166,7 @@ const onCancel = () => {
 }
 
 onShow(() => {
-  Promise.all(getHotKeywordList(),  getHistoryKeywordList())
+  Promise.all([getHotKeywordList(),  getHistoryKeywordList()])
 })
 
 
@@ -286,17 +278,20 @@ onShow(() => {
     font-size: 28rpx;
   }
 }
+.hot-flex-list{
+  gap:20rpx;
+
+}
 
 .historySearDel-box {
   height: 54rpx;
   line-height: 54rpx;
-  margin: 15rpx 15rpx;
   background-color: #F1F1F1;
   text-align: center;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
-  margin-right: 30rpx;
+
   .boxContent {
     font-size: 24rpx;
     padding: 0 30rpx;