uni-zhihuikuangshan/pages/tabbar/index/index.vue

<template>
	<view>
		<!-- 首页风格切换-1-切换风格 -->
		<view class="top_bg_color">
			<!-- 背景虚化轮播图 -->
			<!-- <view class="bg_img" :style="{backgroundImage:'url('+top_bg_color_img+')'}"></view> -->
			<!-- 固定安全色 -->
			<view class="bg_img" :style="{backgroundColor:top_bg_color}"></view>

			<t-i-navbar :mine_code="mine_code" :navbar_bg_color="navbar_bg_color"></t-i-navbar>
			<t-i-notice :text="text"></t-i-notice>
			<t-i-banner :banner="banners" :mine_code="mine_code" @change_top_bg_color_img="change_top_bg_color_img">
			</t-i-banner>
		</view>
		
		<view v-for="(item,index) in common">
			<view class="fixed_system" v-if="item.type_name == '七个建设' && item.index == index">
				<view class="line">
					<view class="item" v-for="(item_2,index_2) in item.data" :key="index_2" v-if="index_2 < 3" @click="go_page(item_2)">
						<view class="icon">
							<image :src="item_2.thumb" mode=""></image>
						</view>
						<view class="text">{{item_2.title}}</view>
					</view>
				</view>
				<view class="line">
					<view class="item" v-for="(item_2,index_2) in item.data" :key="index_2" v-if="index_2 > 2" @click="go_page(item_2)">
						<view class="icon">
							<image :src="item_2.thumb" mode=""></image>
						</view>
						<view class="text">{{item_2.title}}</view>
					</view>
				</view>
			</view>
			
			<view class="todo" v-if="item.type_name == '待办事项' && item.index == index">
				<view class="left">
					<view class="title">
						<view class="icon"></view>
						<view class="text">待办事项</view>
					</view>
				</view>
				<view class="right">
					<view class="tip">您有 <text style="color: #FF0000;">0</text> 项待办</view>
					<view class="detail">
						详情 <uni-icons type="right" size="12" color="#B5B5B5"></uni-icons>
					</view>
				</view>
			</view>
			
			<view class="nav" v-if="item.type_name == '实操应用' && item.index == index">
				<view class="section" v-for="(item_2,index_2) in item.data" :key="index_2">
					<view class="title">
						<view class="icon"></view>
						<view class="text">{{item_2.title}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item_3,index_3) in item_2.children" :key="index_3" @click="go_page(item_3)">
							<view class="icon">
								<image :src="item_3.thumb" mode=""></image>
							</view>
							<view class="text">{{item_3.title}}</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="nav" v-if="item.type_name == '数据平台' && item.index == index">
				<view class="section" v-for="(item_2,index_2) in item.data" :key="index_2">
					<view class="title">
						<view class="icon"></view>
						<view class="text">{{item_2.title}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item_3,index_3) in item_2.children" :key="index_3" @click="go_page(item_3)">
							<view class="icon">
								<image :src="item_3.thumb" mode=""></image>
							</view>
							<view class="text">{{item_3.title}}</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="nav" v-if="item.type_name == '学习资料' && item.index == index">
				<view class="section" v-for="(item_2,index_2) in item.data" :key="index_2">
					<view class="title">
						<view class="icon"></view>
						<view class="text">{{item_2.title}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item_3,index_3) in item_2.children" :key="index_3" @click="go_page(item_3)">
							<view class="icon">
								<image :src="item_3.thumb" mode=""></image>
							</view>
							<view class="text">{{item_3.title}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="news" v-if="item.type_name == '动态信息' && item.index == index">
				<view class="title_box">
					<view class="left">
						<view class="title">
							<view class="icon"></view>
							<view class="text">动态信息</view>
						</view>
					</view>
					<view class="right" @click="go_more()">
						<view class="detail">
							查看全部 <uni-icons type="right" size="12" color="#B5B5B5"></uni-icons>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in newsList" :key="index" @click="go_detail(item.id)">
						<view class="icon"></view>
						<view class="inner">
							<view class="new_title">{{item.title}}</view>
							<view class="tip">
								<view class="time">{{item.created_at}}</view>
								<view class="detail">
									详情<image src="./icon/new_detail.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		

	
	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'
	import {
		goToLink
	} from '@/common/common.js'
	// 版本控制
	import upApp from "@/uni_modules/uni-upgrade-center-app/utils/check-update"

	export default {
		data() {
			return {
				// 根_mine_code
				app_mine_code: "",
				// 当前煤矿编码
				mine_code: "",
				// 首页接口的基础请求路径  默认为当前矿编码的基础路径
				base_url: " ",

				// 轮播图
				banners: [],
				// 新闻列表
				newsList: "",
				// 值班公告
				text: "",
				
				// 背景虚化图片
				top_bg_color_img: "",
				// 背景安全色
				top_bg_color: "#7372c2",
				top_bg_color_list: ['#d62b2b', '#00a2e8', '#b08654',"#7372c2"],
				
				// 标题栏背景色
				navbar_bg_color: "",

				common:[]
			}
		},
		onPullDownRefresh() {
			uni.reLaunch({
				url: "./index"
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			
			// #ifdef H5
			if (this.mine_code == 'ningmeijituan') {
				if (window.location.href.indexOf('token') != -1) {
					this.$api.oauth_getNoPasswordToken({
						token: window.location.href.split('token=')[1].split('&')[0],
						caller: window.location.href.split('token=')[1].split('&')[1].split('=')[1]
					}).then((res) => {

						uni.setStorageSync('Authorization', res.data.data.accessToken)
						uni.setStorageSync('token_type', res.data.data.token_type)
						// 存储用户基本信息
						uni.setStorageSync('user', res.data.data.user);
						uni.setStorageSync('people_code', res.data.data.user.people_code);
						// 存储电话号码
						uni.setStorageSync('mobile', res.data.data.user.mobile);
					})
				}else{
					this.check_token()
				}
			}else{
				this.check_token()
			}
			// #endif

			// 检查更新
			upApp()
			
			// #ifdef APP-PLUS
			this.check_token()
			// #endif


			// 获取轮播图
			this.get_banner()
			// 获取首页新闻列表
			this.getNews()
			// 值班公告
			this.get_notice()
			
			this.get_home_aqyk_newLinks()
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 300) {
				this.navbar_bg_color = "#009fe8"
			} else {
				this.navbar_bg_color = ""
			}
		},
		methods: {
			// 单点登录及token过期验证
			check_token() {
				// token过期验证
				this.$api.worksheet_classify_list({

				}).then((res) => {
					// console.log(res)
					if (res.data.code == 401) {
						uni.showToast({
							icon: "none",
							title: "登录失效、请重新登录"
						})

						uni.clearStorageSync('Authorization');

						setTimeout(function() {
							uni.redirectTo({
								url: "../../my/login/login"
							})
						}, 1500)
					} else {
						// console.log(res)
					}
				})
			},
			
			get_home_aqyk_newLinks() {
				this.$api.home_aqyk_newLinks({
			
				}).then((res) => {
					// console.log(res.data)
					
					let data = res.data
						data.forEach((item,index)=>{
							item['index'] = index
						})
						
						// console.log(data)
					
					this.common = data
				})
			},

			// 获取轮播图
			get_banner() {
				uni.request({
					url: this.base_url + "/scrollImg/list",
					method: "GET",
					success: (res) => {
						// console.log(res.data.data.data)
						this.banners = res.data.data.data
						this.top_bg_color_img = this.banners[0].imgURL
					}
				})
			},
			// 请求新闻动态
			getNews() {
				uni.request({
					url: this.base_url + "/article/list",
					method: "GET",
					data: {
						pageSize: 4
					},
					success: (res) => {
						this.newsList = res.data.data.data
					}
				})
			},
			// 值班公告
			get_notice() {
				uni.request({
					url: this.base_url + "/notice/list",
					method: "GET",
					success: (res) => {
						if (!res.data.data.content) {
							this.text = res.data.data.message
						} else {
							this.text = res.data.data.content.replace(/<br /g, " ").replace(/>/g, " ").replace(
								/\//g, " ")
						}
					}
				})
			},

			// 切换背景图片
			change_top_bg_color_img(index) {
				if (index > 3) {
					index = parseInt(4 * Math.random())
				}

				this.top_bg_color = this.top_bg_color_list[index]
			},
		
			go_page(item){
				if(item.link == null){
					uni.showToast({
						icon:"none",
						title:"暂未开通"
					})
					return
				}
				
				if(item.link.indexOf('pageId') != -1){
					let url = item.link.split("&amp;").join("&")
					let obj = {link:url}
					goToLink(obj, this.mine_code)
				}else{
					goToLink(item, this.mine_code)
				}
				
			},
			// 打开详情页
			go_detail(id) {
				uni.navigateTo({
					url: "../../index/news/news?id=" + id + "&mine_code=ningmeijituan"
				})
			},
			// 打开列表
			go_more() {
				uni.navigateTo({
					url: "../../index/news/news_list/news_list?mine_code=ningmeijituan"
				})
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.top_bg_color {
		position: relative;

		width: 750rpx;
		overflow: hidden;

		.bg_img {
			width: 750rpx;
			height: 440rpx;

			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			background-position: center;
			background-size: 100% 100%;
			filter: blur(50px);
			transform: scale(2);
			opacity: 0.9;
		}
	}

	.fixed_system {
		box-sizing: border-box;
		padding: 25rpx 0;
		
		width: 750rpx;
		height: 436rpx;
		background-image: url(./icon/section.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
		.line {
			box-sizing: border-box;
			padding: 25rpx;
		
			display: flex;
			justify-content: center;
		
			.item {
				margin-right: 54rpx;
		
				.icon {
					image {
						width: 109rpx;
						height: 109rpx;
						display: block;
					}
				}
		
				.text {
					font-size: 28rpx;
					color: #171717;
				}
			}
		}
		
		.line:first-child {
			.item:nth-child(3) {
				margin-right: 0;
			}
		}
		
		.line:last-child {
			.item:nth-child(4) {
				margin-right: 0;
			}
		}
	}
		
	.todo {
		box-sizing: border-box;
		padding: 25rpx;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.left {
			.title {
				display: flex;
				align-items: center;
		
				.icon {
					width: 9rpx;
					height: 34rpx;
					background-color: #04A0E8;
					border-radius: 5rpx;
				}
		
				.text {
					margin-left: 10rpx;
					color: #6A6A6A;
					font-size: 33rpx;
					font-weight: 700;
				}
			}
		}
		
		.right {
			display: flex;
			align-items: baseline;
		
			.tip {
				font-size: 25rpx;
				color: #6A6A6A;
			}
		
			.detail {
				margin-left: 24rpx;
				font-size: 25rpx;
				color: #B5B5B5;
			}
		}
	}
		
	.nav {
		background-color: #F7F9F7;
		width: 750rpx;
		
		padding: 10rpx 0;
		.section {
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 25rpx;
		
			.title {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
		
				.icon {
					width: 9rpx;
					height: 34rpx;
					background-color: #04A0E8;
					border-radius: 5rpx;
				}
		
				.text {
					margin-left: 10rpx;
					color: #6A6A6A;
					font-size: 33rpx;
					font-weight: 700;
				}
			}
		
			.list {
				width: 700rpx;
				overflow: hidden;
		
				.item {
					margin-top: 20rpx;
					float: left;
					margin-right: 20rpx;
		
					width: 120rpx;
					text-align: center;
		
					.icon {
						image {
							width: 73rpx;
							height: 73rpx;
						}
					}
		
					.text {
						color: #171717;
						font-size: 26rpx;
		
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
		
				.item:nth-child(5n) {
					margin-right: 0;
				}
			}
		}
	}
		
	.news {
		background-color: #F7F9F7;
		padding-top: 20rpx;
		
		.title_box {
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.left {
				.title {
					display: flex;
					align-items: center;
		
					.icon {
						width: 9rpx;
						height: 34rpx;
						background-color: #04A0E8;
						border-radius: 5rpx;
					}
		
					.text {
						margin-left: 10rpx;
						color: #6A6A6A;
						font-size: 33rpx;
						font-weight: 700;
					}
				}
			}
		
			.right {
				display: flex;
				align-items: baseline;
		
				.tip {
					font-size: 25rpx;
					color: #6A6A6A;
				}
		
				.detail {
					margin-left: 24rpx;
					font-size: 25rpx;
					color: #B5B5B5;
				}
			}
		}
		
		.list {
			box-sizing: border-box;
			padding: 25rpx;
			background-color: #FFFFFF;
		
			.item {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
		
				border-bottom: 1rpx solid #F5F6F7;
		
				.icon {
					position: relative;
					top: 16rpx;
		
					width: 8rpx;
					height: 8rpx;
					background: #999999;
					border-radius: 50%;
				}
		
				.inner {
					width: 680rpx;
		
					.new_title {
						color: #171717;
						font-size: 29rpx;
						line-height: 44rpx;
					}
		
					.tip {
						margin: 20rpx 0;
						display: flex;
						justify-content: space-between;
		
						.time {
							font-size: 26rpx;
							color: #999999;
						}
		
						.detail {
							color: #FD6B5C;
							font-size: 23rpx;
		
							image {
								margin-left: 8rpx;
								width: 19rpx;
								height: 16rpx;
							}
						}
					}
				}
			}
		
			.item:last-child {
				border: none;
			}
		}
	}
	
	
	
</style>