JDF_ElectronicPublicity_uni/pages/index/index.vue

<template>
	<view class="i-h-v100 i-w-v100">
		<!-- 背景图片 -->
		<view class="i-pst-f i-z-index01">
			<image class="i-h-v100 i-w-v100" mode="scaleToFill" src="/static/image/homeBg.png"></image>
		</view>
		<!-- 内页按钮 -->
		<pageButton :buttonData="buttonData" :isShow="showModel != 'default'" :nowTitle="nowTitle"
			:pageStatus="pageStatus" @backEvent="backEvent" @tolastEvent="tolastEvent"></pageButton>
		<!-- 导航 -->
		<homeList :list="list" :isShow="showModel === 'default'" :pageStatus="pageStatus" :title="title" @customEvent="homeListEvent"
			@clearCacheEvent="clearCache">
		</homeList>
		<!-- 详情 -->
		<homeDetails :itemInfo="detail_info" :isShow="showModel === 'model_detail'" :pageStatus="pageStatus">
		</homeDetails>
		<!-- 列表 -->
		<listModel :list="detail_list" :isShow="showModel === 'model_list'" :pageStatus="pageStatus"
			:styleType="style_type" @toDetailEvent="toDetailEvent"></listModel>
		<!-- 名校列表 -->
		<schoolRank :list="rank_list" :schoolList="schoolList" :isShow="showModel === 'model_rank'" :pageStatus="pageStatus"
			@toDetailEvent="toDetailEvent"></schoolRank>
	</view>
</template>

<script>
	import data from '@/custom/data.js'
	export default {
		data() {
			return {
				// 后台设置的title
				title: ['金东方电子宣传册', '副标题'],
				buttonData: {
					lastpage: ['default'],
					lastpageIndex: 0 // 页面计数器
				},
				lastpageTitle: 'default',
				nowTitle: '',
				showModel: 'default',
				pageStatus: 1, //页面状态 1=进入，2=常态，3=退出
				homeAnimation: {},
				list: [], // 导航信息
				rank_list:[], // 名校排名列表
				schoolList:[],
				detail_list: [], // 列表信息
				detail_info: {
					img: '', // 详情信息
				},
				style_type: 1,
				timeStr:''
			}
		},
		onLoad() {
			// 加载字体
			uni.iCommon.getFontFamily()
			// 获取数据
			this.get_data()
		},
		onShow() {
			// 显示时检查后台数据是否刷新
			this.checkDataUpdate()
		},
		watch: {
			showModel(newVal) {
				// 回到首页重置返回按钮路径
				if (newVal == 'default') {
					this.buttonData.lastpage.splice(0, this.buttonData.lastpage.length)
					this.buttonData.lastpage.push('default')
					this.checkDataUpdate()
				} else if (this.buttonData.lastpage.length === this.buttonData.lastpageIndex) {
					// 进入内页
					this.buttonData.lastpage.push(newVal)
				}
			},
			list(newVal){
				if(uni.getStorageSync('school')){
					this.schoolList = uni.getStorageSync('school')
				}else{
					newVal[5].list.forEach((item, index) => {
						this.schoolList.push(item.list)
					});
					uni.getStorageSync('school',this.schoolList)
				}
			}
		},
		methods: {
			// 检查获取更新数据
			checkDataUpdate(){
				data.check_data_update(this)
			},
			// 执行各组件动画
			Animation_Controls(model_type) {
				this.pageStatus = 3
				setTimeout(() => {
					// 导航切换状态2 进入切换页
					// this.pageStatus = 2
					// 导航切换状态3 常态化切换页
					this.pageStatus = 1
					this.showModel = model_type
					setTimeout(() => {
						// this.pageStatus = 2
					}, 400)
				}, 300)
			},
			// 获取数据
			get_data() {
				data.get_home_list(this)
			},
			// 清除缓存并重新获取数据
			clearCache(e) {
				uni.removeStorageSync('list')
				console.log('已清除缓存')
				// 清空原有数据
				this.list = []
				this.detail_info = {}
				this.title = []
				// 重新获取数据
				this.get_data()
			},
			// list导航组件传递
			homeListEvent(e) {
				this.buttonData.lastpageIndex = 1 //页面计数器
				if (e.model_type != undefined) {
					// 按钮组件title
					this.nowTitle = e.title
					this.lastpageTitle = e.title
					// 当前显示组件
					this.detail_list = e.list
					this.style_type = e.style_type
					this.rank_list = e.list
					if (e.model_type === 'model_detail') {
						this.detail_info.img = e.list[0].inner_img
					}
					this.Animation_Controls(e.model_type) // 执行动画
					
				}
			},
			// 按钮组件回到首页传递
			backEvent() {
				this.Animation_Controls('default')
			},
			// 按钮组件返回上一页
			tolastEvent() {
				// 返回到首页
				if (this.buttonData.lastpage.length === 2) {
					// this.pageStatus = 2
					this.buttonData.lastpage = ['default']
					this.Animation_Controls(this.buttonData.lastpage[0])
				} else {
					// 返回上一页
					// this.pageStatus = 3
					this.buttonData.lastpageIndex -= 1
					this.buttonData.lastpage.pop()
					this.nowTitle = this.lastpageTitle
					this.Animation_Controls(this.buttonData.lastpage[1])
				}
			},
			// 内页传递（到3级页面）
			toDetailEvent(item) {
				// console.log(item)
				// this.pageStatus = 5
				this.buttonData.lastpageIndex += 1
				setTimeout(()=>{
					this.nowTitle = item.title
				},400)
				this.Animation_Controls('model_detail')
				this.detail_info.img = item.inner_img
				console.log(item.inner_img)
			}
		},
	}
</script>

<style>
	/* rem基准大小 */
	html {
		font-size: 9px;
	}
</style>