搜索

src/views/asset/Search.vue

@@ -116,7 +116,7 @@ export default {
         });
     },
     beforeRouteLeave(to, from, next) {
-        if (!to.meta.menuPage) {
+        if (to.path === '/creatorDetail') {
             this.scrollTop = this.scrollWrapper.value.scrollTop;
             this.setKeeps(['assetSearch']);
         } else {

src/views/creator/Search.vue

@@ -87,7 +87,7 @@ export default {
         });
     },
     beforeRouteLeave(to, from, next) {
-        if (!to.meta.menuPage) {
+        if (to.path === '/assetDetail') {
             this.scrollTop = this.scrollWrapper.value.scrollTop;
             this.setKeeps(['creatorSearch']);
         } else {

src/views/product/Search.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="search" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
-        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
+        <van-sticky ref="top" class="list-top" :offset-top="bar.value.show ? 46 : 0">
             <van-search
                 ref="top"
                 shape="round"
@@ -16,6 +16,40 @@
                     <div v-else @click="onCancel">取消</div>
                 </template>
             </van-search>
+            <van-tabs
+                v-if="isSearch"
+                v-model:active="sort"
+                :ellipsis="false"
+                line-width="16"
+                line-height="2"
+                @change="getData(true)"
+                :class="{ trans: source == 'TRANSFER' }"
+            >
+                <van-tab
+                    :title="item.label"
+                    :name="
+                        item.type === 'select' ? (sort === item.value[0] ? item.value[1] : item.value[0]) : item.value
+                    "
+                    :title-class="item.type === 'select' && sort === item.value[0] ? '' : 'asc'"
+                    :key="index"
+                    v-for="(item, index) in selectOptions"
+                >
+                    <template v-if="item.type === 'select'" #title>
+                        <div class="tab">
+                            <span>{{ item.label }}</span>
+                            <van-icon size="8" name="arrow-up" />
+                            <van-icon size="8" name="arrow-down" />
+                        </div>
+                    </template>
+                </van-tab>
+            </van-tabs>
+            <van-checkbox
+                v-if="isSearch && source == 'TRANSFER' && !title"
+                @change="getData(true)"
+                class="sala"
+                v-model="salable"
+                >仅看在售</van-checkbox
+            >
         </van-sticky>
         <van-list
             class="list"
@@ -68,7 +102,29 @@ export default {
             source: '',
             minterId: '',
             url: '/collection/all',
-            scrollTop: 0
+            scrollTop: 0,
+            sort: 'id,desc',
+            title: '',
+            selectOptions: [
+                {
+                    label: '全部',
+                    value: 'id,desc'
+                },
+                {
+                    label: '最新',
+                    value: 'createdAt,desc'
+                },
+                {
+                    label: '最热',
+                    value: 'likes,desc'
+                },
+                {
+                    label: '价格',
+                    value: ['price,desc', 'price,asc'],
+                    type: 'select'
+                }
+            ],
+            salable: false
         };
     },
     watch: {
@@ -86,6 +142,9 @@ export default {
         if (this.$route.query.minterId) {
             this.minterId = this.$route.query.minterId;
         }
+        if (this.$route.query.title) {
+            this.title = this.$route.query.title;
+        }
     },
     methods: {
         beforeData() {
@@ -95,9 +154,11 @@ export default {
                     type: this.type,
                     source: this.source,
                     minterId: this.minterId,
-                    del: false
+                    del: false,
+                    salable: this.salable || ''
                 },
-                search: this.search
+                search: this.search,
+                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || this.sort : this.sort
             };
         }
     },
@@ -107,7 +168,7 @@ export default {
         });
     },
     beforeRouteLeave(to, from, next) {
-        if (!to.meta.menuPage) {
+        if (to.path === '/productDetail') {
             this.scrollTop = this.scrollWrapper.value.scrollTop;
             this.setKeeps(['productSearch']);
         } else {
@@ -137,6 +198,16 @@ export default {
         line-height: 30px;
     }
 }
+
+/deep/.trans {
+    .van-tab {
+        margin-right: 30px;
+    }
+}
+
+.list-top {
+    position: relative;
+}
 /deep/.van-tabs {
     .van-tabs__nav {
         padding-left: 16px;
@@ -183,6 +254,12 @@ export default {
         }
     }
 }
+.van-tabs {
+    background-color: @bg;
+}
+/deep/.van-tabs__nav--line.van-tabs__nav--complete {
+    border-color: @tabBorder;
+}
 /deep/.van-search {
     .van-field__left-icon {
         display: flex;
@@ -223,4 +300,33 @@ export default {
         }
     }
 }
+
+/deep/.sala {
+    position: absolute;
+    right: 16px;
+    top: 66px;
+    .van-checkbox__icon {
+        color: #fff;
+        transform: scale(0.6);
+
+        .van-icon {
+            border-color: @text3;
+        }
+
+        &.van-checkbox__icon--checked {
+            .van-icon {
+                border-width: 0;
+                .linear();
+                &::before {
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .van-checkbox__label {
+        color: @text3;
+        margin-left: 0px;
+        font-size: @font1;
+    }
+}
 </style>