keysass_app/pages/personal/personalresume/personalresume.vue

<template>
	<view class="jianlibox">
		<view class="topTip">
			友情提示：入驻成为云员工，简历才能被企业主浏览到哦，去<text @click="ruzhu">PC端入驻</text>
		</view>
		<view class="accounmt">
			<view class="accounmtBox">
				<view class="newTitle paddingL">
					<view class="newTitlename">
						{{resumedata.name || ''}}
					</view>
					<view class="newTitlesex" v-if="resumedata.sex">
						性别：{{resumedata.sex}}
					</view>
				</view>
				<div class="contenBox paddingL">
					<!-- 基本信息 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">基本信息</div>
							<img class="contenItemTIleR"
								src="http://image.bjkeyware.com/static/index/renliwb/cloudicon7.png"
								@click="nextpro('advantage')" alt="" />
						</div>
						<div class="contenItemC">
							<div class="contenItemCIt">
								所在城市：{{resumedata.city || ''}}
							</div>
							<div class="contenItemCIt">
								技能方向：{{resumedata.testSkills || ''}}
							</div>
							<div class="contenItemCIt">
								个人优势：{{resumedata.personalAdvantage || ''}}
							</div>
						</div>
					</div>
					<!-- 工作经历 -->
					<div class="contenItem paddingL">
						<div class="contenItemTIle">
							<div class="contenItemTIleL">工作经历</div>
							<img class="contenItemTIleR contenItemTIleR2"
								src="http://image.bjkeyware.com/static/index/renliwb/cloudicon8.png"
								@click="nextpro('work')" alt="" />
						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of worklist" :key="key"
								@click="workdetaols(item)">
								<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>
							<img class="contenItemTIleR contenItemTIleR2"
								src="http://image.bjkeyware.com/static/index/renliwb/cloudicon8.png"
								@click="nextpro('pro')" alt="" />
						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of projectlist" :key="key"
								@click="prodetaols(item)">
								<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>
							<img class="contenItemTIleR contenItemTIleR2"
								src="http://image.bjkeyware.com/static/index/renliwb/cloudicon8.png"
								@click="nextpro('edu')" alt="" />
						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of educationlist" :key="key"
								@click="edudetaols(item)">
								<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>
							<img class="contenItemTIleR contenItemTIleR2"
								src="http://image.bjkeyware.com/static/index/renliwb/cloudicon8.png"
								@click="nextpro('basic')" alt="" />
						</div>
						<div class="contenItemC">
							<div class="contenItemCitem" v-for="(item,key) of credentialsList" :key="key" @click="bookdetaols(item)">
								<div class="contenItemCitemimgBoxT">
									<div class="contenItemCitemimgBoxTL">
										证书名称：{{item.fileName}}
									</div>
									<div class="contenItemCitemimgBoxTR" @click.stop="delBook(item)">删除</div>
								</div>
								<image class="contenItemCitemimg" @click.stop="priveimg(item.fileUrl)" :src="item.fileUrl"
									alt=""></image>
							</div>

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




				</div>

			</view>

		</view>
		<view class="maskDia" v-if="showida">
			<view class="maskBox">
				<view class="maskBoxT">
					入驻云员工，请前往PC端认证
				</view>
				<view class="maskBoxM">
					PC端网址：https://www.keyitest.cn/
				</view>
				<view class="maskBoxB" @click="copyUrl">
					复制网址
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showida: false,
				userinfo: {},
				projectlist: [], //项目集合
				worklist: [], //工作经历
				educationlist: [], //教育
				resumedata: {},
				credentialsList: [], //证书
			}
		},
		onShow() {
			const phoneuserinfo = uni.getStorageSync('wxUserInfo');
			this.http.quickGet(`/personal/resume/${phoneuserinfo.userId}`, true).then(res => {
				// 经历
				this.projectlist = res.data.experience.filter(it => it.type == 0)
				this.worklist = res.data.experience.filter(it => it.type == 1)
				this.educationlist = res.data.experience.filter(it => it.type == 2)
				// 个人简介
				this.resumedata = res.data.personalInfo
				// 证书
				this.credentialsList = res.data.credentials
			})
		},
		onLoad() {

		},
		methods: {
			//添加项目
			nextpro(type) {
				if (type == 'basic') {
					uni.navigateTo({
						url: '/pages/personal/personalresume/basicinform'
					})
				} else if (type == 'advantage') {
					uni.navigateTo({
						url: '/pages/personal/personalresume/advantage'
					})
				} else if (type == 'work') {
					uni.navigateTo({
						url: '/pages/personal/personalresume/workexperience?type=1'
					})
				} else if (type == 'pro') {
					uni.navigateTo({
						url: '/pages/personal/personalresume/projectexperience?type=1'
					})
				} else if (type == 'edu') {
					uni.navigateTo({
						url: '/pages/personal/personalresume/education?type=1'
					})
				}
			},
			//修改项目详情
			prodetaols(item) {
				uni.navigateTo({
					url: `/pages/personal/personalresume/projectexperience?type=2&caseId=${item.caseId}`
				})
			},
			workdetaols(item) {
				uni.navigateTo({
					url: `/pages/personal/personalresume/workexperience?type=2&caseId=${item.caseId}`
				})
			},
			edudetaols(item) {
				uni.navigateTo({
					url: `/pages/personal/personalresume/education?type=2&caseId=${item.caseId}`
				})
			},
			bookdetaols(item) {
				uni.navigateTo({
					url: `/pages/personal/personalresume/basicinform?fileItem=${JSON.stringify(item)}&fileList=${JSON.stringify(this.credentialsList.filter(it => it.fileId != item.fileId))}`
				})
			},
			//预览图片
			priveimg(logourl) {
				// console.log('预览图片')
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			delBook(it) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '此操作将永久删除，是否删除',
					success: function(res) {
						if (res.confirm) {
							_this.http.quickDelete(`/tester/cert/credentials/${it.fileId}`, true).then(res => {
								_this.$refs.uToast.show({
									title: '删除成功',
									type: 'info',
								})
								_this.http.quickGet(`/personal/resume`, true).then(res => {
									// 经历
									_this.projectlist = res.data.experience.filter(it => it
										.type == 0)
									_this.worklist = res.data.experience.filter(it => it.type ==
										1)
									_this.educationlist = res.data.experience.filter(it => it
										.type == 2)
									// 个人简介
									_this.resumedata = res.data.personalInfo
									// 证书
									_this.credentialsList = res.data.credentials
								})
							})
						} else if (res.cancel) {}
					}
				});

			},
			ruzhu() {
				this.showida = true
			},
			copyUrl() {
				uni.setClipboardData({
					data: 'https://www.keyitest.cn/', //	这里是个坑接受字符串类型 value转化为字符串
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '已复制到剪切板',
							icon: 'none'
						})
					}
				})
				this.showida = false
			},
		}
	}
</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>