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

<template>
	<view>
		<!-- 首页风格切换-1-切换风格 -->
		<view class="top_bg_color">
			<!-- 固定安全色 -->
			<view class="bg_img" :style="{backgroundColor:top_bg_color}"></view>
			<view class="status_bar"></view>
			<!-- 查询 -->
			<view class="search" @click="go_search()">
				<view class="left">
					<view class="icon">
						<image src="./icon/search.png" mode=""></image>
					</view>
					<view class="text">查询</view>
				</view>

				<view @click.stop="scan()">
					<uni-icons type="scan" color="#fff"></uni-icons>
				</view>
			</view>

			<!-- 日期天气 -->
			<view class="date">
				<view class="text">{{text_time}}</view>
				<view class="icon" @click="go_tianqi()">
					<image src="./icon/weather.png" mode=""></image>
				</view>
			</view>

			<!-- 值班 -->
			<view class="notice" @click="go_duty_information()">
				{{text}}
			</view>

			<!-- 开屏通告 -->
			<openingNotice></openingNotice>


			<view v-for="(item,index) in common" :key="index">
				<view class="fixed_system" v-if="item.type_name == '七大板块' && item.index == index">

					<view class="top_bg">
						<image src="./icon/top_bg.png" mode=""></image>
					</view>

					<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>

		</view>

		<view v-for="(item,index) in common" :key="index">

			<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>
				<t-i-banner style="padding-top: 60rpx;" :banner="banners" :mine_code="mine_code"
					@change_top_bg_color_img="change_top_bg_color_img">
				</t-i-banner>
				<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>

		<!-- 宁煤信息平台登录框 -->
		<uni-popup ref="popup" type="center" @maskClick="maskClick">
			<view class="login_box">
				<view class="input_box">
					<view class="label">工号:</view>
					<view class="box">
						{{staff_num}}
					</view>
				</view>
				<view class="input_box">
					<view class="label">登录密码(宁煤信息平台):</view>
					<view class="box">
						<input type="password" v-model="password" />
					</view>
				</view>
				<view class="btn" @click="login()">确认</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'
	import {
		goToLink
	} from '@/common/common.js'
	import time from "@/common/time.js"
	import {
		getCurrentDate,
		diffTime
	} from '@/common/time.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_time: "",
				// 值班公告
				text: "",

				// 背景虚化图片
				top_bg_color_img: "",
				// 背景安全色
				top_bg_color: "#7372c2",
				top_bg_color_list: ['#d62b2b', '#00a2e8', '#b08654', "#7372c2"],

				// 标题栏背景色
				navbar_bg_color: "",

				common: [],

				staff_num: "",
				password: "",

				url: "",

				app_id: "",
				gps: "",
				deviceID: "",
				phoneType: ""
			}
		},
		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)
			this.staff_num = uni.getStorageSync('user').staff_num

			this.text_time = getCurrentDate()

			// #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: {
			scan() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						let pageId = ""

						function GetQueryString(name) {
							var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
							var r = res.result.match(reg);
							if (r != null) return unescape(r[2]);
							return null;
						}
						console.log(GetQueryString("pageId"))
						if (GetQueryString("pageId")) {
							pageId = GetQueryString("pageId")
						} else {
							pageId = res.result.split('=')[1]
						}


						uni.navigateTo({
							url: "../../index/record/record?pageId=" + pageId + "&mine_code=" + this
								.mine_code,
						})
					}
				})
			},
			maskClick() {
				this.password = ""
			},
			login() {
				// #ifdef APP-PLUS
				if (this.password == '') {
					uni.showToast({
						icon: "none",
						title: "密码不能为空！"
					})
					return
				}

				this.$refs.popup.close()
				// 获取gps
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);

						this.gps = res.longitude + ',' + res.latitude
						// 获取设备信息
						plus.device.getInfo({
							success: (e) => {
								console.log(JSON.stringify(e.uuid));
								console.log(plus.device.model)

								this.deviceID = JSON.stringify(e.uuid)
								this.phoneType = plus.device.model


								uni.request({
									method: "POST",
									url: "http://mtyyxs.shnxmyjt.com:33300/api/OAuth/Login",
									header: {
										'Content-Type': 'application/json;charset=UTF-8',
										'caller': 'UnifiedPortal'
									},
									data: {
										phoneType: this.phoneType,
										password: this.password,
										gps: this.gps,
										userID: this.staff_num,
										resolvingPower: "851*393",
										deviceID: this.deviceID,
										ip: "112312313"
									},
									success: (res) => {
										console.log(this.password)
										console.log(res)

										if (res.data.code = '11002') {
											uni.showToast({
												icon: "none",
												title: res.data.msg
											})

											if (res.data.data.length > 20) {
												uni.setStorageSync('ningmei_token', res
													.data.data)
												uni.setStorageSync(
													'ningmei_token_time',
													new Date().format("yyyy-MM-dd")
												)
												uni.navigateTo({
													url: "../../index/ningMeiXinXiPingTai/ningMeiXinXiPingTai",
													success: (res) => {
														// 通过eventChannel向被打开页面传送数据
														res.eventChannel
															.emit(
																'acceptDataFromOpenerPage', {
																	data: this
																		.url
																})
													}
												})
											}
										}
									}
								})

							}
						});


					}
				})
				// #endif

			},

			// 单点登录及token过期验证
			check_token() {
				// token过期验证
				this.$api.worksheet_classify_list({

				}).then((res) => {
					if (res.data.code == 401) {

						uni.removeStorageSync('ningmei_token');
						uni.removeStorageSync('Authorization');

						const user = uni.getStorageSync('login_user')

						if (user) {
							this.$api.login({
								username: user.username,
								password: user.password
							}).then((res) => {
								if (res.data.code === 0) {

									// 保存当前用户的登录 工号和密码
									uni.setStorageSync('login_user', user)
									uni.setStorageSync('Authorization', res.data.data.access_token)
									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);

									// 清除信息平台的登录历史token
									uni.setStorageSync('ningmei_token', ' ')
									// 登录成功跳转首页
									uni.switchTab({
										url: "../../tabbar/index/index",
										success: () => {
											//#ifdef H5
											window.location.reload();
											//#endif
										}
									})

									// #ifdef APP-PLUS
									plus.runtime.restart();
									// #endif

								} else if (res.data.code === 1001) {
									uni.showToast({
										icon: "none",
										title: "用户不存在"
									})
								} else if (res.data.code === 1002) {
									uni.showToast({
										icon: "none",
										title: "密码错误"
									})
								} else {
									return false
								}
							}).catch((err) => {
								console.log('request fail', err);
								uni.showToast({
									icon: "none",
									title: err
								})
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "登录失效、请重新登录"
							})
							setTimeout(function() {
								uni.redirectTo({
									url: "../../my/login/login"
								})
							}, 1500)
						}
					} else {
						// console.log(res)
					}
				})
			},
			// 天气
			go_tianqi() {
				uni.navigateTo({
					url: "../../index/weather/weather"
				})
			},
			go_search() {
				uni.navigateTo({
					url: "../../index/search/search?mine_code=ningmeijituan"
				})
			},

			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
				}


				let link = item.link

				if (link.indexOf("nativeApp://") != -1) {
					let app_name = link.match(/nativeApp:\/\/(\S*)\?/)[1]
					let app_down_link = link.split('?')[1]

					// #ifdef APP
					if (plus.os.name == 'Android') {

						plus.runtime.launchApplication({
							pname: app_name
						}, (e) => {
							console.log('Open system default browser failed: ' + e.message)

							uni.showModal({
								title: app_name,
								content: '未安装此应用、是否下载？',
								success: (res) => {
									if (res.confirm) {
										console.log('用户点击确定');

										uni.navigateTo({
											url: "../../index/h5/h5?url=" + app_down_link
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						})
					}
					// #endif
				} else if (link.indexOf("http://mtyyxs.shnxmyjt.com") != -1) {
					console.log("信息平台")

					this.url = item
					// 有登录记录
					let token = uni.getStorageSync('ningmei_token')
					let time = uni.getStorageSync('ningmei_token_time')
					// 30天刷新一次
					let diffTimeShow = diffTime(time, new Date().format("yyyy-MM-dd")).split(' ')[0];
					console.log(diffTimeShow)
					if (token.length > 20 && diffTimeShow < 30) {
						uni.navigateTo({
							url: "../../index/ningMeiXinXiPingTai/ningMeiXinXiPingTai",
							success: (res) => {
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('acceptDataFromOpenerPage', {
									data: this.url
								})
							}
						})
					} else {
						this.$refs.popup.open()
					}
				} 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"
				})
			},
			go_duty_information() {
				uni.navigateTo({
					url: "../../workbench/duty_information/duty_information"
				})
			}
		}

	}
</script>

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

	/deep/ .banner {
		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;
		}
	}

	.search {
		position: relative;
		z-index: 99;
		margin: 0 auto;
		margin-top: 30rpx;
		width: 700rpx;
		height: 64rpx;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		border-radius: 30rpx;
		opacity: 0.5;


		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.icon {
				margin-right: 10rpx;

				image {
					width: 35rpx;
					height: 27rpx;
				}
			}

			.text {
				color: #DDF4FF;
				font-size: 27rpx;
			}
		}
	}

	.date {
		position: relative;
		z-index: 99;
		margin: 20rpx auto;
		width: 700rpx;
		display: flex;
		align-items: center;

		.text {
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.icon {
			margin-left: 60rpx;

			image {
				width: 38rpx;
				height: 29rpx;
			}
		}
	}

	.notice {
		position: relative;
		z-index: 99;
		box-sizing: border-box;
		padding: 0rpx 25rpx;

		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 1.8;
	}

	.fixed_system {
		position: relative;
		z-index: 10;
		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;

		.top_bg {
			position: absolute;
			top: -220rpx;
			right: 0rpx;


			image {
				width: 500rpx;
				height: 340rpx;
			}
		}

		.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;
			}
		}
	}


	.login_box {
		width: 500rpx;
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background-color: #FFFFFF;

		.input_box {
			margin-bottom: 30rpx;

			.label {
				color: #6C6F74;
				margin-bottom: 20rpx;
			}

			.box {
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E9EBF2;

				box-sizing: border-box;
				padding: 20rpx 25rpx;

			}
		}

		.btn {
			width: 500rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			background-color: #009FE8;
			line-height: 90rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>