jp-zeroWorkerStation/pages/tab/mine/mine.vue

<template>
	<view>
		<u-navbar back-text="我的"  back-icon-size="0"  :customBack="customBack" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="top">
			<view class="photo">
				<u-avatar :src="src"></u-avatar>
			</view>
			<!-- <view class="login">
				请登录
			</view> -->
			<!-- 已登录 -->
			<view class="logined">
				<view class="name" >
					<template v-if="userInfo&&userInfo.id">
						你好，{{userInfo.realName?userInfo.realName:'用户'+userInfo.id.slice(0,3)}} 
					</template>
					<template v-else>
						未登录
					</template>
					<view class="img-box" v-if="userInfo.status==1">
						
						<img src="@/assets/img/riFill-shield-user-fill@1x.png" alt="">
					</view>
				</view>
				<view class="tel">
					<template v-if="userInfo&&userInfo.id">
						{{userInfo.phone}} 
					</template>
				</view>
				
			</view>
		</view>
		<!-- 求职信息 -->
		<view class="card card1">
			<view class="title">
				求职信息
				<img class="showImg"  v-if="ck1()" src="@/assets/img/riFill-checkbox-circle-fill@1x.png" >
				<img class="showImg"  v-else src="@/assets/img/riFill-error-warning-fill@1x.png"></img>
			</view>
			 <u-grid :col="3" :border="false">
			 		<u-grid-item   @click="gotoUrl1('pages/packages/mine/myJobInformation/myJobInformation')">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-folder-user-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">求职信息</view>
			 		</u-grid-item>
			 		<u-grid-item  @click="gotoUrl1('pages/packages/mine/myJobInformation/myRegistration?c=0')">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-todo-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">我的报名</view>
			 		</u-grid-item>
			 		<u-grid-item  @click="gotoUrl1('pages/packages/mine/myJobInformation/myRegistration?c=1')">
						<u-badge :count="num1" size="mini" :offset="[28,34]"></u-badge>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-mail-star-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">收到邀请</view>
			 		</u-grid-item>
			 	</u-grid>
		</view>
		<!-- 用工服务 -->
		
		<view class="card ">
			<view class="title">
				用工服务
				<img class="showImg" v-if="ck2()" src="@/assets/img/riFill-checkbox-circle-fill@1x.png" >
				<img class="showImg"  v-else src="@/assets/img/riFill-error-warning-fill@1x.png"></img>
				
			</view>
			 <u-grid :col="4" :border="false">
			 		<u-grid-item  @click="gotoUrl2('pages/packages/mine/employmentService/laborManagement/laborManagement')">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-folder-2-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">用工管理</view>
			 		</u-grid-item>
			 		<u-grid-item @click="gotoUrl2('pages/packages/mine/employmentService/receiveRegistration?c=0')">
			 			<u-badge :count="num2" size="mini" :offset="[28,34]"></u-badge>
						<view class="icon">
			 				<img src="@/assets/img/riLine-inbox-archive-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">收到报名</view>
			 		</u-grid-item>
			 		<u-grid-item  @click="gotoUrl2('pages/packages/mine/employmentService/receiveRegistration?c=1')">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-time-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">邀请记录</view>
			 		</u-grid-item>

					<u-grid-item @click="gotoUrl2('pages/packages/mine/employmentService/shareEmployment')">

						<view class="icon">
							<img src="@/assets/img/riLine-service-line@1x.png" alt="">
						</view>
						<view class="grid-text">共享用工</view>
					</u-grid-item>
			 	</u-grid>
		</view>
		
		<!-- 其他服务 -->
		<view class="card ">
			<view class="title">
				其他服务
			</view>
			 <u-grid :col="3" :border="false">
			 		<u-grid-item @click="toAuthentication">
						
						<img v-if="ck1()||ck2()" src="@/assets/img/riFill-checkbox-circle-fill@1x.png" class="checked">
			 			<img v-else src="@/assets/img/riFill-error-warning-fill@1x.png" class="badge-icon"></img>
			 			
						<view class="icon">
			 				<img src="@/assets/img/riLine-shield-user-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">实名认证</view>
			 		</u-grid-item>
			 		<u-grid-item @click="showPhoneMethod">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-customer-service-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">联系客服</view>
			 		</u-grid-item>
			 		<!-- <u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-logout-box-r-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">退出登录</view>
			 		</u-grid-item> -->
			 	</u-grid>
		</view>
		<!-- 登录弹窗 -->
			<u-popup v-model="show" mode="center" border-radius="24" :closeable="true" @close="close" >
				<view class="u-mode-center-main">
					
				
					<view class="title">
						登录荆开零工驿站
					</view>
					<view >
						<button class="login-btn"  @click="decryptPhoneNumberH5"
						 open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" >
							<u-icon name="weixin-fill" size="46"></u-icon>	<text>微信用户一键登录</text>
						</button>
					
					</view>
					
					<view class="radio" v-if="false">
						<!-- <radio></radio>
							<view class="agreement">
								阅读并同意<text style="color: #2795FD">《用户隐私协议》</text>
						</view> -->
						<u-radio-group v-model="value">
							<u-radio active-color="red">阅读并同意<text style="color: #2795FD">《用户隐私协议》</text></u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
		 
		<u-modal v-model="showPhone" @confirm="confirmPhone" :confirm-text="confirmText" confirm-color="#606266" :show-cancel-button="true" ref="uModal"
			:asyncClose="true" title="客服电话" :content="content" :content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
			
		<tabbar  :current="4"></tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tab.js'
	import * as API_weixin from '@/apis/weixin.js'
	
	import tabbar from "@/components/Tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				src: '',
				show:false,
			    value: 'false',
				userInfo:{},
				showPhone:false,
				confirmText: '拨打电话',	
				content:"",
				num1:0,
				num2:0
			}
		},
		onLoad() {
			this.userInfo=this.carhelp.getPersonInfo()
			this.findByOpenId();
			
		},
		
		methods: {
			
			ck1(){
				var user = this.carhelp.getPersonInfo();
				
				if (user.status != 1) {
					
					return false
				}
				return true
			},
			ck2(){
				var enterpriseInfo=this.carhelp.getPersonInfoPlus().enterpriseInfo;
				
				if (!enterpriseInfo||enterpriseInfo.status!=1) {
					
					
					
					return false
				}
				return true
			},
			gotoUrl1(url){
				if(this.ck1()){
					
				}else{
					uni.showToast({icon: 'none',
						title:"当前操作需要实名认证"
					})
					return
				}
				
				uni.navigateTo({
					url: "/" + url
				})
			},
			gotoUrl2(url){
				if(this.ck2()){
					
				}else{
					uni.showToast({icon: 'none',
						title:"当前操作需要进行企业认证"
					})
					return
				}
				
				uni.navigateTo({
					url: "/" + url
				})
			},
			gotoMyJobInformation(){
				//zkx 需要认证
				uni.navigateTo({
					url:"/pages/packages/mine/myJobInformation/myJobInformation"
				})
			},
			
			confirmPhone(){
				this.showPhone = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			showPhoneMethod(){
				if(this.content==""){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					 API_weixin.findValueByName({
						 name:'客服电话'
					 }).then((res) => {
						 this.content=res.data
						
						 uni.hideLoading();
						 this.showPhone=true;
					 }).catch(error => {
						this.showPhone=false;
						uni.hideLoading();
					 })
				}else{
					 this.showPhone=true;
				}
				
			},
			getNum1(){
				API.myRegistration({
					pageIndex: 1,
					pageSize: 0,
					type: 1
				}).then((res) => {
					
					this.num1=res.data.recordsTotal		  
				}).catch(error => {
					//.log(error)
					
				})
			},
			getNum2(){
				API.myReceivedRegistration({
					pageIndex: 1,
					pageSize: 0,
					status: 1
				}).then((res) => {
					
					this.num2=res.data.recordsTotal		  
				}).catch(error => {
					//.log(error)
					
				})
			},
			findByOpenId(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				 API_weixin.findByOpenId({
					 openId:this.carhelp.getOpenId(),
					 noerror:true
				 }).then((res) => {
					 
					 this.carhelp.setPersonInfo(res.data.regUser );
					 this.carhelp.setToken(res.data.token);
					 this.carhelp.setPersonInfoPlus(res.data);
					 this.userInfo=res.data.regUser;
					 this.src=this.userInfo.photo
					 uni.hideLoading();
					 this.show=false;
					 if(this.ck1()){
						 this.getNum1()
					 }
					 if(this.ck2()){
					 	this.getNum2()
					 }
					 
				 }).catch(error => {
					 //.log("11111")
					 this.userInfo={};
					 uni.hideLoading();
					  this.show=true;
				 	// uni.showToast({icon: 'none',
				 	// 	title: error
				 	// })
				 	//this.getPhone()
				 	
				 })
				
			},
			close(){
				// #ifdef MP-WEIXIN
				
				// #endif
				if(this.userInfo.id){
					
				}else{
					uni.reLaunch({
						url:"/"
					})
				}
			},
			decryptPhoneNumberH5(){
				// #ifdef H5
				this.show=false
					var _this=this
					uni.showModal({
						title: '输入手机号测试',
						editable: true,
						//content: '这是一个模态弹窗',
						success: function(res) {
							
							if (res.confirm) {
								API.createUser({
									phone:res.content,
									openId:_this.carhelp.getOpenId()
								}).then((res2) => {
									
									_this.findByOpenId()
									
								}).catch(error2 => {	 
									uni.showToast({icon: 'none',
										title: error2
									})
								})
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
				// #endif
			},
			decryptPhoneNumber(e){
				 //.log(e.detail.code)
				 
				 uni.showLoading({
				 	title: "加载中",
				 	mask: true,
				 })
				 API_weixin.findUserPhoneNumber(e.detail.code).then((res) => {
					 if(res.data){
						 //.log(res)
						 API.createUser({
						 	phone:res.data,
						 	openId:this.carhelp.getOpenId()
						 }).then((res2) => {
						 	
						 	this.findByOpenId()
						 	
						 }).catch(error2 => {	 
						 	uni.showToast({icon: 'none',
						 		title: error2
						 	})
						 })
					 }else{
						 uni.showToast({
							 icon: 'none',
						 	title: "获取手机号失败，请检查"
						 })
					 }
				 	
					
				 	
				 }).catch(error => {
				 
				 	uni.showToast({icon: 'none',
				 		title: error
				 	})
				 	//this.getPhone()
				 	
				 })
			},
			customBack(){
				
			},
			toAuthentication() {
				uni.navigateTo({
					url: '/pages/packages/mine/otherServices/authentication'

				})
			},
			toShareEmployment() {
				uni.navigateTo({
					url: '/pages/packages/mine/employmentService/shareEmployment'

				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
	
</style>
<style lang="scss" scoped>
	.showImg{
		width: 38rpx ;
		height: 38rpx ;
	}
	.top{
		
		display: flex;
		align-items: center;
		padding: 40rpx 32rpx 88rpx;
		background:url(@/assets/img/mineCover.png),linear-gradient(180deg, rgba(39,149,253,1) 0%,rgba(118,182,255,1) 100%);
	    background-repeat:no-repeat;
	  background-position: right;
	  .photo{
		  /deep/.u-avatar{
			  width: 120rpx !important;
			  height: 120rpx !important;
			  box-shadow: 0px 1px 3px 0px rgba(39, 149, 253, 100);
			  border: 2px solid rgba(255, 255, 255, 1);
		  }
	  }
	  .login{
		  color: rgba(255, 255, 255, 1);
		  font-size: 40rpx;
		  text-align: left;
		  font-family: 'PingFangSC-medium';
		  margin-left: 24rpx;
	  }
	  .logined{
		  color: rgba(255, 255, 255, 1);
		  margin-left: 24rpx;
		    .name{
				
				font-size: 40rpx;
				font-family: 'PingFangSC-medium';
				display: flex;
				align-items: center;
				.img-box{
					
					margin-left: 8rpx;
					overflow: hidden;
					img{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						z-index: 999;
						position: relative;
						
						
						
					}
				}
				
			}
			.tel{
				margin-top: 8rpx;
				font-size: 32rpx;
			}
	  }
	
	}
  .card1{
	  margin-top: -32rpx !important;
	 
  }
  .card{
	  background-color: #fff;
	  border-radius: 12px;
	  margin: 32rpx ;
	  padding: 32rpx;
	  /deep/.u-grid-item{
	  		  width: 25% !important;
	  }
	  .title{
		  color: rgba(16, 16, 16, 1);
		  font-size: 40rpx;
		  margin-bottom: 20rpx;
	  }
	  .grid-text{
		  color: rgba(51, 51, 51, 1);
		  margin-top: 8rpx;
	  }
	 
	  .icon{
		  width: 56rpx;
		  height: 56rpx;
		  img{
			  width: 100%;
			  height: 100%;
		  }
	  }
	  .badge-icon {
	  			position: absolute;
	  			top: 24rpx;
	  			right: 40rpx;
	  			width: 30rpx;
	  			height: 30rpx;
	  		}
	  .checked{
	  	  position: absolute;
	  	  bottom: 72rpx;
	  	  right: 40rpx;
	  	  width: 30rpx;
	  	  height: 30rpx;
	  }
  }

// 弹窗
.u-mode-center-main{
	
		width: 560rpx !important;
		border-radius: 12px;
		padding: 80rpx 48rpx;
		
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			font-family: 'PingFangSC-medium';
		}
		.login-btn{
			background-color: rgba(0, 188, 99, 1);
			color: #fff;
			padding: 8rpx 70rpx;
			margin-top: 56rpx;
			margin-bottom: 16rpx;
			border-radius: 8px;
			display: flex;
			
			font-size: 32rpx;
			text{
				margin-left: 8rpx;
			}
		}
		.radio {
			display: inline-block;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			color: #777777;
			margin-left: 20rpx;
			.uni-radio-input{
				width: 24rpx;
				height: 24rpx;
				
			}
			
			.uni-radio-input-checked:before{
				font-size: 24rpx;
					background-color: rgb(0, 122, 255);
					border-color: rgb(0, 122, 255);
			}
		}
	
}

</style>