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">
				求职信息

				<u-icon size="34" v-if="ck1()" name="checkmark-circle-fill" style="color: #54b86c;"></u-icon>
				<u-icon size="34" @click="showIcon(1)" v-else name="error-circle-fill" style="color: #dc4441;"></u-icon>
			</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">
				用工服务


				<u-icon size="34" v-if="ck2()" name="checkmark-circle-fill" style="color: #54b86c;"></u-icon>
				<u-icon size="34" @click="showIcon(2)" v-else name="error-circle-fill" style="color: #dc4441;"></u-icon>


			</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">

					<u-icon v-if="ck1()||ck2()" name="checkmark-circle-fill" style="color: #54b86c;"
						class="checked"></u-icon>
					<u-icon v-else name="error-circle-fill" style="color: #dc4441;" class="badge-icon"></u-icon>

					<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   >
					<button class="btncontact"  open-type="contact">
						<view class="icon">
							<img src="@/assets/img/riLine-customer-service-line@1x.png" alt="">
						</view>
						<view class="grid-text">联系客服</view>
					</button>
				</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,
				isReady:false,
				
			}
		},
		onLoad() {
			this.userInfo = this.carhelp.getPersonInfo()
			this.findByOpenId();
		},
		onShow(){
			if(this.isReady){
				this.findByOpenId();
				
			}
		},
		methods: {
			showIcon(i) {
				if (i == 1) {
					uni.showToast({
						title: "未进行实名认证",
						icon: "none"
					})
				}
				if (i == 2) {
					uni.showToast({
						title: "未进行企业认证",
						icon: "none"
					})
				}
			},
			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: 0
				}).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.isReady=true;
					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.carhelp.logoff();
					this.userInfo = {};
					uni.hideLoading();
					this.show = true;
					this.isReady=true;
					// uni.showToast({icon: 'none',
					// 	title: error
					// })
					//this.getPhone()

				})

			},
			close() {
				// #ifdef MP-WEIXIN
				if (this.userInfo.id) {
				
				} else {
					uni.reLaunch({
						url: "/"
					})
				}
				// #endif
			},
			createUser(phone) {
				console.log("createUser",phone)
				API.createUser({
					phone: phone,
					openId: this.carhelp.getOpenId()
				}).then((res2) => {

					this.findByOpenId()

				}).catch(error2 => {
					uni.showToast({
						icon: 'none',
						title: error2
					})
				})
			},
			decryptPhoneNumberH5() {
				// #ifdef H5
				this.show = false
				var _this = this
				uni.showModal({
					title: '输入手机号测试',
					editable: true,
					//content: '这是一个模态弹窗',
					success: function(res) {

						if (res.confirm) {
							_this.createUser(res.content)

						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
				// #endif
			},
			decryptPhoneNumber(e) {
				console.log(e, this.carhelp.getOpenId())
				var _this=this;
				if (!e.detail.code&&e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {

							API_weixin.decryptData({
								code: loginRes.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}).then((res) => {
								
								console.log(res)
								if (res.data) {
									_this.createUser(res.data)

								} else {
									uni.showToast({
										icon: 'none',
										title: "获取手机号失败，请检查"
									})
								}

							}).catch(error => {

								uni.showToast({
									icon: 'none',
									title: error
								})
								//this.getPhone()

							})
						}
					});


				} else {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findUserPhoneNumber(e.detail.code).then((res) => {
						if (res.data) {
							this.createUser(res.data)

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

	}
	.btncontact:after{
		content: none;
	}
	.btncontact{
		display: flex;
		flex-direction: column;
		background: white;
		padding:0;
		.icon{
			margin: 0 auto;
		}
		.grid-text{
			margin-top: 8rpx;
			font-size: 28rpx;
			line-height: 44rpx;
		}
	}
</style>