|
|
@@ -30,7 +30,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
|
|
|
+ <div class="detail-brand" v-for="(item, index) in searchLists" v-if="searchLists.length > 0">
|
|
|
<div class="brand-item" @click="goComponent(item.uuid)">
|
|
|
<p>型号：<span>{{item.code}}</span></p>
|
|
|
<p>品牌：<span>{{item.brand.nameCn}}</span></p>
|
|
|
@@ -44,6 +44,9 @@
|
|
|
<a @click="goLastPage">返回上一页</a>
|
|
|
</div>
|
|
|
<remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
|
|
|
+ <div class="loading" v-show="isSearchingMore">
|
|
|
+ <img src="/images/all/loading.gif" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -56,22 +59,27 @@
|
|
|
activeType: 'store',
|
|
|
count: '',
|
|
|
filter: {},
|
|
|
- page: '',
|
|
|
+ page: 1,
|
|
|
sorting: {},
|
|
|
isShow: true,
|
|
|
isMove: '',
|
|
|
isFocus: false,
|
|
|
isClickCollect: false,
|
|
|
collectResult: '收藏成功',
|
|
|
- timeoutCount: 0
|
|
|
+ timeoutCount: 0,
|
|
|
+ searchLists: [],
|
|
|
+ isSearchingMore: false
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
RemindBox
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.$nextTick(function () {
|
|
|
- window.addEventListener('scroll', this.onScroll(event))
|
|
|
+ mounted: function () {
|
|
|
+ let _this = this
|
|
|
+ _this.$nextTick(function () {
|
|
|
+ window.addEventListener('scroll', function () {
|
|
|
+ _this.scroll()
|
|
|
+ }, false)
|
|
|
})
|
|
|
},
|
|
|
fetch ({store, route}) {
|
|
|
@@ -87,7 +95,13 @@
|
|
|
},
|
|
|
computed: {
|
|
|
productList () {
|
|
|
- return this.$store.state.searchData.searchList.lists.data
|
|
|
+ let list = this.$store.state.searchData.searchList.lists.data
|
|
|
+ this.searchLists = this.searchLists.concat(list.components)
|
|
|
+ this.isSearchingMore = false
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ allPage () {
|
|
|
+ return Math.floor(this.productList.total / this.productList.size) + Math.floor(this.productList.total % this.productList.size > 0 ? 1 : 0)
|
|
|
},
|
|
|
brandList () {
|
|
|
return this.$store.state.searchData.searchBrands.brands.data
|
|
|
@@ -147,12 +161,16 @@
|
|
|
goLastPage: function () {
|
|
|
window.history.back(-1)
|
|
|
},
|
|
|
- onScroll: function (e) {
|
|
|
-// let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
|
|
-// let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
|
|
-// let x = Math.min(width - 20, e.touches[0].clientX)
|
|
|
-// let y = Math.min(height - 20, e.touches[0].clientY)
|
|
|
- console.log(e.touches[0].clientY)
|
|
|
+ getMoreSearch: function () {
|
|
|
+ this.page++
|
|
|
+ this.isSearchingMore = true
|
|
|
+ this.$store.dispatch('searchData/searchForListInMobile', {count: 15, filter: {}, keyword: this.$route.query.w, page: this.page, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}})
|
|
|
+ },
|
|
|
+ scroll: function () {
|
|
|
+ let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
|
|
|
+ if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
|
|
|
+ this.getMoreSearch()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -333,6 +351,14 @@
|
|
|
background: #d4d;
|
|
|
}
|
|
|
}
|
|
|
+ .loading {
|
|
|
+ text-align: center;
|
|
|
+ >img {
|
|
|
+ width: .64rem;
|
|
|
+ height: .64rem;
|
|
|
+ margin: .2rem 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</style>
|
yangc
