二手市场

src/mixins/banner.js

@@ -1,12 +1,14 @@
 export default {
     methods: {
-        goNext(info) {
+        goNext(info, props) {
             if (info.link && info.linkType === 'collection') {
-                this.$router.push(`/productDetail?id=${info.linkContent}`);
+                this.$router.push(`/productDetail?id=${info.linkContent}${props}`);
             } else if (info.link && info.linkType === 'user') {
-                this.$router.push(`/creatorDetail?id=${info.linkContent}`);
+                this.$router.push(`/creatorDetail?id=${info.linkContent}${props}`);
             } else if (info.link && info.linkType === 'activity') {
-                this.$router.push(`/activityDetail?id=${info.linkContent}`);
+                this.$router.push(`/activityDetail?id=${info.linkContent}${props}`);
+            } else if (info.link && info.linkType === 'collections') {
+                this.$router.push(`/productSearch?search=${info.linkContent}${props}`);
             }
         }
     }

src/mixins/list.js

@@ -8,12 +8,11 @@ export default {
         };
     },
     methods: {
-        getData(isFirst = false) {
-            console.log('调动了');
+        getData(isFirst = false, scrollTop = 0) {
             if (isFirst) {
                 this.page = 0;
                 this.list = [];
-                this.$root.$el.scrollTop = 0;
+                this.$root.$el.scrollTop = scrollTop;
             }
 
             this.loading = true;
@@ -28,7 +27,7 @@ export default {
             }
 
             if (this.httpType === 'get') {
-                this.$http.get(this.url, data, { body: 'json' }).then(res => {
+                return this.$http.get(this.url, data, { body: 'json' }).then(res => {
                     if (res.first) {
                         this.list = [];
                     }
@@ -41,7 +40,7 @@ export default {
                     }
                 });
             } else {
-                this.$http.post(this.url, data, { body: 'json' }).then(res => {
+                return this.$http.post(this.url, data, { body: 'json' }).then(res => {
                     if (res.first) {
                         this.list = [];
                     }

src/views/Discover.vue

@@ -104,7 +104,7 @@
         <div class="box">
             <page-title title="更多藏品" :isLink="false"></page-title>
             <van-list
-                style="padding-bottom: 100px"
+                style="padding-bottom: 100px;"
                 class="box-list"
                 v-model:loading="loading"
                 :finished="finished"

src/views/product/List.vue

@@ -1,5 +1,13 @@
 <template>
     <div class="follow">
+        <div class="swiperContent" ref="swiperContent">
+            <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
+                <swiper-slide v-for="item in banners" :key="item.id">
+                    <img :src="item.pic" @click="goNext(item, '&source=TRANSFER')" />
+                </swiper-slide>
+            </swiper>
+        </div>
+
         <van-sticky ref="top" class="list-top" :offset-top="bar.value.show ? 46 : 0">
             <div class="top" v-if="!minterId">
                 <div class="name">{{ title || pageName }}</div>
@@ -70,14 +78,24 @@
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Pagination, Autoplay]);
 import ProductInfo from '../../components/product/productInfo.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
+import banner from '../../mixins/banner';
 export default {
     name: 'productList',
-    components: { ProductInfo },
+    components: { ProductInfo, Swiper, SwiperSlide },
     inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
-    mixins: [product, list],
+    mixins: [product, list, banner],
     data() {
         return {
             list: [],
@@ -111,7 +129,8 @@ export default {
             title: '',
             salable: '',
             scrollTop: 0,
-            showAction: false
+            showAction: false,
+            banners: []
         };
     },
     computed: {
@@ -152,6 +171,11 @@ export default {
 
         if (this.$route.query.source) {
             this.source = this.$route.query.source;
+            if (this.source === 'TRANSFER') {
+                this.getBanner();
+            } else {
+                this.banners = [];
+            }
         }
 
         if (this.$route.query.minterId) {
@@ -162,6 +186,22 @@ export default {
         }
     },
     methods: {
+        getBanner() {
+            this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'MARKET'
+                        },
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                });
+        },
         changeSort() {
             this.showAction = true;
         },
@@ -182,7 +222,9 @@ export default {
                 if (info.name === 'price') {
                     this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                 }
-                this.getData(true);
+                this.getData(true, this.$refs.swiperContent.offsetHeight).then(() => {
+                    this.changeScroll(this.$refs.swiperContent.offsetHeight);
+                });
             });
         },
         beforeData() {
@@ -243,6 +285,8 @@ export default {
 }
 .van-list {
     padding: 8px;
+    box-sizing: border-box;
+    min-height: calc(100vh - 200px);
 }
 .top {
     background-color: @bg;
@@ -336,4 +380,56 @@ export default {
     //     font-size: @font1;
     // }
 }
+.swiperContent {
+    background: #fff;
+    border-bottom: 1px solid @tabBorder;
+}
+::v-deep(.mySwiper) {
+    width: calc(100vw - 32px);
+    height: calc(40vw - 12.8px);
+    padding: 20px 0;
+
+    .swiper-pagination {
+        bottom: 6px;
+    }
+
+    .swiper-pagination-bullet {
+        width: 6px;
+        height: 2px;
+        border-radius: 1px;
+        background: #d7d7d7;
+        margin: 0 3px;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: @prim;
+    }
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+}
 </style>

src/views/product/Search.vue

@@ -183,6 +183,10 @@ export default {
         if (this.$route.query.title) {
             this.title = this.$route.query.title;
         }
+        if (this.$route.query.search) {
+            this.search = this.$route.query.search;
+            this.getSearch(this.search);
+        }
     },
     methods: {
         changeSort() {