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

<template>
	<view>
		<view class="top">
			<view class="avatar" @click="change_avatar(info.avatar)">
				<image v-if="info.avatar" :src="info.avatar" mode="aspectFill"></image>
				<view class="avatar" v-if="!info.avatar && !info" :style="{backgroundColor:bgColor[1]}">
					{{info.name.split('').pop()}}
				</view>
			</view>
			<view class="info">
				<view class="name">{{info.name}}</view>
				<view class="box">
					<view class="item">
						<view class="label">部门</view>
						<view class="text">{{info.section_fullname}}</view>
					</view>
					<view class="item">
						<view class="label">职务</view>
						<view class="text">{{info.duty_num}}</view>
					</view>
					<view class="item">
						<view class="label">员工编号</view>
						<view class="text">{{info.staff_num}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="box">
				<view class="item" @click="change_active(1)">
					<view class="text" :style="{color:active == 1?'#333':'#8e8e8e'}">个人信息</view>
					<view class="line" v-if="active == 1"></view>
				</view>
				<view class="item" @click="change_active(2)">
					<view class="text" :style="{color:active == 2?'#333':'#8e8e8e'}">工作经历</view>
					<view class="line" v-if="active == 2"></view>
				</view>
				<view class="item" @click="change_active(3)">
					<view class="text" :style="{color:active == 3?'#333':'#8e8e8e'}">荣誉及证书</view>
					<view class="line" v-if="active == 3"></view>
				</view>
			</view>


			<!-- 个人信息 -->
			<view class="list_1" v-if="active == 1">
				<view class="item" @click="binding_phone()">
					<view class="label">手机号</view>
					<view class="text">{{info.mobile}}</view>
					<view class="right">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<view class="item" @click="go_qianming()">
					<view class="label">手写签名</view>
					<view class="text">
						<image :src="info.base_img" style="width: 300rpx;height: 120rpx;" mode="aspectFill"></image>
					</view>
					<view class="right">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="label">岗位分类</view>
					<view class="text">{{info.job_classify}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">岗位</view>
					<view class="text">{{info.job}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">职级（职务码）</view>
					<view class="text">{{info.duty_num}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">性别</view>
					<view class="text" v-if="info.sex == 1">男</view>
					<view class="text" v-if="info.sex == 0">女</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">初始学历</view>
					<view class="text">{{info.start_education}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">最高学历</view>
					<view class="text">{{info.best_education}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">员工组</view>
					<view class="text">{{info.group}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">员工子组</view>
					<view class="text">{{info.group_sub}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">籍贯</view>
					<view class="text">{{info.native}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">宗教信仰</view>
					<view class="text">{{info.faith}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">户口性质</view>
					<view class="text">{{info.registered}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">民族</view>
					<view class="text">{{info.nation}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">出生日期</view>
					<view class="text">{{info.birthday}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">身份证号</view>
					<view class="text">{{info.identity_card}}</view>
					<view class="right"></view>
				</view>

				<view class="item">
					<view class="label">参加工作时间</view>
					<view class="text">{{info.working_date}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">进入神华系统时间</view>
					<view class="text">{{info.system_date}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">进入子分公司时间</view>
					<view class="text">{{info.system_sub_date}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">进入本单位时间</view>
					<view class="text">{{info.section_date}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">政治面貌</view>
					<view class="text">{{info.politics}}</view>
					<view class="right"></view>
				</view>
				<view class="item">
					<view class="label">参加党派时间</view>
					<view class="text">{{info.politics_date}}</view>
					<view class="right"></view>
				</view>
			</view>

			<!-- 工作经历 -->
			<view class="list_2" v-if="active == 2">
				<view class="item">
					<view class="text_1">任职时间</view>
					<view class="text_2">工作单位</view>
					<view class="text_3">职务</view>
				</view>
				<view class="item" v-for="(item,index) in info.work_experience" :key="index" @click="del_job(index)">
					<view class="text_1">{{item.range_text}}</view>
					<view class="text_2">{{item.job_unit}}</view>
					<view class="text_3">{{item.job_post}}</view>
				</view>
				<view class="item" @click="add_text()">
					<view style="margin: 0 auto;">
						<uni-icons type="compose" size="24"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 荣誉及证书 -->
			<view class="list_3" v-if="active == 3">
				<view class="item" v-for="(item,index) in info.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>
</template>

<script>
	import {set_base_url} from '@/common/set_base_url.js'
	
	export default {
		data() {
			return {
				mine_code:"",
				base_url: "",
				active: 1,
				info: {},
				// 头像随机色
				bgColor: [],
			};
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			
			// 设置头像
			for (let i = 0; i < 2; i++) {
				// 获取随机色
				let r = parseInt(Math.random() * 256)
				let g = parseInt(Math.random() * 256)
				let b = parseInt(Math.random() * 256)

				// ES6 字符串拼接
				// this.bgColor = `rgba(${r},${g},${b},0.3)`
				let color = "rgba(" + r + "," + g + "," + b + "," + 0.3 + ")"
				// console.log(color)
				this.bgColor.push(color)
			}

		},
		onShow() {
			this.get_info()
		},
		methods: {
			change_active(index) {
				this.active = index
			},
			// 获取个人信息
			get_info() {
				this.$api.user_getUinfo({
					staff_num: uni.getStorageSync('user').staff_num
				}).then((res) => {
					// console.log(res.data.data)
					this.info = res.data.data
					this.info.work_experience = JSON.parse(res.data.data.work_experience)
					this.info.honor = JSON.parse(res.data.data.honor)
				})
			},

			// 新增工作经历
			add_text() {

				const data = {
					work_experience: this.info.work_experience
				}
				uni.navigateTo({
					url: "./job_record/job_record",
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: data
						})
					}
				})
			},
			del_job(index) {
				uni.showActionSheet({
					itemList: ['删除'],
					success: (res) => {
						this.info.work_experience.splice(index, 1)

						this.$api.user_updateUserMessage({
							work_experience: JSON.stringify(this.info.work_experience)
						}).then((res) => {
							console.log(res)

							uni.showToast({
								icon: "none",
								title: "删除成功"
							})
						})

					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			// 新增荣誉
			add_image() {
				const data = {
					base_url: this.base_url,
					
					honor_list: this.info.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.info.honor.splice(index, 1)

							console.log(this.info.honor)

							this.$api.user_updateUserMessage({
								honor: JSON.stringify(this.info.honor)
							}).then((res) => {
								console.log(res)

								uni.showToast({
									icon: "none",
									title: "删除成功"
								})
							})
						}

					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				})
			},

			// 更换头像
			change_avatar() {
				uni.showActionSheet({
					itemList: ['更换头像'],
					success: (res) => {
						console.log("更换头像")
						
						uni.navigateTo({
							url:"./upload_avatar/upload_avatar?base_url=" + this.base_url
						})
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				})
			},
			
			
			// 绑定手机
			binding_phone(){
				uni.navigateTo({
					url:"../setPhone/setPhone"
				})
			},
			go_qianming(){
				uni.navigateTo({
					url:"../signature/signature"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F8F8;
	}

	.top {
		position: relative;
		background-color: #FFFFFF;
		width: 750rpx;
		min-height: 490rpx;

		background-image: url(./icon/top.png);
		background-size: 100% 100%;
		background-position: 0 -110rpx;
		background-repeat: no-repeat;

		.avatar {
			padding-top: 70rpx;
			text-align: center;

			image {
				width: 200rpx;
				height: 200rpx;

				border-radius: 50%;
			}
		}

		.info {
			margin-top: 20rpx;

			.name {
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
			}

			.box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.item {
					width: 250rpx;
					text-align: center;

					.label {
						font-size: 30rpx;
						color: #009FE8;
						margin-bottom: 10rpx;
					}

					.text {
						font-size: 32rpx;
					}
				}
			}
		}

		.redo {
			width: 100rpx;
			height: 100rpx;

			line-height: 100rpx;
			text-align: center;


			position: absolute;
			top: 0;
			right: 0;
		}

		margin-bottom: 20rpx;
	}


	.content {
		background-color: #FFFFFF;

		.box {
			display: flex;
			justify-content: space-around;
			align-items: center;

			border-bottom: 2rpx solid #F5F8F8;

			.item {
				height: 95rpx;
				width: 230rpx;
				text-align: center;

				position: relative;

				.text {
					font-size: 34rpx;
					line-height: 95rpx;
				}

				.line {
					margin: -6rpx auto 0;
					width: 80rpx;
					height: 6rpx;
					background-color: #009FE8;
				}
			}
		}

		.list_1 {
			box-sizing: border-box;
			padding: 0 50rpx;

			.item {
				border-bottom: 2rpx solid #F5F8F8;
				// height: 95rpx;
				box-sizing: border-box;
				padding: 30rpx 0;
				display: flex;
				// justify-content: space-between;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.label {
					width: 300rpx;
					text-align: left;
				}

				.text {
					width: 300rpx;
					text-align: left;
					color: #8e8e8e;

				}

				.right {
					// width: 100rpx;
					text-align: right;
				}
			}

		}

		.list_2 {
			box-sizing: border-box;
			padding: 0 50rpx;

			.item {
				border-bottom: 2rpx solid #F5F8F8;
				// height: 95rpx;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				text-align: center;
				color: #8e8e8e;

				.text_1 {
					width: 190rpx;
				}

				.text_2 {
					width: 240rpx;

				}

				.text_3 {
					width: 160rpx;
				}
			}

			.item:first-child {
				font-size: 32rpx;
				color: #333;
			}

		}

		.list_3 {
			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>