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">
				<block slot="left">
					<view class="navleft">
						<view>{{city}} {{daytime}}</view>
						<view>农历{{lunar}}</view>
					</view>
				</block>
				<block slot="right">
					<view class="topr flexccc" v-if="weather">
						<image :src="weathericon" class="navright"></image>
						<view class="f12 cof">{{weather}} {{temperature}}­°C</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="yymain" :style="'margin-top:-'+marTop+'rpx;'">
			<view class="yycard">
				<view class="top flexccc">
					<image :src="headimg"></image>
					<view>欢迎您，尊敬的管理员！</view>
				</view>
				<view class="flexcc">
					<view class="list">
						<view class="tit">613</view>
						<view class="txt">来访数(位)</view>
					</view>
					<view class="list">
						<view class="tit">246</view>
						<view class="txt">本月预约(位)</view>
					</view>
					<view class="list">
						<view class="tit">613</view>
						<view class="txt">今日来访(位)</view>
					</view>
					<view class="list">
						<view class="tit">613</view>
						<view class="txt">今日预约(位)</view>
					</view>
					
				</view>
			</view>
			<view class="yylists">
				<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"
	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 footers from '@/components/footer/footer.vue'
  export default {
	components:{yList,footers},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			navbg:require("@/static/images/navbg.png"),
			headimg:require("@/static/images/order/staff/head.png"),
			listline:require("@/static/images/order/staff/listline.png"),
			backgroundColor: "transparent",
			city:'',
			weather:'',
			temperature:'',
			list:[],
			adrlist:[],
			pageSize: 10,
			pageNum: 1,
			reachflag: false,
			nvaHeight:44,
			marTop:0,//距离顶部的距离
			stubarHeight:0,//
			wtdt:'',
			daytime:'',
			lunar:'',
			weathericon:require("@/static/images/weather/weaionf.png"),
			
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
	onUnload() {
		uni.$off('refreshdatalist')
	},
	onLoad: function() {
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=false;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
			// this.getcount();
		})
		
		this.init()
		// this.getcount()
		this.getDataFn()
		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();
		// #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'
				}
				if(top>2){
					this.scroflag=true
				}else{
					this.scroflag=false
				}
			}).exec();
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: Number(v.dictValue)
						}
					})
				}
			})
		},
		getMoreFn(){
			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+'月'+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 + ' ' + timeStr;
		},
		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)
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				// visitType:3
			}
			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;}
.yycard{width: 684rpx;height: 306rpx;background: #FFFFFF;border-radius: 14rpx;margin: 0 auto;
	.top{
		image{width: 132rpx;height: 132rpx;margin-bottom: 12rpx;margin-top: -56rpx;}
		view{font-weight: bold;font-size: 30rpx;color: #161616;}
	}
	.list{text-align: center;flex: 1;padding-top: 44rpx;
		.tit{font-weight: bold;font-size: 36rpx;color: #0391FD;margin-bottom: 16rpx;}
		.txt{font-weight: bold;font-size: 18rpx;color: #666666;}
	}
}
.yylists{width: 684rpx;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>