qianshanxm_ui/partybuilding-wx/pages/mine/mine.vue

<template>
	<view class="mine">
		<view :style="'padding-top:'+padtop+'px'">
			<navbar title="我的" :back="false" :bgcolor="backgroundColor" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop" color="#fff"/>
			
			<view class="head">
				<image :src="headimg" class="headimg"></image>
				<view class="headt">
					<view class="headtit">{{userInfo.userName}}</view>
					<view class="flext">
						<image :src="adrimg" class="headai"></image>
						<view class="headat">{{userInfo.nickName}}</view>
					</view>
				</view>
			</view>
			<view class="mine_b">
				<view class="mine_l" @click="getrecond">
					<image :src="mineh" class="mine_limg"></image>
					<view class="mine_lt">核销记录</view>
					<image :src="rimg" class="mine_lr"></image>
				</view>
				<view class="mine_l" @click="getUse">
					<image :src="mineu" class="mine_limg"></image>
					<view class="mine_lt">使用指南</view>
					<image :src="rimg" class="mine_lr"></image>
				</view>
				<view class="mine_l" @click="getScLogin">
					<image :src="mined" class="mine_limg"></image>
					<view class="mine_lt">扫码登录</view>
					<image :src="rimg" class="mine_lr"></image>
				</view>
				<view class="mine_l" @click="getUpdate">
					<image :src="minex" class="mine_limg"></image>
					<view class="mine_lt">修改密码</view>
					<image :src="rimg" class="mine_lr"></image>
				</view>
				<view class="mine_l" @click="getOut">
					<image :src="mineo" class="mine_limg"></image>
					<view class="mine_lt">退出登录</view>
					<image :src="rimg" class="mine_lr"></image>
				</view>
			</view>
			
			<view class="bgbox" v-if="outflag"></view>
			<view v-if="outflag" class="outbox">
				<view class="outboxtit">退出登录</view>
				<view class="outboxtxt">是否确认退出当前账号？</view>
				<view class="outboxbtn">
					<view class="outbox_btn btn1" @click="getClose">我在想想</view>
					<view class="outbox_btn btn2" @click="getSure">立即退出</view>
				</view>
			</view>
			<!-- 底部 导航栏  currentPage 当前页面ID -->
			<tab-bar :currentPage="2"></tab-bar>
		</view>
		
	</view>
	
</template>

<script>
	import tabBar from "@/components/tabbar/tabbar.vue"
	export default{
		data(){
			return{
				padtop:this.$http._GET.customBarH||0,
				backgroundColor:'transparent',
				headimg:require("static/images/headimg.png"),
				adrimg:require("static/images/adrimg.png"),
				mineh:require("static/images/mineh.png"),
				mineu:require("static/images/mineu.png"),
				mined:require("static/images/mined.png"),
				minex:require("static/images/minex.png"),
				mineo:require("static/images/out.png"),
				rimg:require('static/images/backrimg.png'),
				userId:'',
				userInfo:{},
				outflag:false
			}
		},
		components: {
			tabBar
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			getTop(e){
				this.padtop=e
			},
			getrecond(){
				var businessId=uni.getStorageSync('businessId')
				if(businessId&&businessId=='-1'){
					uni.showToast({
						title:'暂无核销记录',
						icon:"none"
					})
				}else{
					this.$http.routePage('/pages/index/record','nav')
				}
			},
			getUse(){
				this.$http.routePage('/pages/index/guidedetail?type=use','nav')
			},
			// 扫码登录
			getScLogin(){
				uni.navigateTo({
					url:'/pages/index/scan'
				})
			},
			getUpdate(){
				uni.navigateTo({
					url:'/pages/login/updatpaw?userName='+this.userInfo.userName
				})
			},
			getOut(){
				this.outflag=true
			},
			getClose(){
				this.outflag=false
			},
			getSure(){
				this.outflag=false
				uni.clearStorage()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			getUserInfo() {
				var userId=this.userId
				if(!userId){
					userId = uni.getStorageSync('userId')||''
					if(!userId){
						uni.reLaunch({
							url: '/pages/login/login'
						})
						return
					}
				}
				this.userId=userId
				this.$http.get('system/user/'+userId).then(res=>{
					// console.log(JSON.stringify(res))
					if(res.code == 200 ) {
						this.userInfo = res.data
						
						// 手机号是否展示
						// var d=['city01','queryApp','queryApp','city02']
						// var roles=res.roles.some((ite,idx)=>{
						// 	if(ite=='queryApp'){
						// 		return true
						// 	}
						// })
						// uni.setStorageSync('roles', roles)   

						// uni.setStorageSync('phone', this.userInfo.phonenumber)   
					} 
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.flext{display: flex;align-items: flex-start;}
	.mine{width: 100%;background: url("@/static/images/minebg.png") no-repeat;background-size: 100%562rpx;min-height: 100vh;padding: 82rpx 34rpx 0;box-sizing: border-box;}
	
	.head{padding: 0 30rpx;display: flex;align-items: center;
		.headimg{width: 116rpx;height: 122rpx;margin-right: 28rpx;flex:0 0 auto;}
		.headt{overflow: hidden;
			.headtit{font-size: 34rpx;font-weight: bold;color: #FFFFFF;margin-bottom: 16rpx;}
			.headai{width: 36rpx;height: 38rpx;margin-top: 8rpx;flex:0 0 auto;}
			.headat{font-size: 26rpx;color: #FBDADC;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
		}	
	}
	.mine_b{margin-top: 38rpx;width: 100%;background: #FFFFFF;box-shadow: 4rpx 6rpx 6rpx 0px rgba(91,91,91,0.2000);border-radius: 10rpx;}
	.mine_l{padding: 24rpx 32rpx 24rpx 28rpx;display: flex;align-items: center;min-height: 100rpx;box-sizing: border-box;}
	.mine_limg{width: 52rpx;height: 52rpx;margin-right: 18rpx;flex: 0 0 auto;}
	.mine_lt{font-size: 28rpx;font-weight: 400;flex: 1;}
	.mine_lr{width: 16rpx;height: 28rpx;flex: 0 0 auto;}
	.bgbox{position: fixed;left: 0;right: 0;bottom: 0;top: 0;background-color: rgba(0,0,0,0.5);z-index: 1200;}
	.outbox{width: 600rpx;border-radius: 30rpx;background-color: #fff;position: fixed;left:75rpx;right:75rpx;z-index: 1300;top: 50%;transform: translateY(-100rpx);
		.outboxtit{display: flex;flex-direction: row;justify-content: center;padding-top: 30rpx; padding-bottom: 10rpx;font-size: 32rpx;color: #909399;}
		.outboxtxt{display: flex;flex-direction: row;justify-content: center;align-items: center; padding: 10rpx 30rpx 30rpx 30rpx;font-size: 28rpx;color: #6e6e6e;}
		.outboxbtn{display: flex;flex-direction: row;border-top: 2rpx solid #f5f5f5;
		 .outbox_btn{display: flex;flex: 1; flex-direction: row;justify-content: center;align-items: center;height: 90rpx;font-size: 28rpx;
			&.btn1{color: #009de7;}
			&.btn2{color: red;border-left:2rpx solid #f5f5f5;}
		 }
			
		}
	}
</style>