搜索

src/main/nine-space/src/mixins/search.js

@@ -0,0 +1,52 @@
+export default {
+    data() {
+        return {
+            isSearch: false,
+            hots: [],
+            historys: []
+        };
+    },
+    mounted() {
+        this.$http.get('sysConfig/get/hot_search').then(res => {
+            this.hots = res.value.split(',');
+        });
+        this.getHistory();
+    },
+    methods: {
+        getHistory() {
+            let historys = window.localStorage.getItem('ninthHistory')
+                ? window.localStorage.getItem('ninthHistory').split(',')
+                : [];
+            this.historys = historys;
+        },
+        addHistory(val) {
+            let historys = [...this.historys];
+            if (val && !historys.includes(val)) {
+                historys.splice(0, 0, val);
+            }
+            if (historys.length > 10) {
+                historys = historys.slice(0, 10);
+            }
+            window.localStorage.setItem('ninthHistory', historys.join(','));
+            this.getHistory();
+        },
+        clearHistory() {
+            window.localStorage.removeItem('ninthHistory');
+            this.getHistory();
+        },
+        getSearch(search) {
+            this.isSearch = true;
+            this.search = search;
+            this.addHistory(search);
+            this.getData(true);
+        },
+        onCancel() {
+            if (this.isSearch) {
+                this.isSearch = false;
+                this.search = '';
+            } else {
+                this.getSearch(this.search);
+            }
+        }
+    }
+};

src/main/nine-space/src/views/asset/Search.vue

@@ -12,7 +12,8 @@
                 @search="getSearch"
             >
                 <template #action>
-                    <div @click="getSearch(search)">搜索</div>
+                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
+                    <div v-else @click="onCancel">取消</div>
                 </template>
             </van-search>
         </van-sticky>
@@ -24,6 +25,7 @@
             :finished="finished"
             finished-text=""
             @load="getData"
+            v-if="isSearch"
         >
             <template v-for="(item, index) in list" :key="index">
                 <asset-info :info="item"></asset-info>
@@ -31,6 +33,20 @@
 
             <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.png')" />
         </van-list>
+        <div class="search-content" v-else>
+            <div class="hot-content" v-if="historys.length > 0">
+                <div class="hot-title">最近搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+            <div class="hot-content">
+                <div class="hot-title">热门搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -38,9 +54,10 @@
 import AssetInfo from '../../components/asset/assetInfo.vue';
 import asset from '../../mixins/asset';
 import list from '../../mixins/list';
+import search from '../../mixins/search';
 export default {
     name: 'discover',
-    mixins: [asset, list],
+    mixins: [asset, list, search],
     inject: ['bar'],
     components: {
         AssetInfo
@@ -85,11 +102,6 @@ export default {
                 },
                 search: this.search
             };
-        },
-        getSearch(search) {
-            console.log(search);
-            this.search = search;
-            this.getData(true);
         }
     }
 };
@@ -234,4 +246,26 @@ export default {
 /deep/.van-action-sheet__description::after {
     border-bottom: 1px solid #f2f2f2;
 }
+.hot-content {
+    padding: 10px 0 6px 16px;
+
+    .hot-title {
+        font-size: @font2;
+        color: @text3;
+        line-height: 24px;
+    }
+
+    .hot-list {
+        span {
+            display: inline-block;
+            font-size: @font1;
+            color: @text3;
+            line-height: 22px;
+            padding: 0 12px;
+            margin: 6px 16px 0 0;
+            background: rgba(39, 40, 40, 0.6);
+            border-radius: 12px;
+        }
+    }
+}
 </style>

src/main/nine-space/src/views/creator/Detail.vue

@@ -85,27 +85,41 @@
                 </div>
             </div>
 
-            <van-tabs v-model:active="salable" :ellipsis="false" @change="getList" line-width="16" line-height="2">
+            <van-tabs
+                v-model:active="salable"
+                :ellipsis="false"
+                @change="getData(true)"
+                line-width="16"
+                line-height="2"
+            >
                 <van-tab title="全部" name=""></van-tab>
                 <van-tab title="寄售" :name="true"></van-tab>
             </van-tabs>
         </van-sticky>
-        <div class="list">
-            <template v-for="(item, index) in list" :key="index">
-                <product-info v-model:info="list[index]"></product-info
-            ></template>
+        <van-list
+            style="padding-bottom: 100px;"
+            class="list"
+            v-model:loading="loading"
+            :finished="finished"
+            finished-text=""
+            @load="getData"
+        >
+            <template v-for="(item, index) in list" :key="item.id">
+                <product-info v-model:info="list[index]"></product-info>
+            </template>
             <van-empty
                 v-if="empty"
                 :image="require('@assets/kong_png_yongyoude  (1).png')"
                 description="没有任何收藏品哦~"
             />
-        </div>
+        </van-list>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import productInfo from '../../components/product/productInfo.vue';
+import list from '../../mixins/list';
 export default {
     components: { productInfo },
     computed: {
@@ -127,6 +141,7 @@ export default {
         }
     },
     inject: ['bar'],
+    mixins: [list],
     data() {
         return {
             info: {},
@@ -135,7 +150,8 @@ export default {
             stiky: null,
             list: [],
             empty: false,
-            hots: []
+            hots: [],
+            url: '/collection/all'
         };
     },
     mounted() {
@@ -143,6 +159,18 @@ export default {
         this.getHot();
     },
     methods: {
+        beforeData() {
+            return {
+                query: {
+                    type: this.type,
+                    salable: this.salable,
+                    minterId: this.info.id,
+                    del: false,
+                    source: 'OFFICIAL,USER'
+                },
+                sort: this.sort
+            };
+        },
         copy() {
             this.$copyText(this.info.id).then(
                 e => {
@@ -162,7 +190,6 @@ export default {
             });
             this.$http.get('/user/get/' + this.$route.query.id).then(res => {
                 this.info = res;
-                this.getList();
             });
         },
         follow() {
@@ -178,37 +205,9 @@ export default {
                 });
             }
         },
-        getList() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            this.$http
-                .post(
-                    '/collection/all',
-                    {
-                        page: 0,
-                        size: 20,
-                        query: {
-                            type: this.type,
-                            salable: this.salable,
-                            minterId: this.info.id,
-                            del: false,
-                            source: 'OFFICIAL,USER'
-                        },
-                        sort: this.sort
-                    },
-                    { body: 'json' }
-                )
-                .then(res => {
-                    this.list = res.content;
-                    this.empty = res.empty;
-                    this.$toast.clear();
-                });
-        },
         changeMenu(menu) {
             this.type = menu;
-            this.getList();
+            this.getData(true);
         },
         getHot() {
             this.$http

src/main/nine-space/src/views/creator/Search.vue

@@ -12,7 +12,8 @@
                 @search="getSearch"
             >
                 <template #action>
-                    <div @click="getSearch(search)">搜索</div>
+                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
+                    <div v-else @click="onCancel">取消</div>
                 </template>
             </van-search>
         </van-sticky>
@@ -23,21 +24,37 @@
             :finished="finished"
             finished-text=""
             @load="getData"
+            v-if="isSearch"
         >
             <template v-for="(item, index) in list" :key="index">
                 <creator-info v-model:info="list[index]"></creator-info>
             </template>
             <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.png')" />
         </van-list>
+        <div class="search-content" v-else>
+            <div class="hot-content" v-if="historys.length > 0">
+                <div class="title">最近搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+            <div class="hot-content">
+                <div class="title">热门搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import CreatorInfo from '../../components/creator/CreatorInfo.vue';
 import list from '../../mixins/list';
+import search from '../../mixins/search';
 export default {
     name: 'Search',
-    mixins: [list],
+    mixins: [list, search],
     components: { CreatorInfo },
     inject: ['bar'],
     data() {
@@ -56,10 +73,6 @@ export default {
                 query: { hasRole: 'ROLE_MINTER' },
                 search: this.search
             };
-        },
-        getSearch(search) {
-            this.search = search;
-            this.getData(true);
         }
     }
 };
@@ -136,4 +149,27 @@ export default {
         align-items: center;
     }
 }
+
+.hot-content {
+    padding: 10px 0 6px 16px;
+
+    .title {
+        font-size: @font2;
+        color: @text3;
+        line-height: 24px;
+    }
+
+    .hot-list {
+        span {
+            display: inline-block;
+            font-size: @font1;
+            color: @text3;
+            line-height: 22px;
+            padding: 0 12px;
+            margin: 6px 16px 0 0;
+            background: rgba(39, 40, 40, 0.6);
+            border-radius: 12px;
+        }
+    }
+}
 </style>

src/main/nine-space/src/views/product/Search.vue

@@ -12,7 +12,8 @@
                 @search="getSearch"
             >
                 <template #action>
-                    <div @click="getSearch(search)">搜索</div>
+                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
+                    <div v-else @click="onCancel">取消</div>
                 </template>
             </van-search>
         </van-sticky>
@@ -23,12 +24,27 @@
             :finished="finished"
             finished-text=""
             @load="getData"
+            v-if="isSearch"
         >
             <template v-for="(item, index) in list" :key="index">
                 <product-info v-model:info="list[index]" @update:info="init"></product-info>
             </template>
             <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.png')" />
         </van-list>
+        <div class="search-content" v-else>
+            <div class="hot-content" v-if="historys.length > 0">
+                <div class="title">最近搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+            <div class="hot-content">
+                <div class="title">热门搜索</div>
+                <div class="hot-list">
+                    <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -36,11 +52,12 @@
 import ProductInfo from '../../components/product/productInfo.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
+import search from '../../mixins/search';
 export default {
     name: 'Search',
     components: { ProductInfo },
     inject: ['bar'],
-    mixins: [product, list],
+    mixins: [product, list, search],
     data() {
         return {
             list: [],
@@ -76,10 +93,6 @@ export default {
                 },
                 search: this.search
             };
-        },
-        getSearch(search) {
-            this.search = search;
-            this.getData(true);
         }
     }
 };
@@ -159,4 +172,27 @@ export default {
         align-items: center;
     }
 }
+
+.hot-content {
+    padding: 10px 0 6px 16px;
+
+    .title {
+        font-size: @font2;
+        color: @text3;
+        line-height: 24px;
+    }
+
+    .hot-list {
+        span {
+            display: inline-block;
+            font-size: @font1;
+            color: @text3;
+            line-height: 22px;
+            padding: 0 12px;
+            margin: 6px 16px 0 0;
+            background: rgba(39, 40, 40, 0.6);
+            border-radius: 12px;
+        }
+    }
+}
 </style>