ks-app-employment-service/packageB/pages/search/search.vue

<template>
	<view class="index-wrap">
		<view class="yanshi-wrap">
			<view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
				<view class="go-back"  @click="goback"></view>
				<text>AI智慧就业服务</text>
			</view>
			<view class="section">
				<view class="head-title">测评中心</view>
				<view class="nav-block">
					<view  class="item" @click="navDetail(1)">
						<text class="icon icon-101"></text>
						<text class="title">职业测评</text>
					</view>
					<view  class="item" @click="navDetail(2)">
						<text class="icon icon-102"></text>
						<text class="title">测评报告</text>
					</view>
				</view>
				<view class="head-title">探索中心</view>
				<view class="nav-block">
					<view  class="item" @click="navDetail(3)">
						<text class="icon icon-103"></text>
						<text class="title">职业库</text>
					</view>
<!-- 					<view  class="item" @click="navDetail(4)">
						<text class="icon icon-104"></text>
						<text class="title">个人档案</text>
					</view> -->
				</view>
				<view class="head-title">职业生涯规划</view>
				<view class="nav-block">
					<view  class="item" @click="navDetail(6)">
						<text class="icon icon-105"></text>
						<text class="title">生涯罗盘</text>
					</view>
					<view  class="item" @click="navDetail(5)">
						<text class="icon icon-106"></text>
						<text class="title">职业生涯路径</text>
					</view>
					<view  class="item" @click="navDetail(7)">
						<text class="icon icon-107"></text>
						<text class="title">学业规划</text>
					</view>	
					<view  class="item" @click="navDetail(4)">
						<text class="icon icon-108"></text>
						<text class="title">生涯档案</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/apiB/user.js"
	export default {
		data() {
			return {
				barHeight: wx.getWindowInfo().statusBarHeight,
				user: null,//用户信息
			}
		},
		mounted() {
			let user = uni.getStorageSync("userInfo").user;
			if(user == undefined){
				this.queryWechartToken();
			}
		},
		methods: {
			// 返回
			goback() {
				uni.navigateBack(-1);
			},
			async getUserInfor(){
				const res = await api.getUserBasisInfo();
				if (res.Result == 1) {
					const data = res.Data.data;
					if(!data.SpecialtyName){
						uni.showToast({
							title: "请先完善个人信息",
							duration:2000,
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/packageB/pages/userCenter/fillInInformation"
							})
						}, 2000);
					}
				} else {
					uni.showToast({
						title: res.Message,
						icon: "none"
					})
				}
			},	
			// 演示入
			navDetail(index){
				switch (index){
					case 1:
					case 2: {
						uni.navigateTo({
							url: "/packageB/pages/pagesTest/testList"
						})
						break;
					}
					case 3 : {
						uni.navigateTo({
							url: "/packageB/pages/job/index"
						})
						break;
					}
					case 4 : {
						uni.navigateTo({
							url: "/packageB/pages/userCenter/personDocument"
						})
						break;
					}
					case 5 : {
						uni.navigateTo({
							url: "/packageB/pages/userCenter/professionPath"
						})
						break;
					}
					case 6 : {
						uni.navigateTo({
							url: "/packageB/pages/userCenter/careerCompass"
						})
						break;
					}
					case 7 : {
						uni.navigateTo({
							url: "/packageB/pages/userCenter/smartTarget"
						})
						break;
					}					
				}
			},
			
			// 登录获取openid
			loginMpWeixin() {
				return new Promise((resolve,reject)=>{
					let openid = uni.getStorageSync('userInfo').openid;
					if (!openid) {
						uni.login({
							provider: 'weixin',
							success: (res)=> {
								console.log("res.code======="+res.code);
								api.getOpenId(res.code).then((res2) => {
									// uni.setStorageSync('userInfo', data.Data);
									const userInfo = res2.Data
									this.user = userInfo.user;
									resolve(userInfo)
								})
							},
							fail(err) {}
						})
					}else {
						const userInfo = uni.getStorageSync("userInfo");
						this.user = userInfo.user;
						resolve(userInfo)
					}
				})
			},
			// 获取绑定账户
			async getAccessTokenAndUser() {
				const userInfo = await this.loginMpWeixin();
				return new Promise((resolve,reject)=>{
					api.getAccessTokenAndUser(userInfo.openid).then((res)=>{
						if(res.Result == 1){
							this.user = res.Data.User;
							userInfo.token = res.Data.Token;
							userInfo.user = res.Data.User;
							userInfo.year = res.Data.Year;
							userInfo.expirationDate = res.Data.ExpirationDate;
							userInfo.vipName = res.Data.VipName;
							if(res.Data.User != null){
								resolve(userInfo)
							}
						}
					})
				})
			},
			// 获取token
			async queryWechartToken() {
				uni.showLoading({
					title: "加载中"
				})
				const data = await this.getAccessTokenAndUser();
				api.queryWechartToken(data.user.Id,data.user.SchoolId,data.user.UserType).then((res)=>{
					uni.hideLoading();
					if(res.Result == 1){
						data.userToken = res.Data.token;
						uni.setStorageSync('userInfo',data);
						this.getUserInfor();
					}
				})
			},
		}
	}
</script>
<style  lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	page {
		background: #EEF1F8 url("#{$image-oss-url}/17.png") no-repeat;
		background-size: contain;
	}
</style>
<style lang="scss" scoped>
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	$image-oss-url2: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	.head-bar {
		position: relative;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 30rpx;
		
		.go-back {
		    position: absolute;
		    left: 10rpx;
		    top: 0;
		    width: 60rpx;
		    height: 60rpx;
		    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
		    background-size: 38rpx 38rpx;
		}
	}
	.index-wrap {
		padding-bottom: 122rpx;
		.izd-link {
			position: fixed;
			right: 23rpx;
			bottom: 280rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: none;
			background: #1677ff;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			border-radius: 50%;
		}
		.person-info {
			position: relative;
			display: flex;
			align-items: center;
			width: 664rpx;
			height: 174rpx;
			padding: 0 20rpx;
			margin: 65rpx auto 20rpx;
			border: 3px solid #FFFFFF;
			background: #EDF5FE;
			border-radius: 12px;
			.img-wrap {
				overflow: hidden;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.txt-wrap {
				.top {
					display: flex;
					align-items: flex-end;
					margin-bottom: 10rpx;
					color: #000000;
					margin-right: 20rpx;
					font-size: 36rpx;
				}
				.bottom {
					color: #666;
					font-size: 26rpx;
				}
			}
			.person-btn {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 24rpx;
				color: #fff;
				width: 100rpx;
				height: 48rpx;
				background: #1677ff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				// .icon {
				// 	width: 72rpx;
				// 	height: 72rpx;
				// 	margin-bottom: 10rpx;
				// 	background: url("#{$image-oss-url}/index/change_user.png") no-repeat;
				// 	background-size: 100%;
				// }
			}
		}
		.notice-wrap {
			width: 710rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			// padding: 0 20rpx;
			margin-top: 20rpx;
			.icon {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAMAAADWg4HyAAAA5FBMVEUAAAD/lin/lin/lin/lij/lij/lin/lin/lin/lin/lyn/lyn/lyn/lSf/lCr/ji7/lin/lin/lir/lij/lij/lSj/mCn/lCj/lSr/nin/lin/lin/lij/lyn/lSj/lyn/lif/lir/lyj/lSj/nSv/lSj/lin/lin/lij/lyn/lyn/lyn/lyn/lCj/lin/////4rL/rUr/8tb/x3b/1pP/vWT/uF3/+/P/7Mj/wWn/slH/7c7/2pz/slP/qET/oDr/nDL/893/6MP/6L7/79H/5rf/4Kv/36f/zYH/xHH/tVj/pDwNjetyAAAALnRSTlMAzWH065z68Ne3s0QkEw4H2q+slWdHMjApFuPRoHp1b1xMPjghx8W6qJaPf1FK94unHgAAAbJJREFUOMudlelWwjAQRqcUlX3fBBUF92USWjbZBXff/30cEiA0tHG5P8icw+1p0syXgMZhKGdlwvt2NXKRj4OJUBS3CR8Vg8wimTp7FT8ztYd+HNztqpVLDOAqran3GIxd9qgnaOQcFCE0Yyc3anwfdcbuDLeIbeZs6WZnzpgzRqLb7spvB5K6Zj722ZIR4mREIwoaQk1mvOaQSTi6PRocFFwL99jzdoet4S1GDAcoeQCiJusW0X1iCj7jrOeiRM44ISp6nQ6n5ye4IUPuqaj6zMf1kgCQLSP+nbfaBjcEYCl3iugEu7cAB8qlkQe7WUihwXU5MVot0IKyyZWfsL3qerMrlzpYu0mDKzdoipIagP3btcUAIsod4Fcv2L0ByCqXuX3DXtQBCqJ4+3mPSwAlUQw+OOF43W67o9QwEFVv+yp3Sj+LT1yRAyLvjdqz6l+1E6J1iEQYfUPEcfzKNnmLggrRbjjflzFerJdYlG7aQp3Oi+OuoqUSpM4SI7H0H86of519IqEGmuClETjnSAJ0Spa/mk2BDwUfO3YGART0O0s39bswYgvPUneh8YFmxW+S3+b9+8sbaXzQAAAAAElFTkSuQmCC") no-repeat;
				background-size: 100%;
			}
			.info-wrap {
				font-size: 30rpx;
				color: #ff8a00;
			}
		}
		.section-content {
			padding: 0 20rpx 60rpx;
			background: #EEF1F8;
			min-height: calc(100vh - 350rpx);
		}
		.section{
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 25rpx 20rpx 10rpx;
			margin-top: 20rpx;
			.head-title {
				font-size: 34rpx;
				color: #000000;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.nav-block {
				display: flex;
				flex-wrap: wrap;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 85rpx;
					margin-bottom:0rpx;
					&:nth-child(4){
						margin-right: 0;
					}
					.icon {
						width: 104rpx;
						height: 104rpx;
						background: #f2f2f2;
						&.icon-1 {
							background: url("#{$image-oss-url}/search/item_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-2 {
							background: url("#{$image-oss-url}/search/item_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-4 {
							background: url("#{$image-oss-url}/career/icon_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-5 {
							background: url("#{$image-oss-url}/career/icon_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-6 {
							background: url("#{$image-oss-url}/career/icon_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-7 {
							background: url("#{$image-oss-url}/career/icon_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-8 {
							background: url("#{$image-oss-url}/career/icon_8.png") no-repeat;
							background-size: 100%;
						}
						&.icon-9 {
							background: url("#{$image-oss-url}/career/icon_9.png") no-repeat;
							background-size: 100%;
						}
						&.icon-10 {
							background: url("#{$image-oss-url}/career/icon_10.png") no-repeat;
							background-size: 100%;
						}
						&.icon-11 {
							background: url("#{$image-oss-url}/career/icon_11.png") no-repeat;
							background-size: 100%;
						}
						&.icon-12 {
							background: url("#{$image-oss-url}/career/icon_12.png") no-repeat;
							background-size: 100%;
						}
						&.icon-13 {
							background: url("#{$image-oss-url}/career/icon_13.png") no-repeat;
							background-size: 100%;
						}
						&.icon-14 {
							background: url("#{$image-oss-url}/career/icon_14.png") no-repeat;
							background-size: 100%;
						}
						&.icon-15 {
							background: url("#{$image-oss-url}/career/icon_15.png") no-repeat;
							background-size: 100%;
						}
						&.icon-16 {
							background: url("#{$image-oss-url}/career/icon_16.png") no-repeat;
							background-size: 100%;
						}
						&.icon-17 {
							background: url("#{$image-oss-url}/career/icon_17.png") no-repeat;
							background-size: 100%;
						}
						&.icon-18 {
							background: url("#{$image-oss-url}/career/icon_18.png") no-repeat;
							background-size: 100%;
						}
						&.icon-19 {
							background: url("#{$image-oss-url}/career/icon_19.png") no-repeat;
							background-size: 100%;
						}
						&.icon-20 {
							background: url("#{$image-oss-url}/career/icon_20.png") no-repeat;
							background-size: 100%;
						}
						&.icon-22 {
							background: url("#{$image-oss-url}/career/icon_22.png") no-repeat;
							background-size: 100%;
						}
					}
			
					.title {
						margin-top: 0rpx;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
		.layer-inner {
			.head {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 100%;
				font-size: 34rpx;
				color: #000000;
				.close-btn {
					position: absolute;
					top: 19rpx;
					right: 27rpx;
					width: 52rpx;
					height: 52rpx;
					background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfmChMLCDGRh9c8AAAAmklEQVQ4y7WUMQ7DMAhFnzpmRO3979ABqVN8m/YWdLGcqEkM+lI92Qb+R3wAPgRPjMoxnOANQRCsLGnIwtq98X5pCZvRuucLHuMxY9tYGvffD0tYdsA2ZbsEvWabAp4b09SPDlYp0t4JSAt0YPOhYEH4ja0m+jg+QvzMfKuh/CE9oRBCyQVxhTYSGlYYDWEIpXGXFou0woRl+QUj09L9Yg66GgAAAABJRU5ErkJggg==") center no-repeat;
					background-size: 50%;
				}
			}
			.content {
				max-height: 600rpx;
				overflow: auto;
				padding: 0 40rpx;
				.li {
					position: relative;
					height: 114rpx;
					line-height: 114rpx;
					border-bottom: 2rpx solid #f5f5f5;
					text {
						font-size: 30rpx;
						color: #000000;
						margin-right: 20rpx;
					}
					&.on {
						text {
							color: #1b88ff;
						}
						&::after {
							position: absolute;
							right: 10rpx;
							top: 50%;
							transform: translateY(-50%);
							content: "";
							background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAZCAMAAACM5megAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUbiP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8AAAAx8hE2AAAAGHRSTlMAH0f2c0SVAfc7bv6JI/hS+UhR+1D0jxRK42VSAAAAAWJLR0QZ7G61iAAAAAd0SU1FB+YKFBEcF+FCm4sAAABsSURBVCjPzdHHDoAwDANQs1cLlJn//1KGEIKqrY+QY/QOiQ2QiRgA4iTlRCTjJC9+QsqPSMVJ3ShGdCuiwgToegu5zrWQ+6MX8j39QMaby41MILoLmWC6JzKkgGFHI+voQKxGTLMshACrdu83CdwKBKKZxqUAAAAASUVORK5CYII=") no-repeat;
							background-size: 100%;
							display: block;
							width: 35rpx;
							height: 25rpx;
						}
					}
				}
			}
			.op-block {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 40rpx 0;
				width: 670rpx;
				height: 115rpx;
				.commit-btn {
					width: 361rpx;
					height: 77rpx;
					line-height: 77rpx;
					text-align: center;
					background-color: #1b88ff;
					border-radius: 38rpx;
					font-size: 30rpx;
					color: #ffffff;
				}
			}
		}
		.title-layer {
			position: fixed;
			z-index: 99;
			padding: 30rpx 20rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.8);
			.inner {
				width: 710rpx;
				background: #fff;
			}
		}
	}
	.yanshi-wrap {
		padding: 0 20rpx 10rpx;
		.section{
			background: rgba(255,255,255,0.5);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 4rpx solid #FFFFFF;
			padding-top: 40rpx;
			.head-title {
				font-size: 32rpx;
				color: #000000;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.nav-block {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 40rpx;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 55rpx;
					&:nth-child(4){
						margin-right: 0;
					}
					.icon {
						width: 112rpx;
						height: 112rpx;
						background: #f2f2f2;
						&.icon-1 {
							background: url("#{$image-oss-url}/search/item_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-2 {
							background: url("#{$image-oss-url}/search/item_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-3 {
							background: url("#{$image-oss-url}/search/item_3.png") no-repeat;
							background-size: 100%;
						}
						&.icon-4 {
							background: url("#{$image-oss-url}/search/item_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-5 {
							background: url("#{$image-oss-url}/search/item_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-6 {
							background: url("#{$image-oss-url}/search/item_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-7 {
							background: url("#{$image-oss-url}/search/item_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-8 {
							background: url("#{$image-oss-url}/search/item_8.png") no-repeat;
							background-size: 100%;
						}
						&.icon-9 {
							background: url("#{$image-oss-url}/search/item_9.png") no-repeat;
							background-size: 100%;
						}
						&.icon-10 {
							background: url("#{$image-oss-url}/search/item_10.png") no-repeat;
							background-size: 100%;
						}
						&.icon-11 {
							background: url("#{$image-oss-url}/search/item_11.png") no-repeat;
							background-size: 100%;
						}
						&.icon-12 {
							background: url("#{$image-oss-url}/search/item_12.png") no-repeat;
							background-size: 100%;
						}
						&.icon-13 {
							background: url("#{$image-oss-url}/search/item_13.png") no-repeat;
							background-size: 100%;
						}
						&.icon-14 {
							background: url("#{$image-oss-url}/search/item_14.png") no-repeat;
							background-size: 100%;
						}
						&.icon-15 {
							background: url("#{$image-oss-url}/search/item_20.png") no-repeat;
							background-size: 100%;
						}
						&.icon-101 {
							background: url("#{$image-oss-url2}/kashi/index_icon_1.png") no-repeat;
							background-size: 100%;
						}
						&.icon-102 {
							background: url("#{$image-oss-url2}/kashi/index_icon_2.png") no-repeat;
							background-size: 100%;
						}
						&.icon-103 {
							background: url("#{$image-oss-url2}/kashi/index_icon_3.png") no-repeat;
							background-size: 100%;
						}
						&.icon-104 {
							background: url("#{$image-oss-url2}/kashi/index_icon_4.png") no-repeat;
							background-size: 100%;
						}
						&.icon-105 {
							background: url("#{$image-oss-url2}/kashi/index_icon_5.png") no-repeat;
							background-size: 100%;
						}
						&.icon-106 {
							background: url("#{$image-oss-url2}/kashi/index_icon_6.png") no-repeat;
							background-size: 100%;
						}
						&.icon-107 {
							background: url("#{$image-oss-url2}/kashi/index_icon_7.png") no-repeat;
							background-size: 100%;
						}
						&.icon-108 {
							background: url("#{$image-oss-url2}/kashi/index_icon_8.png") no-repeat;
							background-size: 100%;
						}												
					}
			
					.title {
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>