property/staff_ui/pages/index/index.vue

<template>
	<view class="sbox" >
		<!-- :style="'padding-top:'+nvaHeight+'px;'" -->
		<view class="navbox" :style="'padding-top:'+nvaHeight+'px;'">
			<!-- fixed="true" -->
			<uni-nav-bar  color="#ffffff" leftWidth='400rpx'  :background-color="backgroundColor" :border="false" statusBar='true' >
				<block slot="left">
					<view class="topl flexc">
						<image :src="hlogo" ></image>
						<view class="over">智慧家政 员工端</view>
					</view>
				</block>
			</uni-nav-bar>
			<view class="flexc htop">
				<view class="pr moreimg mr12" @click="showDrawer('showLeft')">
					<image :src="moreimg" class=""></image>
					<view class="cir"></view>
				</view>
				<line-picker @getChange="getChange" :localdata="range" v-model="value"></line-picker>
				<view class="flex1"></view>
				<view class="pr moreimg ">
					<image :src="newsimg"></image>
					<view class="cir"></view>
				</view>
			</view>
			<view class="flexc tablists">
				<view class="tablist" :class="tabval==ite.val?'act':''" v-for="(ite,idx) in tablist" :key="idx" @click="getTabList(ite.val)">
					<view class="tabtit">{{ite.tit}}66636</view>
					<view class="tips" v-if="ite.val==0">
						<image :src="tips" class="tips"></image>
						<view class="cir"></view>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="sxtps">有新订单，请点击“刷新列表”</view>
			<!--  -->
			<view class="mjnpx flexc" v-if="tabval==3||tabval==4">
				<image :src="reset" class="resetimg" @click="getReset"></image>
				<picker mode="date"   @change='bindDateChangea'>
					<view class="chekt flexc">
						<view>{{cxrq|| "选择日期"}}</view>
						<image :src="up"></image>
					</view>
				</picker>
				<view class="flex1 mjlist">
					<view v-for="(ite,idx) in mjlist" :class="mjval==ite.val?'act':''" :key="idx" @click="getMjFn(ite.val)">{{ite.tit}}</view>
				</view>
			</view>
		</view>
		<scroll-view  class="swipe" scroll-y="true"   @scrolltolower="getMoreFn" >
			<box-list :datainfo="list"  :wtdt="wtdt" type='order' @getDetail="getDetail" @getBtnFn="getBtnFn"></box-list>
			</scroll-view>
		<view class="flex0 hbtns">
			<view class="btnl">
				<view class="tit"><text>¥</text> 135</view>
				<view class="txt">今日收入</view>
			</view>
			<view class="btnr">
				<image :src="refresh"></image>
				刷新列表
			</view>
		</view>
		<!-- 左侧展示 -->
		<uni-drawer ref="showLeft" mode="left" :width="280" @change="change($event,'showLeft')">
			<view class="mine" :style="'padding-top:'+stuHeight+'px;'">
				<view class="mtop flexc" @click="handleToInfo">
					<image :src="headimg" class="head flex0"></image>袁明朗
					<image :src="rzico" class="rzimg flex0"></image>
				</view>
				<view class="counbox">
					<view class="couns bga">
						<view class="tit">本月接单数</view>
						<view class="txt">67 </view>
						<image :src="mbga" class="imga"></image>
					</view>
					<view class="couns bgb">
						<view class="tit">本月收入/元</view>
						<view class="txt">67 </view>
						<image :src="mbgb" class="imgb"></image>
					</view>
					<view class="couns bgc">
						<view class="tit">本月好评数</view>
						<view class="txt">67 </view>
						<image :src="mbgc" class="imgc"></image>
					</view>
					<view class="couns bgd">
						<view class="tit">本月差评数</view>
						<view class="txt">67 </view>
						<image :src="mbgd" class="imgd"></image>
					</view>
				</view>
				<view class="flex1 mtlists">
					<view class="mtlist flexc">
						<view class="imgs"><image :src="mtaba" class="imga"></image></view>
						<view class="mltit">实名认证</view>
						<view class="mltxt">已实名</view>
					</view>
					<view class="mtlist flexc" @click="getMajorFn">
						<view class="imgs"><image :src="mtabb" class="imga"></image></view>
						<view class="mltit">专业认证</view>
						<view class="mltxt">已实名</view>
					</view>
					<view class="mtlist flexc">
						<view class="imgs"><image :src="mtabc" class="imgb"></image></view>
						<view class="mltit">我的二维码</view>
					</view>
					<view class="mtlist flexc">
						<view class="imgs"><image :src="mtabd" class="imgc"></image></view>
						<view class="mltit">个人信息</view>
					</view>
					<view class="mtlist flexc">
						<view class="imgs"><image :src="mtabe" class="imgc"></image></view>
						<view class="mltit">修改密码</view>
					</view>
					<view class="mtlist flexc">
						<view class="imgs"><image :src="mtabf" class="imgd"></image></view>
						<view class="mltit">版本号</view>
						<view class="mltxt">当前已是最新版</view>
					</view>
				</view>
				<view class="loginbtns">退出登录</view>
			</view>
			
		</uni-drawer>
		<pop-up :type="type" @getClose="getClose" :finshtype="finshtype" :canres="canres" @getSure="getSure"></pop-up>
		<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import linePicker from "@/components/home/picker.vue"
	import boxList from "@/components/home/list.vue"
	import popUp from "@/components/home/popup.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{linePicker,boxList,popUp},
		data(){
			return{
				hlogo:require("@/static/images/home/hlogo.png"),
				moreimg:require("@/static/images/home/more.png"),
				newsimg:require("@/static/images/home/news.png"),
				tips:require("@/static/images/home/tips.png"),
				refresh:require("@/static/images/home/refresh.png"),
				reset:require("@/static/images/reset.png"),
				up:require("@/static/images/up.png"),
				headimg:require("@/static/images/mine/profile.png"),
				rzico:require("@/static/images/mine/rzico.png"),
				mbga:require("@/static/images/mine/mbga.png"),
				mbgb:require("@/static/images/mine/mbgb.png"),
				mbgc:require("@/static/images/mine/mbgc.png"),
				mbgd:require("@/static/images/mine/mbgd.png"),
				mtaba:require("@/static/images/mine/mtaba.png"),
				mtabb:require("@/static/images/mine/mtabb.png"),
				mtabc:require("@/static/images/mine/mtabc.png"),
				mtabd:require("@/static/images/mine/mtabd.png"),
				mtabe:require("@/static/images/mine/mtabe.png"),
				mtabf:require("@/static/images/mine/mtabd.png"),
				
				nvaHeight:0,
				stuHeight:44,
				backgroundColor: "#0156FE",
				// hrimg:require('@/statics/logo.png'),
				list:[{tit:'123',zhanflag:true}],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				value: 1,
				range: [{tit:"在线",val:0},{tit:"离线",val:1}],
				tabval:0,
				tablist:[{tit:'新任务',val:0},{tit:'待上门',val:1},{tit:'服务中 ',val:2},{tit:'已完成',val:3},{tit:'已取消',val:4},]	,
				type:'',//tips,addpho,cancel,minecode
				scrollTop:'',
				finshtype:2,
				canres:[{tit:"与已接订单时间重叠",val:'0'},{tit:"突发事件请假",val:'1'},],
				mjlist:[{tit:"80m²以内",val:"0"},{tit:"80-90m²",val:"1"},{tit:"90-119m²",val:"2"}],
				mjval:0,
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.stuHeight = Number(e.statusBarHeight)+44;
					this.nvaHeight = Number(e.statusBarHeight);
				}
			})
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			// if (this.reachflag) {
			// 	this.pageNum++
			// 	this.getDataFn()
			// }
		},
		mounted() {
			// var that=this;
			// setTimeout(function(){
			// 	that.getHeightFn()
			// },200)
		},
		methods:{
			checkPermi, checkRole,
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			handleToInfo() {
			  this.$tab.navigateTo('/pages/mine/info')
			},
			getMajorFn(){
				this.$tab.navigateTo("/work/pages/prove/major")
			},
			getDetail(){
				// this.$tab.navigateTo("/work/pages/business/add")
			},
			getBtnFn(e){
				this.type=e
			},
			getMjFn(val){
				this.mjval=val;
			},
			getClose(){
				this.type=''
			},
			getReset(){
				this.cxrq='';
				this.text='';
				this.getrefreshData()
			},
			getrefreshData(){
				this.pageNum=1;
				this.list=[];
				this.reachflag=true;
				this.getDataFn()
			},
			getSure(){
				this.$tab.navigateTo("/work/pages/prove/index")
			},
			getMoreFn(){
				console.log(1)
				if (this.reachflag) {
					this.pageNum++
					this.getDataFn()
				}
			},
			getChange(e){
				
			},
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				var that=this;
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.navbox').boundingClientRect(data => {
					var height=Number(data.height);
					that.topHeight=Number(height)*2
					console.log(that.tabscheight)
				}).exec();
			},
			getTabList(val){
				this.tabval=val;
			},
			getDataFn(){
				return
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(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>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.sbox{
	display: flex;flex-direction: column;height: 100vh;overflow: hidden;
	.swipe{flex: 1;padding: 24rpx 12rpx;box-sizing: border-box;overflow: auto;}
	.hbtns{height: 124rpx;background: #FFFFFF;box-shadow: 0px 2rpx 6rpx 0px #BEBEBE;display: flex;align-items: center;padding:24rpx;box-sizing: border-box;
		.btnl{flex:0 0 auto;text-align: center;padding: 0 12rpx;margin-right: 24rpx;
			.tit{font-weight: bold;font-size: 32rpx;color: #0156FE;margin-bottom: 4rpx;
				text{font-size: 22rpx;}
			}
			.txt{font-weight: bold;font-size: 22rpx;color: #666666;}
		}
		.btnr{flex:1;height: 78rpx;background: #E2ECFF;border-radius: 20rpx;border: 2rpx solid #AEC9FF;display: flex;align-items: center;justify-content: center;font-weight: bold;
font-size: 26rpx;color: #699BFF;
			image{width: 26rpx;height: 24rpx;margin-right: 14rpx;flex: 0 0 auto;}
		}
	}
}
// .navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;background: #0156FE;
.navbox{background: #0156FE;flex:0 0 auto;position: relative;
	.topl{padding-left: 6rpx;
		image{width: 32rpx;height: 32rpx;margin-right: 18rpx;}
		view{font-weight: 400;font-size: 32rpx;color: #FFFFFF;}
	}
	.htop{padding: 22rpx 26rpx;border-bottom: 2rpx solid #3478FF;
		.moreimg{
			image{width: 52rpx;height: 52rpx;}
			.cir{width: 10rpx;height: 10rpx;background: #D32C26;border-radius: 50%;position: absolute;right: 4rpx;top: 4rpx;}
		}	
	}
	.tablists{padding: 0 18rpx;
		.tablist{font-size: 30rpx;color: #9BBDFF;display: flex;align-items: center;padding-left:18rpx;
			.tabtit{position: relative;height: 98rpx;display: flex;align-items: center;}
			&.act{font-weight: bold;color: #FFFFFF;
				.tabtit{
					&::after{content: '';position: absolute;left: 0;right: 0;bottom: 0;height: 10rpx;background: #FFFFFF;}
				}
			}
			.tips{position: relative;margin-left: 10rpx;
				image{width: 14rpx;height: 14rpx;}
				.cir{width: 10rpx;height: 10rpx;background: #D32C26;border-radius: 50%;position: absolute;right: -10rpx;top: 2rpx;}
			}
		}
	}
	.mjnpx{background-color: #FFFFFF;padding:0 26rpx;height: 84rpx;overflow: hidden;
		.resetimg{width: 26rpx;height: 26rpx;margin-right: 20rpx;flex: 0 0 auto;}
		.chekt{
			view{font-weight: 500;font-size: 24rpx;color: #272727;flex: 1;}
			image{width: 14rpx;height: 10rpx;margin-left: 18rpx;flex: 0 0 auto;}
		}
		.mjlist{overflow: auto;display: flex;align-items: center;padding-left: 14rpx;
			view{height: 46rpx;border-radius: 22rpx;border: 2rpx solid #DADADA;flex: 0 0 auto;
			display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 24rpx;color: #666666;margin-left: 24rpx;box-sizing: border-box;padding: 0 26rpx;
			&.act{border: 2rpx solid #0156FE;background: #E2ECFF;color: #0156FE;}
			}
		}
	}
	.sxtps{background:rgba(187, 255, 187, 0.8);font-weight: bold;font-size: 24rpx;color: #28C529;min-height: 80rpx;display: flex;align-items: center;justify-content: center;padding: 8rpx;box-sizing: border-box;position: absolute;bottom: 0;line-height: 40rpx;left: 0;right: 0;transform: translateY(100%);z-index: 1;}
}
.sbox /deep/ .uni-drawer__content{width: 560rpx !important;}
// 左侧
.mine{height: 100vh;display: flex;flex-direction: column;overflow: auto;padding: 0 24rpx 120rpx;
	.mtop{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 42rpx;
		.head{width: 56rpx;height: 56rpx;margin-right: 32rpx;border-radius: 50%;}
		.rzimg{width: 64rpx;height: 22rpx;margin-left: 18rpx;}
	}
	.counbox{display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;
		.couns{width: 244rpx;height: 130rpx;position: relative;padding: 24rpx 20rpx;box-sizing: border-box;border-radius: 10rpx;flex:0 0 auto;margin-bottom: 24rpx;
		&.bga{background: #EBF2FD;}
		&.bgb{background: #E1F9EE;}
		&.bgc{background:#FFEDBD;}
		&.bgd{background:#FFEDEC;}
			.tit{font-weight: 500;font-size: 26rpx;color: #272727;z-index: 1;margin-bottom: 6rpx;}
			.txt{font-size:40rpx;color: #272727;z-index: 1;}
			image{position: absolute;}
			.imga{width: 104rpx;height: 88rpx;right:8rpx;bottom: -4rpx;}
			.imgb{width: 106rpx;height: 68rpx;right:10rpx;bottom: 6rpx;}
			.imgc{width: 56rpx;height: 56rpx;right:22rpx;bottom: 24rpx;}
			.imgd{width: 58rpx;height: 56rpx;right:20rpx;bottom: 24rpx;}
		}
	}
	.mtlists{display: flex;flex-direction: column;margin-bottom: 40rpx;}
	.mtlist{padding: 10rpx 0;flex: 1;max-height:112rpx;box-sizing: border-box;min-height: 68rpx;
		.imgs{width: 26rpx;height: 26rpx;display: flex;align-items: center;justify-content: center;margin-right: 24rpx;flex: 0 0 auto;
			.imga{width: 26rpx;height: 22rpx;}
			.imgb{width: 26rpx;height: 26rpx;}
			.imgc{width: 24rpx;height: 26rpx;}
			.imgd{width: 24rpx;height: 24rpx;}
		}
		.mltit{font-weight: bold;font-size: 26rpx;color: #272727;flex: 1;}
		.mltxt{font-weight: 500;font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;}
	}
	.loginbtns{margin:0 12rpx;height: 68rpx;font-weight: 500;flex: 0 0 auto;
font-size: 26rpx;display: flex;align-items: center;justify-content: center;
color: #666666;
border-radius: 34rpx;border: 2rpx solid #CDCDCD;}
}
</style>