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.slice(0,3)}}****{{userInfo.phone.slice(-4)}} 
					</template>
				</view>
				
			</view>
		</view>
		<!-- 求职信息 -->
		<view class="card card1">
			<view class="title">
				求职信息
			</view>
			 <u-grid :col="3" :border="false">
			 		<u-grid-item  @click="gotoMyJobInformation">
			 			<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="gotoUrl('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="gotoUrl('pages/packages/mine/myJobInformation/myRegistration?c=1')">
						<u-badge count="1" 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">
				用工服务
			</view>
			 <u-grid :col="4" :border="false">
			 		<u-grid-item  @click="gotoUrl('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="gotoUrl('pages/packages/mine/employmentService/receiveRegistration?c=0')">
			 			<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="gotoUrl('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="toShareEmployment">

						<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="userInfo.status==1||(userInfo.enterpriseInfo&&userInfo.enterpriseInfo.status==1)" 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" :closeable="true" @close="close" >
				<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>
			</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:""
			}
		},
		onLoad() {
			
			this.findByOpenId();
			
		},
		methods: {
			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;
				}
				
			},
			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;
				 }).catch(error => {
					 console.log("11111")
					 this.userInfo={};
					 uni.hideLoading();
					  this.show=true;
				 	// uni.showToast({
				 	// 	title: error
				 	// })
				 	//this.getPhone()
				 	
				 })
				
			},
			close(){
				// #ifdef MP-WEIXIN
				if(this.userInfo.id){
					
				}else{
					uni.reLaunch({
						url:"/"
					})
				}
				// #endif
			},
			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({
										title: error2
									})
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				// #endif
			},
			decryptPhoneNumber(e){
				 console.log(e.detail.code)
				 
				 uni.showLoading({
				 	title: "加载中",
				 	mask: true,
				 })
				 API_weixin.findUserPhoneNumber(e.detail.code).then((res) => {
				 	console.log(res)
					API.createUser({
						phone:res.data,
						openId:this.carhelp.getOpenId()
					}).then((res2) => {
						
						this.findByOpenId()
						
					}).catch(error2 => {	 
						uni.showToast({
							title: error2
						})
					})
					
				 	
				 }).catch(error => {
				 
				 	uni.showToast({
				 		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>

	.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;
	  }
  }

// 弹窗
/deep/.u-mode-center-box{
	width: 560rpx !important;
	border-radius: 12px;
	padding: 80rpx 48rpx;
	display: flex;
	.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>