yuanqu_ui/pages/index/index.vue

<template>
  <view class="staff" :style="'padding-top:'+statop+'px;'">
	  <view class="pfixed">
		<view class="staff_top  flexcj" :style="'padding-top:'+tops+'px;'">
			<image :src="titimg" class="topl flex0"></image>
			<view class="topr" v-if="city">
				<view class="f14 co16 fw flexc lh20">{{city}}<image :src="weathericon" class="weaimg"></image>
				</view>
				<view class="f12 co16">{{weather}} {{temperature}}­°C</view>
			</view>
		</view>
		<view class="sy_box plr15" :style="topflag?'display: block;':'display: none;'" >
			<view class="sy_tit flexcj">
				<view class="sy_txt">预约登记信息</view>
				<!-- <image :src="rimg" class="sy_rimg"></image> -->
			</view>
					<!-- tab -->
			<view class="tab flexcj">
				<view class="list" :class="tabidx==ite.val?'act':''" v-for="(ite,idx) in tablist" :key="idx" @click="getTab(ite.val)">{{ite.tit}}</view>
			</view>
		</view>  
	  </view>
	  
	  <view class="staff_box">
		  <view class="s_count">
			  <image :src="bgimg" class="bgimg"></image>
			  <view class="s_counta">
				  <view class="s_coua flexcj">
					  <view class="f14 fw cof1 lh20">陵园参观预约统计</view>
					  <i class="f14 fw cof1">{{kaTime}}</i>
				  </view>
				  <view class="flexc s_clist">
					<view class="list">
						<view class="num">{{conuntinfo.canGuan}}</view>
						<view class="tit">参观数(位)</view>
					</view>
					<view class="list">
						<view class="num">{{conuntinfo.yuYue}}</view>
						<view class="tit">已预约(位)</view>
					</view>
					<view class="list">
						<view class="num">{{conuntinfo.todayYuYue}}</view>
						<view class="tit">今日预约(位)</view>
					</view>
					<view class="list">
						<view class="num">{{conuntinfo.todayCanGuan}}</view>
						<view class="tit">今日参观(位)</view>
					</view>
				  </view>
				  <!-- v-if="checkPermi(['system:reservat:cav'])" -->
				  <view class="flexcc s_cbtn" @click="getCode" >
					  <image :src="scanimg" class="scanimg"></image>
					  扫码通行
				  </view>
			  </view>
		  </view>
		  <!-- 预约客户信息 -->
		  <view class="sy_box" >
			<view class="sy_tit flexcj">
				<view class="sy_txt">预约登记信息</view>
				<!-- <image :src="rimg" class="sy_rimg"></image> -->
			</view>
			<!-- tab -->
			<view class="tab flexcj">
				<view class="list" :class="tabidx==ite.val?'act':''" v-for="(ite,idx) in tablist" :key="idx" @click="getTab(ite.val)">{{ite.tit}}</view>
			</view>
		  </view>
		<!-- 列表 -->
		<view class="pt8" :style="'min-height: ' + minheight + 'px;'"><y-list :datalist="list" :wtdt="wtdt" :type="type" @getDetail='getDetail'></y-list></view>
	  </view>
	  
	<footers v-if="isfootflag" :footlist="footlist" :footerindex="footerindex" :color_checked="color_checked" :color_nochecked="color_nochecked" :isHomeIndex="true"></footers>
  </view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import self from '@/utils/location.js';
	import yList from "@/components/order/list.vue"
	import {getReservatcountl,getReservatList,getReservatvav} from "@/api/mine/order.js"
	import footers from '@/components/footer/footer.vue'
  export default {
	components:{yList,footers},
	data(){
		return{
			tops:12,
			backgroundColor: "#ffffff",
			weather:require("@/static/images/order/staffs/weather.png"), 
			titimg:require("@/static/images/order/staffs/tit.png"), 
			bgimg:require("@/static/images/order/staffs/bg.png"), 
			scanimg:require("@/static/images/order/staffs/scan.png"),
			rimg:require("@/static/images/order/staffs/rimg.png"),
			footlist:[
				{module:'home',title:'首页',icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png')},
				{module:'mine',title:'我的',icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
				],
			footerindex:'home',
			isfootflag:true,
			color_checked :'161616',
			color_nochecked :'666666',
			statop:48,
			dingtop:0,
			tabidx:1,
			tablist:[{tit:'今天',val:'1'},{tit:'昨天',val:'2'},{tit:'近7天',val:'3'},{tit:'近30天',val:'4'},{tit:'全部',val:'5'}],
			pageSize: 10,
			pageNum: 1,
			reachflag: true,
			topflag:false,
			wtdt:'',
			list:[],
			type:'1',
			conuntinfo:{},
			timefn:'',
			kaTime:'',
			minheight:0,
			city:'',
			weather:'',
			temperature:'',
			weathericon:require("@/static/images/weather/weaionc.png"),
			
		}
	},
	onLoad: function() {
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
			this.getcount();
		})
		uni.getSystemInfo({
			success: (e) => {
				this.tops = Number(e.statusBarHeight)+12;
				this.statop=this.tops+48;
				this.minheight = e.screenHeight - this.statop - 80;
			}
		})
		this.getcount()
		this.getDataFn()
		
	},
	onUnload() {
		uni.$off('refreshdatalist')
		clearInterval(this.timefn)
	},
	onHide() {
		clearInterval(this.timefn)
	},
	onShow() {
		clearInterval(this.timefn)
		this.gettimeFn();
		var that=this;
		// #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() {
		this.ceheiFn()
	},
	onPageScroll(e) {
		let that = this;
		if(e.scrollTop >= that.dingtop + 10){
			that.topflag = true;
		}else{
			that.topflag = false;
		}
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	methods:{
		checkPermi, checkRole,
		gettimeFn() {
			var that = this;
			clearInterval(this.timefn)
			that.time();
			// var stime = this.shuatime
			that.timefn = setInterval(function() {
				// if (stime <= 1) {
				// 	that.shuiux()
				// 	stime = that.shuatime
				// }
				// stime = stime - 1;
				that.time();
			}, 1000);
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			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)
				}
			})
		},
		getTab(e){
			
			this.tabidx=e;
			this.reachflag=false;
			this.pageNum=1;
			this.list=[];
			this.totopFn();
			this.getDataFn();
		},
		ceheiFn(){
			var that = this;
			let cehei = uni.createSelectorQuery().in(this);
			cehei.select(".s_count").boundingClientRect(function(res){
				that.dingtop = res.height;
			}).exec();
		},
		getDetail(data){
			this.$tab.navigateTo('/pages/order/staffcode?type=look&id='+data)
		},
		getCode(){
			var that = this;
			uni.scanCode({
				onlyFromCamera: true,
				autoZoom:false,
				scanType: ['qrCode'],
				success: function(red) {
					let result = red.result;
					if (typeof result == 'string') {
						try {
						
						} catch (e) {
							uni.navigateBack({
								delta: 1
							})
							uni.showToast({
								title: '扫码查询失败,请检查二维码是否正确',
								icon: "none"
							})
							return
						}
					}
					var id = red.result
					var params = {
						"reservatId": id,
					}
					getReservatvav(params).then(res => {
						if (res.code == 200) {
							
							if(res.msg=='核销失败'){
								that.$tab.navigateTo('/pages/order/stafffail')
							}else{
								uni.$emit('refreshdatalist')
								that.$tab.navigateTo('/pages/order/staffcode?id='+id)
							}
							
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1000,
								icon: 'none'
							});
						
						}
					})
				},
				fail: function(e) {
					if (e && e.errMsg && e.errMsg.indexOf('scanCode:fail cancel') != -1) {
						return;
					}
					uni.showToast({
						title: '扫码失败',
						icon: "none"
					})
				},
			});
			// this.$tab.navigateTo('/pages/order/code')
		},
		totopFn(){
			var that = this;
			uni.pageScrollTo({
				duration: 0,
				scrollTop: that.dingtop + 12
			})
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				// visitType:3
			}
			if(this.tabidx!=5){
				params.dataType=this.tabidx
			}
			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>
.yfixed{position: fixed;z-index: 5;left: 0;top: 0;right: 0;background: #ffffff;padding: 0 30rpx;}
.staff_top{padding: 24rpx 32rpx;box-sizing: border-box;box-sizing: border-box;
	.topl{width: 272rpx;height: 56rpx;}
	.topr{
		.weaimg{width: 40rpx;height: 40rpx;}
	}
}
.staff_box{padding:8px 30rpx 0;
	.s_count{position: relative;min-height: 380rpx;
		.bgimg{position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: -1;width: 100%;height: 100%;}
		.s_counta{padding: 36rpx 0 20rpx;width: 100%;
			.s_coua{margin: 0 36rpx;}
			.s_clist{padding: 36rpx 0;
				.list{width: 25%;display: flex;flex-direction: column;align-items: center;position: relative;
					.num{font-size: 42rpx;font-weight: 500;color: #F1F1F1;margin-bottom: 14rpx;}
					.tit{font-size: 24rpx;font-weight: bold;color: #F2B5B2;}
					&::after{content: '';width: 2rpx;height: 36rpx;background: #B7C9F9;position: absolute;right: 0;top: 50%;margin-top: -18rpx;border-radius: 4rpx;}
					&:last-of-type::after{display: none;}
				}
			}
			.s_cbtn{margin: 14rpx 58rpx 0;height: 76rpx;background: #FFFFFF;box-shadow: 0px 2rpx 6rpx 0px rgba(35,68,152,0.63);border-radius: 38rpx;
				font-size: 30rpx;font-weight: bold;color: $com-cd3;
				.scanimg{width: 44rpx;height: 44rpx;margin-right: 30rpx;}
			}
			
		}
	}
}
.sy_box{
		.sy_tit{padding: 32rpx 0;
			.sy_txt{font-size: 30rpx;font-weight: bold;color: #161616;position: relative;padding-left: 26rpx;
				&::before{width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;content: '';left: 0;top: 3rpx;position: absolute;bottom: 3rpx;}
			}
			.sy_rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;marign-left:20rpx}
		}
		.tab{padding-bottom: 24rpx;
			.list{min-width: 112rpx;height: 52rpx;background: #E6E4E4;border-radius: 26rpx;display: flex;align-items: center;font-size: 26rpx;font-weight: 500;
color: #666666;justify-content: center;box-sizing: border-box;padding: 0 28rpx;line-height: 48rpx;
				&.act{color: $com-cd3;background: #FFFFFF;border: 2rpx solid $com-cd3;}
			}
		}
	}
</style>