keysass_app/pages/index/testcrowdsourc/onlinejl.vue

<template>
	<view class="jianlibox">

		<view class="accounmt">
			<view class="accounmtBox">
				<view class="newTitle paddingL">
					<view class="newTitlename">
						{{resumedata.name}}
					</view>
					<view class="newTitlesex">
						性别：{{resumedata.sex}}
					</view>
				</view>
				<div class="contenBox paddingL">
					<!-- 基本信息 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">基本信息</div>

						</div>
						<div class="contenItemC">
							<div class="contenItemCIt">
								所在城市：{{resumedata.city}}
							</div>
							<div class="contenItemCIt">
								技能方向：{{resumedata.test_skills}}
							</div>
							<div class="contenItemCIt">
								个人优势：{{resumedata.personalAdvantage}}
							</div>
						</div>
					</div>
					<!-- 工作经历 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">工作经历</div>

						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of worklist" :key="key">
								<div class="contenItemCitemT">
									<div class="contenItemCitemL">{{item.name}}</div>
									<div class="contenItemCitemR">{{item.startTime}}-{{item.endTime}}
										<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
									</div>
								</div>
								<div class="contenItemCitemM">
									{{item.title}}
								</div>
								<div class="contenItemCIt">
									工作内容：{{item.intro}}
								</div>
							</div>
						</div>
					</div>
					<!-- 项目经历 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">项目经历</div>

						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of projectlist" :key="key">
								<div class="contenItemCitemT">
									<div class="contenItemCitemL">{{item.name}}</div>
									<div class="contenItemCitemR">{{item.startTime}}-{{item.endTime}}
										<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
									</div>
								</div>
								<div class="contenItemCitemM">
									{{item.title}}
								</div>
								<div class="contenItemCIt">
									应用技术：{{item.applyTech}}
								</div>
								<div class="contenItemCIt">
									工作内容：{{item.intro}}
								</div>
							</div>
						</div>
					</div>
					<!-- 教育经历 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">教育经历</div>

						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of educationlist" :key="key">
								<div class="contenItemCitemT">
									<div class="contenItemCitemL">{{item.name}}</div>
									<div class="contenItemCitemR">{{item.startTime}}-{{item.endTime}}
										<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
									</div>
								</div>
								<div class="contenItemCitemM">
									学历：{{item.education}} 专业：{{item.major}}
								</div>
							</div>
						</div>
					</div>
					<!-- 资格证书 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">资格证书</div>

						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of credentialsList" :key="key">
								<div class="contenItemCitemimgBoxT">
									<div class="contenItemCitemimgBoxTL">
										证书名称：{{item.fileName}}
									</div>

								</div>
								<image class="contenItemCitemimg" @click.stop="priveimg(item.fileUrl)"
									:src="item.fileUrl" alt=""></image>
							</div>

						</div>
					</div>
				</div>




				</div>

			</view>

		</view>

		<u-toast ref="uToast" />
	</view>




</template>

<script>
	export default {
		data() {
			return {
				showida: false,
				userinfo: {},
				projectlist: [], //项目集合
				worklist: [], //工作经历
				educationlist: [], //教育
				resumedata: {},
				credentialsList: [], //证书
			}
		},

		onLoad(options) {
			const data = JSON.parse(decodeURIComponent(options.msg))
			// 经历
			this.projectlist = data.projectCase.filter(it => it.type == 0)
			this.worklist = data.projectCase.filter(it => it.type == 1)
			this.educationlist = data.projectCase.filter(it => it.type == 2)
			// 个人简介
			this.resumedata = data.data
			// 证书
			this.credentialsList = data.credentials
		},
		methods: {
			//预览图片
			priveimg(logourl) {
				// console.log('预览图片')
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topTip {
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		padding: 25rpx 45rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 26rpx;
		color: #4D4D4D;
	}

	.topTip text {
		color: #1578ED;
	}

	.accounmt {
		padding: 25rpx;
		box-sizing: border-box;

		.accounmtBox {
			width: 100%;
			background: #ffffff;
			border-radius: 6rpx;

			.newTitle {
				width: 100%;
				height: 100rpx;
				background: linear-gradient(90deg, #E2EDFD, #FEE4E4);
				border-radius: 6rpx 6rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.newTitlename {
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}

				.newTitlesex {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.contenBox {
				.contenItem {
					border-bottom: 1px solid rgba(153, 153, 153, 0.15);
					padding-bottom: 44rpx;

					.contenItemTIle {
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.contenItemTIleL {
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
						}

						.contenItemTIleR {
							width: 25rpx;
							height: 25rpx;
						}

						.contenItemTIleR2 {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.contenItemC {
						.contenItemCIt {
							font-weight: 500;
							font-size: 24rpx;
							color: #4D4D4D;
							line-height: 46rpx;
						}

						.contenItemCitem {
							.contenItemCitemM {
								font-weight: 500;
								font-size: 24rpx;
								color: #1A1A1A;
								margin: 25rpx 0;
							}

							.contenItemCitemT {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.contenItemCitemL {
									font-weight: bold;
									font-size: 26rpx;
									color: #000000;
								}

								.contenItemCitemR {
									font-weight: 500;
									font-size: 24rpx;
									color: #666666;
								}
							}
						}
					}
				}
			}
		}
	}

	.contenItemCitemimgBoxT {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.contenItemCitemimgBoxTL {
			font-weight: 500;
			font-size: 24rpx;
			color: #4D4D4D;
		}

		.contenItemCitemimgBoxTR {
			font-weight: 500;
			font-size: 22rpx;
			color: #FD4747;
		}
	}

	.contenItemCitemimg {
		width: 300rpx;
		height: 200rpx;
		margin: 20rpx 0;
	}

	.paddingL {
		padding: 0 25rpx;
	}

	.maskDia {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(5, 5, 7, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.maskBox {
			width: 570rpx;
			height: 220rpx;
			background: linear-gradient(0deg, #FFFFFF, #EFF3FE);
			box-shadow: 0rpx 4rpx 21rpx 4rpx rgba(22, 27, 33, 0.1);
			border-radius: 6rpx;
			border: 1px solid #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.maskBoxT {
				color: #1A1A1A;
				font-size: 26rpx;
				font-weight: bold;

			}

			.maskBoxM {
				color: #1A1A1A;
				font-size: 26rpx;
				font-weight: 500;
				margin: 20rpx 0;
			}

			.maskBoxB {
				color: #1578ED;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}
</style>