yubaitong-c/src/packages/goods/collect-list.vue

<template>
	<view class="front-box">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar :status-bar="false" :shadow="false" :border="false" :fixed="true" color="#333" background-color=""
			height="125px" leftWidth="0" rightWidth="0">
			<view class="nav-bg">
				<view class="status-bar"></view>
				<view class="nav-title">
					<view class="left">
						<IconText style="padding: 5px;" @click.native="handleBack" color="#666"
							:code="`\ue8be`" size="16" />
					</view>
					<view class="title">收藏</view>
					<view class="right"></view>
				</view>
				<view class="nav-list">
					<view class="nav-item" :class="{active: navActive === index}" v-for="(item, index) in navList" :key="index" @click="changeNavActive(index)">
						{{item.name}}
						<view class="bar"></view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<uni-nav-bar :status-bar="false" :shadow="true" :border="false" :fixed="true" color="#333" background-color=""
			height="80px" leftWidth="0" rightWidth="0">
			<view class="nav-bg dy">
				<view class="nav-list">
					<view class="nav-item" :class="{active: navActive === index}" v-for="(item, index) in navList" :key="index" @click="changeNavActive(index)">
						{{item.name}}
						<view class="bar"></view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<swiper class="swiper" :current="navActive" @change="changeSwiper">
			<swiper-item>
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="loadGoods">
					<view class="goods-list">
						<GoodItem v-for="(good, index) in goodsList" :good="good" :key="index" style="width: 100%"></GoodItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="swiper-item" :scroll-y="true" @scrolltolower="loadArticle">
					<view class="article-list">
						<ArticleItem v-for="(article, index) in articleList" :article="article" :key="index" style="width: 100%"></ArticleItem>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Mixins
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	import {
		APP_BASE_URL
	} from '@/common/constants';
	import {
		types
	} from '@/common/store/index';
	const baseModule = namespace('base');
	import loginMixin from '@/common/mixins/loginMixin.ts';
	@Component({})
	export default class Front extends Mixins(loginMixin) {
		staticUrl : string = this.$oss_url; 	//oss地址
		size : number = 10;						//每页数量
		goodsList : any = []; 					//商品列表
		goodsFinish : boolean = false;				//是否需要加载
		goodsCurrent : number = 1;					//当前页
		goodsLoading : boolean = false;				//是否加载
		articleList : any = [];					//文章列表
		articleFinish : boolean = false;				//是否需要加载
		articleCurrent : number = 1;					//当前页
		articleLoading : boolean = false;				//是否加载
		shareInfo : any = {};					//分享信息
		navActive: any = 0;
		navList: any = [
			{
				name: '奶粉',
			},
			{
				name: '文章',
			}
		];
		
		async onPullDownRefresh() {
			this.initList();
			// this.getShareInfo();
			uni.stopPullDownRefresh();
		}
		
		async onLoad(opt : any) {
			// #ifndef H5
			// @ts-ignore
			this.$Router.forceGuardEach();
			// #endif
			this.initList();
			// this.getShareInfo();
		}

		onShow() {
			this.$nextTick(() => {
				uni.hideTabBar();
			});
		}
		
		initList(){
			this.articleCurrent = 1;
			this.goodsFinish = false;
			this.goodsList = [];
			this.getGoodsList();
			this.articleCurrent = 1;
			this.articleFinish = false;
			this.articleList = [];
			this.getArticleList();
		}

		getSuperior(opt : any) {
			if (opt.scene) {
				let sceneArr = decodeURIComponent(opt.scene).split('&');
				let scene : any = {};
				sceneArr.forEach((item : any) => {
					let arr = item.split('=');
					if (arr[0]) scene[arr[0]] = arr[1];
				});
			}
			if (opt.s === '1' && opt.uid) {
				// console.log(opt);
				uni.setStorageSync('referrerId', opt.uid);
			}
		}
		onShareAppMessage() {
			return {
				title: '育百通',
				path: '/pages/front/front?s=1&uid=' + this._userInfo.uid,
				imageUrl: this.shareInfo.pic
			};
		}

		getShareInfo() {
			this.$http
				.get({
					url: this.$api.getShareInfo
				})
				.then((res : any) => {
					this.shareInfo = res;
					// if(res.pic){
					// 	(this.$refs.tanchuang as any).open('center');
					// }
				}, (err : any) => {
					console.log(err);
				});
		}
		
		changeNavActive(index: any){
			this.navActive = index;
		}
		
		changeSwiper(e: any){
			// console.log(e.detail);
			this.navActive = e.detail.current;
		}

		//获取商品列表
		getGoodsList() {
			this.goodsLoading = true;
			// uni.showLoading({
			// 	title: '加载中',
			// });
			return this.$http
				.get({
					url: this.$api.getGoodsList,
					data: {
						size: this.size,
						page: this.goodsCurrent,
						status: '3',
					}
				})
				.then((res : any) => {
					this.goodsLoading = false;
					this.goodsList = [...this.goodsList, ...res.list];
					if (res.list.length < this.size) {
						this.goodsFinish = true;
					}
					// uni.hideLoading();
				}, (err : any) => {
					this.goodsLoading = false;
					console.log(err);
					// uni.hideLoading();
				});
		}

		getArticleList() {
			this.articleLoading = true;
			this.$http
				.get({
					url: this.$api.getGoodsList,
					data: {
						page: this.articleCurrent,
						size: this.size
					}
				})
				.then((res : any) => {
					this.articleList = [...this.articleList, ...res.list];
					this.articleLoading = false;
					if (res.list.length < this.size) {
						this.articleFinish = true;
					}
				}, (err : any) => {
					this.articleFinish = true;
					console.log(err);
				});
		}
		
		loadGoods(){
			if (this.goodsFinish || this.goodsLoading) return;
			this.goodsCurrent++;
			this.getGoodsList();
		}
		
		loadArticle(){
			if (this.articleFinish || this.articleLoading) return;
			this.articleCurrent++;
			this.getArticleList();
		}

		toArticle(link : any) {
			this.$Router.push({
				path: '/pages/front/article',
				query: {
					link
				}
			})
		}

		toPage(path : any) {
			if (!path) {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
				return;
			}
			this.$Router.push({
				path: path
			})
		}
	}
</script>
<style lang="scss" scoped>
	page {
		min-height: 100vh;
		background: #F6F8FB;
	}

	.nav-bg {
		width: 100%;
		background: linear-gradient(180deg, #FFD9F9 0%, #F1E6FF 67.19%, #F1E9FE 82.84%, #FBF6FC 100%);
		
		&.dy{
			background: #fff;
		}

		.status-bar {
			// height: var(--status-bar-height);
			height: 44px;
		}

		.nav-title {
			width: 100%;
			box-sizing: border-box;
			height: 40px;
			padding: 0 vw(3);
			@include flex-x();
			@include word-vw(16, #000);
			.left, .right{
				width: vw(60);
				@include flex-x(flex-satrt);
			}
			.title{
				flex: 1;
				@include flex-x(center);
			}
		}
		.nav-list{
			height: vw(36);
			@include flex-x(flex-start);
			padding: 0 vw(12);
			box-sizing: border-box;
			.nav-item{
				padding: 0 vw(12);
				@include flex-y(center, center);
				position: relative;
				@include word-vw(14, #2E2E2E);
				&.active{
					font-weight: bold;
					.bar{
						height: vw(3);
						border-radius: vw(2);
						width: vw(18);
						background: $btn-color;
						position: absolute;
						bottom: vw(-5);
					}
				}
			}
		}
	}

	/deep/.uni-navbar__header {
		padding: 0 !important;

		.uni-navbar__header-container {
			padding: 0 !important;
		}
	}

	.swiper {
		min-height: calc(100vh - 150px);

		.swiper-item {
			height: 100%;
			padding-top: vw(10);
			box-sizing: border-box;
			overflow-y: auto;
		}
	}

	
</style>