shuju_ui/qsshujujugrid/pages/mine/mine.vue

<template>
	<view class="mine">
		<uni-nav-bar :border='border' title="我的" statusBar="true" :backgroundColor="backgroundColor" color="#FFFFFF" fixed="true" ></uni-nav-bar>
		<view class="header-bg">
			<image :src="headimg" class="headimg"></image>
			<view class="headbox">
				<!-- <image class="headImage" :src="userInfo.avatar || '../../static/image/pic_mine_hp.png'" mode=""></image> -->
					<view class="headleft">
						<image class="headImage" src="../../static/image/pic_mine_hp.png" mode=""></image>
						
						<view style="display: flex;align-items: flex-start;width: 100%;">
							<view class="headtxt">
								<text class="txt">{{userInfo.userName||''}}</text>
								<view>
									<view class="man-bg" v-if="userInfo.dept.deptName">
										<image src="../../static/image/icon_mine_tel.png" class="manimg"></image>
										{{userInfo.dept.deptName||''}}
									</view>
								</view>
							</view>
							<!-- <view class="headright">
								<image :src="adrimg"></image>
								黄柏镇
							</view> -->
						</view>
					</view>
			</view>
		</view>
			<view class="nmin">
				<view class="nmbox" v-for="(item,index) in card_listpeo" :key="index" :isShadow="true" @click="goNavs(index)">		
					<image class="card-image" :src="item.url" mode=""></image>
					<view style="flex: 1;">
						<text class="txt2">{{item.txt2}}</text>
						<view class="txt3" v-if="index !== 1">
							{{item.txt3}}
						</view>
						<view class="txt3" v-else>
							{{getTimeNow()}}
						</view>
					</view>
					<view style="flex: 0 0 auto;">
						<image style="width: 16rpx;height: 25rpx;" src="../../static/image/icon_mine_listenter.png" mode=""></image>
					</view>
				</view>
<!-- 				<uni-card  extra="额外信息" >
				    
				</uni-card> -->

			</view>
		
		<u-toast ref="uToast" />
		
		<uni-popup ref="logoutPopup" type="center">
			<uni-popup-dialog-logout type="info" title="退出登录" content="是否确认退出当前账号？" @confirm="logoutConfirm" ></uni-popup-dialog-logout>
		</uni-popup>
		
		<!-- 底部 导航栏  currentPage 当前页面ID -->
		<tab-bar :currentPage="2"></tab-bar>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialogLogout from '@/components/uni-popup/uni-popup-dialog-logout.vue'
	import hostUrl from "@/util/url";
	let {host, imgDomain} = hostUrl
	import tabBar from "@/components/tabbar/tabbar.vue"
	export default { 
		components: {
			uniPopup,
			uniPopupDialogLogout,
			tabBar
		},
		data() {
			return {
				headimg:require("@/static/image/pic_mine_dbbg.png"),
				adrimg:require("@/static/image/adr.png"),
				backgroundColor:'transparent',
				border:false,
				userInfo: {
					dept:{
						deptName:'',
					}
				},
				// 人口
				card_listpeo: [
					{url:'../../static/image/icon_mine_ymxx.png',txt2: '人口信息',txt3:'查看/修改我提交的人口信息'},
					{url:'../../static/image/icon_mine_jztj.png',txt2: '常住人口统计',txt3:''},
					{url:'../../static/image/scan.png',txt2: '扫码登录',txt3:'扫描二维码一键登录'},
					{url:'../../static/image/logout.png',txt2: '退出登录',txt3:'退出当前账号登录状态'}
				]
			}
		},
		onShow() {
			
		},
		mounted() {
			// console.log('mounted')
			this.getUserInfo()
		},
		methods:{
			checkLogin() {
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				if (token == undefined || token == '') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return false
				}
				return true
			},
			getUserInfo() {
				this.$http.get('system/user/getInfo').then(res=>{
					// console.log(JSON.stringify(res))
					if(res.code == 200 ) {
						this.userInfo = res.user
						
						// 手机号是否展示
						// var d=['city01','queryApp','queryApp','city02']
						var roles=res.roles.some((ite,idx)=>{
							if(ite=='queryApp'){
								return true
							}
						})
						uni.setStorageSync('roles', roles)   
						
						// var regexp = new RegExp("((http|ftp|https)://)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*/?", "g");
						// this.userInfo.avatar = this.userInfo.avatar.replace(regexp, imgDomain + '/');
						// console.log('avatar ' + this.userInfo.avatar)
						// console.log('hone ' + this.userInfo.phonenumber)
						uni.setStorageSync('phone', this.userInfo.phonenumber)   
					} 
				})
			},
			logoutConfirm(done) {
				done()
				uni.clearStorage()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			/* 获取当前时间 */
			getTimeNow () {
				let re = this.h_util.getDateTime('yyyy年MM月dd日hh时',new Date())
				return re
			},
			/* 跳转路由 */
			goNav(index) {
				if(index == 0) {
					uni.navigateTo({
						url:'/home/pages/recordthree/recordthree'
					})
				}else if (index == 1) {
					uni.navigateTo({
						url:'/home/pages/recordthree/recordthree'
					})
				}else if (index == 2) {
					this.$refs.uToast.show({
						title: '该功能暂未开放',
						type: 'error'
					})
				}else if (index == 3) {
					if (!this.checkLogin()) {
						return
					}
					uni.navigateTo({
						url:'/add/pages/addvacfrom/scan'
					})
				}else if (index == 4) {
					this.$refs.logoutPopup.open()
				}else{
					this.$refs.uToast.show({
						title: '该功能暂未开放',
						type: 'error'
					})
				}
			},
			goNavs(index){
				if(index == 0) {
					uni.navigateTo({
						url:'/home/pages/recordthree/recordpeople'
					})
				}else if (index == 1) {
					uni.navigateTo({
						url:'/pages/home/resident'
					})
				}else if (index == 2) {
					if (!this.checkLogin()) {
						return
					}
					uni.navigateTo({
						url:'/add/pages/addvacfrom/scan'
					})
				}else if(index == 3){
					this.$refs.logoutPopup.open()
				}else{
					this.$refs.uToast.show({
						title: '该功能暂未开放',
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.mine{min-height: 100vh;background: #FFFFFF;}
	.header-bg {
		position: relative;
		.headimg{
			width: 100%;
			height:386rpx;
		}
		.headbox{position: absolute;left: 0;top: 0;right: 0;bottom: 0;box-sizing: border-box;padding:70rpx 0 0  52rpx;display: flex;align-items: center;
		.headleft{
			display: flex;align-items: center;flex: 1;
			.headImage {
				width: 132rpx;
				height: 132rpx;
				flex: 0 0 auto;margin-right: 28rpx;
			}
			.headtxt{
				display: flex;
				flex-direction: column;
				flex: 1;
				.txt{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}
				.man-bg{
					min-width: 200rpx;
					height: 44rpx;
					background: #688EEC;
					border-radius:22rpx;
					padding: 6rpx;
					box-sizing: border-box;
					display: inline-flex;
					align-items: center;
					font-size: 26rpx;
					color: #CBDDFD;
					line-height: 18px;
					.manimg{width: 32rpx;height:32rpx;margin-right: 8rpx;}
				}
			}
			.headright{flex: 0 0 auto;background: #688EEC;
			border-radius: 22rpx 0 0 22rpx;width: 174rpx;height: 44rpx;display: flex;align-items: center;font-size: 26rpx;color: #CBDDFD;
						image{width: 34rpx;height: 34rpx;margin-right: 14rpx;}
						}		
		}
		
		}
	}
	

	
	.nmin{
	}
	.nmbox{height: 138rpx;
background: #ECF1FE;
border-radius:6rpx;width: 684rpx;margin: 0 auto 24rpx;display: flex;align-items: center;padding: 0 32rpx;box-sizing: border-box;}
	
	.card-image{
		width:60rpx;
		height:60upx;
		margin-right: 26rpx;flex: 0 0 auto;
	}
	.txt2{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #464E58;
		line-height: 18px;
	}
	.txt3{
		margin-top: 15rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 18px;
	}
</style>