jp-housekeep-manage/pages/managementList/applyAuthorisation.vue

<template>
	<view>
		<view v-if="step">
			<u-navbar :title="title" title-color="#101010" :is-back="false" >
				
			</u-navbar>
			<view class="main2">
				<view class="item" v-for="(item,i) in meterListCk" 
				 :key="i" >
					 <view class="item1">
						 <view class="item11">
						 {{replaceLastTwoWords2(item.name)}}</view>
						  <view class="item12">电源状态：<span>{{item.switchStatus?'开':'关'}}</span></view>
					 </view>
					 
					 <view class="item2" >
					 		<u-switch-jp size="42"
					 		:obj="{
					 			width: '4em',
					 			transform:'translateX(300%)',
					 			sz:['已关闭','已开启'],
					 			fontSize:'32rpx'
					 		}"
					 		@change="switchBtnApi(item,$event)"  
					 		 v-model="item.switchStatus"   inactive-color="#ff9900" ></u-switch-jp >
					 </view>
					 
				</view>
				<u-divider :isnone="meterListCk.length==0" v-if="!meterListCk.length"
				nonetext="暂无记录" border-color="rgba(119,119,119,1)">
					已经到底了</u-divider>
			</view>	
			<view class="bottom">
				<u-divider  border-color=" rgba(119,119,119,1)">
					温馨提示</u-divider>
				<view class="view">
					<img class="view1" src="@/assets/img/apply-look.png">
					<img  class="view2" src="@/assets/img/apply-text.png">
				</view>
			</view>	
		</view>	
		<view v-if="!step">
			<u-navbar title="填写申请人信息" title-color="#101010" :is-back="false" >
				
			</u-navbar>
			<view class="main">
				
				<view class="item">
					<view class="title">
						申请授权
					</view>
					<view class="value">
						{{title}}
					</view>
					
				</view>
				<view class="item" v-if="information.remark">
					<view class="title">
						备注
					</view>
					<view class="value">
						{{information.remark}}
					</view>
					
				</view>
				<view class="item">
					<view class="title">
						姓名<span>*</span>
					</view>
					<view class="value" v-if="!step3">
						<input type="text" v-model="name" placeholder="请填写姓名" />
					</view>
					<view class="value" v-if="step3">
						{{name}}
					</view>
					
				</view>
				
				<view class="item">
					<view class="title">
						联系电话<span>*</span>
					</view>
					<view class="value" v-if="!step3">
						<input type="text" v-model="phone"  placeholder="请填写手机号码" />
					</view>
					
					<view class="value" v-if="step3">
						{{phone}}
					</view>
					
				</view>
				<!-- <view class="item">
					<view class="title">
						<span></span> 备注
					</view>
				</view> -->
				<view class="item">
					<view class="valueInfo" style="    width: 100%;" >
						<span style="    color: #777777;font-size: 32rpx;" >备注信息</span>
						<textarea  type="text" v-model="remark" 
						 style="background-color: #f5f5f5;height: 100rpx;width: 90%;padding: 20rpx;border-radius: 5px;" 
						 placeholder="请填写备注,便于管理员分配所需电表" /></textarea>
					</view>
				</view>
				
				 
				
			</view>
			
			<button class="submit2" v-if="step2" >审批中</button>
			
			<!-- 提交 -->
			<button class="submit" v-else @click="submit" >提交</button>
			
		</view>
		
		
	
		<!-- 提交反馈 -->
		<u-modal v-model="show" :show-title="false" :show-cancel-button="true" cancel-text="关闭" :show-confirm-button="false" >
			<view class="modal">
				<view class="success-icon">
					<img src="@/assets/img/md-check_circle vRxbRvD@3x.png" alt="" />
				</view>
				<view class="success-text">
					授权申请提交成功
				</view>
				<view class="wait">
					请等待单位能源管理员审核通过
				</view>
				
			</view>
			
		</u-modal>
				
	</view>
</template>

<script>
	import * as API_energyManage from '@/apis/pagejs/energyManage.js'
	import * as API_user from '@/apis/pagejs/user.js'
		import * as API from '@/apis/pagejs/managementList.js'
	import {
		checkPhone
	} from '@/apis/utils'
	export default {
		data() {
			return {
				show:false,
				meterId:"",
				id:"",
				name:"",
				phone:"",
				title:"",
				step:false,
				step2:false,
				step3:false,
				meterList:[],
				regUser:{},
				remark:"",
				information:{},
			}
		},
		onLoad(op) {
			this.id=op.id
			
			this.getInformation()
			this.query()
		},
		computed:{
			meterListCk(){
				var sz=[]
				for(var i in this.meterList){
					var item=this.meterList[i]
					if(item.checked){
						sz.push(item)
					}
				}
				return sz
			}
		},
		methods: {
			query(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API_user.findByOpenId({
					noerror:true,
					openId: this.carhelp.getOpenId(),
					
				}).then((response) => {
					if(response.result){
						this.step3=true
						
						var token = response ? response.data.token : '';
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfo(response.data.regUser);
						this.carhelp.setPersonInfoPlus(response.data)
						this.regUser=response.data.regUser
						this.name=this.regUser.name
						this.phone=this.regUser.phone
					}
					
				}).catch(error => {
					
					uni.hideLoading();
					
				})
			},
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_energyManage.remoteSwitch({
					meterId:node.id,
					enabled:key
				}).then((res) => {
					uni.hideLoading();
					node.switchStatus=key
					
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApi(node,key){
				uni.showModal({
					confirmColor:`${key?'#3CC51F':'red'}`,
					confirmText:`${key?'开启':'关闭'}`,
					content: `确认是否要"${key?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`,					title: "提示",
					success:res=> {
						if(res.confirm){
							//this.switchBtnApiMethod(node,key);
						}else{
							node.switchStatus=!key
						}
					}
				})
				console.log(node,key)
			},
			getInformation(){
				if(!this.carhelp.getOpenId()){
					uni.showToast({
						icon: "none",
						title: "未获取到OpenId,请使用微信扫码"
					})
					return
				}
				
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.information({
					id:this.id,
					openId:this.carhelp.getOpenId(),
				}).then((res) => {
					this.title=res.data.information.title
					this.information=res.data.information;
					var allCheck=res.data.allCheck
					uni.hideLoading();
					//this.show=true
					var info=res.data.applicationInfo;
					if(allCheck){
						this.step=true
						this.meterList=res.data.meterList
						var  img=require('@/assets/img/controlCover.png')
						var s='background:url('+img+') center  fixed;background-size:cover;';
						console.log(s)
						document.getElementsByTagName("uni-page")[0].style=s
						
					}
					if(info&&info.status==0){
						this.step2=true
					
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			submit(){
				if(!this.carhelp.getOpenId()){
					uni.showToast({
						icon: "none",
						title: "未获取到OpenId,请使用微信扫码"
					})
					return
				}
				
				
				if(!this.name.length){
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return
				}
				
				
				var checkPhoneResult = checkPhone(this.phone);
					
				if (checkPhoneResult !== true) {
					uni.showToast({
						icon: "none",
						title: checkPhoneResult,
						
					})
					return;
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.apply({
					id:this.id,
					name:this.name,
					phone:this.phone,
					remark:this.remark,
					openId:this.carhelp.getOpenId(),
				}).then((res) => {
				 
					uni.hideLoading();
					if(res.result){
						this.show=true
					}
					this.getInformation()
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		//background: url('@/assets/img/controlCover.png') center  fixed ;
		//background-size:cover;
	}
	.main2{
		margin: 24rpx 0;
		padding-bottom: 300rpx;
		.item{
			margin: 32rpx ;
			padding: 32rpx ; 
			background-color: #fff;
			border-radius: 15px;
			
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
				.item11{
					font-size: 32rpx;
					color: rgba(51,51,51,1);
					font-weight: bold;

				}
				.item12{
					font-size: 24rpx;

					color:#777777 ;
					span{
						font-weight: bold;
						color: rgba(51,51,51,1);
					}
				}
				.item2{
					display: flex;     align-items: center;
				}
		}
	}
	.main{
		margin: 24rpx 0;
		background-color: #fff;
		.item{
			padding: 24rpx 32rpx; 
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(221,221,221,1);
			.title{
				width: 30%;
				color: #777777;
				font-size: 32rpx;
				
				span{
					color: #EE3138;
				}
			}
			.value{
				
				img{
					width: 80rpx;
					
				}
				.uni-input-placeholder{
					color: rgba(204,204,204,1);;
				}
			}
			.icon{
				margin-left: auto;
			}
		}
		.item:last-of-type{
			border: none;
		}
		
	}
     
	 // 提交
	 .submit{
		 background-color: rgba(22,119,255,1);
		 color: rgba(255,255,255,1);
		 margin: 0 32rpx;
		 border-radius: 50px;
	 }
	 // 提交
	 .submit2{
	 		 background-color: #777777;
	 		 color: rgba(255,255,255,1);
	 		 margin: 0 32rpx;
	 		 border-radius: 50px;
	 }

  // 提交反馈
  .modal{
	  text-align: center;
	  .success-icon{
		  margin-top: 24rpx;
		  img{
			  width: 132rpx;
			  height: 132rpx;
			  
		  }
	  }
	  .success-text{
		  color: rgba(16,16,16,1);
		  font-size: 36rpx;
		  margin-top: 16rpx;
		  font-weight: bold;
		  
	  }
	  .wait{
		  margin-top: 10rpx;
		  margin-bottom: 48rpx;
	  }
  }

 .bottom{
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	 
	  padding: 20rpx 32rpx;
	 
	  .view{
		   background-color: #fff;
		   border-radius: 12px;
		   background: linear-gradient(180deg, rgba(24,90,198,1) 0%,rgba(22,119,255,1) 100%);
		   margin: 32rpx;
		   padding: 24rpx 0;
		       white-space: pre;
			       display: flex;
			       align-items: flex-end;
			       justify-content: center;
	  }
	  .view1{
		  height: 80rpx;
		  
	  }
	  .view2{
	  		 height: 56rpx;
			
	  }
	 
  }
</style>