PixelAI-mobile/pages/mobile_web/index/index.vue

<template>
	<view class="mobile-index">
		<view class="u-page upage">
			<!-- #ifdef MP-WEIXIN -->
			<Home ref="pageRef" :topLevel="topLevel" v-if="current===0" />
			<Work ref="pageRef" :topLevel="topLevel" v-else-if="current===1" />
			<My ref="pageRef" :topLevel="topLevel" :isLogin="isLogin" @userLogOut="isLogin=''" v-else="current===2" />
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<component ref="pageRef" :topLevel="topLevel" :siftList="siftList" :is="refs[current]"
			:isLogin="isLogin" @userLogOut="isLogin=''"></component>
			<!-- #endif -->
		</view>
		<view class="navigation">
			<view @click="changeCurrent(index)" class="nav-item" v-for="(item,index) in navicationList" :key="index">
				<image :src="fileUrl+(current===index?item.select:item.icon)"></image>
			</view>
		</view>
		<Loading :show="loading" />
		<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
		:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',filter: 'opacity(0.96)'}"></u-back-top>
	</view>
</template>

<script>
import Home from '@/pages/mobile_web/home/home.vue';
import Work from '@/pages/mobile_web/work/work.vue';
import My from '@/pages/mobile_web/my/my.vue';
import configService from '@/common/config.service.js';
export default {
	components: {
		Home, Work, My
	},
	data() {
		return {
			current: uni.getStorageSync('current')||0,// 当前页码下标
			loading: false,
			fileUrl: configService.fileUrl + 'pixel/navigation/',//导航栏图标基础路径
			// 导航栏按钮
			navicationList:[
				{
					name: '首页',
					icon: 'home.png',
					select: 'home-select.png'
				},
				{
					name: '作品',
					icon: 'work.png',
					select: 'work-select.png'
				},
				{
					name: '我的',
					icon: 'my.png',
					select: 'my-select.png'
				}
			],
			topLevel: 0,// 页面是否滚动到顶
			// 筛选项
			siftList:[{label: "全部", value: 0},{label: "自由替换", value:1},{label: "保留模式", value:2},
			{label: "证件照", value: 3},{label: "旧照修复", value: 4},{label: "人脸修复", value: 5},
			{label: "涂抹重绘", value: 6},{label: "AI换装", value: 7}],
			// 滚动顶部
			scrollTop: 0,
			// refs组件列表
			refs: ['home','work','my'],
			// 登录状态
			isLogin: this.$store.state.vuex_token,
		}
	},
	onPageScroll(e) {
		// #ifndef H5
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
		// #endif
		this.scrollTop = e.scrollTop;
	},
	// #ifdef MP || APP
	onLoad(){
		let index = uni.getStorageSync('current');
		this.current = index?index:0;
		this.isLogin = this.$store.state.vuex_token;
		if(this.current === 1){
			uni.pageScrollTo({scrollTop: 0});
		}
		this.changeCurrent(this.current);
	},
	// #endif
	onShow(){
		// 小程序除我的页，其它不要刷新
		let index = uni.getStorageSync('current');
		this.current = index?index:0;
		this.isLogin = this.$store.state.vuex_token;
		// #ifdef MP || APP
		if(this.current === 2){
			this.changeCurrent(this.current);
		}
		// #endif
		// #ifndef MP || APP
		if(this.current === 1){
			uni.pageScrollTo({scrollTop: 0});
		}
		this.changeCurrent(this.current);
		//  #endif
	// #ifndef H5
	},
	// #endif
		
		// #ifdef H5
		let that = this;
		window.onscroll = function () {
		    //为了保证兼容性，这里取三个值，哪个有值取哪一个
		    //scrollTop就是触发滚轮事件时滚轮的高度
		    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			const level = scrollTop/60;
			if(level<=1) that.topLevel = level;
			else that.topLevel = 1;
		}
	},
	
	onHide() {
		window.onscroll = null;
	},
	// #endif
	// 上拉刷新
	onPullDownRefresh(){
		try{
			this.changeCurrent(this.current);
		}catch(e){}
		finally{
			uni.stopPullDownRefresh();
		}
	},
	// 滑动到底部
	onReachBottom(){
		// if(this.current === 1){
		// 	this.$refs.pageRef.getMore();
		// }
	},
	methods:{
		// 切换页面
		changeCurrent(index){
			this.current = index;
			uni.setStorageSync('current',index);
			if(this.current === 1 && !this.isLogin){
				const url = '/pages/mobile_web/index/index';
				uni.navigateTo({
					url: `/pages/mobile_web/my/child_pages/login?nextUrl=${url}`
				});
				return;
			}
			this.$nextTick(()=>{
				this.$refs.pageRef.init();
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.mobile-index{
	position: relative;
	// width: 100%;
	// min-height: 100vh;
	display: flex;
	justify-content: center;
	.upage{
		width: 100%;
	}
	.navigation{
		width: 80%;
		height: 128rpx;
		position: fixed;
		bottom: 15rpx;
		z-index: 85;
		display: flex;
		background-color: #ffffff;
		border-radius: 40rpx;
		justify-content: space-around;
		padding: 25rpx;
		align-items: center;
		background-size: cover;
		filter: drop-shadow(0 0 10rpx rgba(0,0,0,0.4));
		.nav-item{
			width: 54rpx;
			height: 85rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>