hbj_app/pages/mine/index.vue

<template>
	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
		<u-navbar bgColor="#ffffff"  titleStyle="font-weight:600" title="系统运维" :autoBack="true">
		
		</u-navbar>
		<view style="width: 100%;height: 446rpx;position: relative;"><image src="../../static/images/login/bg.png" style="width: 100%;height: 100%;"></image></view>
		<view style="width: 372rpx;height: 401rpx;position: absolute;top: 10rpx;right: 0;">
			<image src="../../static/images/login/robot.gif" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<!--顶部个人信息栏-->
<!-- 		<view class="header-section">
			<view class="flex justify-between" style="padding: 30rpx 0;">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<view
						style="width: 100rpx;height: 100rpx;border-radius: 20rpx;overflow: hidden;border: 5rpx solid #64a0fd;">
						<image v-if="avatar" @click="handleToAvatar" :src="avatar" mode="widthFix"
							style="margin-right: 20rpx;"></image>
					</view>

					<view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
					<view v-if="name" @click="handleToInfo" class="user-info" style="margin-left: 50rpx;">
						<view class="u_title">用户名：{{ name }}</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<view class="iconfont icon-right" style="font-size: 40rpx;"></view>
				</view>
			</view>
		</view> -->
		<view class="content-section">
			<u-list class="box">
				<!-- <u-list-item>
					<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/edit.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view>编辑资料</view>
						</view>
					</view>
				</u-list-item> -->
				<!-- <u-list-item>
					<view class="list-cell list-cell-arrow" @click="handleTosigeName">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/sign.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view>我的电子签名</view>
						</view>
					</view>
				</u-list-item> -->
				<!-- <u-list-item>
					<view class="list-cell list-cell-arrow" @click="handleToPwd">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/password.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view>修改密码</view>
						</view>
					</view>
				</u-list-item> -->
				<!-- <u-list-item>
					<view class="list-cell list-cell-arrow" @click="getNewsApplist">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/checkNew.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view style="    display: flex; width: 76%;justify-content: space-between;">
								<span>检查更新</span><span style="font-size: 10px;">{{ves}}</span>
							</view>
						</view>
					</view>
				</u-list-item> -->
				<u-list-item>
					<view class="list-cell list-cell-arrow" @click="gotoAdvice">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/edit.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view style="    display: flex; width: 76%;justify-content: space-between;">
								<span>提升建议</span>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="list-cell list-cell-arrow" @click="gotoQuestion">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/message.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view style="    display: flex; width: 76%;justify-content: space-between;">
								<span>问题咨询</span>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="list-cell list-cell-arrow" @click="gotoPhone">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/tidu.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view style="    display: flex; width: 76%;justify-content: space-between;">
								<span>运维联系</span>
							</view>
						</view>
					</view>
				</u-list-item>
				<!-- <u-list-item>
					<view class="list-cell list-cell-arrow" @click="clearStorage()">
						<view class="menu-item-box">
							<view style="width: 79rpx;height: 80rpx;margin:0 12rpx 0 20rpx;">
								<image src="../../static/mine/clear.png" alt="" srcset=""
									style="width: 100%;height: 100%;">
							</view>
							<view style="    display: flex; width: 76%;justify-content: space-between;">
							<span>清理缓存</span><span style="font-size: 14px;">{{ storageSize}}</span></view>
						</view>
					</view>
				</u-list-item> -->
			</u-list>
			<!-- 退出按钮 -->
			<!-- <button class="btn" @click="handleLogout">退出登录</button> -->
		</view>
		<!-- app更新模块 -->
		<update @showF="ShowON" :show="show" :versionNum="newVesion" :downloadUrl="urL" :versionContent="MiaoShu">
		</update>
		<!-- <Tabbar :value="'我的'"></Tabbar> -->
	</view>
</template>

<script>
	import storage from '@/utils/storage';
	// import Tabbar from '@/components/tabbar/tabbar.vue';
	import BingImg from '@/components/BingImg/BingImg.vue';
	import {
		getNewApp,
		listByIds
	} from '@/api/indexpage/user.js';
	// import { getFzTask, getNoReadMessage } from '@/api/indexpage/mine.js';
	export default {
		name: 'mine',
		components: {
			// Tabbar,
			BingImg
		},
		data() {
			return {
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				// 我的任务
				list: {},
				//传给饼图的数据
				dataArr: [],
				// 我的消息--待读消息
				newsIndex: 0,
				// windowHeight1: uni.getSystemInfoSync().windowHeight,
				urL: null,
				MiaoShu: null,
				show: false,
				newVesion: null,
				ves: '',
				storageSize: '0M'
			};
		},
		onLoad() {
			// 我的任务 -请求数据
			// this.getTaskList();
			//我的消息--获取消息条数
			// this.getNewsList();
			this.getAppVes()
			//隐常原来的底下栏目
			uni.hideTabBar();
		},
		onShow() {

			// this.getNewsList();
			this.getStorageSize()
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar;
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50;
			}
		},
		methods: {
			//获取app的缓存大小
			getStorageSize() {
				let that = this;
				uni.getStorageInfo({
					success: (res) => {
						let size = res.currentSize;
						if (size < 1024) {
							that.storageSize = size + ' B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
						}
					}
				})
			},
			//删除缓存
			clearStorage() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定清除缓存吗?',
					confirmText: '立即清除',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							that.getStorageSize(); //重新获取并显示清除后的缓存大小
							uni.showToast({
								title: '清除成功',
								icon: 'none'
							})
						}
					}
				})
			},
			ShowON(e) {
				this.show = e;
				//通知vuex改变变量
				this.$store.commit('setisFalse');
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index');
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit');
			},
			handleToPwd() {
				this.$tab.navigateTo('/pages/mine/pwd/index');
			},
			gotoAdvice() {
				this.$tab.navigateTo('/pages/mine/advice/advice');
			},
			gotoQuestion() {
				this.$tab.navigateTo('/pages/mine/question/questionForm/questionForm');
			},
			gotoPhone() {
				this.$tab.navigateTo('/pages/mine/phone/phone');
			},
			//我的页面初始化更新
			getAppVes() {
				getNewApp().then(res => {
					//获取本地app版本号与更新版本号对比
					let oldVeions = getApp().globalData.config.appInfo.version;
					if (res.data == null) {
						this.ves = `当前为最新版${oldVeions}`
						return;
					}

					console.log(oldVeions);
					if (res.data.version !== oldVeions) {
						this.ves = `最新版本为${res.data.version},快来点击更新吧！`
					} else {
						this.ves = `已是最新版${oldVeions}`
					}
				});
			},
			//获取版本号，和新版本的下载链接
			getNewsApplist() {
				getNewApp().then(res => {
					if (res.data == null) {
						this.$modal.msg('已是最新版本')
						return;
					}
					this.MiaoShu = res.data.content;
					this.newVesion = res.data.version;
					//获取本地app版本号与更新版本号对比
					let oldVeions = getApp().globalData.config.appInfo.version;
					// console.log(oldVeions);
					if (res.data.version !== oldVeions) {
						this.urL = res.data.url
						this.show = true;
					} else {
						this.$modal.msg('已是最新版本')
					}
				});
			},
			handleCleanTmp() {
				this.$modal.showToast('模块建设中~');
			},
			/**
			 * 电子签名
			 */
			handleTosigeName() {
				this.$tab.navigateTo('/pages/mine/sign/sign');
			},
			handleToCompany() {
				this.$tab.navigateTo('/pages/mine/company/company');
			},
			/**
			 * map
			 */
			handleTosigeMap() {
				this.$tab.navigateTo('/pages/mine/mapGaoDe/mapGaoDe');
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index');
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login');
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index');
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('websocketCloseGuanBi');
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index');
					});
				});
			}
			// handleHelp() {
			// 	this.$tab.navigateTo('/pages/mine/help/index');
			// },
			// handleAbout() {
			// 	this.$tab.navigateTo('/pages/mine/about/index');
			// },
		}
	};
</script>

<style lang="scss">
	page {
		box-sizing: border-box;

		.header-section {
			width: 100%;
			height: 510rpx;
			background-image: url('@/static/mine/bg.png');
			background-size: cover;

			padding: 130rpx 60rpx;
			color: #fff;
			font-size: 34rpx;
			position: relative;
		}

		.content-section {
			position: absolute;
			top: 380rpx;
			width: 100%;
			height: calc(100vh - 430rpx);
			background-color: #fff;
			border-radius: 40rpx;
			overflow: hidden;
			font-size: 30rpx;
			font-family: 'Noto Sans S Chinese';
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;

			.menu-item-box {
				display: flex;
				align-items: center;
			}

			.list-cell {
				padding: 15rpx 20rpx;
			}

			.list-cell::after {
				border: none;
			}

			.btn {
				position: absolute;
				background-color: #ebeced;
				bottom: 56rpx;
				left: 57rpx;
				width: 603rpx;
				height: 90rpx;
				border-radius: 30rpx
			}
		}
	}
</style>