prevent_drowning_app/pages/index/index.vue

<template>
  <view class="home" :style="'padding-top:'+nvaHeight+'px;padding-bottom:'+footHeight+'rpx'">
	<view class="navbox">
		<uni-nav-bar :title="title" leftWidth='400rpx'  color="#ffffff"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			<block slot="left">
				<view class="topl flexc">
					<image src="@/static/images/home/adr.png" ></image>
					<view class="over">{{city}}</view>
				</view>
			</block>
		</uni-nav-bar>
	</view>	
	<view class="hmain flex1">
		<view class="flexcj mb12">
			<view class="flex1 namea flexc">
				<view class="tit over">你好~ {{name}}</view>
				<view class="txt">{{roleGroup}}</view>
				<view class="imgs">
					<image src="@/static/images/home/change.png"></image>
				</view>
				
			</view>
			<view class="flex0 weabox">
				<view class="tit flexcj mb2">7月28日 <image src="@/static/images/home/wea.png"></image></view>
				<view class="txt">31℃/36℃<text></text>晴</view>
			</view>
		</view>
		<view class="mb12" v-if="bannerList&&bannerList.length">
			<banner :list="bannerList" height="342"></banner>
		</view>
		<view class="mb12 tipbox">
			<image src="@/static/images/home/tipbg.png" class="tipbg"></image>
			<view class="tips">
				<view class="flexc tipsa">
					<image src="@/static/images/home/tip.png" class="tipimg"></image>
					<image src="@/static/images/home/tipt.png" class="tipt"></image>
					<view class="flex1"></view>
					<view class="tipm flexc" @click="getNoticeFn">
						全部<image src="@/static/images/home/wrimg.png"></image>
					</view>
				</view>
				<notice :noticelist="noticelist" @getNoticeDet="getNoticeDet"></notice>
			</view>
		</view>
		<view class="mb4 htabs flexcj">
			<view class="htab flexc">
				<view class="imgs flex0 flexc">
					<image src="@/static/images/home/htaba.png" class="imga"></image>
				</view>
				<view class="flex1" @click="getNoticeFn(1)">
					<view class="tit mb5">防溺通知</view>
					<view class="txt">预警提醒 守护安全</view>
				</view>
			</view>
			<view class="htab flexc" @click="getRzList">
				<view class="imgs flex0 flexc">
					<image src="@/static/images/home/htabb.png" class="imgb"></image>
				</view>
				<view class="flex1">
					<view class="tit mb5">绑定认证</view>
					<view class="txt">绑定监护 溺水早知</view>
				</view>
			</view>
		</view>
		<!-- 新闻 -->
		<view class="news">
			<view class="flexc overh mb15">
				<view class="flex1 overh">
					<tablist :tablist="tablist" :tabval="tabval" @getCheck="getCheck"></tablist>
				</view>
				<view class="flexcc hrimg" @click="getArticleFn">
					<image src="@/static/images/home/hrimg.png" ></image>
				</view>
			</view>
			<box-list :datainfo='list' :type="type" @getDetail="getDetail"></box-list>
		</view>
		<!-- 完善按钮 -->
		<view class="rxfbtn" v-if="initFace=='Y'">
			<view class="rxbtn flexc">
				<image src="@/static/images/home/rztip.png" class="imga flex0"></image>
				<view class="tit flex1 over">1分钟完善信息，守护孩子的安全</view>
				<view class="btn flexcc flex0">去完善</view>
				<image src="@/static/images/home/wclose.png" class="imgb flex0" @click="getzrCloseFn"></image>
			</view>
		</view>
		
	</view>
	<loading></loading>
	 <footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
import footers from '@/components/footer/footer.vue'
import banner from '@/components/swiper/banner.vue'
import notice from '@/components/swiper/notice.vue'
import tablist from '@/components/tabs/index.vue'
import boxList from '@/components/box/list.vue'
import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
import {getDictionaryFn} from "@/api/mine/register.js"
import {getNewsList,getBannerListNoPage} from "@/api/work/index.js"
import {getNoticeList} from "@/api/common.js"
import {getUserProfile} from "@/api/system/user.js"
  export default {
	components:{footers,banner,notice,tablist,boxList},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			activeColor:'#A7A7A7',
			nactiveColor:'#E6E6E6',
			list:[],
			bannerList:[],
			footHeight:'150',
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			wtdt:'',
			nvaHeight:44,
			backgroundColor: "transparent",
			title:'',
			city:"潜山市",
			name:this.$store.state.user.nickName,
			roleGroup:'',////角色
			noticelist:[],
			tabval:'news',
			type:'article',//article：文章，avideo:视频
			tablist:[{dictLabel:'最新',dictValue:'news'}],
			xwlxList:[],//新闻类型
			initFace:'Y',//y:显示
			
		}
	},
	onShow() {
		this.initFace=this.$store.state.user.initFace||'Y';
		if(this.initFace=='Y'){
			this.footHeight=282
		}
	},
    onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
		this.init();
		this.getNewsList()
		this.getNoticeList()
		this.getBanner()
    },
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#DFEBFF';
			this.title='首页'
		} else {
			this.backgroundColor = 'transparent'
			this.title=''
		}
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		// if (this.reachflag) {
		// 	this.pageNum++
		// 	this.getDataFn()
		// }
	},
	methods:{
		checkPermi,checkRole,
		init(){
			//新闻类型
			getDictionaryFn('newtype').then(res => {
				if (res.code == 200) {
					this.xwlxList = res.data.map(v => {
						var obj={
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
						this.tablist.push(obj)
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
			getUserProfile().then(response => {
			  this.roleGroup = response.roleGroup
			  this.postGroup = response.postGroup
			})
		},
		getzrCloseFn(){
			this.$store.dispatch('checkInitFace', 'N').then(() => {
				this.initFace='N';
				this.footHeight='150';
			})
		},
		
		getCheck(val){
			this.tabval=val;
			if(val==2){
				this.type="avideo";
			}else{
				this.type="article";
			}
			this.getrefreshData()
		},
		getrefreshData(){
			this.pageNum=1;
			this.list=[];
			this.reachflag=true;
			this.getNewsList()
		},
		getDetail(e){
			this.$tab.navigateTo(`/news/pages/article/detail?id=${e}`) 
		},
		getRzList(){
			this.$tab.navigateTo(`/work/pages/rz/index`) 
		},
		getNoticeFn(type){
			this.$tab.navigateTo(`/news/pages/notice/index`) 
		},
		getArticleFn(){
			this.$tab.navigateTo(`/news/pages/article/index`) 
		},
		getNoticeDet(id){
			this.$tab.navigateTo(`/news/pages/notice/detail?id=${id}`) 
		},
		getNoticeList(){
			var params={
				pageSize:5,
				pageNum: 1,
				status:'0',//0正常，1不启用
				noticeType:'3'
			}
			getNoticeList(params).then(res=>{
				if(res.code==200){
					this.noticelist = res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getNewsList(){
			var params={
				pageSize:2,
				pageNum: 1,
				status:'0',//0启用，1不启用
			}
			if(this.tabval!='news'){
				params.newType=this.tabval
			}
			getNewsList(params).then(res=>{
				if(res.code==200){
					var arr=JSON.parse(JSON.stringify(res.rows));
					if(this.tabval==2){
						arr=res.rows.map(v => {
							if(v.newUrl){
								v.newUrl=v.newUrl.split(',')
							}
							return v
						})
					}
					this.list = arr;
				}else{
					this.$toast(res.msg)
				}
			})
				
		},
		getBanner(){
			var params={
				status:'0',
				type:'1',//首页
			}
			getBannerListNoPage(params).then(res=>{
				if(res.code==200){
					var arr=[];
					if(res.rows&&res.rows.length){
						res.rows.map(v => {
							if(v.imgUrl){
								var newArr=v.imgUrl.split(',')
								arr=arr.concat(newArr)
							}
						})
					}
					this.bannerList = arr;
				}else{
					this.$toast(res.msg)
				}
			})
		},
	}
  }
</script>
<style lang="scss" scoped>
.home{height: 100vh;background: linear-gradient(127deg, #DFEBFF, #F1F6FF, #E2EDFF);padding-bottom: 150rpx;display: flex;flex-direction: column;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	
	.topl{padding-left: 6rpx;overflow: hidden;
		image{width: 18rpx;height: 20rpx;margin-right: 12rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 24rpx;color: #272727;}
	}
}
.hmain{padding: 0 24rpx;overflow: auto;
	.namea{overflow: hidden;
		.tit{font-weight: bold;font-size: 32rpx;color: #272727;margin-right: 22rpx;}
		.txt{background: #DDEAFF;font-weight: bold;font-size:20rpx;color: #4E8CEE;border-radius: 18rpx;padding: 0 16rpx;line-height: 30rpx;
border: 2rpx solid #4775EA;margin-right: 18rpx;flex: 0 0 auto;}
		.imgs{display: flex;align-items: center;width: 30rpx;height:30rpx;justify-content: center;}
		image{width: 22rpx;height: 18rpx;}
	}
	.weabox{padding-right: 26rpx;
		.tit{font-size: 24rpx;color: #272727;}
		image{width: 24rpx;height: 24rpx;}
		.txt{font-size: 20rpx;color: #666666;}
		text{display: inline-block;width: 20rpx;}
	}
	.tipbox{
		width: 100%;height: 162rpx;position: relative;
		.tipbg{width: 100%;height: 100%;}
		.tips{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
			.tipsa{padding: 0rpx 26rpx;height: 60rpx;box-sizing: border-box;
				.tipimg{width: 34rpx;height: 34rpx;margin-right: 6rpx;}
				.tipt{width: 134rpx;height: 50rpx;margin-top: 4rpx;}
				.tit{font-size: 28rpx;color: #FFFFFD;text-shadow: 0px 4rpx 10rpx #275BB7;}
				.tipm{font-weight: 500;font-size: 24rpx;color: #FFFFFF;
					image{width: 12rpx;height: 18rpx;margin-left: 18rpx;}
				}
			}
		}
	}
	.htabs{
		.htab{height: 140rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 24rpx;box-sizing: border-box;width: 48%;
			.imgs{width: 74rpx;height: 70rpx;margin-right: 14rpx;
				.imga{width: 72rpx;height: 70rpx;}
				.imgb{width: 74rpx;height: 68rpx;}
			}
			.tit{font-weight: bold;font-size: 28rpx;color: #000000;}
			.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
	.news{
		.hrimg{width: 80rpx;height: 80rpx;
			image{width: 32rpx;height: 22rpx;}
		}
	}
	.rxfbtn{position: fixed;left:0rpx;right: 0rpx;bottom: 150rpx;padding: 10rpx 24rpx;}
	.rxbtn{width: 100%;background: #4280FB;border-radius: 20rpx;padding: 16rpx 22rpx 16rpx 16rpx;
		.imga{width: 58rpx;height: 60rpx;margin-right: 14rpx;}
		.imgb{width: 20rpx;height: 20rpx;margin-left: 20rpx;}
		.tit{font-weight: bold;font-size: 26rpx;color: #FFFFFF;}
		.btn{background: #FFFFFF;padding: 0 26rpx;height: 58rpx;
box-shadow: 0px 0px 0px 0px #2B6AE7;
border-radius: 30rpx;font-weight: bold;
font-size: 26rpx;color: #2B73FF;}
	}
}
</style>