rongzidanbao-ui/pages/mine/index.vue

<template>
	<view class="zxbox">
		<view class="navbox">
			<uni-nav-bar color="#ffffff"  :background-color="backgroundColor" :border="false"
				statusBar='true' fixed="true">
				<block slot="right">
					<view class="topr" @click='getNoticeFn'>
						<image :src="noticimg"></image>
						<view class="cir">99+</view>
						<!-- <block v-if="noticenum>99">99+</block>
						<block v-else>{{noticenum}}</block> -->
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<image :src="bgimg" class="bgimg"></image>
		<view class="mbox">
			<view class="infobox flexc" @click="handleToInfo">
				<image v-if="avatar" @click.stop="handleToAvatar" :src="avatar" class="limg" mode="aspectFill"></image>
				<image v-else @click.stop="handleToAvatar" :src="avatarimg" class="limg" mode="aspectFill"></image>
				<view class="cbox">
					<view class="tit">{{name?name:'登录账号'}}</view>
					<view class="flexc pr">
						<image :src="headl"></image>
						<view class="txt">超级管理员</view>
						<image :src="headr"></image>
					</view>
				</view>
				<image :src="wrimg" class="rimg"></image>
			</view>
			<view class="conts">
				<view class="conta">
					<view class="flexcj mb19">
						<view class="f15 fw co23 flex0 ml8">季度放款统计 <text class="coa ml4">/万元</text></view>
						<view class="f12 coa fw5 flexc">2024年第二季度
							<image :src="rimg" class="rimg"></image>
						</view>
					</view>
					<view class="flexc">
						<view class="contn">
							<view class="img">
								<image :src="mconta" class="imga"></image>
							</view>
							<view class="ctit">待放款</view>
							<view class="ctxt co1l">1230</view>
						</view>
						<view class="line"></view>
						<view class="contn">
							<view class="img">
								<image :src="mcontb" class="imgb"></image>
							</view>
							<view class="ctit">已放款</view>
							<view class="ctxt co1l">4731</view>
						</view>
					</view>
				</view>
				<view class="conta">
					<view class="flexcj mb19">
						<view class="f15 fw co23 flex0 ml8">年度申报<text class="coa ml4">/个</text></view>
						<view class="f12 coa fw5 flexc">2024年度
							<image :src="rimg" class="rimg"></image>
						</view>
					</view>
					<view class="flexc">
						<view class="contn">
							<view class="img">
								<image :src="mcontc" class="imgc"></image>
							</view>
							<view class="ctit">待完成</view>
							<view class="ctxt co1y">11</view>
						</view>
						<view class="line"></view>
						<view class="contn">
							<view class="img">
								<image :src="mcontd" class="imgd"></image>
							</view>
							<view class="ctit">已归档</view>
							<view class="ctxt co1y">56</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mbgbox">
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['projectV2:sbbzb:add'])">
					<view class="limg">
						<image :src="listimga" class="imga"></image>
					</view>
					<view class="tit flex1">业务申报</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['zxConference:conference:add'])">
					<view class="limg">
						<image :src="listimgb" class="imga"></image>
					</view>
					<view class="tit flex1">我的申报</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['proposalInfo:info:list'])">
					<view class="limg">
						<image :src="listimgc" class="imga"></image>
					</view>
					<view class="tit flex1">待办事项</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['sqmyInfo:info:list'])">
					<view class="limg">
						<image :src="listimgd" class="imga"></image>
					</view>
					<view class="tit flex1">我的暂存</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['member:info:list'])">
					<view class="limg">
						<image :src="listimge" class="imgb"></image>
					</view>
					<view class="tit flex1">回收站</view>
					<image :src="rimg" class="rimg"></image>
				</view>
			</view>
			<view class="mbgbox">
				
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['zxConference:conference:list'])">
					<view class="limg">
						<image :src="listimgf" class="imga"></image>
					</view>
					<view class="tit flex1">台账表</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list" @click="handleToAddNews" v-if="checkPermi(['zxConference:conference:list'])">
					<view class="limg">
						<image :src="listimgg" class="imga"></image>
					</view>
					<view class="tit flex1">担保材料清单</view>
					<image :src="rimg" class="rimg"></image>
				</view>
			</view>
			<view class="mbgbox">
				<view class="flexc mine_list" @click="handleUpassword">
					<view class="limg">
						<image :src="listimgh" class="imga"></image>
					</view>
					<view class="tit flex1">修改密码</view>
					<image :src="rimg" class="rimg"></image>
				</view>
				<view class="flexc mine_list"@click="onlineWgt">
					<view class="limg">
						<image :src="listimgi" class="imga"></image>
					</view>
					<view class="tit flex1">版本号</view>
					 <view  class="txt">{{wgtcode}}</view>

				</view>
				<view class="flexc mine_list" @click="handleLogout">
					<view class="limg">
						<image :src="listimgj" class="imga"></image>
					</view>
					<view class="tit flex1">退出登录</view>
					<image :src="rimg" class="rimg"></image>
				</view>
			</view>
		</view>
		<view class="ztit">安徽中新云计算有限公司提供支持</view>
		<footers v-if="isfootflag" :footerindex="footerindex" :isHomeIndex="false"></footers>

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import footers from '@/components/footer/footer.vue'
	// import {getNoticenumber} from "@/api/work/index.js"
	import {updateUserProfile,findVersion} from "@/api/system/user.js"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				bgimg: require("@/static/images/bg.png"),
				avatarimg:require("@/static/images/mine/profile.png"),
				noticimg: require("@/static/images/home/notice.png"),
				mconta:require("@/static/images/mine/mconta.png"),
				mcontb:require("@/static/images/mine/mcontb.png"),
				mcontc:require("@/static/images/mine/mcontc.png"),
				mcontd:require("@/static/images/mine/mcontd.png"),
				
				listimga: require('@/static/images/mine/minea.png'),
				listimgb: require('@/static/images/mine/mineb.png'),
				listimgc: require('@/static/images/mine/minec.png'),
				listimgd: require('@/static/images/mine/mined.png'),
				listimge: require('@/static/images/mine/minee.png'),
				listimgf: require('@/static/images/mine/minef.png'),
				listimgg: require('@/static/images/mine/mineg.png'),
				listimgh: require('@/static/images/mine/mineh.png'),
				listimgi: require('@/static/images/mine/minei.png'),
				listimgj: require('@/static/images/mine/minej.png'),
				
				headl:require('@/static/images/mine/headl.png'),
				headr:require('@/static/images/mine/headr.png'),
				wrimg:require("@/static/images/mine/wrimg.png"),
				rimg:require("@/static/images/mine/rimg.png"),
				border: false,
				backgroundColor: 'transparent',

				name: this.$store.state.user.name,
				// version: getApp().globalData.config.appInfo.version,
				footerindex: 'mine',
				isfootflag: true,
				noticenum: 0,
				deptId: this.$store.state.user.deptId,
				wgtcode: this.$store.state.user.wgtcode,
				platform: 'Android',
				nvaHeight:44,
			}
		},
		components: {
			footers
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			var listTop=Number(this.listTop)-Number(this.nvaHeight)
			if (scrollTop <=this.nvaHeight) {
				const opacity = scrollTop / 100 // 计算透明度值
				const color = `rgba(29, 100, 226, ${opacity})`
				this.backgroundColor = color // 更新盒子背景颜色
			} else {
				this.backgroundColor = '#00A9F0'
			}
		}, 
		onLoad() {
			this.nvaHeight=uni.getSystemInfoSync().statusBarHeight+44;
			if (checkPermi(['system:notice:number'])) {
				// this.getNoticenumber()
			}
		},
		mounted() {
			this.getHeightFn()
		}, 
		
		methods: {
			checkPermi,
			checkRole,
			getNoticeFn(){
				this.$tab.navigateTo("/pages/index/notice")
			},
			getHeightFn(){
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.zxbox').boundingClientRect(data => {
					var top=data.top<0 ? -data.top : data.top;
					this.listTop = data.height//赋值，待会要用
					if (top <=this.nvaHeight) {
						const opacity = top / 100 // 计算透明度值
						const color = `rgba(4, 145, 253, ${opacity})`
						this.backgroundColor = color // 更新盒子背景颜色
					} else {
						this.backgroundColor = '#00A9F0'
					}
				}).exec();
			},
			// 修改密码
			handleUpassword(){
				this.$tab.navigateTo(`/pages/mine/pwd/index`)  
			},
			// 账号信息
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToAddNews(){
				this.$tab.navigateTo('/work/pages/news/add')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			onlineWgt() {
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					that.$store.dispatch('SetwgtFn', widgetInfo.version).then(() => {})
					that.comparisonVersionNo(widgetInfo.versionCode);
				});
				// that.comparisonVersionNo()
			},
			comparisonVersionNo(versionCode) {
				let that = this;
				// console.log("aaaaaaa===versionCode", versionCode);
				const parmas = {
					model: that.platform
				}
				findVersion(parmas).then(res => {
					if (res.code == "200") {
						let versionNos = res.data.code;
						console.log(versionNos, 'versionNos')
						// console.log(res.data.path);
						let filePath = res.data.path;
						if (versionNos != versionCode) { //服务器返回1更新，0则不更新
							uni.showModal({
								title: '提示',
								content: '发现新版本，是否升级',
								success: function(res) {
									// console.log(widgetInfo.version);
									if (res.confirm) {
										console.log('用户点击确定');
										that.getProperty(filePath);
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.$toast('该版本已是最新版')
						}
					}
				}).catch(error => {
					uni.hideLoading()
					console.log(error)
				})
			},
			getProperty(getProperty) {
				// console.log("bbbbbbbbb----------->", getProperty)
				let that = this;
				// 在线升级app/热更新
				that.showwri = true;
				const downloadTask = uni.downloadFile({ //下载文件
					url: baseUrl + getProperty,
					success: (downloadResult) => {
						// console.log(downloadResult);
						if (downloadResult.statusCode == 200) {
							// 更新升级
							plus.runtime.install(downloadResult.tempFilePath, {
								force: true
							}, function() {
								// console.log('install success...');
								that.showwri = false;
								plus.nativeUI.alert("应用资源更新完成！", function() {
									plus.runtime.restart();
								});
							}, function(e) {
								that.showwri = false;
								plus.nativeUI.alert("更新失败，请稍后再试");
							});
						}
					}
				});
				downloadTask.onProgressUpdate((res) => { //下载文件的进度
					that.totalBytesWritten = res.totalBytesWritten; //当前下载大小
					that.progress = res.progress; //当前下载比例
					that.totalBytesExpectedToWrite = res.totalBytesExpectedToWrite; //
				});
			},
			
			getNoticenumber() {
				var params = {
					deptId: this.deptId
				}
				getNoticenumber(params).then(res => {
					if (res.code == 200) {
						this.noticenum = Number(res.data)
					} else {
						this.$toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{background-color: #f6f6f6;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
	.topl{width: 274rpx;height: 50rpx;margin-left: 14rpx;}
	.topr{width: 36rpx;height: 36rpx;position: relative;margin-right: 10rpx;
		image{width: 100%;height: 100%;}
		.cir{background: #FF4747;font-size: 14rpx;color: #FFFFFF;border-radius: 50%;border: 2rpx solid #FFFFFF;min-width: 20rpx;height: 20rpx;
			position: absolute;right: -5rpx;top: -5rpx;text-align: center;line-height: 16rpx;
		}
		// .cir{width: 14rpx;height: 14rpx;background: #DF0024;border-radius: 50%;position: absolute;right: -7rpx;top: -7rpx;}
	}	
}
.zxbox{ 
	.bgimg{width: 100%;height: 680rpx;}
	.mbox{margin-top: -540rpx;padding: 0 36rpx;z-index: 1;position: relative;
		.infobox{margin-bottom: 60rpx;
			.limg{width: 140rpx;height: 140rpx;flex: 0 0 auto;margin-right: 26rpx;border-radius: 50%;}
			.cbox{flex: 1;z-index: 1;
				image{width: 32rpx;height: 38rpx;}
				.tit{font-weight: bold;font-size: 40rpx;color: #ffffff;margin-bottom: 14rpx;}
				.txt{font-weight: bold;font-size: 24rpx;background-color: #2973C7;color: #FFFFFF;height: 38rpx;line-height: 38rpx;margin: 0 -2rpx;padding:0 2rpx;}
			}
			.rimg{width: 12rpx;height: 20rpx;flex: 0 0 auto;margin-left: 20rpx;}
		}
		.conts{margin-bottom: 24rpx;background: #FFFFFF;box-shadow: 0px 0px 10rpx 0px rgba(216,216,216,0.4);border-radius: 20rpx;
			padding: 0 20rpx;box-sizing: border-box;
			.conta{border-bottom: 2rpx dashed #E6E6E6;padding: 38rpx 0 44rpx;
				.rimg{width: 16rpx;height: 22rpx;margin-left: 22rpx;flex: 0 0 auto;}
				.contn{
					display: flex;align-items: center;flex: 0 0 auto;width: 286rpx;
					.img{width: 42rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 18rpx;flex: 0 0 auto;
						.imga{width: 42rpx;height: 40rpx;}
						.imgb{width: 30rpx;height: 40rpx;}
						.imgc{width: 38rpx;height: 40rpx;}
						.imgd{width: 34rpx;height: 40rpx;}
					}
					.ctit{font-weight: 500;font-size: 26rpx;color: #222327;flex: 0 0 auto;}
					.ctxt{flex: 1;text-align: right;font-weight: bold;font-size: 32rpx;word-break: break-all;}
				}
				.line{width: 2rpx;height: 28rpx;background: #E6E6E6;margin: 0 32rpx;flex: 0 0 auto;}
			}
		}
		.mbgbox{width: 100%;background: #FFFFFF;border-radius: 10rpx;margin-bottom: 24rpx;
			.mine_list{
				padding: 34rpx 22rpx;
				.limg{flex: 0 0 auto;width: 42rpx;height: 42rpx;margin-right: 26rpx;display: flex;align-items: center;justify-content: center;
					.imga{width: 40rpx;height: 40rpx;}
					.imgb{width: 38rpx;height: 40rpx;}
				}
				.tit{font-weight: bold;font-size: 30rpx;color: #222327;}
				.txt{font-weight: 500;font-size: 30rpx;color: #666666;margin-left: 20rpx;flex: 0 0 auto;}
				.rimg{width: 16rpx;height: 22rpx;margin-left: 20rpx;flex: 0 0 auto;}
			}
		}
	}
}

.ztit{font-size: 24rpx;color:#c6c6c9;text-align: center;flex:0 0 auto;margin-bottom: 28rpx;margin-top: 40rpx;}

</style>