0112

src/components/Banner.vue

@@ -13,7 +13,7 @@
                         @click="goDetail"
                     />
                     <div class="video" v-else>
-                        <video class="video-content" id="swiperVideo" :src="item.img"></video>
+                        <video class="video-content" id="swiperVideo" @play="playVideo" :src="item.img"></video>
                     </div>
                 </swiper-item>
             </swiper>
@@ -131,6 +131,9 @@ export default {
                 video.pause();
             }
             this.current = e.detail.current;
+        },
+        playVideo() {
+            this.$emit('update:autoplay', false);
         }
     },
     onPageScroll(e) {

src/mixins/searchList.js

@@ -173,20 +173,24 @@ export default {
                 this.page = 1;
                 this.search = this.searchKey;
                 this.getData();
-                wx.pageScrollTo({
-                    scrollTop: this.searchTop,
-                    duration: 300
-                });
+                if (this.searchTop != -1) {
+                    wx.pageScrollTo({
+                        scrollTop: this.searchTop,
+                        duration: 300
+                    });
+                }
             });
         },
         refreash() {
             this.list = [];
             this.page = 1;
             this.getData();
-            wx.pageScrollTo({
-                scrollTop: this.searchTop,
-                duration: 300
-            });
+            if (this.searchTop != -1) {
+                wx.pageScrollTo({
+                    scrollTop: this.searchTop,
+                    duration: 300
+                });
+            }
         },
         showFilter() {
             const _query = { ...this.filterQuery };
@@ -202,18 +206,23 @@ export default {
         },
         changeShowType() {
             this.showType = this.showType === 'grid' ? 'row' : 'grid';
-            wx.pageScrollTo({
-                scrollTop: this.searchTop,
-                duration: 300
-            });
+            if (this.searchTop != -1) {
+                wx.pageScrollTo({
+                    scrollTop: this.searchTop,
+                    duration: 300
+                });
+            }
         }
     },
     watch: {
         sort() {
-            wx.pageScrollTo({
-                scrollTop: this.searchTop,
-                duration: 300
-            });
+            if (this.searchTop != -1) {
+                wx.pageScrollTo({
+                    scrollTop: this.searchTop,
+                    duration: 300
+                });
+            }
+
             this.page = 1;
             this.getData();
         },

src/pagesProduct/Detail.vue

@@ -702,21 +702,21 @@ export default {
 }
 
 .fixed-bottom {
-    height: 60px;
+    height: calc(60px + constant(safe-area-inset-bottom));
+    height: calc(60px + env(safe-area-inset-bottom));
     padding-bottom: calc(8px + constant(safe-area-inset-bottom));
     padding-bottom: calc(8px + env(safe-area-inset-bottom));
 
     .fixed-bottom-content {
         background-color: @bgw;
         padding: 0px 16px;
-        padding-bottom: calc(0px + constant(safe-area-inset-bottom));
-        padding-bottom: calc(0px + env(safe-area-inset-bottom));
-
+        height: 59px;
+        padding-bottom: calc(1px + constant(safe-area-inset-bottom));
+        padding-bottom: calc(1px + env(safe-area-inset-bottom));
         position: fixed;
         left: 0;
         right: 0;
         bottom: 0;
-        height: 60px;
         display: flex;
         z-index: 200;
         // box-sizing: border-box;

src/pagesVendor/About.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <banner v-if="info.img" :banners="banners" :height="180" :autoplay="false"></banner>
+        <banner v-if="info.img" :banners="banners" :height="180" :autoplay.sync="autoplay"></banner>
 
         <div class="auto-content">
             <div class="box" :style="{ order: decorationInfo.introductionOrder }">
@@ -98,7 +98,8 @@ export default {
         return {
             productList: [],
             colors: ['#6060B3', '#607CB3', '#A2B360', '#B3A260', '#60B397', '#6097B3'],
-            decorationInfo: {}
+            decorationInfo: {},
+            autoplay: true
         };
     },
     mixins: [vendorInfo],

src/pagesVendor/Detail.vue

@@ -45,8 +45,8 @@
                     <div class="text">{{ isCollection ? '已关注' : '关注' }}</div>
                 </div>
             </div>
-            <div class="line" id="top"></div>
-            <div class="main">
+            <div class="line"></div>
+            <div class="main" id="top">
                 <van-sticky :scroll-top="scrollTop" :offset-top="offsetTop">
                     <van-tabs :sticky="false" :active="active" :line-height="0" @change="active = $event.detail.index">
                         <van-tab title="关于展商"> </van-tab>
@@ -63,7 +63,13 @@
                     :showConnect="showConnect"
                     @changeActive="changeActive"
                 ></about>
-                <product v-else-if="active === 1" :vendorInfo="vendorInfo" :fixedTop="searchTop"></product>
+                <product
+                    ref="product"
+                    v-else-if="active === 1"
+                    :vendorInfo="vendorInfo"
+                    :fixedTop="headerTop"
+                    :scrollEnabled="scrollEnabled"
+                ></product>
                 <news v-else-if="active === 2" :vendorInfo="vendorInfo"></news>
             </div>
         </scroll-view>
@@ -112,7 +118,9 @@ export default {
             main: null,
             scrollTop: 0,
             offsetTop: 0,
-            scrollId: ''
+            scrollId: '',
+            scrollEnabled: false,
+            headerTop: 0
         };
     },
     computed: {
@@ -143,6 +151,11 @@ export default {
             } else {
                 this.showConnect = true;
             }
+            if (event.detail.scrollTop < this.offsetTop - 44) {
+                this.scrollEnabled = false;
+            } else {
+                this.scrollEnabled = true;
+            }
         },
         changeActive(index) {
             this.active = index;
@@ -176,13 +189,13 @@ export default {
                     .select('#vendor')
                     .boundingClientRect(rect => {
                         this.searchTop = this.searchTop - rect.height;
+                        this.headerTop = rect.height;
                     })
                     .exec();
             })
             .exec();
     },
     onPageScroll(e) {
-        console.log(e);
         if (e.scrollTop < 115) {
             this.showConnect = false;
         } else {
@@ -198,10 +211,12 @@ export default {
     },
     watch: {
         active() {
-            this.scrollId = 'top';
             setTimeout(() => {
-                this.scrollId = '';
-            }, 200);
+                this.scrollId = 'top';
+                setTimeout(() => {
+                    this.scrollId = '';
+                }, 200);
+            }, 100);
         }
     }
 };

src/pagesVendor/Product.vue

@@ -1,19 +1,30 @@
 <template>
-    <div class="productPage" :style="{ minHeight: ` calc(100vh - ${barHeight}px - 44px)` }">
-        <scroll-view :scroll-top="scrollTop" :scroll-y="true" class="left-side" v-if="menus.length > 0">
+    <div class="productPage" :style="{ minHeight: ` calc( 100vh - ${fixedTop}px - ${barHeight}px + 44px )` }">
+        <scroll-view
+            :style="{ height: `calc( 100vh - ${fixedTop}px - ${barHeight}px  + 44px )` }"
+            :scroll-y="scrollEnabled"
+            class="left-side"
+            v-if="menus.length > 0"
+        >
             <van-sidebar :active-key="activeKey" @change="changeCustomCate">
                 <van-sidebar-item title="全部产品" />
                 <van-sidebar-item :title="getName(item)" :key="item.id" v-for="item in menus" />
             </van-sidebar>
         </scroll-view>
-
-        <div class="right">
-            <sort-list :empty="empty" :loading="loading" :finish="finish" top="0px">
-                <div class="product-row-list">
-                    <product-row v-for="item in list" :key="item.id" :info="item"></product-row>
-                </div>
-            </sort-list>
-        </div>
+        <scroll-view
+            :style="{ height: `calc( 100vh - ${fixedTop}px - ${barHeight}px + 44px )` }"
+            :scroll-y="scrollEnabled"
+            class="right-side"
+            @scrolltolower="getMore"
+        >
+            <div class="right">
+                <sort-list :empty="empty" :loading="loading" :finish="finish" :top="`${fixedTop}px`">
+                    <div class="product-row-list">
+                        <product-row v-for="(item, index) in list" :key="index" :info="item"></product-row>
+                    </div>
+                </sort-list>
+            </div>
+        </scroll-view>
     </div>
 </template>
 <script>
@@ -27,7 +38,8 @@ export default {
         return {
             menus: [],
             activeKey: 0,
-            url: '/product/show'
+            url: '/product/show',
+            searchTop: -1
         };
     },
     mixins: [searchList],
@@ -37,6 +49,14 @@ export default {
             default: () => {
                 return {};
             }
+        },
+        fixedTop: {
+            type: Number,
+            default: 0
+        },
+        scrollEnabled: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
@@ -75,6 +95,12 @@ export default {
         changeCustomCate(e) {
             this.activeKey = e.detail;
             this.refreash();
+        },
+        getMore() {
+            if (!this.loading && !this.finish) {
+                this.page++;
+                this.getData();
+            }
         }
     },
     components: {
@@ -96,6 +122,8 @@ export default {
     --sidebar-selected-font-weight: bolder;
     background: @bg;
     flex-shrink: 0;
+    position: sticky;
+    top: 0px;
     .van-sidebar-item {
         width: 121px;
     }

src/styles/fonts.less

@@ -4,13 +4,13 @@
 }
 
 @font-face {
-  font-family: 'iconfont';  /* project id 2026145 */
-  src: url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.eot');
-  src: url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2026145_8twjl7d6y4v.svg#iconfont') format('svg');
+    font-family: 'iconfont'; /* project id 2026145 */
+    src: url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.eot');
+    src: url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.eot?#iefix') format('embedded-opentype'),
+        url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.woff2') format('woff2'),
+        url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.woff') format('woff'),
+        url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.ttf') format('truetype'),
+        url('//at.alicdn.com/t/font_2026145_4u7r1eyezx9.svg#iconfont') format('svg');
 }
 .iconfont {
     font-family: 'iconfont' !important;
@@ -18,8 +18,8 @@
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-		position: relative;
-		font-weight: normal;
+    position: relative;
+    font-weight: normal;
 }
 .iconfont-icon-aixin:before {
     content: '\e8c3';
@@ -39,9 +39,8 @@
     content: '\e61b';
 }
 
-.iconfont-icon-home:before{
-	 content: '\e674';
-
+.iconfont-icon-home:before {
+    content: '\e61c';
 }
 
 .iconfont-icon-arrow-up-filling:before {
@@ -50,4 +49,4 @@
 
 .iconfont-icon-arrow-down-filling:before {
     content: '\e689';
-}
+}