回滚首页商品列表

components/recommend/index.vue

@@ -46,7 +46,6 @@
 				里海新闻</view>
 			<view style="display: flex;">更多<u-icon name="arrow-right" size="12" color="#999"></u-icon></view>
 		</view>
-
 		<view class="information" v-if="showTab&&list.length>0">
 			<scroll-view scroll-x style="height: 230rpx;width: 700rpx;white-space: nowrap;">
 				<view class="nav-item" style="display: inline-block;margin-right: 16rpx;"
@@ -66,43 +65,22 @@
 		<!-- tab导航 -->
 		<view class="tabs" v-if="showTab" :style="{top:'calc(98rpx + var(--status-bar-height))'}">
 			<block v-for="(item,indx) in tabsArr" :key="indx">
-				<!-- <view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view> -->
+				<view v-if="indx>0" style="width: 3rpx;height: 36rpx;background-color: #ccc;"></view>
-				<view :class="{'tabs-item-active':indx==currTabIndex}" class="tabs-item" @click="changeTab(indx)">
+				<view :class="{'tabs-item-active':item.val==currTabs}" class="tabs-item" @click="changeTab(item.val)">
 					<view class="tabs-item-main">{{item.name}}</view>
 					<view class="tabs-item-sub">{{item.desc}}</view>
 				</view>
 			</block>
 		</view>
 
-		<!-- 滑动 49 55 var(--status-bar-height)-->
-		<swiper :indicator-dots="false" :autoplay="false" :duration="0" :current="currTabIndex" @change="changeTab"
-			:style="{height:'calc(100vh - 98rpx - 110rpx - 108rpx - var(--status-bar-height))'}">
-			<swiper-item v-for="(item,indx) in tabsArr" :key="indx">
-				<scroll-view style="height: 100%;" :scroll-y="scrollY" @scroll="onscroll"
-					@scrolltolower="onScrollBottom" @scrolltoupper="onScrollTop">
 		<view class='recommendList' :class="indexP?'on':''">
-						<WaterfallsFlow :wfList='hostProduct[currTabIndex]' @itemTap="goDetail" :type="0"
+			<WaterfallsFlow v-if="hostProduct.length>0" :wfList='hostProduct' @itemTap="goDetail" :type="0"
 				:sale_type="sale_type" />
-						<view class='pictrue' v-if="!loading&&hostProduct[currTabIndex].length==0">
+			<view class='pictrue' v-if="!loading&&hostProduct.length==0">
 				<image :src="`${domain}/static/images/noCart.png`"></image>
 				<view>暂无商品，看点别的吧</view>
 			</view>
 		</view>
-					<view class="loadingicon acea-row row-center-wrapper">
-						<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
-						{{ hotTitleArr[currTabIndex] }}
-					</view>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
-
-		<!-- <swiper class="tab-box" ref="swiper1" :current="tabIndex" :duration="300" @change="onswiperchange"
-			@transition="onswiperscroll" @animationfinish="animationfinish" @onAnimationEnd="animationfinish">
-			<swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index">
-				<newsPage class="page-item" :nid="page.newsid" :ref="'page' + index"></newsPage>
-			</swiper-item>
-		</swiper> -->
-
 	</view>
 </template>
 
@@ -129,27 +107,18 @@
 	import {
 		Toast
 	} from "../../libs/uniApi";
-	import {
-		getProductslist,
-		getProductHot,
-		storeCategory
-	} from '@/api/store.js';
 	export default {
 		components: {
 			WaterfallsFlow
 		},
 		computed: mapGetters(['uid']),
 		props: {
-			// hostProduct: {
+			hostProduct: {
-			// 	type: Array,
+				type: Array,
-			// 	default: function() {
+				default: function() {
-			// 		return [];
+					return [];
-			// 	}
+				}
-			// },
+			},
-			// loadTitle: {
-			// 	type: String,
-			// 	default: '加载更多...'
-			// },
 			showTab: {
 				type: Boolean,
 				default: false
@@ -191,153 +160,18 @@
 					desc: '特色农副',
 					val: 4
 				}],
-				currTabIndex: 0,
+				currTabs: 1,
-				list: [],
+				list: []
-				loadTitle: '加载更多',
-				hostProduct: [
-					[],
-					[],
-					[],
-					[]
-				],
-				hotPageArr: [1, 1, 1, 1],
-				hotScrollArr: [true, true, true, true],
-				hostIndex: 0,
-				hotPage: 1,
-				hotLimit: 20,
-				hotScroll: true,
-				hotLoading: [false, false, false, false],
-				hotTitle: '加载更多',
-				hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
-				scrollY: false
 			};
 		},
 		mounted() {
 			this.getArticleList();
-			// 初始化
-			this.loadGoods(0);
 		},
-
 		methods: {
-			// 父页面滚动
-			parentPageScroll(boolean) {
-				this.scrollY = boolean;
-				this.$forceUpdate();
-			},
-
-			// 滚动底部 触底刷新
-			onScrollBottom() {
-				this.loadGoods();
-			},
-
-			// 滚动顶部
-			onScrollTop() {},
-
-			// 滚动商品
-			onscroll() {
-				console.log(1111);
-			},
-
-
 			changeTab(e) {
-				if (e.detail) this.currTabIndex = e.detail.current;
+				this.currTabs = e;
-				else this.currTabIndex = e;
+				this.$emit('changeRecommedTab', e)
 			},
-
-			loadGoods(e = 0) {
-				this.$nextTick(() => {
-					if (e == 0) return this.get_host_product(0);
-					if (e == 1) return this.get_host_home({
-						mer_type: 1
-					}, 1);
-					if (e == 2) return this.get_host_home({
-						mer_type: 2
-					}, 2);
-					if (e == 3) return this.get_host_home({
-						mer_type: 3
-					}, 3);
-				})
-			},
-			/**
-			 * 获取我的推荐
-			 */
-			get_host_product: function(e = 0) {
-				let that = this;
-				if (!that.hotScroll) return;
-				if (that.hotLoading[e]) return;
-
-				that.hotLoading[e] = true;
-				that.hotTitleArr[that.currTabIndex] = '加载中';
-				getProductHot(that.hotPageArr[that.currTabIndex], that.hotLimit, 1, 1).then(res => {
-					console.log(res.data.list);
-					res.data.list = this.shuffleArray(res.data.list);
-					let list = res.data.list;
-					let productList = that.hostProduct[that.currTabIndex];
-					// if (!that.hostProduct[that.currTabIndex]) productList[e] = [];
-					productList = [...productList, ...res.data.list];
-
-					console.log(productList);
-
-					let hotScroll = list.length <= res.data.limit && list.length != 0;
-					that.hotScrollArr[that.currTabIndex] = hotScroll;
-
-					that.hotLoading[that.currTabIndex] = false;
-					that.hotTitleArr[that.currTabIndex] = !hotScroll ? '已全部加载' : '加载更多';
-
-					// that.$set(that, 'hostProduct', productList);
-					that.hostProduct[that.currTabIndex] = productList;
-					// if (this.hostIndex == e) this.$forceUpdate();
-					that.hotPageArr[that.currTabIndex] = res.data.page + 1
-					// that.$set(that, 'hotPage', res.data.page + 1);
-					that.$set(that, 'hotLimit', res.data.limit);
-
-
-					console.log(that.hostProduct);
-					this.$forceUpdate()
-				});
-			},
-			/**
-			 * 获取里海云仓, 云市场, 名优特产
-			 */
-			get_host_home: function(query = {}, e = 1) {
-				let that = this;
-				if (!that.hotScroll) return;
-				if (that.hotLoading[e]) return;
-				that.hotLoading[e] = true;
-				that.hotTitle = '加载中';
-				query.page = that.hotPage;
-				query.limit = that.hotLimit;
-				query.sale_type = 1;
-				query.rand = 1;
-				getProductslist({
-					...query
-				}).then(res => {
-					uni.stopPullDownRefresh();
-					res.data.list = this.shuffleArray(res.data.list);
-					let list = res.data.list;
-					let productList = that.hostProduct;
-					if (!productList[e]) productList[e] = [];
-					productList[e] = [...productList[e], ...list];
-					let hotScroll = list.length <= res.data.limit && list.length != 0;
-					that.hotScroll = hotScroll;
-					that.hotLoading[e] = false;
-					that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
-					that.$set(that, 'hostProduct', productList);
-					if (this.hostIndex == e) this.$forceUpdate();
-					that.$set(that, 'hotPage', res.data.page + 1);
-					that.$set(that, 'hotLimit', res.data.limit);
-				});
-			},
-
-			// 数组乱序
-			shuffleArray(array) {
-				for (let i = array.length - 1; i > 0; i--) {
-					const j = Math.floor(Math.random() * (i + 1));
-					[array[i], array[j]] = [array[j], array[i]];
-				}
-				return array;
-			},
-
 			navTo(url) {
 				uni.navigateTo({
 					url: url,
@@ -346,7 +180,6 @@
 					}
 				})
 			},
-
 			getArticleList() {
 				getArticleList(20, {
 					page: 1,
@@ -355,7 +188,6 @@
 					this.list = res.data.list;
 				})
 			},
-
 			goDetail(item) {
 				goShopDetail(item, this.uid).then(res => {
 					if (this.isLogin) {

pages/index/index.vue

@@ -42,16 +42,16 @@
 						<!-- 首页推荐 -->
 						<view v-if="recommend_switch == 1" class="index-product-wrapper">
 							<!-- 首发新品 -->
-							<recommend ref="recommendRef" :hostProduct="hostProduct" :loadTitle="hotTitle"
+							<recommend ref="recommendRef" :hostProduct="hostProduct[hostIndex]"
 								@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
 								:loading="loading">
 							</recommend>
-							<!-- <view class="loadingicon acea-row row-center-wrapper"
+							<view class="loadingicon acea-row row-center-wrapper"
 								v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
 								<text class="loading iconfont icon-jiazai"
 									:hidden="hotLoading[hostIndex] == false"></text>
 								{{ hotTitle }}
-							</view> -->
+							</view>
 						</view>
 					</view>
 					<view v-show="navIndex == 0" class="loadingicon acea-row row-center-wrapper"
@@ -111,12 +111,12 @@
 								@changeRecommedTab="changeRecommedTab" showTab :indexP="true" :isLogin="isLogin"
 								:loading="loading">
 							</recommend>
-							<!-- <view class="loadingicon acea-row row-center-wrapper"
+							<view class="loadingicon acea-row row-center-wrapper"
 								v-if="hostProduct[hostIndex].length > 0 || hotLoading[hostIndex]">
 								<text class="loading iconfont icon-jiazai"
 									:hidden="hotLoading[hostIndex] == false"></text>
 								{{ hotTitle }}
-							</view> -->
+							</view>
 						</view>
 					</view>
 					<view class="loadingicon acea-row row-center-wrapper"
@@ -345,7 +345,7 @@
 		setVisit,
 		spread
 	} from '@/api/user.js';
-	import recommend from '@/components/recommend/';
+	import recommend from '@/components/recommend';
 	import card from './component/card';
 	// #ifndef H5
 	import passwordPopup from '@/components/passwordPopup';
@@ -490,15 +490,12 @@
 					[],
 					[]
 				],
-				hotPageArr: [1, 1, 1, 1],
-				hotScrollArr: [true, true, true, true],
 				hostIndex: 0,
 				hotPage: 1,
 				hotLimit: 20,
 				hotScroll: true,
 				hotLoading: [false, false, false, false],
 				hotTitle: '加载更多',
-				hotTitleArr: ['加载更多', '加载更多', '加载更多', '加载更多'],
 				// #ifdef MP || APP-PLUS
 				isFixed: false,
 				// #endif
@@ -589,15 +586,6 @@
 					selectedIconPath: "/static/tabbar_icon/a-a.png"
 				})
 			}
-
-			this.$util.getDom(this, '.tabs', (res) => {
-				console.log(res.top);
-				if (86 >= res.top) {
-					this.$refs.recommendRef.parentPageScroll(true);
-				} else {
-					this.$refs.recommendRef.parentPageScroll(false);
-				}
-			})
 		},
 
 		/**
@@ -691,15 +679,12 @@
 			// that.overflow = true;
 			// #ifdef APP-PLUS
 			setTimeout(() => {
-				this.hotPageArr[this.hostIndex] = 1;
+				this.hotPage = 1;
-				this.hotScrollArr[this.hostIndex] = true;
+				this.hotScroll = true;
-
+				let hostList = this.hostProduct;
-				// this.hotPage = 1;
+				hostList[this.hostIndex] = [];
-				// this.hotScroll = true;
+				this.$set(this, 'hostProduct', hostList);
-				// let hostList = this.hostProduct;
+				this.loadGoods(this.hostIndex + 1);
-				// hostList[this.hostIndex] = [];
-				// this.$set(this, 'hostProduct', hostList);
-				this.loadGoods(this.hostIndex);
 			}, 50)
 			// #endif
 		},
@@ -1097,30 +1082,30 @@
 				});
 			},
 			/**
-			 * 点击组件选项卡 e 
+			 * 点击组件选项卡
 			 */
 			changeRecommedTab(e) {
-				// this.hotPage = 1;
+				this.hotPage = 1;
-				// this.hotScroll = true;
+				this.hotScroll = true;
-				// this.hostIndex = e - 1;
+				this.hostIndex = e - 1;
-				this.hotPageArr[e] = 1;
+				let hostList = this.hostProduct;
-				this.hotScrollArr[e] = true;
+				hostList[e - 1] = [];
-				this.hostIndex = e;
+				this.$set(this, 'hostProduct', hostList);
-				// let hostList = this.hostProduct;
-				// hostList[e - 1] = [];
-				// this.$set(this, 'hostProduct', hostList);
 				this.loadGoods(e);
 			},
-			loadGoods(e = 0) {
+			loadGoods(e = 1) {
+
+				console.log(e);
+
 				this.$nextTick(() => {
-					if (e == 0) return this.get_host_product(0);
+					if (e == 1) return this.get_host_product(0);
-					if (e == 1) return this.get_host_home({
+					if (e == 2) return this.get_host_home({
 						mer_type: 1
 					}, 1);
-					if (e == 2) return this.get_host_home({
+					if (e == 3) return this.get_host_home({
 						mer_type: 2
 					}, 2);
-					if (e == 3) return this.get_host_home({
+					if (e == 4) return this.get_host_home({
 						mer_type: 3
 					}, 3);
 				})
@@ -1130,6 +1115,7 @@
 			 */
 			get_host_product: function(e = 0) {
 				let that = this;
+				let num = that.hotLimit;
 				if (!that.hotScroll) return;
 				if (that.hotLoading[e]) return;
 
@@ -1159,6 +1145,7 @@
 			 */
 			get_host_home: function(query = {}, e = 1) {
 				let that = this;
+				let num = that.hotLimit;
 				if (!that.hotScroll) return;
 				if (that.hotLoading[e]) return;
 				that.hotLoading[e] = true;
@@ -1289,22 +1276,9 @@
 		},
 		// 滚动到底部
 		onReachBottom() {
-
-			// this.$util.getDom(this, '.tabs', (res) => {
-
-			// 	if () == res.top) {
-			// 		this.$refs.recommendRef.parentPageScroll(true);
-			// 	} else {
-			// 		this.$refs.recommendRef.parentPageScroll(false);
-			// 	}
-			// 	this.scrollTop = res.top;
-			// })
-
-			return;
-			console.log(12312);
 			if (this.recommend_switch == 1 && this.navIndex == 0) {
 				// 首页加载更多
-				this.loadGoods(this.$refs.recommendRef.currTabs || 0);
+				this.loadGoods(this.$refs.recommendRef.currTabs || 1);
 			} else if (this.navIndex == 1) {
 				// 分类栏目加载更多
 				if (this.sortProduct.length > 0) {