yunshengtai-uniapp/pages/home/index.vue

<template>
	<view class="productSort">
		<skeleton v-if="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
		<!-- 顶部主页 -->
		<view class="head_box" :style="[{height:CustomBar + 'px'}]">
			<cu-custom :isBack="true">
				<block slot="backText">
					<text class="nav-title shopro-selector-rect">首页</text>
				</block>
			</cu-custom>
		</view>
		<!-- tab选项卡 -->
		<TabNav :tabList="tabList" @tabItemClick="tabItemClick"></TabNav>
		<!-- 活动板块 -->
		<ActivateList :list="activateList" @itemClick="itemClick" v-if="tabActive == 0">
		</ActivateList>
		<!-- 赛事板块 -->
		<ActivateList :list="activateList" @itemClick="itemClick" :showDesc="true" :showAuth="false" v-if="tabActive == 1">
		</ActivateList>
		<!-- 专家列表 -->
		<ExpertList :list="expertList" v-if="tabActive == 2" ref="uReadMore"></ExpertList>
		<u-loadmore :status="status" :marginTop="30" />
	</view>
</template>
<script>
	import {
		getIndexData,
		getActivityList,
		getListExperts
	} from "@/api/home"
	import {
		trim
	} from "@/utils"
	import {
		mapGetters
	} from 'vuex'

	import skeleton from '@/components/quick-skeleton/quick-skeleton'
	import tabNav from './components/tabNav.vue'
	import ActivateList from './components/activateList.vue'
	import ExpertList from './components/expertList.vue'
	export default {
		components: {
			skeleton,
			tabNav,
			ActivateList,
			ExpertList
		},
		computed: mapGetters(['userInfo']),
		props: {},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				showSkeleton: false,
				tabActive: 0,
				tabList: [{
					name: '活动'
				}, {
					name: '比赛'
				}, {
					name: '专家'
				}],
				activateList: [],
				matchList: [],
				expertList: [1, 2, 3],
				status: 'nomore',
				page: 0,
				size: 10
			};
		},
		onShareAppMessage() {
			return {
				title: '湖北省艺术设计协会',
				path: '/pages/home/index',
				success(res) {
					uni.showToast({
						title: '分享成功',
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
					})
				},
			}
		},
		computed: {},
		onReady: function() {
			const that = this;
		},
		mounted: function() {
			this.getIndexData()
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page = this.page + 1
			}
		},
		onPullDownRefresh() {
			this.getIndexData()
			// wx.showNavigationBarLoading();
		},
		onPageScroll(e) {
			if (e.scrollTop > 60) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
			};
		},
		methods: {
			getIndexData() {
				uni.showLoading({
					title: '正在加载...'
				})
				if (this.tabActive == 0 || this.tabActive == 1) {
					getActivityList({
						page: this.page,
						size: this.size,
					}).then(res => {
						this.activateList = res.data.content
					})
				} else {
					getListExperts({
						page: this.page,
						size: this.size,
					}).then(res => {
						this.expertList = res.data.content
						this.$nextTick(() => {
							this.$refs.uReadMore.$refs.uReadMore.forEach((item) => item.init())
						})
					})
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			tabItemClick(val) {
				console.log(val)
				this.tabActive = val
				this.getIndexData()
				// console.log(val)
			}
		}
	};
</script>
<style lang="less">
	.productSort {
		position: relative;
	}

	.nav-title {
		font-size: 38rpx;
		font-weight: 500;
		color: #06050A;
		margin-left: 20rpx;
		line-height: 40px;
	}

	.cuIcon-back {
		display: none;
	}
</style>