recruitment-wechat-uniapp-241012/pages/index/center.vue

<template>
	<view class="page">

		<navbar bgColor="#3796F8"/>

		<view class="head">
			<!-- 未登录状态 -->
			<template v-if="!isLoggedIn">
				<view class="headImage">
					<image src="/static/image/center/headImage.png" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						未登录用户
					</view>
					<view class="tips">
						请先登录以查看个人信息
					</view>
				</view>
				<view class="loginBtn" @click="$utils.toLogin()">
					登录
				</view>
			</template>
			
			<!-- 已登录状态 -->
			<template v-else>
				<view class="headImage">
					<image :src="headImage" mode=""></image>
				</view>
				<view class="info">
					<view class="name"
					@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
						{{username}}
						<!-- 个人实名认证图标 -->
						<image v-if="UserExtensionInfo.personAuthenticationStatus == '1'" 
							:src="configList.config_person_icon" 
							class="auth-icon"
							mode="aspectFit"></image>
						<!-- 企业认证图标 -->
						<image v-if="UserExtensionInfo.companyAuthenticationStatus == '1'" 
							:src="configList.config_person_icon" 
							class="auth-icon"
							mode="aspectFit"></image>
						<view>
							<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
							修改资料
						</view>
					</view>
					<view class="tips">
						手机号：{{phone}}
					</view>
					<view>
						{{ UserExtensionInfo.vipType || '' }}
					</view>

					<!-- 个人实名认证到期提醒 -->
					<view v-if="personAuthDaysLeft" :class="personAuthDaysLeft === 'expired' ? 'auth-expired' : 'auth-warning'">
						<template v-if="personAuthDaysLeft === 'expired'">
							⚠️ 个人实名认证已过期
						</template>
						<template v-else>
							⚠️ 个人实名认证还有{{personAuthDaysLeft}}天到期
						</template>
					</view>
					<!-- 企业认证到期提醒 -->
					<view v-if="companyAuthDaysLeft" :class="companyAuthDaysLeft === 'expired' ? 'auth-expired' : 'auth-warning'">
						<template v-if="companyAuthDaysLeft === 'expired'">
							⚠️ 企业认证已过期
						</template>
						<template v-else>
							⚠️ 企业认证还有{{companyAuthDaysLeft}}天到期
						</template>
					</view>
				</view>
			</template>
			
			<!-- <view class="setting">
				<uv-icon name="setting" size="40rpx"></uv-icon>
			</view> -->
		</view>

		<!-- 酒店 -->
		<view class="user">
			
			<!-- 实名认证 - 仅登录后显示 -->
			<template v-if="isLoggedIn">
				<view class="auth" v-if="UserExtensionInfo.personAuthenticationStatus != '1'"
				@click="$utils.navigateTo('/pages_order/auth/certification')">
					<uv-cell  
					icon="setting-fill" 
					title="完成实名认证，信息优先推荐！" 
					value="去认证"
					isLink></uv-cell>
				</view>
				
				<view class="auth" v-else 
				@click="$utils.navigateTo('/pages_order/auth/certification')">
					<uv-cell 
					icon="setting-fill" 
					title="您已完成实名认证!" 
					value="去查看"
					isLink></uv-cell>
				</view>
			</template>
			
			
			<!-- 轮播图 -->
			<view class="swipe">
				<uv-swiper 
				:list="bannerList" 
				indicator
				height="220rpx"
				keyName="image"></uv-swiper>
			</view>
			
			
			<!-- 数据统计 - 仅登录后显示 -->
			<view class="line" v-if="isLoggedIn">
				<view class="item"
				@click="$utils.navigateTo('/pages_order/mine/InvitationCredit')">
					<view class="">
						{{UserExtensionInfo.integerNum || 0}}
					</view>
					<view class="">
						我的积分
					</view>
				</view>
				
				<!-- <view class="item">
					<view class="">
						30000
					</view>
					<view class="">
						临时积分
					</view>
				</view> -->
				
				<view class="item"
				@click="$utils.navigateTo('/pages_order/mine/collect')">
					<view class=""
					v-if="role">
						{{UserExtensionInfo.resumeCollectionNum || 0 }}
					</view>
					<view class=""
					v-else>
						{{ UserExtensionInfo.jobCollectionNum || 0 }}
					</view>
					<view class="">
						我的收藏
					</view>
				</view>
				
				<view class="item"
				@click="$utils.navigateTo('/pages_order/mine/contactRecord')">
					<view class=""
					v-if="role">
						{{ (UserExtensionInfo.resumecheckNumBoss || 0) +
							(UserExtensionInfo.jobCheckNumBoss  || 0)
						}}
					</view>
					<view class=""
					v-else>
						{{ (UserExtensionInfo.jobcheckNumEmployee || 0) +
							(UserExtensionInfo.resumecheckNumEmployee || 0)
						}}
					</view>
					<view class="">
						联系记录
					</view>
				</view>
			</view>
			
			<!-- 未登录提示 -->
			<view class="line login-tip" v-if="!isLoggedIn">
				<view class="tip-content">
					<text>登录后可查看个人数据</text>
					<button class="login-tip-btn" @click="$utils.toLogin()">立即登录</button>
				</view>
			</view>
			
			<view class="line grid">
				<view class="title">
					我的工作
				</view>
				<uv-grid :col="4" :border="false">
					<uv-grid-item 
					v-if="!role && isLoggedIn"
					@click="toAddResume">
						<image class="image" src="/static/image/center/a1.png" mode=""></image>
						<text class="grid-text">在线简历</text>
					</uv-grid-item>
					
					<uv-grid-item 
					v-if="role && isLoggedIn"
					@click="$utils.navigateTo('/pages_order/mine/releaseWork')">
						<image class="image" src="/static/image/center/a1.png" mode=""></image>
						<text class="grid-text">{{ role ? '我的招工' : '我的找活'}}</text>
					</uv-grid-item>
					
					<uv-grid-item 
					v-if="!isLoggedIn"
					@click="$utils.toLogin()">
						<image class="image" src="/static/image/center/a1.png" mode=""></image>
						<text class="grid-text">在线简历</text>
					</uv-grid-item>
			
					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/seeMy') : $utils.toLogin()">
						<image class="image" src="/static/image/center/a2.png" mode=""></image>
						<text class="grid-text">谁看过我</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			<view class="line grid">
				<view class="title">
					我的服务
				</view>
				<uv-grid :col="4" :border="false">
					<uv-grid-item 
					v-if="role || !isLoggedIn"
					@click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/MemberRecharge') : $utils.toLogin()">
						<image class="image" src="/static/image/center/1.png" mode=""></image>
						<text class="grid-text">会员充值</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/GainPoints') : $utils.toLogin()">
						<image class="image" src="/static/image/center/4.png" mode=""></image>
						<text class="grid-text">获取积分</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/IntegralRecord') : $utils.toLogin()">
						<image class="image" src="/static/image/center/5.png" mode=""></image>
						<text class="grid-text">积分记录</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/auth/certificationEnterprise') : $utils.toLogin()"
					v-if="role || !isLoggedIn">
						<image class="image" src="/static/image/center/6.png" mode=""></image>
						<text class="grid-text">企业认证</text>
					</uv-grid-item>
					
					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/auth/certification') : $utils.toLogin()"
					v-if="!role || !isLoggedIn">
						<image class="image" src="/static/image/center/6.png" mode=""></image>
						<text class="grid-text">实名认证</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/enterpriseInfo') : $utils.toLogin()"
					v-if="role || !isLoggedIn">
						<image class="image" src="/static/image/center/6.png" mode=""></image>
						<text class="grid-text">企业信息</text>
					</uv-grid-item>

					<uv-grid-item @click="$utils.redirectTo('/index/consult')"
					v-if="!role || !isLoggedIn">
						<image class="image" src="/static/image/center/6.png" mode=""></image>
						<text class="grid-text">考证咨询</text>
					</uv-grid-item>
					
					<!-- <uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/redeemCode') : $utils.toLogin()">
						<image class="image" src="/static/image/center/5.png" mode=""></image>
						<text class="grid-text">兑换码</text>
					</uv-grid-item> -->

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/contract/contract') : $utils.toLogin()">
						<image class="image" src="/static/image/center/5.png" mode=""></image>
						<text class="grid-text">电子合同</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/contract/contractManage') : $utils.toLogin()"
					v-if="role || !isLoggedIn">
						<image class="image" src="/static/image/center/5.png" mode=""></image>
						<text class="grid-text">合同模板</text>
					</uv-grid-item>

					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/promotion') : $utils.toLogin()">
						<image class="image" src="/static/image/center/5.png" mode=""></image>
						<text class="grid-text">面对面分享</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			<view class="line grid">
				<view class="title">
					设置与帮助
				</view>
				<uv-grid :col="4" :border="false">
					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/setting') : $utils.toLogin()">
						<image class="image" src="/static/image/center/setting.png" mode=""></image>
						<text class="grid-text">系统设置</text>
					</uv-grid-item>
			
					<uv-grid-item @click="isLoggedIn ? $utils.navigateTo('/pages_order/mine/help') : $utils.toLogin()">
						<image class="image" src="/static/image/center/help.png" mode=""></image>
						<text class="grid-text">帮助与反馈</text>
					</uv-grid-item>
			
					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/about')">
						<image class="image" src="/static/image/center/message.png" mode=""></image>
						<text class="grid-text">关于本程序</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			
		</view>


		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
    import { mapState } from 'vuex'
    export default {
        components: {
            tabber,
        },
        computed: {
            ...mapState(['userInfo', 'role','banner', 'UserExtensionInfo']),
			// 判断是否已登录
			isLoggedIn(){
				return this.userInfo && this.userInfo.id
			},
			headImage(){
				return this.userInfo.headImage || '/static/image/center/headImage.png'
			},
			username(){
				return this.userInfo.nickName || '未设置昵称'
			},
			phone(){
				return this.userInfo.phone || '未绑定手机'
			},
			bannerList(){
                return this.banner.filter(n => n.type == 1)
            },
            // 个人实名认证剩余天数
            personAuthDaysLeft(){
                if(!this.UserExtensionInfo.personAuthenticationValidTime) return null
                const validTime = new Date(this.UserExtensionInfo.personAuthenticationValidTime)
                const now = new Date()
                const diffTime = validTime.getTime() - now.getTime()
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
                // 如果已过期，返回特殊标识
                if(diffDays <= 0) return 'expired'
                // 如果在7天内，返回剩余天数
                return diffDays <= 7 ? diffDays : null
            },
            // 企业认证剩余天数
            companyAuthDaysLeft(){
                if(!this.UserExtensionInfo.companyAuthenticationValidTime) return null
                const validTime = new Date(this.UserExtensionInfo.companyAuthenticationValidTime)
                const now = new Date()
                const diffTime = validTime.getTime() - now.getTime()
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
                // 如果已过期，返回特殊标识
                if(diffDays <= 0) return 'expired'
                // 如果在7天内，返回剩余天数
                return diffDays <= 7 ? diffDays : null
            },
		},
		data() {
			return {
				show: false,
				// bannerList: [
				// 	{
				// 		url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	}, 
				// 	{
				// 		url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				// 	}, 
				// 	{
				// 		url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// 	},
				// ],
			}
		},
		onShow() {
            if(uni.getStorageSync('token')){
                this.$store.commit('getUserExtensionInfo')
                this.$store.commit('getUserInfo')
            }
			this.$store.commit('getBanner')
			//判断如果是登录状态则获取信息
		},
		methods: {
			toAddResume(){
				// 在完成实名认证的情况下执行
				this.$store.commit('isAuthCertification', () => {
					this.$utils.navigateTo('/pages_order/work/addResume')
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
	}

	image {
		width: 100%;
		height: 100%;
	}

	.head {
		display: flex;
		background-color: $uni-color;
		padding: 40rpx 20rpx;
		align-items: center;
		position: relative;
		color: #fff;
		padding-bottom: 70rpx;
		.headImage {
			width: 120rpx;
			height: 120rpx;
			// background-image: url(/static/image/center/3.png);
			background-size: 100% 100%;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 40rpx;
		}

		.info {
			font-size: 28rpx;
			flex: 1;
			.name {
				font-size: 32rpx;
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;
				
				.auth-icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
				
				view{
					display: flex;
					font-size: 20rpx;
					align-items: center;
					padding-left: 20rpx;
				}
			}

			.tips {
				font-size: 26rpx;
				color: #fff;
			}
			
			.auth-warning {
				font-size: 24rpx;
				color: #FFD700;
				background: rgba(255, 215, 0, 0.2);
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
				margin-top: 8rpx;
				border: 1rpx solid rgba(255, 215, 0, 0.5);
			}
			
			.auth-expired {
				font-size: 24rpx;
				color: #FF4444;
				background: rgba(255, 68, 68, 0.2);
				padding: 8rpx 16rpx;
				border-radius: 8rpx;
				margin-top: 8rpx;
				border: 1rpx solid rgba(255, 68, 68, 0.5);
			}
		}

		.loginBtn {
			padding: 15rpx 30rpx;
			background-color: rgba(255, 255, 255, 0.2);
			color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.5);
		}

		// .headBtn {
		// 	margin-left: auto;
		// 	padding: 15rpx 20rpx;
		// 	background-color: $uni-color;
		// 	color: #fff;
		// 	border-radius: 20rpx;
		// 	margin-top: 50rpx;
		// }

		// .setting {
		// 	position: absolute;
		// 	right: 50rpx;
		// 	top: 50rpx;
		// }
	}

	.user {
		position: relative;
		padding-top: 30rpx;
		.auth{
			width: 690rpx;
			position: absolute;
			top: -50rpx;
			left: 30rpx;
			z-index: 99;
			overflow: hidden;
			background-color: #fff;
			border-radius: 20rpx;
			/deep/ text{
				font-size: 26rpx;
			}
		}
		
		.swipe{
			margin: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		
		.line {
			display: flex;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 0;
			margin: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				padding: 10rpx 0;
				view{
					padding: 5rpx 0;
				}
			}
		}

		.login-tip {
			justify-content: center;
			align-items: center;
			padding: 40rpx 20rpx;
			
			.tip-content {
				text-align: center;
				font-size: 28rpx;
				color: #666;
			}
			
			.login-tip-btn {
				margin-top: 20rpx;
				padding: 15rpx 40rpx;
				background-color: $uni-color;
				color: #fff;
				border-radius: 30rpx;
				font-size: 26rpx;
				border: none;
			}
		}

		.grid {
			flex-direction: column;
			font-size: 26rpx;
			padding: 20rpx;

			.title {
				margin-bottom: 30rpx;
				font-size: 28rpx;
			}

			.image {
				width: 45rpx;
				height: 45rpx;
				margin-bottom: 10rpx;
			}

			text {
				text-align: center;
				margin-bottom: 20rpx;
			}
		}
	}
</style>