uni-zhihuikuangshan/pages/tabbar/my/my.vue

<template>
	<view>
		<!-- 背景图 -->
		<view class="top">
			<image src="./icon/bg.png" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="user" v-if="user">
				<view class="left">
					<view class="img">
						<image v-if="user.avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="avatar" v-if="!user.avatar" :style="{backgroundColor:bgColor[1]}">
							{{user.name.split('').pop()}}
						</view>

					</view>
					<view class="info">
						<view class="name">{{user.name}}</view>
						<view class="section">{{user.section}}</view>
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="go_information()">
						<view class="icon">
							<uni-icons type="person-filled" color="#fff"></uni-icons>
						</view>
						<view class="text">个人中心</view>
					</view>
				</view>
			</view>

			<view class="section_1">
				<view class="title">本月使用信息</view>
				<view class="box">
					<view class="item">
						<view class="num">{{use.h}} <text> h </text> {{use.m}} <text> min</text></view>
						<view class="tip">使用时长</view>
					</view>
					<view class="item">
						<view class="num">{{use.times || '1'}}</view>
						<view class="tip">使用次数</view>
					</view>
					<view class="item">
						<view class="num">{{use.submit_count}}</view>
						<view class="tip">提交单据数</view>
					</view>
				</view>
			</view>

			<view class="section_2">
				<view class="inner_1">
					<view class="title">
						<view class="icon">
							<image src="./icon/time.png" mode=""></image>
						</view>
						<view class="text">最近使用</view>
					</view>
					<view class="box">
						<view class="item" v-if="recently_used.length > 0" v-for="(item,index) in recently_used" :key="index" @click="go_OA(item)">
							<view class="name">{{item.title}}</view>
							<view class="icon">
								<uni-icons type="right" color="#fff" size="16"></uni-icons>
							</view>
						</view>
						<view v-if="recently_used.length == 0" style="line-height: 80rpx;color: #FFFFFF;padding: 0 20rpx;font-size: 28rpx;">暂无使用记录。</view>
					</view>
				</view>
				<view class="inner_2" @click="go_integral()">
					<view class="num">{{total}}</view>
					<view class="text">积分</view>
				</view>
			</view>

			<view class="section_3" v-if="mine_code != 'ningdongyunying'" @click="go_downhole_statistics()">
				<view class="title">
					<view class="icon">
						<uni-icons type="map-pin-ellipse" color="#fff"></uni-icons>
					</view>
					<view class="text">当前位置：{{downhole.position}}</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="num">{{downhole.h}} <text> h</text> {{downhole.m}} <text> min</text></view>
						<view class="tip">本月下井时长</view>
					</view>
					<view class="item">
						<view class="num">{{downhole.times}}</view>
						<view class="tip">本月下井次数</view>
					</view>
				</view>
			</view>

			
		</view>
		
		<view class="content">
			<view class="section_4">
				<view class="list">
					<view class="item" @click="clear_cache()">
						<view class="icon">
							<image src="./icon/icon_1.png" mode="aspectFill"></image>
						</view>
						<view class="text">
							清除缓存
						</view>
					</view>
					<view class="item" @click="tell()">
						<view class="icon">
							<image src="./icon/icon_2.png" mode="aspectFill"></image>
						</view>
						<view class="text">服务电话</view>
					</view>
					<view class="item" @click="go_feedback()">
						<view class="icon">
							<image src="./icon/icon_3.png" mode="aspectFill"></image>
						</view>
						<view class="text">建议反馈</view>
					</view>
					<view class="item" @click="go_update_log()">
						<view class="icon">
							<image src="./icon/icon_4.png" mode="aspectFill"></image>
						</view>
						<view class="text">更新日志</view>
					</view>
					<view class="item" @click="go_m_repassword()">
						<view class="icon">
							<image src="./icon/icon_5.png" mode="aspectFill"></image>
						</view>
						<view class="text">修改密码</view>
					</view>
					<view class="item" @click="login_out()">
						<view class="icon">
							<image src="./icon/icon_6.png" mode="aspectFill"></image>
						</view>
						<view class="text">退出登陆</view>
					</view>
					<view class="item" @click="go_m_download()">
						<view class="icon">
							<image src="./icon/icon_7.png" mode="aspectFill"></image>
						</view>
						<view class="text">下载二维码</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		set_mine
	} from '@/common/set_base_url.js'

	export default {
		data() {
			return {
				// 当前煤矿编码
				mine_code: "",

				// 用户基本信息
				user: {},
				bgColor: [],
				// 总积分
				total: 0,

				// 下井定位卡号
				people_num: "",
				// 矿编码
				mine: "",

				// 下井数据
				downhole: {
					position: "-",
					h: "0",
					m: "0",
					times: "0"
				},

				// 使用时长次数
				use: {
					times: "0",
					h: "0",
					m: "0",
					submit_count:"0"
				},
				
				// 最近使用
				recently_used:[]
			};
		},
		onLoad() {
			// console.log(set_mine(uni.getStorageSync('mine_code')))
			this.mine = set_mine(uni.getStorageSync('mine_code'))
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 判断会否登录、没有则跳转至登录页
			const Authorization = uni.getStorageSync('Authorization')
			if (Authorization == '') {

				uni.showToast({
					icon: "none",
					title: "用户未登录"
				})

				setTimeout(function() {
					uni.redirectTo({
						url: "../../my/login/login"
					})
				}, 1500)
			}

			// 设置头像
			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)
			}

			// 获取用户基本信息
			this.user = uni.getStorageSync('user');
			// 查询使用时长
			this.get_user_selectRecordDuration()

			//查询员工积分
			this.get_staff_integral_query(),

			// 获取个人信息
			this.$api.user_getUinfo({
				staff_num: uni.getStorageSync('user').staff_num
			}).then((res) => {
				this.people_num = res.data.data.people_code

				// 获取当前位置
				this.get_downhole()
			})
			
			// 获取常用列表
			this.get_workflow_recently_used()
		},
		methods: {
			// 个人信息
			go_information() {
				uni.navigateTo({
					url: "../../my/personal_information/personal_information"
				})
			},
			// 查询使用时长
			get_user_selectRecordDuration() {
				this.$api.user_selectRecordDuration({

				}).then((res) => {
					// console.log(res.data.data)

					this.use.h = res.data.data.hours
					this.use.m = res.data.data.minutes
					this.use.times = res.data.data.frequency
				})
			},


			// 退出登录
			login_out() {
				uni.clearStorageSync('Authorization');
				uni.showToast({
					icon: "none",
					title: "退出登录"
				})

				// 跳转登录页
				setTimeout(() => {
					uni.redirectTo({
						url: "../../my/login/login"
					})
				}, 1000)
			},
			// 拨打服务电话
			tell() {
				uni.makePhoneCall({
					phoneNumber: '18152480670'
				});
			},
			// 修改密码
			go_m_repassword() {
				uni.navigateTo({
					url: "../../my/repassword/repassword"
				})
			},
			// 清除缓存
			clear_cache() {
				// uni.showLoading({
				// 	mask:true
				// })
				// setTimeout(()=>{
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"清除完成"
				// 	})
				// },1500)

				let that = this;
				plus.cache.calculate(function(size) {
					let sizeCache = parseInt(size);
					if (sizeCache == 0) {
						that.fileSizeString = "0B";
					} else if (sizeCache < 1024) {
						that.fileSizeString = sizeCache + "B";
					} else if (sizeCache < 1048576) {
						that.fileSizeString = (sizeCache / 1024).toFixed(2) + "K";
					} else if (sizeCache < 1073741824) {
						that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "M";
					} else {
						that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "G";
					}

					console.log(sizeCache)
				});

				let os = plus.os.name;
				if (os == 'Android') {
					let main = plus.android.runtimeMainActivity();
					let sdRoot = main.getCacheDir();
					let files = plus.android.invoke(sdRoot, "listFiles");
					let len = files.length;
					for (let i = 0; i < len; i++) {
						let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
						plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
							if (entry.isDirectory) {
								entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
									uni.showToast({
										title: '缓存清理完成',
										duration: 2000
									});
									that.getStorageSize(); // 重新计算缓存
								}, function(e) {
									console.log(e.message)
								});
							} else {
								entry.remove();
							}
						}, function(e) {
							console.log('文件路径读取失败')
						});
					}
				} else { // ios
					
				}
			},
			// 建议反馈
			go_feedback() {
				uni.navigateTo({
					url: "../../origanization/OA/h5/h5",
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							url: 'http://oa_system.nxjiewei.com:8011/?m=ying&d=we&mnum=ndyybbug&show=we&hideheader=true',
							title: "建议反馈"
						})
					}
				})
			},
			// 更新日志
			go_update_log() {
				uni.navigateTo({
					url: "../../my/version_record/version_record"
				})
			},

			//查询员工积分
			get_staff_integral_query() {
				this.$api.staff_integral_query({
					staff_num: uni.getStorageSync('user').staff_num
				}).then((res) => {
					// console.log(res)

					this.total = res.data.content.data.integral_sum
				})
			},
			// 积分详情
			go_integral() {
				uni.navigateTo({
					url: "../../index/integral/integral?total=" + this.total
				})
			},

			// 获取当前位置
			get_downhole() {
				this.$p_api.peopleTotalNum({
					people_code: this.people_num,
					mine: ""
				}).then((res) => {
					// console.log(res)

					if (res.data.data.position == null) {
						if(this.people_num == ""){
							this.downhole.position = "请点击绑定定位卡"
						}else{
							this.downhole.position = "未在井下"
						}
					} else {
						this.downhole.position = res.data.data.data.position
					}

					this.downhole.h = res.data.data.hours
					this.downhole.m = res.data.data.minutes
					this.downhole.times = res.data.data.total
				})
			},
			go_downhole_statistics() {
				uni.navigateTo({
					url: "../../production/personnel_orientation/downhole_statistics/downhole_statistics?people_num=" +
						this.people_num + "&depart_name=" + this.user.section + "&name=" + this.user.name +
						"&mine=" + this.mine
				})
			},
			
			// 获取常用列表
			get_workflow_recently_used(){
				this.$api.workflow_recently_used({
					staff_num:this.user.staff_num
				}).then((res)=>{
					// console.log(res.data.content.data)
					
					this.recently_used = res.data.content.data.list
					this.use.submit_count = res.data.content.data.submit_count
				})
			},
			
			go_OA(item){
				// console.log(item)
				uni.navigateTo({
					url: "../../origanization/OA/h5/h5",
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							url: item.url,
							title: item.title
						})
					}
				})
			},
			// 下载二维码
			go_m_download(){
				uni.navigateTo({
					url:"../../my/download/download"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		z-index: -1;
		position: fixed;
		top: 1;
		left: 0;

		image {
			width: 750rpx;
			height: 746rpx;
		}
	}

	.content {
		width: 749rpx;

		.user {
			margin-bottom: 40rpx;
			box-sizing: border-box;
			padding-left: 25rpx;
			padding-top: 25rpx;

			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: #DCDCDC;
					border: 1px solid #FFFFFF;
					overflow: hidden;

					text-align: center;
					line-height: 130rpx;
					font-size: 56rpx;
					font-weight: 700;
					color: #FFFFFF;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}

					.avatar {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					margin-left: 20rpx;
					color: #fff;

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

					.section {
						margin-top: 20rpx;
						font-size: 24rpx;
					}
				}
			}

			.right {
				background-color: rgba(255, 255, 255, .3);
				border-radius: 25rpx 0rpx 0rpx 25rpx;
				padding: 5rpx 20rpx 5rpx 20rpx;

				.btn {
					display: flex;
					align-items: center;

					color: #FFFFFF;

					.icon {}

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

		.section_1 {
			width: 749rpx;
			height: 220rpx;
			background-image: url(./icon/section_1.png);
			background-size: cover;
			background-repeat: no-repeat;

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

			.title {
				padding-left: 20rpx;
				height: 60rpx;
				line-height: 60rpx;

				font-size: 28rpx;
				color: #fff;
				border-bottom: 1rpx solid rgba(255,255,255,.5);
			}

			.box {
				display: flex;

				.item {
					width: 236rpx;
					text-align: center;
					height: 130rpx;

					border-right: 1rpx solid rgba(255,255,255,.5);

					color: #FFFFFF;

					display: flex;
					flex-direction: column;
					justify-content: center;

					.num {
						font-size: 44rpx;
						font-weight: 700;

						text {
							font-size: 24rpx;
						}
					}

					.tip {
						font-size: 24rpx;
					}
				}

				.item:last-child {
					border-right: none;
				}
			}
		}

		.section_2 {
			box-sizing: border-box;
			padding: 20rpx;

			display: flex;
			justify-content: space-between;

			.inner_1 {
				width: 510rpx;
				height: 220rpx;
				background-image: url(./icon/section_2_inner_1.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.title {
					display: flex;
					align-items: center;

					height: 70rpx;
					font-size: 28rpx;
					color: #fff;
					padding-left: 20rpx;
					border-bottom: 1rpx solid rgba(255,255,255,.5);

					.icon {
						image {
							width: 28rpx;
							height: 28rpx;
							display: block;
						}
					}

					.text {
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}

				.box {
					width: 510rpx;

					display: flex;
					flex-wrap: wrap;

					.item {
						width: 255rpx;
						height: 70rpx;

						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #FFFFFF;

						box-sizing: border-box;
						padding: 0 10rpx;
						border-bottom: 1rpx solid rgba(255,255,255,.5);
						border-right: 1rpx solid rgba(255,255,255,.5);

						.name {
							width: 200rpx;
							//超过一行省略号
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;

							font-size: 28rpx;
						}

						.icon {}
					}

					.item:nth-child(2n) {
						border-right: none;
					}

					.item:nth-child(3) {
						border-bottom: none;
					}

					.item:nth-child(4) {
						border-bottom: none;
					}
				}
			}

			.inner_2 {
				margin-top: -4rpx;
				margin-right: -10rpx;
				width: 200rpx;
				height: 250rpx;
				background-image: url(./icon/section_2_inner_2.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;

				color: #FFFFFF;
				text-align: center;

				.num {
					height: 140rpx;
					line-height: 140rpx;
					font-size: 44rpx;
					font-weight: 700;
				}

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

		.section_3 {
			margin: -15rpx auto 0;

			width: 710rpx;
			height: 220rpx;
			background-image: url(./icon/section_3.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				display: flex;
				align-items: center;

				height: 60rpx;
				font-size: 24rpx;
				color: #fff;
				padding-left: 20rpx;

				.icon {
					image {
						width: 28rpx;
						height: 28rpx;
						display: block;
					}
				}

				.text {
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}

			.box {
				display: flex;

				.item {
					width: 355rpx;
					text-align: center;
					height: 140rpx;

					color: #FFFFFF;

					display: flex;
					flex-direction: column;
					justify-content: center;

					.num {
						font-size: 44rpx;
						font-weight: 700;

						text {
							font-size: 24rpx;
						}
					}

					.tip {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
			}

		}

		.section_4 {
			margin: 25rpx auto 40rpx;
			width: 710rpx;
			background-color: #FFFFFF;
			box-shadow: 10rpx 10rpx 16rpx 6rpx rgba(0, 0, 0, 0.13);
			border-radius: 20rpx;

			.list {
				overflow: hidden;
				box-sizing: border-box;
				padding: 30rpx 0;

				.item {
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					float: left;

					width: 155rpx;
					text-align: center;

					.icon {
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 80rpx;
							height: 80rpx;
							display: block;
						}
					}

					.text {
						font-size: 28rpx;
						color: #666666;
					}
				}

				.item:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
</style>