查看更多&预约按钮

src/views/Discover.vue

@@ -19,7 +19,14 @@
     </van-sticky>
     <!-- 商品展示 -->
     <div class="commodity_display">
-        <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
+        <swiper
+            v-if="commodityDisplayList.length > 0"
+            :slides-offset-after="0"
+            slides-per-view="auto"
+            centeredSlidesBounds
+            @touchEnd="touchEndEvent"
+            @slideChange="slideChangeEvent"
+        >
             <swiper-slide class="setting" v-for="item in commodityDisplayList" :key="item.id" style="width: 64px">
                 <van-image
                     width="64px"
@@ -31,6 +38,19 @@
                 />
                 <div class="setting_title">{{ item.nickname }}</div>
             </swiper-slide>
+
+            <swiper-slide
+                class="slide-sek"
+                :style="{ width: `calc(100vw - ${commodityDisplayList.length * 84}px)` }"
+            ></swiper-slide>
+
+            <swiper-slide class="slide-more">
+                <img src="@assets/slide-left.png" alt="" />
+                <span>左</span>
+                <span>滑</span>
+                <span>更</span>
+                <span>多</span>
+            </swiper-slide>
         </swiper>
         <!-- <div class="commodity_display_tip">
             <img :src="require('@assets/gengduo-con@3x.png')" alt="" class="commodity_display_tip_img"/>
@@ -102,12 +122,7 @@
                     :to="{ path: '/productList', query: { type: 'DEFAULT', title: '本期推荐' } }"
                 >
                 </page-title> -->
-            <van-list
-                v-model:loading="loading"
-                :finished="finished"
-                @load="getData"
-                finished-text="没有更多"
-            >
+            <van-list v-model:loading="loading" :finished="finished" @load="getData" finished-text="没有更多">
                 <div class="current_recommendation">
                     <template v-for="(item, index) in list" :key="item.id">
                         <CollectionList v-model:info="list[index]"></CollectionList
@@ -219,7 +234,8 @@ export default {
             url: '/collection/all',
             sortDes: 'asc',
             sortPre: '',
-            scrollTop: 0
+            scrollTop: 0,
+            isEnd: false
         };
     },
     mounted() {
@@ -227,6 +243,18 @@ export default {
         this.getInit();
     },
     methods: {
+        touchEndEvent(swiper, e) {
+            console.log(this.isEnd);
+            if (this.isEnd) {
+                this.$router.push('/creatorList');
+            }
+        },
+        slideChangeEvent(swiper) {
+            this.isEnd = swiper.isEnd;
+        },
+        slideChangeTransitionStartEvent(e) {
+            console.log(e);
+        },
         getInit() {
             this.$toast.loading({
                 message: '加载中...',
@@ -541,10 +569,14 @@ export default {
         }
     }
 }
+.commodity_display {
+    padding-bottom: 20px;
+}
 .setting {
     height: 94px;
-    margin-right: 24px;
-    margin-bottom: 20px;
+    padding-right: 24px;
+    // padding-bottom: 20px;
+    // background-color: #191d27;
     .setting_title {
         width: 64px;
         overflow: hidden;
@@ -562,7 +594,30 @@ export default {
     }
 }
 .setting:last-child {
-    margin-right: 0px;
+    padding-right: 0px;
+}
+.slide-sek {
+}
+.slide-more {
+    width: 30px;
+    height: 94px;
+    background: #1e222c;
+    border-radius: 8px 0px 0px 8px;
+    font-size: 11px;
+    color: #ffffff44;
+    line-height: 14px;
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+    // position: absolute;
+    // right: 0;
+    // top: 50%;
+    // transform: translateY(-50%);
+    img {
+        width: 12px;
+        height: 12px;
+        margin-bottom: 3px;
+    }
 }
 .current_recommendation {
     width: 100%;

src/views/product/Detail.vue

@@ -1460,6 +1460,15 @@ export default {
                     /deep/ .van-step__circle-container {
                         background: #1e222c !important;
                     }
+                    /deep/.van-step--horizontal .van-step__icon {
+                        width: var(--van-step-circle-size);
+                        height: var(--van-step-circle-size);
+                        background: rgb(243, 224, 188);
+                        border-radius: 50%;
+                        &::before {
+                            content: none;
+                        }
+                    }
                 }
                 .appointment_process_time {
                     display: flex;
@@ -2197,4 +2206,18 @@ export default {
         }
     }
 }
+
+// /deep/.step-buy {
+//     &.van-step--horizontal .van-step__icon {
+//         &.van-step__icon--active {
+//             background: rgb(243, 224, 188);
+//             width: var(--van-step-circle-size);
+//             height: var(--van-step-circle-size);
+//             border-radius: 50%;
+//             &::before {
+//                 content: none;
+//             }
+//         }
+//     }
+// }
 </style>