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) {
						if (res.confirm) {
							logout().then(res=>{
								if(res.data.code===200&&res.data.msg==="退出成功"){
									uni.reLaunch({
										url:'/pages/home/home'
									})
								}
							})
						} else if (res.cancel) {
							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>