new_shop_app/components/recommend/index.vue

<template>
	<view class='recommend'>
		<view class="common-hd" v-if="list.length>0">
			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/137f4202403091116454932.webp" mode=""></image>
		</view>

		<!-- nav导航 -->
		<view class="nav" v-if="showTab&&list.length>0">
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/home/home')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c72bf202403191713119980.webp" mode="">
					</image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">里海云仓</view>
					<view class="nav-item-down-desc">供销物资市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/market/market')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/de539202403191713558109.webp" mode="">
					</image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">供销云市场</view>
					<view class="nav-item-down-desc">综合线上大市场</view>
				</view>
			</view>
			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/specialty/specialty')">
				<view class="nav-item-up">
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/81f8a202403191714238972.webp" mode="">
					</image>
				</view>
				<view class="nav-item-down">
					<view class="nav-item-down-title">名优农特产</view>
					<view class="nav-item-down-desc">地方特色特产</view>
				</view>
			</view>
		</view>

		<!-- 资讯 -->
		<view v-if="showTab&&list.length>0" @click="navTo('/pages/news_list/index?type=20')"
			style="display: flex;justify-content: space-between;padding-bottom: 20rpx;font-size: 26rpx;color: #999999;height: 70rpx;align-items: center;">
			<view
				style="font-size: 28rpx;background-color: #40ae36;color: #fff;padding: 4rpx 16rpx 6rpx 16rpx;border-radius: 90rpx;">
				里海新闻</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;"
					@click="navTo(`/pages/news_details/index?id=${item.article_id}`)" v-for="(item, index) in list"
					:key="item.article_id">
					<view class="nav-item-up" style="overflow: hidden;">
						<image :src="item.image_input" mode="aspectFill"></image>
					</view>
					<view class="nav-item-down">
						<view class="nav-item-down-title">{{item.title}}</view>
						<view class="nav-item-down-desc">{{item.synopsis}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 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 :class="{'tabs-item-active':indx==currTabIndex}" class="tabs-item" @click="changeTab(indx)">
					<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"
							:sale_type="sale_type" />
						<view class='pictrue' v-if="!loading&&hostProduct[currTabIndex].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>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		initiateAssistApi
	} from '@/api/activity.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getArticleList
	} from "@/api/api.js";
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		Toast
	} from "../../libs/uniApi";
	import {
		getProductslist,
		getProductHot,
		storeCategory
	} from '@/api/store.js';
	export default {
		components: {
			WaterfallsFlow
		},
		computed: mapGetters(['uid']),
		props: {
			// hostProduct: {
			// 	type: Array,
			// 	default: function() {
			// 		return [];
			// 	}
			// },
			// loadTitle: {
			// 	type: String,
			// 	default: '加载更多...'
			// },
			showTab: {
				type: Boolean,
				default: false
			},
			indexP: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			},
			sale_type: {
				type: [Number, String],
				default: 1
			},
			loading: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				tabsArr: [{
					name: '全部',
					desc: '本地商品',
					val: 1
				}, {
					name: '里海云仓',
					desc: '大家都在买',
					val: 2
				}, {
					name: '云市场',
					desc: '商户汇聚',
					val: 3
				}, {
					name: '名优农特产',
					desc: '特色农副',
					val: 4
				}],
				currTabIndex: 0,
				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;
				else this.currTabIndex = 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,
					fail: () => {
						Toast('暂未开放')
					}
				})
			},

			getArticleList() {
				getArticleList(20, {
					page: 1,
					limit: 10
				}).then(res => {
					this.list = res.data.list;
				})
			},

			goDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						toLogin();
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;

		image {
			width: 340rpx;
			height: 42rpx;
		}

		.title {
			height: 42rpx;
			padding: 0 80rpx;
			font-size: 34rpx;
			color: $theme-color;
			font-weight: bold;
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left center;
		}
	}

	// 里海云仓 供销云市场 名优特产
	.nav {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.nav-item {
			width: 227rpx;
			overflow: hidden;
			border-radius: 20rpx;

			.nav-item-up {
				width: 100%;
				height: 198rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nav-item-down {
				height: 102rpx;
				padding: 12rpx 0 0 20rpx;
				box-sizing: border-box;
				background: linear-gradient(to right, #72BE53 0%, #46B03A 100%);

				.nav-item-down-title {
					margin-bottom: 4rpx;
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				.nav-item-down-desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.tabs {
		position: sticky;
		top: 0;
		z-index: 900;
		background: #fff;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 -20rpx 30rpx;
		padding-top: 20rpx;

		.tabs-item {
			width: 23%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tabs-item-main {
				font-weight: bold;
				font-size: 30rpx;
				color: #333;
				font-family: PingFangSC-Medium, PingFangSC-Medium;
			}

			.tabs-item-sub {
				font-size: 22rpx;
				color: #999;
			}
		}

		.tabs-item-active {
			.tabs-item-main {
				color: #40AE36;
			}

			.tabs-item-sub {
				padding: 0 12rpx;
				background-color: #40AE36;
				color: #fff;
				border-radius: 20rpx;
			}
		}
	}

	.recommend .recommendList {
		padding: 0 20rpx;
		min-height: 100rpx;
	}

	.recommend .recommendList.on {
		padding: 0;
	}

	/deep/.looming-gray {
		border-radius: 16rpx 16rpx 0 0;
	}

	.information {
		// display: flex;
		// justify-content: space-between;
		// margin-bottom: 20rpx;

		.nav-item {
			width: 227rpx;
			overflow: hidden;
			border-radius: 20rpx;
			position: relative;


			.nav-item-up {
				width: 100%;
				height: 227rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nav-item-down {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 227rpx;
				padding: 8rpx 2rpx 8rpx 14rpx;
				background: rgba(0, 0, 0, 0.4);

				.nav-item-down-title {
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.nav-item-down-desc {
					font-size: 20rpx;
					color: #FFFFFF;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}

	.pictrue {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;

		image {
			width: 414rpx;
			height: 305rpx;
		}
	}
</style>