JP-Equipment-Jingli/pages/otherFunctions/homePage.vue

<template>
	<view class="headerView">
		<u-navbar title="首页"  v-show="false"></u-navbar>
		
		<!-- 头部 -->
		<view class="header">
			<view class="main">
				<view class="title">
					<view class="name"  @click="changeShow()">
						<view class="text">
							你好，{{userInfo.name}}！
						</view>
						<view class="icon">
							<u-icon name='arrow-down' color="#fff" size="28"></u-icon>
						</view>
					</view>
					<view class="options" v-if="show==true" >
						<view  v-if="false" @click="changeShow4()">订阅</view>
						<view    @click="changeShow5()">扫码</view>
						
						<view v-if="false" @click="changeShow2()">修改openId</view> 
						<view @click="logout()">退出账号</view>
					</view>
				
					
					<view class="qr-code" v-if="false">
						<!-- <img src="@/assets/img/riLine-qr-scan-line@1x.png" alt=""> -->
						<u-icon name="scan" size="48" color="#fff"></u-icon>
					</view>
				</view>
				
			</view>
			
		 </view>
		 
		 <u-popup  v-model="showpopup" class=""  mode="bottom"
		 border-radius="14"
		 :closeable="true" >
		 			<view class="scantitle">连续扫码</view>
		 			<view class="list">
		 			<view class=" list-infos">
		 				<view class="infos-head">
		 					<view class="name">
		 						{{nowscan.title?nowscan.title:'扫码后出当前结果'}}
		 					</view>
		 				
		 					<view class="name">
		 						编号：{{nowscan.code}}
		 					</view>
		 				</view>
		 				<view class="infos-head infos-head2" style="margin-bottom: 12rpx;">
		 					<view class="name">
		 						上次巡检:{{nowscan.experimentLastTime}}
		 					</view>
		 				
		 					<view class="name" v-show="nowscan.experimentPeriod">
		 						周期:{{nowscan.experimentPeriod}}天
		 					</view>
		 				</view>
		 				<view class="infos">
		 					<view class="infos-1">
		 						<view class="infos-item">
		 							<view class="item-name">
		 								厂家：
		 							</view>
		 							<view class="item-value">
		 								{{nowscan.manufactor}}
		 							</view>
		 						</view>
		 						<view class="infos-item">
		 							<view class="item-name">
		 								单位：
		 							</view>
		 							<view class="item-value">
		 								{{nowscan.unit}}
		 							</view>
		 						</view>
		 					</view>
		 					<view class="infos-2">
		 						<view class="infos-item">
		 							<view class="item-name">
		 								规格：
		 							</view>
		 							<view class="item-value">
		 								{{nowscan.specifications}}
		 							</view>
		 						</view>
		 						<view class="infos-item">
		 							<view class="item-name">
		 								型号：
		 							</view>
		 							<view class="item-value">
		 								{{nowscan.model}}
		 							</view>
		 						</view>
		 					</view>
		 				
		 				</view>
		 				</view>
		 			</view>
		 			<camera mode="scanCode"   resolution='medium' 
		 			 @scancode="takeCode"  v-if="showpopup"
		 			 device-position="back" flash="off" @error="error"
		 			 style="width: 100%; height: 300px;"></camera>
		 			
		 		</u-popup>
		<!-- 宫格 -->
		<view class="gird"  >
			<!-- 公告 -->
			<view class="notice" v-if="false" >
				<ujp-notice-bar mode="horizontal"
				 bg-color="#6290f7" color="#fff"
				 :list="['库存PDA设备将于2023年4月1日升级维护']"></ujp-notice-bar>
			
				<!-- <u-icon name="volume-up-fill" size="40" color="#fff"></u-icon>
				<text></text> -->
			</view>
			
		<template v-if="role('3')">
			
				<view class="item"  @click="gotoUrl('pages/projectDepartment/exportProcess/exportProcess')">
					<view class="title">
						出库审核
						<u-badge type="error"  :absolute="false"  style="    position: unset;    padding: 2px 3px;" :fontSize="36"
						
						:isCenter="true" :count="badgeGet.outApproveList"></u-badge>
					</view>
					<view class="hint">
						审批出库申请单据
					</view>
					<view class="img">
						
							<img src="@/assets/img/projectGird2.png" alt="">
						
					</view>
				</view>
			
		</template>
		<template v-if="role('2')">
		
			<view class="item"  @click="gotoUrl('pages/projectDepartment/exportApplication/exportApplication')">
				<view class="title">
					出库申请
					
				</view>
				<view class="hint">
					提交出库申请单据
				</view>
				<view class="img">
					<img src="@/assets/img/projectGird1.png" alt="">
				</view>
			</view>
			
			<view class="item"  @click="gotoUrl('pages/projectDepartment/exportReturn/exportReturn')">
				<view class="title">
					设备归还
					 
				</view>
				<view class="hint">
					提交设备归还单据
				</view>
				<view class="img">
					<img src="@/assets/img/projectGird3.png" alt="">
				</view>
			</view>
				</template>
			
			
		
		<template  v-if="role('1')">
			
				
		<view class="item" @click="gotoUrl('pages/storeManagement/equipmentDelivery/equipmentDelivery')">
			<view class="title">
				设备出库
				<u-badge type="error"  :absolute="false"  style="    position: unset;    padding: 2px 3px;" :fontSize="36"
				
				:isCenter="true" :count="badgeGet.outWaitList"></u-badge>
			</view>
			<view class="hint">
				申请物品登记核准出库
			</view>
			<view class="img">
				<img src="@/assets/img/girdH1.png" alt="">
			</view>
		</view>
		<view class="item"  @click="gotoUrl('pages/storeManagement/equipmentEnter/equipmentEnter')">
			<view class="title">
				设备入库
				<u-badge type="error"  :absolute="false"   style="    position: unset;    padding: 2px 3px;" :fontSize="36"
				
				:isCenter="true" :count="badgeGet.inWaitList"></u-badge>
			</view>
			<view class="hint">
				申购采购收货入库登记
			</view>
			<view class="img">
				<img src="@/assets/img/girdH2.png" alt="">
			</view>
		</view>
		<view class="item"   @click="gotoUrl('pages/storeManagement/equipmentInspection/equipmentInspection')" >
			<view class="title">
				设备巡检
				<u-badge type="error" :absolute="false" style="    position: unset;    padding: 2px 3px;" :fontSize="36"
				
				:isCenter="true" :count="badgeGet.deviceList"></u-badge>
			</view>
			<view class="hint">
				当前物品计量库存盘点
			</view>
			<view class="img">
				<img src="@/assets/img/girdH3.png" alt="">
			</view>
		</view>
				
			</template>
			<view class="item"  @click="gotoUrl('pages/otherFunctions/equipmentRetrieval/equipmentRetrieval')">
				<view class="title">
					设备检索
				</view>
				<view class="hint">
					库存物品信息检索
				</view>
				<view class="img">
					<img src="@/assets/img/projectGird4.png" alt="">
				</view>
			</view>
			</view>
			
		<!-- 其他功能 -->
		  <view class="other-functions" v-if="role('other')">
			  <view class="title">
			  	其他功能
			  </view>
		  	  <view class="function-gird">
		  	  	<view class="item">
		  	  		<img src="@/assets/img/riLine-file-add-line@1x.png" alt="">
		  	  	   <text>新增巡检</text>
				</view>
				<view class="item">
					<img src="@/assets/img/riLine-printer-line@1x.png" alt="">
				   <text>打印标签</text>
				</view>
				<view class="item">
					<img src="@/assets/img/riLine-spam-line@1x.png" alt="">
				   <text>故障申报</text>
				</view>
				<view class="item">
					<img src="@/assets/img/riLine-arrow-left-right-line@1x.png" alt="">
				   <text>设备移交</text>
				</view>
		  	  </view>
		 
		  </view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import ujpNoticeBar from "@/pages/otherFunctions/components/u-notice-bar.vue"
	
	export default {
		data() {
			return {
				scanFunctionIsUseable:true,
				nowscan:{
					"title": "",
					"specifications": "",
					"experimentLastTime":"",
					"manufactor": "",
					"unit": "",
					"model": "",
					"code": "",
				
				},
				showpopup:false,
				show:false,
				badgeexportProcess:0,
				userInfo:{
					name:""
				},
				badgeGet:{
					
				},
				badgeList:[
					{
						url:"/mobile/out/outApproveList",
						role:"3",
						key:"outApproveList",
						page:{
							pageIndex: 1,
							pageSize: 0,
							status: 0,
						}
					},
					{
						url:"/mobile/out/outWaitList",
						role:"1",
						key:"outWaitList",
						page:{
							pageIndex: 1,
							pageSize: 0,
							status: 0,
						}
					},
					{
						url:"/mobile/in/inWaitList",
						role:"1",
						key:"inWaitList",
						page:{
							pageIndex: 1,
							pageSize: 0,
							status: 0,
						}
					},
					{
						url:"/mobile/inspection/deviceList",
						role:"1",
						key:"deviceList",
						page:{
							pageIndex: 1,
							pageSize: 0,
							healthStatus: 5,
						}
					}
					
				]
			}
		},
		components:{
			ujpNoticeBar
		},
		onLoad() {
			this.userInfo=this.carhelp.getPersonInfo()
			//this.getUserDepartmentList()
			this.getInfo()
		},
		onReady() {
			
			// #ifdef MP-WEIXIN
			wx.getSetting({
			  success: res => {
				  	console.log("onReady2")
			    if (!res.authSetting['scope.camera']) {
			      wx.authorize({
			        scope: 'scope.camera',
			        success () {
			          // 用户已经同意小程序使用摄像头
			        },
			        fail () {
			          // 用户拒绝了小程序使用摄像头
			        }
			      })
			    }
			  }
			})
			// #endif
		},
		onShow(){
			this.badgeGetMethodApi()
			
		},
		
		methods: {
			
			badgeGetMethodApi(){
				var tdate=new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().substr(0,15).replace("T"," ")
				var token_tdate=this.carhelp.get("badgeGet_token_tdate");//每60分钟存储一次token
				if(token_tdate&&token_tdate==tdate){
					this.badgeGetMethod();
					this.$forceUpdate()
				}else{
					
					
					for(var i in this.badgeList){
						var obj=this.badgeList[i]
						
						if(this.role(obj.role)){
							this.carhelp.set("badgeGet_token_tdate",tdate);
							this.urlgetlisg(obj)
						}
						
					}
					
				}
			},
			urlgetlisg(obj){
				API.urlgetlisg(obj.page,obj.url).then((res) => {
				
					var count=res.data.recordsTotal;
					this.badgeGet[obj.key]=count;
					this.carhelp.set("badgeList_"+obj.key,count)
					this.$forceUpdate()
				}).catch(error => {
					
					
				})
			},
			badgeGetMethod(){
				for(var i in this.badgeList){
					var obj=this.badgeList[i]
					this.badgeGet[obj.key]=this.carhelp.get("badgeList_"+obj.key);
					
				}
			},
			error(e) {
			           console.log(e);
			},
			role(val){
				
				if(this.userInfo.type!=null&&this.userInfo.type!=undefined){
					
					var index=this.userInfo.type.split(',').indexOf(val)
					
					return index>-1
				}else{
					return false
				}
				
			},
			getInfo(){
				
				API.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror:true,
				}).then((res) => {
					
					this.carhelp.setPersonInfo(res.data.regUser );
					this.userInfo=this.carhelp.getPersonInfo()
					this.badgeGetMethodApi()
					
					
				}).catch(error => {
					uni.hideLoading();
					
					//this.getPhone()
					
				})
			},
			logout(){
				this.changeShow()
						uni.showModal({
							title: '提示',
							content: '确认是否退出？',
							success: res=> {
								if (res.confirm) {
								   //付钱  改为组件
								   this.logoutApi();
								   
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
			logoutApi(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					
				};
				 
				API.logout(data).then((res) => {
					this.carhelp.logoff();
				
					
					uni.redirectTo({
						url:"/pages/index/index"
					})
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			
			changeShow(){
				this.show=!this.show
			},
			changeShow4(openId){
				uni.requestSubscribeMessage({
				  tmplIds: ['YJo0Ji-N--n27fGB41pFVCCvFCNlsJwwScN1mD13Uu4'],
				  success (res) { }
				})
			},
			changeShow5(){
				this.showpopup=true
			},
			changeShow3(openId){
				this.carhelp.setOpenId(openId);
				this.carhelp.logoff();
				
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			changeShow2(){
				var _this=this
				uni.showModal({
					title: '输入openId',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							if(res.content){
								_this.changeShow3(res.content)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gotoscan(val) {
				// #ifdef H5
					this.gotoscanH5(val)
				// #endif
				
				// #ifdef MP-WEIXIN
					
						this.gotoscanMP(val)
				// #endif
			},
			takeCode(e){
				 console.log(e);
				  if(this.scanFunctionIsUseable) {
				         this.scanFunctionIsUseable = false;
				         // 对扫码结果进行处理
				         console.log(e.detail.result);
						this.getscan(this.takeCodeJp(e.detail.result))
				         // 扫码间隔两秒
				         setTimeout(() => {
				         this.scanFunctionIsUseable = true;
						
				         }, 1000)
				     }
				
			 },
			 gotoscanMP(val){
				 this.showpopup=true;
				  // const ctx = uni.createCameraContext();
				  //            ctx.takePhoto({
				  //                quality: 'high',
				  //                success: (res) => {
				  //                    this.src = res.tempImagePath
				  //                }
				  //            });
			 },
			 getscan(val) {
			 	this.showpopup=true;
			 	
			 	
			 	uni.showLoading({
			 		title: "加载中",
			 		mask: true,
			 	})
			 	API.queryDeviceByCode({
			 		code: val,
			 
			 	}).then((res) => {
			 		uni.hideLoading();
			 		if (res.data.deviceInfo) {
			 			console.log(res.data.deviceInfo)
			 			this.nowscan=res.data.deviceInfo;
			 			uni.showToast({
			 				title: "添加成功",
			 				icon: "none"
			 			})
			 
			 
			 		} else {
			 			uni.showToast({
			 				title: "二维码无效",
			 				icon: "none"
			 			})
			 		}
			 
			 	}).catch(error => {
			 		uni.showToast({
			 			title: error,
			 			icon: "none"
			 		})
			 	})
			 },
			gotoscanH5(val) {
				console.log('111')
				
				var _this = this;
				uni.showModal({
					title: '提示',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.getscan(res.content)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			
			},
			
			
		}
	}
</script>
<style >
	page{
		background-color: rgba(1,122,255,1);
		padding-bottom: 100rpx;
	}
</style>
<style lang="scss" scoped>
	
	.options{
		width: 260rpx;
		
		line-height: 60rpx;
		//text-align: center;
		padding:8rpx 0px 8rpx 16rpx;
		background-color: #fff;
		color: rgba(65, 80, 88, 1);
		font-family: Microsoft Yahei;
		position: absolute;
		top: 228rpx;
		border-radius: 1px;
		//right: 24rpx;
		box-shadow:5px 5px 10px gray;
	}
	.headerView{
		//background:linear-gradient(180deg, rgba(0,45,194,1) 0%,rgba(0,59,254,1) 49%,rgba(1,122,255,1) 100%);
		background-color: rgba(1,122,255,1);
		
	}
	page{
		background-color: rgba(1,122,255,1);
		padding-bottom: 100rpx;
	}
	// 头部
	.header{
		width: 100%;
		height: 289px;
		background:linear-gradient(180deg, rgba(0,45,194,1) 0%,rgba(0,59,254,1) 49%,rgba(1,122,255,1) 100%);
		padding: 0 40rpx;
		.main{
			width: 100%;
			height: 100%;
			background: url(@/assets/img/background.png) no-repeat;
			background-position: top -70rpx right -50rpx;
			position: relative;
			background-position-y: 20px;
			padding-top: 20rpx;
		}
		.title{
			//margin-top: 60px;
			 padding-top: 60px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(255, 255, 255, 1);
			line-height: 88rpx;
			.name{
				display: flex;
				font-size: 40rpx;
				
			}
			.qr-code{
				display: flex;
				
			}
		}
		
	}
	
 // 宫格
 .gird{
	 // 公告
	 .notice{
	 	overflow: hidden;
		width: 100%;
	 	display: flex;
	 	align-items: center;
	 	background-color: #6290f7;
	 	color: rgba(255, 255, 255, 1);
	 	font-weight: bold;
	 	border-radius: 8px;
	 	height: 80rpx;
	 	line-height: 80rpx;
	 	padding: 0 24rpx;
	 //	position: absolute;
	 	bottom: 260rpx;
	 	left: 0;
	 	right: 0;
	 	    margin-bottom: 40rpx;
	 	text{
	 		font-size: 28rpx;
	 		width: 542px;
	 		margin-left: 16rpx;
	 		white-space: nowrap;
	 		overflow: hidden;
	 		text-overflow: ellipsis;
	 	}
	 }
	 padding: 0 40rpx;
	 display: flex;
	 justify-content: space-between;
	 flex-wrap: wrap;
	 margin-top: -124rpx;
	 .item{
		 width: 720rpx;
		 height: 100px;
		 background-color: rgba(255, 255, 255, 1);
		 border-radius: 8px;
		 padding: 32rpx 24rpx;
		 position: relative;
		 margin-bottom: 30rpx;
		 .title{
			 color: rgba(16, 16, 16, 1);
			 font-size: 44rpx;
			 margin-bottom: 8rpx;
			 font-family: 'Alibaba-PuHuiTi-Regular';
		 }
		 .hint{
			 color: rgba(106, 121, 142, 1);
			 font-size: 32rpx;
			 margin-bottom: 44rpx;
		 }
		 .img{
			 width: 75px;
			 height: 75px;
			 position: absolute;
			 right: 24rpx;
			 bottom: 24rpx;
			 img{
				 width: 100%;
				 height: 100%;
			 }
		 }
	 }
 }
 
 // 其他功能
 .other-functions{
	 padding: 0 40rpx;
	 .title{
		 color: rgba(255, 255, 255, 1);
		 font-size: 36rpx;
		 margin-bottom: 16rpx;
	 }
	 .function-gird{
		 display: flex;
		 flex-wrap: wrap;
		 justify-content: space-between;
		 .item{
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 width: 320rpx;
			 height: 80rpx;
			 line-height: 80rpx;
			 margin-bottom: 24rpx;
			 color: rgba(255, 255, 255, 1);
			 border-radius: 8px;
			 background-color: rgba(255, 255, 255, 0.25);
			 text-align: center;
			 border: 1px solid rgba(255, 255, 255, 0.35);
			 img{
				 width: 32rpx;
				 height: 32rpx;
				margin-right: 8rpx;
			 }
		 }
	 }
 }
</style>