yuanqu_ui/pages/index/index.vue

<template>
	<view>
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" leftWidth='340rpx'  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="yymain" :style="'margin-top:-'+marTop+'rpx;'">
			<!-- 顶部 -->
			<view class="yqtop flexcj">
				<view class="yqtopl">
					<view class="tit mb10">潜山经济开发区</view>
					<view class="txt">安徽中新云智慧园区服务平台</view>
				</view>
				<view class="yqtopr">
					<view class="flexc mb4">
						<image class="wimg" :src="weathericon"></image>
						<view class="txt ml6">{{daytime}}</view>
					</view>
					<view class="txt">{{lunar}}</view>
				</view>
			</view>
			<!-- 卡片 -->
			<view class="yqcard">
				<view class="yqctop flexcj">
					<view class="yqctopl flexc">
						<image :src="headimg"></image>
						<view class="over">{{name}}</view>
					</view>
					<view class="yqctopr flexcc" @click="getNoticeFn">
						<image :src="newsimg"></image>
						<view class="tit">消息</view>
						<view class="cir"></view>
					</view>
				</view>
				<view class="pdlr2">
					<view class="yqcbox">
						<view class="yqcba" v-if="checkPermi(['system:clock:list'])" @click="getClockFn">
							<view class="aimg"><image :src="htabaimg" class="imga"></image></view>
							<view class="atit">打卡记录</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:order:add'])" @click="getMeetFn">
							<view class="aimg"><image :src="htabbimg" class="imgb"></image></view>
							<view class="atit">会议预订</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:food:add'])" @click="getEatFn">
							<view class="aimg"><image :src="htabcimg" class="imgc"></image></view>
							<view class="atit">订餐预订</view>
						</view>
						<!-- <view class="yqcba">
							<view class="aimg"><image :src="htabdimg" class="imgd"></image></view>
							<view class="atit">访客预约</view>
						</view> -->
						<view class="yqcba" v-if="checkPermi(['system:reservat:list'])" @click="getMoreFn">
							<view class="aimg"><image :src="htabeimg" class="imge"></image></view>
							<view class="atit">预约管理</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:management:list'])" @click="getLimitFn">
							<view class="aimg"><image :src="htabfimg" class="imgf"></image></view>
							<view class="atit">访客管理</view>
						</view>
						<view class="yqcba" v-if="checkPermi(['system:record:list'])" @click="getVistotFn">
							<view class="aimg"><image :src="htabgimg" class="imgg"></image></view>
							<view class="atit">访客记录</view>
						</view>
						<view class="yqcba">
							<view class="aimg"><image :src="htabhimg" class="imgh"></image></view>
							<view class="atit">敬请期待</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 通知 -->
			<view class="mb10">
				<notice :noticelist="noticelist" :activeColor="activeColor" :nactiveColor="nactiveColor" :autoplay='autoplay' @getNoticeDet="getNoticeDet"></notice>
			</view>
			<!-- 统计 -->
			<view class="yqcont yqconta">
				<view class="yqcl">
					<view class="yqcla">
						<image :src="hbgaimg" class="cbgimg"></image>
						<view class="cbox">
							<view class="tit mb5">来访数</view>
							<view class="tit"><text>613</text>位</view>
						</view>
					</view>
					<view class="yqcla">
						<image :src="hbgbimg" class="cbgimg"></image>
						<view class="cbox">
							<view class="tit mb5">本月预约</view>
							<view class="tit"><text>613</text>位</view>
						</view>
					</view>
					<view class="yqcla">
						<image :src="hbgcimg" class="cbgimg"></image>
						<view class="cbox">
							<view class="tit mb5">今日来访</view>
							<view class="tit"><text>613</text>位</view>
						</view>
					</view>
					<view class="yqcla">
						<image :src="hbgdimg" class="cbgimg"></image>
						<view class="cbox">
							<view class="tit mb5">今日预约</view>
							<view class="tit"><text>613</text>位</view>
						</view>
					</view>
				</view>
				<view class="yqcr">
					<image :src="hbgeimg" class="cbgimg"></image>
					<view class="cbox">
						<view class="cboxa flexc">
							<image :src="dayimg" class="dayimg"></image>
							<view class="num">1,037</view>
						</view>
						<view class="flexcc">
							<view class="cboxb">
								<view class="tit mb5">中餐</view>
								<view class="tit"><text>732</text>位</view>
							</view>
							<view class="cboxb">
								<view class="tit mb5">晚餐</view>
								<view class="tit"><text>732</text>位</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 普通用户看到的 -->
			<view class="yqcont">
				<view class="yqcb">
					<image :src="hbgfimg" class="cbgimg"></image>
					<view class="cbox flexc">
						<view class="cboxb flexc pl10">
							<image :src="dayimg" class="dayimg"></image>
							<view class="num pr4">1,037</view>
						</view>
						<view class="cboxb">
							<view class="tit"><view class="tita">中餐</view><text>732</text>位</view>
							<view class="tit"><view class="tita">晚餐</view><text>732</text>位</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 普通用户 -->
			<view class="yylists" v-if="!checkRole(['manager'])">
				<view class="yyltab flexcj">
					<view class="left flexc">本周打卡记录<image :src="listline"></image></view>
					<view class="right" @click="getmClockFn">查看更多 >></view>
				</view>
				<!-- 列表 -->
				<view>
					<y-list type='record' :datalist="list" :wtdt="wtdt" @getDetail='getClockDetailFn' :adrlist="adrlist" @getDelFn="getDelFn" @gettypeFn="gettypeFn"></y-list>
				</view>
			</view>
			<!-- 管理员 -->
			<view class="yylists" v-else>
				<view class="yyltab flexcj">
					<view class="left flexc">待审批列表<image :src="listline"></image></view>
					<view class="right" @click="getMoreFn">查看更多 >></view>
				</view>
				<!-- 列表 -->
				<view>
					<y-list type='order' :datalist="list" :wtdt="wtdt" @getDetail='getDetail' :adrlist="adrlist" @getDelFn="getDelFn" @gettypeFn="gettypeFn"></y-list>
				</view>
			</view>
		</view>
	
	<footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import self from '@/utils/location.js';
	import yList from "@/components/order/list.vue"
	import notice from "@/components/swiper/notice.vue"
	let { calendar } = require("@/components/lunc-calendar/calendar.js");
	import {getReservatcountl,getReservatList,getReservatDel,getReservatSh} from "@/api/mine/order.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getNoticeList} from "@/api/common.js"
	import {getClockList} from "@/api/mine/work.js"
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{notice,yList,footers},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			navbg:require("@/static/images/navbg.png"),
			headimg:require("@/static/images/home/head.png"),
			htabaimg:require("@/static/images/home/htaba.png"),
			htabbimg:require("@/static/images/home/htabb.png"),
			htabcimg:require("@/static/images/home/htabc.png"),
			htabdimg:require("@/static/images/home/htabd.png"),
			htabeimg:require("@/static/images/home/htabe.png"),
			htabfimg:require("@/static/images/home/htabf.png"),
			htabgimg:require("@/static/images/home/htabg.png"),
			htabhimg:require("@/static/images/home/htabh.png"),
			hbgaimg:require("@/static/images/home/hbga.png"),
			hbgbimg:require("@/static/images/home/hbgb.png"),
			hbgcimg:require("@/static/images/home/hbgc.png"),
			hbgdimg:require("@/static/images/home/hbgd.png"),
			hbgeimg:require("@/static/images/home/hbge.png"),
			hbgfimg:require("@/static/images/home/hbgf.png"),
			hbggimg:require("@/static/images/home/hbgg.png"),
			hbghimg:require("@/static/images/home/hbgh.png"),
			newsimg:require("@/static/images/home/news.png"),
			timeimg:require("@/static/images/home/time.png"),
			dayimg:require("@/static/images/home/day.png"),
			listline:require("@/static/images/order/staff/listline.png"),
			autoplay:false,
			activeColor:'#A7CDF9',
			nactiveColor:'#DADADA',
			backgroundColor: "transparent",
			city:'',
			weather:'',
			temperature:'',
			list:[],
			noticelist:[],
			adrlist:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: false,
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			wtdt:'',
			daytime:'',
			lunar:'',
			weathericon:require("@/static/images/weather/weaionf.png"),
			userId:this.$store.state.user.userId,
			name:this.$store.state.user.name,
			startDate:'',
			endDate:'',
			kaTime:'',
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},
	onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.marTop=692-Number(this.nvaHeight*2)-16;
			}
		})
		this.getNoticeList()
		return
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=false;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
			// this.getcount();
		})
		
		this.init()
		this.getNoticeList()
		// this.getcount()
		
		uni.getSystemInfo({
			success: (e) => {
				this.stubarHeight=Number(e.statusBarHeight);
				this.nvaHeight = Number(e.statusBarHeight)+44;
				this.marTop=692-Number(this.nvaHeight*2)-16;
			}
		})
		
	},
	mounted() {
		this.getHeightFn()
	},
	onShow() {
		var that=this;
		this.time();
		this.getWeeksDay()
		// #ifndef H5
		self.getLocation(function(res){
			if(res==-1){
				that.setflag=true
			}else{
				// that.getAdrinfoFn(res)
				// that.location = `${res.lng},${res.lat}`
				that.city=res.city;
				that.temperature=res.temperature;
				that.weather=res.weather;
				that.weathericon=res.icon;
			}			
		})
		// #endif
	},
	mounted() {
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		getHeightFn(){
			let query = uni.createSelectorQuery().in(this);
			//需要给黄色区域设置一个id标识，在这里是demo
			query.select('.navbox').boundingClientRect(data => {
				var top=data.top<0 ? -data.top : data.top;
				var stubarHeight=Number(this.stubarHeight);
				if (top <=this.nvaHeight) {
					const opacity = top / 100 // 计算透明度值
					const color = `rgba(4, 145, 253, ${opacity})`
					this.backgroundColor = color // 更新盒子背景颜色
				} else {
					this.backgroundColor = '#00A9F0'
				}
			}).exec();
		},
		getNoticeDet(e){
			// this.$tab.navigateTo("/pages/index/noticedetail?type=xttz&id="+e)
		},
		getNoticeFn(e){
			this.$tab.navigateTo("/pages/index/notice")
		},
		//打卡记录
		getClockFn(){
			this.$tab.navigateTo("/work/pages/record/clockin")
		},
		// 就餐预定
		getEatFn(){
			this.$tab.navigateTo("/work/pages/yyorder/eat")
		},
		// 会议预定
		getMeetFn(){
			this.$tab.navigateTo("/work/pages/yyorder/meeting")
		},
		//访客记录
		getVistotFn(){
			this.$tab.navigateTo("/work/pages/record/visitor")
		},
		// 访客管理
		getLimitFn(){
			this.$tab.navigateTo("/work/pages/yyorder/limit")
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getNoticeList(){
			getNoticeList().then(res=>{
				if(res.code==200){
					this.noticelist=res.rows
				}
			})
		},
		getMoreFn(){
			this.$tab.navigateTo("/pages/order/list")
		},
		// 打卡记录
		getmMoreFn(){
			this.$tab.navigateTo("/pages/order/list")
		},
		getDelFn(id){
			var that=this;
			getReservatDel(id).then(res=>{
				if(res.code==200){
					that.$toast('删除成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						// that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		gettypeFn(ite){
			var that=this;
			var params={
				reservatId:ite.id,
				visitType:ite.type
			}
			getReservatSh(params).then(res=>{
				if(res.code==200){
					that.$toast('审核成功')
					setTimeout(function(){
						that.reachflag=true;
						that.pageNum=1;
						that.list=[];
						that.getDataFn();
						// that.getcount();
					},1500)
					
				}else{
					that.$toast(res.msg)
				}
			})
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			let lunar = calendar.solar2lunar(y, m, d); //农历
			this.lunar=lunar.IMonthCn+lunar.IDayCn;
			this.daytime=(m < 10 ? ('0' + m) : m)+'月'+(d < 10 ? ('0' + d) : d)+"日";
			// var h = date.getHours();
			// var min = date.getMinutes();
			// var s = date.getSeconds();
			// var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			// var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
			// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
			// 	'0' + s) : s);
			this.kaTime = yearStr
		},
		getWeeksDay(){
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth();
			var d = date.getDate();
			var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			var startDate,endDate
			if(week==0){
				startDate=new Date(y,m,d-week-6)
				endDate=new Date(y,m,d-week)
			}else{
				startDate=new Date(y,m,d-week+1)
				endDate=new Date(y,m,d-week+7)
			}
			this.startDate=this.formatDate(startDate)
			this.endDate=this.formatDate(endDate)
			this.getDataFn()
			// console.log(this.formatDate(startDate),this.formatDate(endDate))
		},
		formatDate(date){
			const year = date.getFullYear();
			const month = ('0' + (date.getMonth() + 1)).slice(-2);
			const day = ('0' + date.getDate()).slice(-2);
		 
			return year + '-' + month + '-' + day;
		},
		getcount(){
			getReservatcountl().then(res=>{
				if(res.code==200){
					this.conuntinfo=res.data
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getDetail(data){
			this.$tab.navigateTo('/pages/order/staffcode?type=look&id='+data)
		},
		getClockDetailFn(){
			var obj={
				userId:this.userId,
				recordTime:this.kaTime
			}
			this.$tab.navigateTo('/work/pages/record/detail?data='+encodeURIComponent(JSON.stringify(obj)))
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				visitType:1
			}
			
			if(!checkRole(['manager'])){
				// 个人
				params.userId=this.userId;
				params.startTime=this.startDate;
				params.endTime=this.endDate;
				getClockList(params).then(res=>{
					if (res.code == 200) {
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
								1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					} else {
						this.$toast(res.msg)
					}
				})
			}else{
				// 管理员
				getReservatList(params).then(res=>{
					if(res.code==200){
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = '上拉加载更多'
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					}else{
						this.$toast(res.msg)
					}
				}) 
			}	
		},
	},
	
  }
</script>

<style lang="scss" scoped>
// .navbox{
// 	.navbg{width: 100%;height: 692rpx;position: fixed;left: 0;right: 0;top: 0;z-index: 1;}	
// }
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.navleft{padding-left: 12rpx;
		view{font-weight: bold;font-size: 26rpx;color: #FFFFFF;line-height: 36rpx;}
	}
	.navright{width: 40rpx;height: 40rpx;}
.yymain{flex: 1;z-index: 2;position: relative;padding: 0 32rpx;}
// 时间
.yqtop{margin-bottom: 16rpx;
	.yqtopl{
		.tit{font-weight: bold;font-size: 30rpx;color: #FFFFFF;}
	}
	.yqtopr{
		.wimg{width: 34rpx;height: 34rpx;}
	}
	.txt{font-weight: 500;font-size: 26rpx;color: #FFFFFF;}
}
.yqcard{background: #FFFFFF;margin-bottom: 20rpx;box-shadow: 0px 0px 6rpx 0px #DEDEDE;padding: 0 26rpx;border-radius: 14rpx;
	.yqctop{padding: 28rpx 0;
		.yqctopl{flex: 1;overflow: auto;
			image{width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 18rpx;}
			view{font-weight: 500;font-size: 26rpx;color: #161616;}
		}
		.yqctopr{position: relative;min-width: 118rpx;height: 48rpx;background: #DFEEFF;border-radius: 24rpx;
			image{width: 18rpx;height: 22rpx;margin-right: 10rpx;}
			.tit{font-weight: bold;font-size: 22rpx;color: #0391FD;}
			.cir{width: 14rpx;height: 14rpx;background: #FF5161;border-radius: 6rpx;right: 0rpx;top: -2rpx;position: absolute;
			}
		}
	}
	.yqcbox{border-top: 2rpx solid #E6E6E6;display: flex;flex-wrap: wrap;padding: 16rpx 0 14rpx;
		.yqcba{display: flex;flex-direction: column;align-items: center;padding: 24rpx 0;width: 25%;
			.aimg{width: 62rpx;height: 62rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 24rpx;
				.imga{width: 60rpx;height: 60rpx;}
				.imgb{width: 54rpx;height: 62rpx;}
				.imgc{width: 60rpx;height: 58rpx;}
				.imgd{width: 58rpx;height: 62rpx;}
				.imge{width: 62rpx;height: 56rpx;}
				.imgf{width: 56rpx;height: 60rpx;}
				.imgg{width: 56rpx;height: 62rpx;}
				.imgh{width: 54rpx;height: 60rpx;}
			}
			.atit{font-weight: 500;font-size: 22rpx;color: #161616;}
		}
	}
}
// 统计
.yqcont{padding: 16rpx;background: #FFFFFF;box-shadow: 0px 0px 6rpx 0px #DEDEDE;border-radius: 14rpx;display: flex;justify-content: space-between;box-sizing: border-box;
	&.yqconta{padding-bottom: 0;min-height: 244rpx;}
	.cbgimg{width: 100%;height: 100%;}
	.cbox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;box-sizing: border-box;padding: 16rpx 24rpx;
		.tit{font-weight: bold;font-size: 18rpx;color: #6A7582;
			text{font-size: 30rpx;color: #32415F;font-weight: bold;margin-right: 10rpx;}
		}
	}
	.dayimg{width: 76rpx;height: 44rpx;flex: 0 0 auto;}
	.num{font-weight: bold;font-size: 30rpx;color: #0A84FF;font-style: italic;flex: 1;text-align: center;}
	.cboxb{width: 50%;position: relative;padding-left: 24rpx;box-sizing: border-box;
		&::after{width: 2rpx;height: 28rpx;background: #AEB9CB;content: '';position: absolute;right: 0;top: 50%;margin-top: -14rpx;}
		&:nth-of-type(2n){
			&::after{display: none;}
		}
		.tit{
			text{margin-right: 8rpx;font-size: 20rpx;}
		}
	}
	.yqcl{flex: 1;display: flex;flex-wrap: wrap;
		.yqcla{width: 200rpx;height: 98rpx;position: relative;margin:0 16rpx 16rpx 0;
		}	
	}
	.yqcr{
		position: relative;width: 218rpx;height:210rpx;flex: 0 0 auto;
		.cbox{padding: 0;padding-top: 18rpx;}
		.cboxa{margin-bottom: 16rpx;padding-left: 24rpx;	}
	}
	.yqcb{width: 100%;height: 98rpx;position: relative;
		.cbox{padding-left: 0;
			.cboxb{min-width: 216rpx;width: auto;
				.tit{padding-left: 10rpx;display: flex;align-items: center;
					.tita{flex:0 0 auto;}
				 text{margin-left: 26rpx;}
				}
			}
		}
	}
}
// 列表
.yylists{width: 100%;margin: 42rpx auto 0;
	.yyltab{margin-bottom: 28rpx;
		.left{font-weight: bold;font-size: 15px;color: #161616;
			image{width: 110rpx;height: 14rpx;margin-left: 16rpx;}
		}
		.right{font-size: 500;font-size: 22rpx;color: #AAAAAA;}
	}
}

</style>