keysass_app/pages/personal/personal.vue

<template>
	<view>
		<image src="../../static/index/dd.png" class="seticon" @click="goSetUp"></image>
		<view class="topbg">
			<view style="display: flex;justify-content: space-between;">
				<view v-if='phoneuserinfo' style="display: flex;align-items: center">
					<view @click="goUserInfo">
						<img style='width:55px;height:55px;border-radius: 50%' v-if='avatar'
							:src="avatar.indexOf('http')==0?avatar:base+avatar" alt="">
						<img v-else style='width:55px;height:55px;border-radius: 50%'
							src="../../static/crowd/defaultAva.jpg" alt="">

					</view>
					<view style='margin-left:10px;'>
						<p v-if='phoneuserinfo.companyName' style='margin-bottom:5px;font-size:17px;font-weight:600;'>
							{{phoneuserinfo.companyName}}
						</p>
						<p v-else style='margin-bottom:5px;font-size:17px;font-weight:600;'>{{nickName}}</p>
						<view style="display: flex;align-items: center;">
							<!-- <p v-if='phoneuserinfo.userName'
								style='color:rgb(0 0 0/0.7);margin-right:10px;font-size:15px;'>UID:
								{{phoneuserinfo.userName}}
							</p> -->
							<block v-if="!applyInfo.applyId && !applyInfo.companyApplyId">
								<view class="unapply" @click="goApply">
									未认证
								</view>
							</block>
							<block v-else-if="applyInfo.applyId">
								<view class="userapply" @click="goUserApply">
									<image src="../../static/crowd/PAYB.png" mode=""></image>
									<view class="userapplytext">
										个人
									</view>
								</view>
							</block>
							<block v-else-if="applyInfo.companyApplyId">
								<view class="companyapply" @click="goCompanyApply">
									<image src="../../static/crowd/PAYB.png" mode=""></image>
									<view class="companyapplytext">
										企业
									</view>
								</view>
							</block>
							<!-- <u-tag :text="testerStatustext" plan type="info" shape='circle' color='#FEFEFE'
								bg-color='#1A81F9' border-color='transparent' @click="nextcert" /> -->
						</view>
					</view>
				</view>
				<view v-else style="display: flex;">
					<img style='width:55px;height:55px;' src="http://image.keyitest.cn/static/my/mphoto.png" alt="">
					<view style='margin-left:10px;'>
						<p style='margin-bottom:10px;font-size:16px;margin-top: 15px;font-weight: 700;'
							@click="logingj">点击登录</p>
					</view>
				</view>
			</view>
		</view>

		<view class="changyong">
			<view class="cyboxtop">
				<view class="cytitle">
					常用功能
				</view>
				<view class="cycontentgrid">
					<view class="cycontentit" @click="servier('myper')">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							钱包
						</view>
					</view>
					<view class="cycontentit" @click="servier('bcrowd')">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							我的众包
						</view>
					</view>
					<view class="cycontentit" @click="servier('myreview')">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							我的评价
						</view>
					</view>
					<view class="cycontentit" @click="servier('message')">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							消息中心
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="changyong changyong1">
			<view class="cyboxtop">
				<view class="cytitle">
					基本功能
				</view>
				<view class="cycontentgrid">
					<view class="cycontentit" @click="orders">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							我的订单
						</view>
					</view>
					<view class="cycontentit" @click="servier('peixunban')" v-if="signuplistLength != 0">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							报名管理
						</view>
					</view>
					<view v-if="applyInfo.companyApplyId" class="cycontentit cycontentitcompany"
						@click="servier('companynotes')">
						<view class="cycontentitcompanyws" v-if="applyInfo.companyDesc && applyInfo.companyDesc == '无'">
							待完善
						</view>
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							企业简介
						</view>
					</view>
					<view v-else class="cycontentit" @click="servier('notes')">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							个人简历
						</view>
					</view>
					<view class="cycontentit" @click="servier('usepeople')" v-if="useListLength != 0">
						<image src="../../static/index/zc.png" class="cycontentitimg" mode=""></image>
						<view class="cycontentittext">
							用人记录
						</view>
					</view>
				</view>
			</view>

		</view>




		<view style="height:15px"> </view>
		<u-toast ref="uToast" />
		<u-modal title='温馨提示' v-model="tokenshow" content="您还没有登录" confirm-text='现在就去' cancel-text='稍等一下'
			show-cancel-button='true' cancel-color='#1578ED' confirm-color='#1578ED' @confirm="lkconfirm"
			@cancel='tokenshow=false'></u-modal>
	</view>
</template>

<script>
	import comstemutil from '../../utils/comstemutil'
	export default {
		data() {
			return {

				wxUserInfo: null,
				grantType: 'phone',
				canIUseGetUserProfile: false,
				phoneuserinfo: null,
				tokenshow: false,
				testerStatustext: '',
				avatar: '',
				nickName: '',
				base: this.http.baseUrl,
				applyInfo: {}, //用户认证信息
				signuplistLength: 0, //培训班
				useListLength: 0, //用人需求
			}
		},
		onShow() {
			let Token = uni.getStorageSync('accessToken');
			if (Token) {
				this.phoneuserinfo = uni.getStorageSync('wxUserInfo');
				this.avatar = uni.getStorageSync('avatar');
				this.nickName = uni.getStorageSync('nickName');
				this.http.quickGet(`/tester/cert/apply/${this.phoneuserinfo.userId}`, true).then(res => {
					console.log('实名认证信息---', res)
					if (res.data.code == 200) {
						this.applyInfo = res.data.data
						
						if (res.data.data.companyStatus == 1 && this.phoneuserinfo.companyStatus != 2) {
							this.phoneuserinfo.companyStatus = 2
							uni.setStorageSync('wxUserInfo', this.phoneuserinfo)
						}
					} else {
						this.testerStatustext = '未认证'
					}
				})
				this.getNum()

			} else {
				this.phoneuserinfo = null
				this.signuplistLength = 0
				this.useListLength = 0
			}
		},
		onLoad() {},
		methods: {
			// 培训班
			async getNum() {
				this.http.quickGet(`/train/myTrainingList`, true).then(res => {
					this.signuplistLength = res.data.rows.length
				})

				const id = uni.getStorageSync('wxUserInfo').userId
				const {
					data
				} = await this.http.quickGet(`/labor/my/demand/${id}`, true)
				this.useListLength = data.rows.length
			},
			// 去认证类型页面
			goApply() {
				uni.navigateTo({
					url: '/pages/personal/setup/applyType'
				})
			},
			goUserApply() {
				uni.navigateTo({
					url: '/pages/personal/setup/certification'
				})
			},
			goCompanyApply() {
				uni.navigateTo({
					url: '/pages/personal/setup/companyApply'
				})
			},

			// 设置页面
			goSetUp() {
				uni.navigateTo({
					url: '/pages/personal/setup/index'
				})
			},
			// 用户信息
			goUserInfo() {
				uni.navigateTo({
					url: '/pages/personal/setup/Information'
				})
			},
			nextcert() {
				if (this.testerStatustext == '未认证') {
					uni.navigateTo({
						url: '/pages/personal/setup/certification'
					})
				}
			},
			lkconfirm() {
				uni.navigateTo({
					url: '/pages/personal/login'
				})
			},
			logingj() {

				uni.navigateTo({
					url: '/pages/personal/login'
				})
			},
			details(type, id) {
				if (type == 'tool') {
					uni.navigateTo({
						url: `../index/tooldetails?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: './crowdsourcingdetails'
					})
				}
			},
			//工具加入购物车
			addcart(id) {
				let accessToken = uni.getStorageSync('accessToken');
				if (!accessToken) {
					this.tokenshow = true
				} else {
					// 
					this.http.quickGet(`/my/addShoppingCart/${id}/1`, true).then(response => {
						if (response.data.code == 200) {
							console.log('111')
							this.$refs.uToast.show({
								title: '添加购物车成功',
								type: 'success',
								duration: 1000,
								isTab: true,
								url: '/pages/shoppingtrolley/shoppingtrolley'
							})
						}
					})
				}

			},
			orders() {
				let accessToken = uni.getStorageSync('accessToken');
				if (!accessToken) {
					this.tokenshow = true
				} else {

					uni.navigateTo({
						url: './ordernumber/ordernumber?current=0'
					})
				}
			},
			changeOrderUrl(url) {
				let accessToken = uni.getStorageSync('accessToken');
				if (!accessToken) {
					this.tokenshow = true
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			// 我的服务跳转页面
			servier(type) {
				if (this.phoneuserinfo) {
					if (type == 'message') {
						uni.navigateTo({
							url: '/pages/message/message'
						})
					} else if (type == 'signup') {
						uni.navigateTo({
							url: '/pages/personal/mysignup/notice'
						})
					} else if (type == 'bcrowd') {
						uni.navigateTo({
							url: '/pages/personal/mycrowdtest/mycrowdtest'
						})
					} else if (type == 'authentication') {
						uni.navigateTo({
							url: '/pages/personal/setup/certification'
						})
					} else if (type == 'companynotes') {
						uni.navigateTo({
							url: '/pages/personal/setup/companyMsg'
						})
					} else if (type == 'notes') {
						uni.navigateTo({
							url: '/pages/personal/personalresume/personalresume'
						})
					} else if (type == 'myper') {
						uni.navigateTo({
							url: '/pages/personal/mytestkit/mytestkit'
						})
					} else if (type == 'setmy') {
						uni.navigateTo({
							url: '/pages/personal/setup/index'
						})
					} else if (type == 'pcweb') {
						uni.navigateTo({
							url: '/pages/personal/setup/pcweb'
						})
					} else if (type == 'peixunban') {
						uni.navigateTo({
							url: '/pages/personal/setup/peixunban'
						})
					} else if (type == 'usepeople') {
						uni.navigateTo({
							url: '/pages/personal/setup/usepeople'
						})
					} else if (type == 'myreview') {
						uni.navigateTo({
							url: '/pages/personal/setup/myreview'
						})
					}

				} else {
					this.tokenshow = true
				}
			}
		}
	}
</script>

<style lang="scss">
	// 没有认证
	.unapply {
		width: 86rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: linear-gradient(90deg, #99A4B3, #77818D);
		border-radius: 16rpx;
		text-align: center;
		font-weight: 500;
		font-size: 22rpx;
		color: #FEFEFE;
	}

	.userapply {
		display: flex;
		align-items: center;

		image {
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}

		.userapplytext {
			width: 86rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #5EA6FD, #1A81F9);
			border-radius: 16rpx;
			line-height: 32rpx;
			text-align: center;
			font-weight: 500;
			font-size: 22rpx;
			color: #FEFEFE;
		}
	}



	.companyapply {

		display: flex;
		align-items: center;

		image {
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}

		.companyapplytext {
			width: 86rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #F9BD55, #F49C45);
			border-radius: 16rpx;
			line-height: 32rpx;
			text-align: center;
			font-weight: 500;
			font-size: 22rpx;
			color: #FEFEFE;
		}
	}

	.seticon {
		position: fixed;
		top: 93rpx;
		right: 40rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.changyong {
		width: 700rpx;
		height: 230rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(30, 66, 111, 0.1);
		border-radius: 10rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin: -120rpx auto 0 auto;

		.cyboxtop {
			display: flex;
			flex-direction: column;
		}

		.cytitle {
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			padding: 30rpx 0 10rpx 0;
		}


		.cycontentgrid {
			padding: 25rpx 0;
			box-sizing: border-box;
			flex: 1;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;

			.cycontentitcompany {
				position: relative;

				.cycontentitcompanyws {
					position: absolute;
					right: -20rpx;
					top: -20rpx;
					width: 80rpx;
					height: 30rpx;
					border-radius: 15rpx;
					border: 1px solid #F49D46;
					font-weight: 500;
					font-size: 20rpx;
					color: #F49F46;
					line-height: 30rpx;
					text-align: center;
				}
			}

			.cycontentit {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.cycontentitimg {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 10rpx;
				}

				.cycontentittext {
					font-weight: 500;
					font-size: 28rpx;
					color: #4D4D4D;
				}
			}
		}
	}


	.changyong1 {
		margin: 40rpx auto 0 auto;
	}

	.topbg {
		width: 100vw;
		height: 45vw;
		background-size: 100% 45vw;
		background-image: url('http://image.keyitest.cn/static/my/mpersonbanner.png');
		background-repeat: no-repeat;
		padding: 30px 0vw 20px 5vw;
	}

	.peoinfo {
		height: 38px;
		width: 110px;
		line-height: 38px;
		background: rgba(255, 241, 228, 0.25);
		border-radius: 30px 0px 0px 30px;
		font-size: 16px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.personinfo {
		height: 38px;
		width: 110px;
		line-height: 38px;
		font-size: 15px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	.memeber {
		width: 90vw;
		height: 16vw;
		margin-top: 20px;
		background-size: 100% 16vw;
		background-image: url('http://image.keyitest.cn/member.png');
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #FEDD92;
	}

	.handle {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 29px 0px rgba(187, 86, 25, 0.17);
		border-radius: 5px;
		padding: 5px 0 0 0;
	}

	.handle img {
		width: 20px;
		height: 20px;
	}

	.associationddd {
		width: 65px;
		text-align: center;
		margin: 5px 0;
		color: #595959;
	}

	.recomimg {
		width: 50vw;
		height: 4vw;
		display: flex;
		margin: 20px auto;
	}

	.recommend {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.currekei {
		width: 48%;
		/* height: 360rpx; */
		background: #FFFFFF;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 20rpx
	}

	.leop {
		font-size: 30rpx;
		/* height:40px ; */
		font-weight: bold;
		color: #1A1A1A;
		/* margin: 13rpx 0; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabone {
		/* width: 98rpx; */
		/* height: 33rpx; */
		border: 1px solid #2B80FC;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #2387EE;
		text-align: center;
		/* line-height: 33rpx; */
		padding: 3px 5px;
	}

	.currekei :nth-child(4) {
		color: #FD461A;
		font-weight: 800;
		font-size: 34rpx;
	}

	.imgone {
		width: 119rpx;
		margin: 10px auto;
	}

	.imgone img {
		width: 119rpx;
		height: 123rpx;
	}

	.imgtwo {
		width: 32rpx;
		height: 32rpx;
	}

	.perfect {
		width: 80%;
		height: 50px;
		margin: 25px auto;
		line-height: 50px;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		/* box-shadow: -4px 7px 18px 0px rgba(248, 164, 54, 0.33); */
		border-radius: 44px;
		font-size: 18px;
		color: #FFFFFF;
	}

	/* .u-drawer__scroll-view{
		height:0;
	} */
	.perfectsty {
		text-align: center;
		border-radius: 22px;

	}

	.popupu {
		overflow-y: scroll;
	}

	.topbg .u-tag {
		border-color: none;
	}

	.advance {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.medaget {
		border-bottom: 1px solid #99999926;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 14px;
		width: 93%;
	}

	.advance img {
		width: 15px;
		height: 15px;
		margin-top: 3px;
	}
</style>