修改搜索页面bug

README.md

@@ -1,58 +1 @@
-# Vue 3 + TypeScript + Vite
-
-### js文件下载
-https://blog.csdn.net/weixin_41217541/article/details/109893272?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-109893272-blog-112007458.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-5-109893272-blog-112007458.pc_relevant_aa&utm_relevant_index=10
-    
-
-### js 下载
-https://blog.csdn.net/weixin_43299180/article/details/112007458
-
-
-## 只刷新一次页面
-`if (location.href.indexOf("#reloaded") === -1) {
-    location.href = location.href + "#reloaded";
-    location.reload();
-}`
-
-## vite + vue3 低版本浏览器兼容配置
-1. 安装兼容插件 
-`
-yarn add @vitejs/plugin-legacy
-`
-2. vite.config.ts 中引入
-`
-import legacy from '@vitejs/plugin-legacy'
-    plugins：[
-        legacy({
-      targets: ['chrome 50', 'ie >= 11'],       //兼容最低版本号50（UC浏览器55）
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime   @dian/polyfill
-      renderLegacyChunks: true,
-      polyfills: [
-        'es.symbol',
-        'es.array.filter',
-        'es.promise',
-        'es.promise.finally',
-        'es/map',
-        'es/set',
-        'es.array.for-each',
-        'es.object.define-properties',
-        'es.object.define-property',
-        'es.object.get-own-property-descriptor',
-        'es.object.get-own-property-descriptors',
-        'es.object.keys',
-        'es.object.to-string',
-        'web.dom-collections.for-each',
-        'esnext.global-this',
-        'esnext.string.match-all',
-        // // 这个无法处理
-        // 'es.string.replace-all'
-      ],
-      modernPolyfills: ['es.string.replace-all']
-    })
-    ]
-`
-
-## vite打包时会报错 
-`terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.`
-## 解决办法：
-`yarn add terser --legacy-peer-deps 再重新打包` 
+# Vue 3 + TypeScript + Vite

src/components/IndexList.vue

@@ -2,7 +2,7 @@
     <div v-if="(props.list?.length > 0)" class="list_cont">
         <div v-for="(item, index) in props.list" :key="('' + item.game_id + index)" class="list df aic jcsb"
             :class="{ lastStyle: index === props.list.length - 1 }">
-            <div class=" df aic" style="width: 70%;">
+            <div class="left_cont df aic" style="width: 65%;">
                 <img class="left_img" :src="props.prefix + item.logopic">
                 <div class="right_content" style="width:70%">
                     <h3 class="title df">
@@ -49,58 +49,54 @@ const downGame = (url: string) => {
     box-sizing: border-box;
     background-color: #fff;
     padding: 30px;
-    // padding: 20px;
 
     .list {
-        // height: 160px;
-        // margin-bottom: 20px;
-        // cursor: pointer;
-        // padding: 0 20px;
-
         margin-bottom: 20px;
         cursor: pointer;
         border-bottom: 1px solid #eee;
         padding-bottom: 25px;
 
-        .left_img {
-            height: 130px;
-            width: 130px;
-            border-radius: 10px;
-            margin-right: 25px;
-        }
-
-        .right_content {
-            .title {
-                font-size: 20px;
-                font-weight: normal;
-                margin-bottom: 20px;
-
-                .game_rate {
-                    color: #ed8c0f;
-                    margin-left: 10px;
-                }
-            }
-
-            p {
-                font-size: 14px;
-                margin-bottom: 20px;
-                color: #666;
+        .left_cont {
+            img {
+                height: 130px;
+                width: 130px;
+                border-radius: 10px;
+                margin-right: 25px;
             }
-
-            .downMB {
-                width: 100px;
-                padding: 0;
-                color: #fff;
-                border-color: #ed8c0f;
+            .right_content {
+                .title {
+                    font-size: 20px;
+                    font-weight: normal;
+                    margin-bottom: 20px;
+    
+                    .game_rate {
+                        color: #ed8c0f;
+                        margin-left: 10px;
+                    }
+                }
+    
+                p {
+                    font-size: 14px;
+                    margin-bottom: 20px;
+                    color: #666;
+                }
+    
+                .downMB {
+                    width: 100px;
+                    padding: 0;
+                    color: #fff;
+                    border-color: #ed8c0f;
+                }
             }
         }
 
+
     }
 
     .right_img {
-        width: 280px;
-        height: 150px;
-        border-radius: 10px;
+        width: 280px !important;
+        height: 150px !important;
+        border-radius: 10px !important;
         // background-color: #0a0;
     }
 }

src/layout/header.vue

@@ -101,6 +101,7 @@ const logOut = () => {
   // console.log(22);
   localStorage.removeItem('token')
   router.push({ path: 'p_login' })
+  hasToken.value = ''
 }
 
 interface LinkItem {
@@ -110,10 +111,10 @@ interface LinkItem {
 const links: any = ref<LinkItem[]>([])
 
 const searchChange = async (str: string, cb: (arg: any) => void) => {
+  currentIndex.value = ''
+  local.remove('headerPath')          
   if (str && str.length > 0) {
     game_name.value = str
-    currentIndex.value = ''
-    local.remove('headerPath')          
     try {
       var params = reactive({
         type: 0,

src/store/search.ts

@@ -13,23 +13,32 @@ const useSearch = defineStore({
         pagesize: 10,
         q: '',
         prefix: '',
-        isLoading: true
+        total: 0,
+        isClean: true
     }),
     actions: {
         setSearchText(data) {
             this.searchText = data
             // console.log('this.searchText', this.searchText);
         },
+        setSearchPage(){
+            this.page += 1
+            this.setSearchLis()
+        },
+        setClean(data){
+            this.isClean = data
+        },
         async setSearchLis(data) {
             this.q = data
-            // console.log('5555', this.searchText);
+            console.log('5555', this.page);
 
-            if (this.searchText) {
+            if (this.searchText.length > 0) {
+                this.page = 1
                 await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, q: this.q }).then(res => {
                     if (res.data.code === 200 && res.data.data) {
                         // console.log('res', res);
-                        this.isLoading = false
                         this.prefix = res.data.data.prefix
+                        this.total = res.data.data.total
                         this.searchLis = []
                         this.searchLis = this.searchLis.concat(res.data.data.lists.filter(item => item.screen_name.includes(this.q)))
                         console.log('this.searchLis', this.searchLis);
@@ -39,13 +48,15 @@ const useSearch = defineStore({
                 })
             }
             else {
-                console.log(222);
+                // console.log(222);
                 await getGameList({ type: this.type, tag_id: this.tag_id, page: this.page, pagesize: this.pagesize, q: this.q }).then(res => {
                     if (res.data.code === 200 && res.data.data) {
-                        // console.log('res', res);
-                        this.isLoading = false
+                        console.log('res', res);
                         this.prefix = res.data.data.prefix
-                        this.searchLis = [...this.searchLis, ...res.data.data.lists]
+                        this.total = res.data.data.total
+                if(this.isClean) this.searchLis = [] 
+                        this.searchLis = this.searchLis.concat(res.data.data.lists)
+                        console.log('searchLis====>', this.searchLis);
                     }
                 }).catch(err => {
                     Message.error(err.data.msg)
@@ -60,11 +71,17 @@ const useSearch = defineStore({
         getSearchLis(state) {
             return state.searchLis
         },
-        getLoading(state) {
-            return state.isLoading
-        },
         getPrefix(state) {
             return state.prefix
+        },
+        getPage(state){
+            return state.page
+        },
+        getPagesize(state){
+            return state.pagesize
+        },
+        getTotal(state){
+            return state.total
         }
     }
 })

src/view/m_views/search/index.vue

@@ -47,18 +47,27 @@ const params = reactive<IParams>({
 })
 
 const onSearch = async () => {
+    console.log('测试输入框的字符',searchText.value.length );
+    
     await getGameList(params).then(res => {
         if (res.data.code === 200 && res.data.data) {
             prefix.value = res.data.data.prefix
             total.value = res.data.data.total
+            if (searchText.value.length === 0) {
+                list.value = list.value.concat(res.data.data.lists)
+                console.log('list===>', list.value);
+                
+            }else{
             params.pagesize = total.value
-            getGameList(params).then(resp => {
+                getGameList(params).then(resp => {
                 if (resp.data.code === 200 && resp.data.data) {
                     list.value = resp.data.data.lists.filter(item => {
                         return item.screen_name.indexOf(searchText.value) > -1
                     })
                 }
             })
+            }
+            
         }
     }).catch(err => {
         Message.error(err.data)

src/view/p_views/search/index.vue

@@ -1,30 +1,41 @@
 <template>
-    <loading v-if="search.getLoading" :style="{ height: viewWidth + 'px' }" />
-    <div v-else class="w1000">
-        <div class="game_list">
+    <!-- <loading v-if="search.getLoading" :style="{ height: viewWidth + 'px' }" /> -->
+    <div class="w1000">
+        <!-- <el-button @click="loadMore">page加加</el-button> -->
+        <div class="game_list" v-if="search.searchLis.length > 0">
             <IndexList :list="search.searchLis" :prefix="search.getPrefix"></IndexList>
+            <div class="more df aic jcc" v-if="search.getPage * search.getPagesize <= search.getTotal">
+                <el-button class="df aic jcc" @click="loadMore">更多</el-button>
+            </div>
+            <div v-else>
+                <div class="df aic jcc" style="color: #999;height: 100px;font-size: 18px;">----- 没有更多数据了 -----</div>
+            </div>
         </div>
+        <el-empty v-else></el-empty>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import IndexList from '@/components/IndexList.vue'
 import { useStore } from '@/store'
 
 const search = useStore('search')
 const route = useRoute()
-const isLoading = ref<boolean>(true)
-const viewWidth = ref<number>(document.documentElement.clientHeight - 80)
-
-if (search.searchLis.length !== 0) {
-    isLoading.value = false
-}
 
 if(route.query.screen_name){
     search.setSearchLis(route.query.screen_name)
 }
+
+// 加载更多
+const loadMore = () => {
+    search.setSearchPage()
+    search.setClean(false)
+}
+
+watch(() => loadMore, (v,i) => {}, {deep: true, immediate:true})
+
 </script>
 
 <style scoped>