<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" >
<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 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 { logout,resetPwd } from '@/api/user.js'
import { getImage } from '@/api/visitor.js'
export default {
data() {
return {
src: 'https://tupian.qqw21.com/article/UploadPic/2021-1/20211722215735941.jpg',
name: "",
amount:null,
role:"",
show: false,
userName:"",
password:""
};
},
methods:{
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')
}
}
</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%);
}
.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>