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

<template>
	<view class="mine-area">
		<image style="width: 100%;" mode="aspectFill" :src="imgSrc('/profile/logo/menuBackgroundImage.png')"></image>
		<view class="big-circle"></view>
		<view class="avatar-area z10" >
			<view class="img-boxs" @click="handleUpImg">
				<image :src="imgSrc(avatar)"></image>
				<cover-view>修改头像</cover-view>
			</view>
			<!-- <u-avatar :src="avatar.length > 0 ? imgSrc(avatar) : 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 style="margin-right: 10rpx;">借用记录</text>
						<u-badge  max="99" :value="amount"></u-badge>
					</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 v-if="role==='admin'?true:false">
					<view class="menu-list" @click="showPopup">
						<i class="iconfont icon-bangzhu"></i>
						<text>重置密码</text>
					</view>
				</u-list-item>
				<!-- 
				<u-list-item>
					<view class="menu-list">
						<i class="iconfont "></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>
		<u-popup :show="show" @close="close" :round="10" closeable>
			<view class="popup-area">
				<view class="form-area" style="padding:0 20rpx;">
					<text class="form-label">工号</text>
					<u--input placeholder="请输入工号" clearable v-model="userName"></u--input>
				</view>
				<view class="form-area" style="padding:0 20rpx;margin-top: 20rpx;">
					<text class="form-label">新密码</text>
					<u--input placeholder="请输入新密码" clearable v-model="password"></u--input>
				</view>
				<view class="pwd-btn">
					<!-- <u-button size="small" @click="show = false">取消</u-button> -->
					<u-button type="primary" @click="resetPassword">重置密码</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import cache from '@/utils/storage.js'
	import { sumBorrow } from '@/api/asset.js'
	import { uploadAvatar,logout,resetPwd } from '@/api/user.js'
	import { getImage } from '@/api/visitor.js'
	import { getToken } from '@/utils/auth';
	import baseUrl from '@/utils/baseurl.js'
	export default {
		data() {
			return {
				src: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215735941.jpg',
				avatar: '',
				name: "",
				amount:null,
				role:"",
				show: false,
				userName:"",
				password:"",
				token: ""
			};
		},
		methods:{
			handleUpImg() {// 点击图片区域，选择图片并上传
				const token = this.token
				let avatar = ""
				uni.chooseImage({// 选择图片
					count: 1,
					success: (res) => {// 图片选择成功的回调（必传），会返回一个对象
							// this.avatar = res.tempFilePaths[0] // 用于更新视图
							uni.uploadFile({
									url: baseUrl + "/system/user/profile/avatar", // 请求地址
									filePath: res.tempFilePaths[0], // 临时文件路径
									name: "avatarfile", // 文件对应的key值
									header: {
											Authorization: token // 需要带的请求头，token等等
									},
									formData: {// 额外的请求数据
									},
									success: (response) => {// 成功后的回调
										console.log('修改成功');
										const data = JSON.parse(response.data)
										cache.session.setJSON('avatar', data.imgUrl)
										this.avatar = data.imgUrl
									}
							})
					}
				})
			},
			close(){
				this.show = false
			},
			showPopup(){
				this.show = true
				this.userName = ""
				this.password = ""
			},
			imgSrc(src) {
				return getImage(src)
			},
			resetPassword(){
				if(this.userName.trim()===""){
					uni.showToast({
						icon:'error',
						title:'请输入工号'
					})
					return
				}
				if(this.password.trim()===""){
					uni.showToast({
						icon:'error',
						title:'请输入工号'
					})
					return
				}
				resetPwd(this.userName,this.password).then(res=>{
					if(res.data.code===200 && res.data.msg==="操作成功"){
						uni.showToast({
							icon:'success',
							title:'重置成功',
							duration:1000,
							success: () => {
								this.show = false
							}
						})
					}
					// console.log(res)
				})
			},
			toPersonInfo(){
				uni.navigateTo({
					url:'/pages/menus/mine/mine'
				})
			},
			toBorrowRecord(){
				uni.switchTab({
					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.switchTab({
											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.switchTab({
											url:'/pages/home/home'
										})	
									}
								})
							}catch(err){
								uni.hideLoading()
							}
							
						} else if (res.cancel) {
							uni.hideLoading()
							console.log('用户点击取消')
						}
						
					}
				})
				//#endif
			}
		},
		onLoad() {
			this.init()
		},
		onShow(){
			this.init()
			this.name = cache.session.getJSON('nickName')
			this.role = cache.session.getJSON('role')
			this.avatar = cache.session.getJSON('avatar')
			this.token = `Bearer ${getToken()}`
		}
	}
</script>

<style lang="scss">
.mine-area{
	// background-color: #225f15;
	// background-image: url('@/static/images/tsg02 (1).jpg');
	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: 5;
}
.avatar-area{
	position: absolute;
	top: 25%;
	left: 20%;
	transform: translateY(-50%);
	
 .img-boxs {
		width: 90px;
		height: 90px;
		border-radius: 100%;
		position: relative;
		overflow: hidden;
		box-shadow: 0 0 0 3px hsla(0,0%,100%,.9);
	}

	.img-boxs image {
		width: 90px;
		height: 90px;
		border-radius: 100%;
		margin-bottom: 10px;
	}

	.img-boxs cover-view {
		width: 90px;
		height: 30px;
		text-align: center;
		color: #fff;
		// background-color: rgba(107, 96, 99, .4);
		position: absolute;
		left: 50%;
		top: 76%;
		font-size: 26rpx;
		transform: translate(-50%, 0);
	}
}

.z10{
	z-index: 10;
}
.menu-area{
	height: 65%;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding: 0 64rpx;
	box-sizing: border-box;
}
.menu-list{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	padding: 20rpx 0 ;
	color: #323538;
	.iconfont{
		font-size: 65rpx;
		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%;

	}
}

.popup-area{
	height: 500rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	.form-area{
		display: flex;
		align-items: center;
		margin-top: 100rpx;
		.form-label{
			// padding: 0 20rpx 0 0;
			display: inline-block;
			width: 140rpx;
			text-align: left;
		}
	}
	.pwd-btn{
		display: flex;
		padding-top: 50rpx;
		/deep/.u-button{
			margin: 30rpx;
		}
	}
}
</style>