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

<template>
	<view>
		<!-- 首页风格切换-1-切换风格 -->
		<view class="top_bg_color" v-if="index_type == 1">
			<view class="bg_img" :style="{backgroundImage:'url('+top_bg_color_img+')'}"></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>
		<!-- 首页风格切换-2-默认风格 -->
		<view v-if="index_type == 2">
			<t-i-navbar-2 :mine_code="mine_code"></t-i-navbar-2>
			<t-i-notice-2 :text="text"></t-i-notice-2>
			<t-i-banner-2 :banner="banners" :mine_code="mine_code" @change_top_bg_color_img="change_top_bg_color_img"></t-i-banner-2>
		</view>

		<!-- 固定入口 -->
		<t-i-icon :iconList="iconList" :mine_code="mine_code"></t-i-icon>
		<!-- 常用功能 -->
		<t-i-common v-if="mine_code == 'ningdongyunying'"></t-i-common>
		<!-- 新闻列表 -->
		<t-i-news :newsList="newsList" :mine_code="mine_code"></t-i-news>

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

		<!-- 宁东运营 -->
		<view v-if="mine_code == 'ningdongyunying'">
			<t-i-ningdongyunying :mine_code="mine_code"></t-i-ningdongyunying>
		</view>

		<!-- 金家渠 -->
		<view v-if="mine_code == 'jinjiaqu'">
			<t-i-jinjiaqu :mine_code="mine_code"></t-i-jinjiaqu>

		</view>

		<!-- 羊场湾 -->
		<view v-if="mine_code == 'yangchangwan'">
			<t-i-yangchangwan :mine_code="mine_code" :home_link="home_link"></t-i-yangchangwan>
		</view>

	</view>
</template>

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

	export default {
		data() {
			return {
				// 当前煤矿编码
				mine_code: "",

				// 首页接口的基础请求路径  默认为当前矿编码的基础路径
				base_url: " ",


				// 轮播图
				banners: [],
				// 新闻列表
				newsList: "",
				// 值班公告
				text: "暂无公告。",
				// 固定入口
				iconList: [],
				// 首页链接
				home_link: [],

				// 背景色
				top_bg_color_img: "",
				// 标题栏背景色
				navbar_bg_color: "",
				
				index_type:1
			}
		},
		onPullDownRefresh() {
			uni.reLaunch({
				url: "./index"
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);

		},
		onLoad() {
			// 风格定义
			this.$api.home_style_setting({
				
			}).then((res)=>{
				// console.log(res.data.data)
				
				this.index_type = res.data.data.value
			})
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')

			// 检查更新
			upApp()

			// 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)
				}
			})

		},
		onPageScroll: function(e) {
			if (e.scrollTop > 350) {
				this.navbar_bg_color = "#009fe8"
			} else {
				this.navbar_bg_color = ""
			}
		},
		onShow() {
			// E信-切换矿
			uni.$on('update_kuang', (data) => {
				console.log('监听到事件来自 update_kuang ，携带参数 msg 为：' + data.msg);
				this.mine_code = data.msg
				console.log(this.mine_code)
			})
			this.$forceUpdate()

			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)



			// 获取轮播图
			this.get_banner()
			// 获取首页新闻列表
			this.getNews()
			// 值班公告
			this.get_notice()
			// 固定入口
			this.get_list()
			this.get_home_link()
		},
		methods: {
			// 获取轮播图
			get_banner() {
				uni.request({
					url: this.base_url + "/scrollImg/list",
					method: "GET",
					success: (res) => {
						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, " ")
							// console.log(this.text)
						}
					}
				})
			},
			// 固定入口
			get_list() {
				// uni.request({
				// 	url: this.base_url + "/homeNav/list",
				// 	method: "GET",
				// 	success: (res) => {
				// 		// this.iconList = res.data.data.data.slice(0, 5)
				// 		this.iconList = res.data.data.data
				// 	}
				// })
				
				uni.request({
					url: this.base_url + "/homeNav/listByCategory",
					method: "GET",
					success: (res) => {
						// console.log(res.data)
						
						this.iconList = res.data.data
					}
				})
			},
			// 首页链接
			get_home_link() {
				uni.request({
					url: this.base_url + "/home/links",
					method: "GET",
					success: (res) => {
						// console.log(res)
						this.home_link = res.data.data
					}
				})
			},

			// 切换背景图片
			change_top_bg_color_img(index) {
				this.top_bg_color_img = this.banners[index].imgURL
			}

		}

	}
</script>

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

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