jobslink-user-clent/pages/my/my.vue

<template>
	<view class="body">
		<view class="head">
			<view class="userTitle">
				<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
				<image v-else src="../../static/img/head.svg" mode=""></image>
				<view class="userRight">
					<view class="userTel" v-if="userInfo.user_name">
						{{phoneFilter(userInfo.user_name)}}
					</view>
					<view class="userTel" v-else> </view>
					<view class="userContent">
						<view style="margin-right: 40rpx;">实名认证：{{auth.realNameState?'已认证':'未认证'}}</view>
						<view>银行卡核验：{{auth.bankCardState?'已认证':'未认证'}}</view>
					</view>
				</view>
			</view>
			<view class="centerBar">
				<view class="BarList" @click="go('/pageMy/my/resume/index')">
					<image src="../../static/img/resumeMy.svg" mode=""></image>
					我的简历
				</view>
				<view class="BarList" @click="go('/pageMy/myProject/myProject')">
					<image src="../../static/img/job.svg" mode=""></image>
					我的任务
				</view>
				<view class="BarList" @click="go('/pageMy/my/sala')">
					<image src="../../static/img/salary.svg" mode=""></image>
					我的工资
				</view>
				<view class="BarList" @click="go('/pageMy/contract/index')">
					<image src="../../static/img/contract.png" mode=""></image>
					我的合同
				</view>
			</view>
		</view>
		<view style="height: 74rpx;"></view>
		<view class="federation">
			<view>新业态职工工会联合会</view>
			<view v-if="!federationStatus" class="forMembership" @click="go('/pageMy/federation/forMembership/Notice')">申请入会</view>
			<view v-else class="forMembership" @click="go('/pageMy/federation/vip/information')">已加入</view>
		</view> 

		<view class="btn">
			<view class="btnList" @click="go('/pageMy/setUserBase/index')">
				<image src="../../static/img/ID.svg" mode=""></image>
				认证信息
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/comment/comment')">
				<image src="../../static/img/evaluate.png" mode=""></image>
				我的评价
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/my/changePhone')">
				<image src="../../static/img/phone.svg" mode=""></image>
				变更手机号
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/my/vip/index')">
				<image src="../../static/img/vip.svg" mode=""></image>
				VIP会员申请
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/apply/applications')">
				<image src="../../static/img/apply.png" mode=""></image>
				我的申请
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/my/set')">
				<image src="../../static/img/set.svg" mode=""></image>
				设置
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
			<view class="btnList" @click="go('/pageMy/help/help')">
				<image src="../../static/img/help.svg" mode=""></image>
				帮助与反馈
				<image src="../../static/img/right.svg" mode=""></image>
			</view>
		</view>
		<view class="bottom" @click="makePhoneCall">
			客服电话 18500206848 工作时间 9:00-18:00
		</view>
		<cs-button></cs-button>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		phoneFilter
	} from '@/untils/format.js'
	import {labourUnionInfo} from '@/api/federation.js'
	export default {
		data() {
			return {
				federationStatus: false
			}
		},
		onLoad() {
			if (this.$store.state.user.token && this.authPass) {
				this.$store.dispatch('getVipCode')
			}
		},
		onShow() {
			if (!this.$store.state.user.token) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			} else {
				uni.$emit('newsReadChange')
				this.$store.dispatch('refreshAuthState')
			}
			this.labourUnionInfoInit()
		},
		methods: {
			labourUnionInfoInit(){
				labourUnionInfo().then(e=>{
					this.federationStatus = e.data.data.joined
				})
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			makePhoneCall: function() {
				uni.makePhoneCall({
					phoneNumber: "18500206848"
				})
			},
			phoneFilter
		},
		computed: {
			...mapGetters(['userInfo', 'auth', 'authPass'])
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f6f6f6;
	}
	.federation{
		height: 48rpx;
		border-radius: 10rpx;
		padding: 28rpx 30rpx;
		margin: 30rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #6F5931;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: url(../../static/img/my/mybanner.png) no-repeat;
		background-size: cover;
	}
	.forMembership{
		width: 140rpx;
		height: 50rpx;
		background: linear-gradient(112deg, #EFE0BC 0%, #D29A5A 100%, #DDBA88 100%);
		box-shadow: 0px 0px 2px 1px rgba(231, 174, 85, 0.39);
		border-radius: 25rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #6F5931;
		line-height: 48rpx;
		text-align: center;
	}
	
	.bottom {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		/* position: absolute; */
		/* bottom: 120rpx; */
		/* width: 100%; */
		margin: 120rpx 0;
		text-align: center;
	}

	.btnList image:last-child {
		width: 19rpx;
		height: 32rpx;
		margin-left: auto;
		margin-right: 0;
	}

	.btnList image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 10rpx;
	}

	.btnList {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx 20rpx;
	}

	.btn {
		width: 690rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		background: #fefefe;
	}

	.BarList {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		float: left;
		width: 25%;
		text-align: center;
		padding: 30rpx 0rpx;
	}

	.BarList image {
		width: 52rpx;
		height: 52rpx;
		display: block;
		margin: 0 auto;
	}

	.centerBar {
		width: 690rpx;
		background-color: #fefefe;
		border-radius: 15rpx;
		overflow: hidden;
		position: absolute;
		bottom: -70rpx;
		left: 30rpx;
	}

	.userContent {
		font-family: PingFangSC-Regular;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
	}

	.userTel {
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.userRight {
		float: left;
		height: 50rpx;
		line-height: 50rpx;
	}

	.userTitle image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		float: left;
		border-radius: 200rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.userTitle {
		padding: 0 30rpx;
	}

	.head {
		background-color: #1B66FF;
		width: 100%;
		height: 200rpx;
		padding-top: 200rpx;
		position: relative;
	}
	
	.body {
		background: #f6f6f6;
		height: 100%;
		position: relative;
		overflow: auto;
	}
</style>