uni-zhihuikuangshan/pages/my/personal_information/personal_information_peixun.vue

<template>
	<view>
		<view class="content" v-if="user_info">
			<view class="user">
				<view class="left">
					<view class="line name">{{user_info.name}} <text style="font-size: 34rpx;margin-left: 100rpx;">{{staff_num}}</text> </view>
					<view class="line">
						<view class="item">
							<view class="label">年龄</view>
							<view class="box">{{user_info.age}}岁</view>
						</view>
						<view class="item">
							<view class="label">性别</view>
							<view class="box">{{user_info.sex}}</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="img">
						<image
							:src="user_info.photo_pic"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="inner">
				<view class="line">
					<view class="item">
						<view class="label">学历</view>
						<view class="box">{{user_info.edu_as}}</view>
					</view>
					<view class="item">
						<view class="label">职务/岗位</view>
						<view class="box">{{user_info.job_as}}</view>
					</view>
					<!-- <view class="item">
						<view class="label">职称</view>
						<view class="box">无</view>
					</view> -->
				</view>
				<view class="line">
					<view class="item">
						<view class="label">技能等级</view>
						<view class="box">{{user_info.jnjdclass}}</view>
					</view>
					<view class="item">
						<view class="label">身体状况</view>
						<view class="box">{{user_info.daltonism}}</view>
					</view>
					<view class="item">
						<view class="label">参加工作时间</view>
						<view class="box">{{user_info.attend_work_time}}</view>
					</view>
				</view>
				<view class="line">
					<view class="item">
						<view class="label">进入本企业时间</view>
						<view class="box">{{user_info.access_sh_time}}</view>
					</view>
					<view class="item">
						<view class="label">所在部门/区队</view>
						<view class="box">{{user_info.org_name}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tab_content" v-if="user_info">
			<view class="tab">
				<!-- <view class="item" v-for="(item,index) in 7" :key="index" @click="tab(index)">
					<image v-if="index == 0" src="./icon/icon_1.png" mode=""></image>
					<image v-if="index == 1" src="./icon/icon_2.png" mode=""></image>
					<image v-if="index == 2" src="./icon/icon_3.png" mode=""></image>
					<image v-if="index == 3" src="./icon/icon_4.png" mode=""></image>
					<image v-if="index == 4" src="./icon/icon_5.png" mode=""></image>
					<image v-if="index == 5" src="./icon/icon_6.png" mode=""></image>
					<image v-if="index == 6" src="./icon/icon_7.png" mode=""></image>
				</view> -->
				<view class="item" :class="active == index? 'active' : ''" v-for="(item,index) in 6" :key="index"
					@click="tab(index)">
					<view class="img">
						<image v-if="index == 0" src="./icon/icon_1.png" mode=""></image>
						<image v-if="index == 1" src="./icon/icon_2.png" mode=""></image>
						<image v-if="index == 2" src="./icon/icon_3.png" mode=""></image>
						<image v-if="index == 3" src="./icon/icon_4.png" mode=""></image>
						<image v-if="index == 4" src="./icon/icon_5.png" mode=""></image>
						<image v-if="index == 5" src="./icon/icon_6.png" mode=""></image>
					</view>
					<view class="text" v-if="index == 0">培训情况</view>
					<view class="text" v-if="index == 1">违章记录</view>
					<view class="text" v-if="index == 2">持证记录</view>
					<view class="text" v-if="index == 3">考试记录</view>
					<view class="text" v-if="index == 4">工作简历</view>
					<view class="text" v-if="index == 5">个人荣誉</view>
				</view>
			</view>
			<view class="content">
				<view class="list list_1" v-if="active == 0">
					<view class="item label_box">
						<view class="label text_1">培训时间</view>
						<view class="label text_2">培训项目</view>
						<view class="label text_3">培训地点</view>
						<view class="label text_4">考核情况</view>
					</view>

					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="text_1">{{item.start_time}}</view>
						<view class="text_2">{{item.px_project_name}}</view>
						<view class="text_3">{{item.px_address}}</view>
						<view class="text_4">{{item.score}}</view>
					</view>
				</view>
				<view class="list list_2" v-if="active == 1">
					<view class="item label_box">
						<view class="label text_1">违章日期</view>
						<view class="label text_2">行为描述</view>
						<view class="label text_3">风险等级</view>
						<view class="label text_4">矫正措施</view>
						<view class="label text_5">负责人签字</view>
					</view>
				
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="text_1">{{item.unsafe_time}}</view>
						<view class="text_2">{{item.context}}</view>
						<view class="text_3">{{item.level_name}}</view>
						<view class="text_4">{{item.safe_method}}</view>
						<view class="text_5">{{item.resp_user}}</view>
					</view>
				</view>
				<view class="list list_3" v-if="active == 2">
					<view class="item label_box">
						<view class="label text_1">发证机关</view>
						<view class="label text_2">证件名称</view>
						<view class="label text_3">取证日期</view>
						<view class="label text_4">有效时间至</view>
					</view>
				
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="text_1">{{item.organzation}}</view>
						<view class="text_2">{{item.name}}</view>
						<view class="text_3">{{item.gain_time}}</view>
						<view class="text_4">{{item.end_time}}</view>
					</view>
				</view>
				<view class="list list_4" v-if="active == 3">
					<view class="item label_box">
						<view class="label text_1">考试名称</view>
						<view class="label text_2">考试时间</view>
						<view class="label text_3">考试限时</view>
						<view class="label text_4">考试总分</view>
						<view class="label text_5">考试成绩</view>
					</view>
				
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="text_1">{{item.name}}</view>
						<view class="text_2">{{item.exam_time}}</view>
						<view class="text_3">{{item.time}}</view>
						<view class="text_4">{{item.total_score}}分</view>
						<view class="text_5">{{item.score}}分</view>
					</view>
				</view>
				<view class="list list_5" v-if="active == 4">
					<view class="item label_box">
						<view class="label text_1">个人工作简历</view>
					</view>
				
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="text_1">{{item.begda}} 到 {{item.endda}} {{item.works}}</view>
					</view>
				</view>
				<!-- 荣誉及证书 -->
				<view class="honor" v-if="active == 5">
					<view class="item" v-for="(item,index) in honor" :key="index"
						@click="click_image(index,item.path)">
						<view class="img">
							<image :src="item.path" mode="aspectFill"></image>
						</view>
						<view class="text">{{item.imageName}}</view>
					</view>
					<view class="item">
						<view class="img">
							<view class="add" @click="add_image()">+</view>
						</view>
						<view class="text"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {set_base_url} from '@/common/set_base_url.js'
	export default {
		data() {
			return {
				mine_code:"",
				active: 0,
				staff_num:'',
				user_info:null,
				list:null,
				
				base_url: "",
				honor:[]
			};
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			this.staff_num = uni.getStorageSync('user').staff_num
			this.get_examination_get_detail()
		},
		methods: {
			tab(index) {
				console.log(index+1)
				this.list = []
				this.active = index
				
				this.$api.examination_get_detail({
					staff_num:this.staff_num,
					type: index+1
				}).then((res)=>{
					console.log(res.data.content.data)
					
					this.list = res.data.content.data.list
					
					if(index == 5){
						this.honor = JSON.parse(res.data.content.data.list.honor)
					}
				})
			},
			get_examination_get_detail(){
				this.$api.examination_get_detail({
					staff_num:this.staff_num,
					type:1
				}).then((res)=>{
					console.log(res.data.content.data)
					
					this.user_info = res.data.content.data.user_info
					this.list = res.data.content.data.list
				})
			},
			
			// 新增荣誉
			add_image() {
				const data = {
					base_url: this.base_url,
					honor_list: this.honor
				}
				uni.navigateTo({
					url: "./honor/honor",
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: data
						})
					}
				})
			},
			click_image(index, path) {
				console.log(index, path)
				uni.showActionSheet({
					itemList: ['查看', '删除'],
					success: (res) => {
			
						if (res.tapIndex == 0) {
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
			
							uni.previewImage({
								urls: path.split(','),
							});
			
						} else if (res.tapIndex == 1) {
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							console.log(index)
			
							this.honor.splice(index, 1)
			
							console.log(this.honor)
			
							this.$api.user_updateUserMessage({
								honor: JSON.stringify(this.honor)
							}).then((res) => {
								console.log(res)
			
								uni.showToast({
									icon: "none",
									title: "删除成功"
								})
							})
						}
			
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #009fe8;
		box-sizing: border-box;
		padding: 25rpx;
		.line {
			color: #FFFFFF;

			border-bottom: 2rpx dashed #C4EDFF;
			overflow: hidden;

			box-sizing: border-box;
			padding: 20rpx 0;

			.item {
				float: left;
				margin-right: 5rpx;

				width: 230rpx;

				.label {
					font-size: 28rpx;
					opacity: 0.9;
					margin-bottom: 8rpx;
				}

				.box {
					font-size: 30rpx;
					font-weight: 700;

					white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}
			}

			.item:last-child {
				margin-right: 0;
			}
		}

		.user {
			display: flex;
			justify-content: space-between;

			.left {
				width: 470rpx;

				.name {
					font-size: 60rpx;
					font-weight: 700;
				}
			}

			.right {
				width: 200rpx;

				.img {
					image {
						width: 200rpx;
						height: 250rpx;
					}
				}
			}
		}

	}

	.tab_content {
		padding-top: 20rpx;
		background-color: #009fe8;
		.tab {
			margin: 0 auto;
			width: 700rpx;
			display: flex;
			justify-content: space-around;
			// .item{
			// 	width: 90rpx;
			// 	height: 82rpx;
			// 	background-color: #FFFFFF;

			// 	text-align: center;
			// 	border-radius: 0 20rpx 0 0;
			// 	image{
			// 		margin-top: 20rpx;
			// 		width: 44rpx;
			// 		height: 44rpx;
			// 	}
			// }
			.item {
				width: 116rpx;
				background-color: #FFFFFF;

				text-align: center;
				border-radius: 0 20rpx 0 0;

				.img {
					-webkit-filter: grayscale(100%);
					/* Chrome, Safari, Opera */
					filter: grayscale(100%);

					image {
						margin-top: 20rpx;
						width: 44rpx;
						height: 44rpx;
					}
				}

				.text {
					font-size: 24rpx;
					color: #848484;
				}
			}

			.active {
				.img {
					-webkit-filter: none;
					/* Chrome, Safari, Opera */
					filter: none;
					image {
						margin-top: 10rpx;
						width: 54rpx;
						height: 54rpx;
					}
				}

				.text {
					color: #009fe8;
					font-size: 26rpx;
					font-weight: 700;
				}
			}
		}

		.content {
			padding: 0;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;

			padding-top: 20rpx;

			.list{
				.item {
					display: flex;
					justify-content: space-around;
					align-items: center;
					text-align: center;
					padding: 20rpx 0;
					line-height: 36rpx;
					font-size: 26rpx;

					border-bottom: 2rpx dashed #DCDCDC;

					.text_1 {
						width: 130rpx;
					}

					.text_2 {
						width: 190rpx;
					}

					.text_3 {
						width: 130rpx;
					}

					.text_4 {
						width: 130rpx;
					}
				}

				.label_box {
					background-color: #DCDCDC;
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 60rpx;

					.label {
						color: #999999;
						font-size: 26rpx;
						font-weight: 700;
					}
				}
			}
			
			.list_2 {
				.item {
					.text_1 {
						width: 130rpx;
					}
			
					.text_2 {
						width: 180rpx;
					}
			
					.text_3 {
						width: 100rpx;
					}
			
					.text_4 {
						width: 100rpx;
					}
					
					.text_5 {
						width: 140rpx;
					}
				}
			
				.label_box {
					.label {
						font-size: 24rpx;
					}
				}
			}
			.list_3 {
				.item {
					.text_1 {
						width: 160rpx;
					}
					
					.text_2 {
						width: 180rpx;
					}
					
					.text_3 {
						width: 130rpx;
					}
					
					.text_4 {
						width: 130rpx;
					}
				}
			}
			.list_4 {
				.item {
					.text_1 {
						width: 180rpx;
					}
			
					.text_2 {
						width: 130rpx;
					}
			
					.text_3 {
						width: 100rpx;
					}
			
					.text_4 {
						width: 100rpx;
					}
					
					.text_5 {
						width: 100rpx;
					}
				}
			
				.label_box {
					.label {
						font-size: 24rpx;
					}
				}
			}
			.list_5 {
				.item {
					.text_1 {
						width: 700rpx;
						font-size: 28rpx;
					}
				}
			}
			
			.honor {
				box-sizing: border-box;
				padding: 50rpx;
			
				overflow: hidden;
			
				.item {
					float: left;
					margin-right: 50rpx;
					margin-bottom: 30rpx;
			
					width: 300rpx;
					text-align: center;
			
					.img {
						margin-bottom: 10rpx;
			
						image {
							width: 300rpx;
							height: 180rpx;
						}
			
						.add {
							font-size: 140rpx;
							color: #DCDCDC;
							text-align: center;
							height: 180rpx;
							line-height: 160rpx;
							background-color: #EEEEEE;
						}
					}
			
					.text {
						width: 260rpx;
						font-size: 30rpx;
						color: #8e8e8e;
			
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			
				.item:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
</style>