equipment-rental-mini/pages/menus/menu/menu.vue

<template>
	<view class="mine-area">
		<view class="big-circle"></view>
		<view class="avatar-area z10" >
			<u-avatar :src="src" size="80" shape="circle"></u-avatar>
		</view>
		<view class="menu-area z10">
			<view class="basic-msg">
				<text class="basic-name">{{name}}</text>
				<text class="basic-amount">借用中设备：{{amount}}</text>
			</view>
			<u-list 
			:enableFlex="true"
			>
				<u-list-item>
					<view class="menu-list" @click="toPersonInfo">
						<i class="iconfont icon-ditu"></i>
						<text>我的信息</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list" @click="toBorrowRecord">
						<i class="iconfont icon-qianbao"></i>
						<text>借用记录</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list"  @click="toRepeat">
						<i class="iconfont icon-a-shezhi2"></i>
						<text>故障上报</text>
					</view>
				</u-list-item>
				<u-list-item v-if="role==='admin'?true:false">
					<view class="menu-list" @click="toHandleFault">
						<i class="iconfont icon-baogaoguanli"></i>
						<text>故障处理</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-dangewenjian"></i>
						<text>使用指南</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont icon-bangzhu"></i>
						<text>关于我们</text>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="menu-list" @click="toLogout">
						<i class="iconfont icon-tuichu"></i>
						<text>退出登录</text>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import cache from '@/utils/storage.js'
	import { sumBorrow } from '@/api/asset.js'
	import { logout } from '@/api/user.js'
	export default {
		data() {
			return {
				src: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215735941.jpg',
				name: cache.session.getJSON('nickName'),
				amount:null,
				role:cache.session.getJSON('role')
			};
		},
		methods:{
			toPersonInfo(){
				uni.navigateTo({
					url:'/pages/menus/mine/mine'
				})
			},
			toBorrowRecord(){
				uni.navigateTo({
					url:'/pages/menus/borrow-record/borrow-record'
				})
			},
			init(){
				sumBorrow(0).then(res=>{
					this.amount = res
				})
			},
			toRepeat(){
				uni.scanCode({
					scanType:['barCode'],
					success (res) {
						uni.navigateTo({
							url:'/pages/fault/fault-report/fault-report?id='+res.result
						})
					}
				})
			},
			toHandleFault(){
				uni.navigateTo({
					url:'/pages/fault/fault-list/fault-list'
				})
			},
			toLogout(){
				//#ifdef MP-WEIXIN 
				wx.showModal({
					title: '系统提示',
					content: '是否确认退出登录？',
					success (res) {
						uni.showLoading({
							title:'正在退出登录中',
							icon:'none',
							mask:true
						})
						if (res.confirm) {
							try{
								logout().then(res=>{
									if(res.data.code===200&&res.data.msg==="退出成功"){
										uni.hideLoading()
										uni.reLaunch({
											url:'/pages/home/home'
										})
									}
								})
							}catch(err){
								uni.hideLoading()
							}
							
						} else if (res.cancel) {
							uni.hideLoading()
							console.log('用户点击取消')
						}
						
					}
				})
				//#endif
				//#ifndef MP-WEIXIN
				uni.showModal({
					title: '系统提示',
					content: '是否确认退出登录？',
					success (res) {
						uni.showLoading({
							title:'正在退出登录中',
							icon:'none',
							mask:true
						})
						if (res.confirm) {
							try{
								logout().then(res=>{
									if(res.data.code===200&&res.data.msg==="退出成功"){
										uni.hideLoading()
										uni.reLaunch({
											url:'/pages/home/home'
										})	
									}
								})
							}catch(err){
								uni.hideLoading()
							}
							
						} else if (res.cancel) {
							uni.hideLoading()
							console.log('用户点击取消')
						}
						
					}
				})
				//#endif
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss">
.mine-area{
	background-color: #000;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.big-circle{
	width: 937px;
	height: 937px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 50%;
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}
.avatar-area{
	position: absolute;
	top: 25%;
	left: 20%;
	transform: translateY(-50%);
}
.z10{
	z-index: 10;
}
.menu-area{
	height: 65%;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding: 0 100rpx;
	box-sizing: border-box;
}
.menu-list{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	padding: 20rpx 0 ;
	.iconfont{
		font-size: 38rpx;
		padding-right: 20rpx;
	}
}
.basic-msg{
	display: flex;
	margin-bottom: 40rpx;
	flex-direction: column;
	.basic-name{
		font-size: 32rpx;
		line-height: 150%;
	}
	.basic-amount{
		color: rgba(128, 128, 128, 1);
		font-size: 26rpx;
		line-height: 150%;
	}
}
</style>