SmartStorage/pages/index/index.vue

<template>
	<view>
		<view class="upper-user">
			<view class="user-lef">
				<image src="/static/bg1.jpg" mode=""></image>
			</view>
			<view class="user-rig">
				<view>你好！{{ username }}</view>
				<view>欢迎使用智慧仓储（装备共享平台）</view>
			</view>
		</view>
		<view class="sliders">
			<view>
				<h2>{{ todayDatas.dayLeaseNum }}</h2>
				<span>当日领料</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayBackNum }}</h2>
				<span>当日退料</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayInputNum }}</h2>
				<span>当日入库</span>
			</view>
			<view>
				<h2>{{ todayDatas.dayOutNum }}</h2>
				<span>当日出库</span>
			</view>
		</view>
		<view class="sections">
			<view 
				v-for="(part, index) in isUsingList"
				:key="index"
				@click="jumpUrl(part.iconMark)"
			>
				<image :src="`/static/${part.iconMark}.png`" mode=""></image>
				<span>{{ part.iconName }}</span>
			</view>
			<!-- <view @click="jumpUrl('fetchMaterial')">
				<image src="/static/领料申请.png" mode=""></image>
				<span>领料申请</span>
			</view>
			<view @click="jumpUrl('exitMaterial')">
				<image src="/static/退料申请.png" mode=""></image>
				<span>退料申请</span>
			</view> -->
		</view>
		<h4 style="width: 90%; margin: 3vh auto;">待办事项</h4>
		<view class="wait-do">
			<view class="llsp">
				<h4>{{ waitList.leaseNum }}</h4>
				<h5>领料待审批</h5>
			</view>
			<view class="tlsp">
				<h4>{{ waitList.backNum }}</h4>
				<h5>退料待审批</h5>
			</view>
			<view class="bfsh">
				<h4>{{ waitList.scrapNum }}</h4>
				<h5>报废待审核</h5>
			</view>
			<view class="sysh">
				<h4>{{ waitList.trialNum }}</h4>
				<h5>试验检验待审核</h5>
			</view>
		</view>
		<h4 style="width: 90%; margin: 3vh auto; display: flex; justify-content: space-between; align-items: center;">
			<span>通知公告</span>
			<text @click="seeMore" style="color: #5297FF; font-weight: normal; font-size: 12px;">查看更多>></text>
		</h4>
		<view 
			class="single-notice"
			v-for="(notice, index) in noticeList"
			:key="index"
			@click="noticeDetail(notice.noticeId)"
		>
			<view class="notice-lef">
				<image src="/static/notice.png" mode=""></image>
			</view>
			<view class="notice-rig">
				<h4>{{ notice.noticeTitle }}</h4>
				<h5>{{ notice.createTime }}</h5>
			</view>
		</view>
		<u-loading-page :loading="showLoading" color="#000" :loading-text="`下载中,请稍后...${percent}%`"></u-loading-page>
	</view>
</template>

<script>
import { authPath, basePath, publicPath, systemPath } from '../../public';
	export default {
		data() {
			return {
				showLoading: false,
				username: uni.getStorageSync('userInfo').username,
				noticeList: [],
				todayDatas: {
					dayLeaseNum: '',
					dayBackNum: '',
					dayInputNum: '',
					dayOutNum: ''
				},
				waitList: {
					lldsp: '',
					tldsp: '',
					bfdsh: '',
					sydsh: ''
				},
				isUsingList: [],
				percent: ''
			}
		},
		methods: {
			seeMore () {
				uni.navigateTo({
					url: '/pages/moreNotice/moreNotice'
				})
			},
			noticeDetail (id) {
				console.log(id);
				uni.navigateTo({
					url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`
				})
			},
			jumpUrl (path) {
				uni.navigateTo({
					url: `/pages/${path}/${path}`
				})
			},
			toast () {
				uni.showToast({
					icon: 'none',
					title: '敬请期待！'
				})
			}
		},
		onReady() {
			
		},
		onLoad() {
			let that = this
			let nowVer = ''
			let serveVer = ''
			let apkPath = ''
			// 获取app版本号
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				nowVer = info.version.replace(/\./g, '')
			})
			// 获取服务端app版本号
			this.$api.update.fetchAppVer().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					serveVer = res.data.data[0].versionName.replace(/\./g, '')
					apkPath = res.data.data[0].apkPath
					// 比较版本大小
					setTimeout(() => {
						console.log(nowVer, serveVer, apkPath);
						if (nowVer < serveVer) {
							uni.showModal({
								title: '版本升级',
								content: '当前版本非最新版本，请前往升级！',
								showCancel: false,
								confirmText: '升级',
								success: (res) => {
									if (res.confirm) {
										that.showLoading = true
										uni.hideTabBar()
										let downloadApk = uni.downloadFile({
											url: apkPath,
											success: (download) => {
												console.log(download);
												if (download.statusCode == 200) {
													plus.runtime.install(download.tempFilePath, {
														force: true
													}, (install) => {
														that.showLoading = false
														uni.showTabBar()
														console.log(install);
													})
												} else {
													uni.showTabBar()
													that.showLoading = false
													uni.showToast({
														icon: 'none',
														title: '下载异常，请稍后再试！'
													})
												}
											}
										})
										downloadApk.onProgressUpdate(res => {
											that.percent = res.progress
										})
									}
								}
							})
						}
					}, 500)
				}
			}).catch(err => {
				console.log(err);
			})
		},
		onShow() {
			console.log(uni.getStorageSync('token'));
			console.log(uni.getStorageSync('userInfo'));
			let that = this
			that.noticeList = []
			// 获取公告内容
			that.$api.index.noticeCont().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.noticeList = res.data.data.slice(0, 5)
				} else if (res.data.code == 401) {
					uni.showToast({
						icon: 'none',
						title: '登录状态已过期，请重新登录！',
						success: () => {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取待办事项
			that.$api.index.waitDo().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.waitList = res.data.data
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取关键数据
			that.$api.index.keyData().then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.todayDatas = res.data.data
				}
			}).catch(err => {
				console.log(err);
			})
			// 获取已用模块
			that.$api.authManage.fetchIsUsing({
				userId: uni.getStorageSync('userInfo').userid
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.isUsingList = res.data.data
					console.log(that.isUsingList);
				}
			}).catch(err => {
				console.log(err);
			})
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.text == '权限') {
				uni.navigateTo({
					url: '/pages/authManage/authManage'
				})
			} else if (e.text == '扫一扫') {
				uni.scanCode({
					success: (res) => {
						console.log(res);
						const fixedRes = res.result.split('=')[1]
						console.log(fixedRes);
						uni.navigateTo({
							url: `/pages/indexScan/indexScan?scan=${fixedRes}`
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background: url('/static/bgd.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.upper-user{
		width: 85%;
		margin: 8vh auto;
		margin-bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		.user-lef{
			width: 15%;
			height: 6vh;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.user-rig{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding-left: 20rpx;
			view{
				width: 100%;
				color: #fff;
			}
			view:first-child{
				font-size: 18px;
			}
			view:last-child{
				font-size: 12px;
				letter-spacing: 6rpx;
			}
		}
	}
	.sliders{
		width: 85%;
		height: 5vh;
		margin: 4vh auto;
		margin-bottom: 2vh;
		border-radius: 15rpx 15rpx 0 0;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(2px);
		border: 1px solid #B3D3FF;
		padding: 1.3vh 0;
		display: flex;
		view{
			width: 25%;
			height: 100%;
			border-right: 1px solid #CDE2FF;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #fff;
			h2{
				font-size: 22px;
			}
			span{
				font-size: 12px;
			}
		}
		view:last-child{
			border-right: none;
		}
	}
	.sections{
		width: 90%;
		margin: 15rpx auto;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top: 2vh;
		view{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 2vh;
			image{
				width: 50%;
				height: 6vh;
				margin-bottom: 10rpx;
			}
			span{
				font-size: 20rpx;
			}
		}
	}
	.wait-do{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		view{
			width: 48%;
			height: 13vh;
			margin-bottom: 15rpx;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 25rpx;
			h4{
				margin-bottom: 5rpx;
				font-size: 22px;
			}
			h5{
				font-weight: normal;
				font-size: 14px;
			}
		}
		.llsp{
			background: url('/static/llsp.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.tlsp{
			background: url('/static/tlsp.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.bfsh{
			background: url('/static/bfsh.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.sysh{
			background: url('/static/sysh.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
	.single-notice{
		width: 100%;
		margin: 0 auto;
		border-bottom: 1px solid #DEE3EA;
		box-sizing: border-box;
		padding: 20rpx 5%;
		display: flex;
		background-color: #fff;
		.notice-lef{
			width: 12%;
			height: 5.5vh;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.notice-rig{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
			padding-left: 20rpx;
			h4{
				font-size: 14px;
			}
			h5{
				font-size: 12px;
				color: #8F9298;
				font-weight: normal;
			}
		}
	}
</style>