Files
app-govern/pages/index/mine.vue
2023-02-10 16:32:41 +08:00

176 lines
5.4 KiB
Vue

<template>
<view :loading="loading">
<view class="mine">
<view class="mine-header" @click="jump('basic')">
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" />
<view class="mine-header-name hide-txt">
<view>灿能电力</view>
<view class="tag">{{ roleName }}</view>
</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<!-- <view class="mine-nav" @click="jump('upgrade')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view class="mine-nav" @click="jump('user')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
<view class="mine-nav-label">子用户列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('gateway')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<image mode="aspectFill" class="mine-nav-icon" src="/static/gateway.png" />
<view class="mine-nav-label">网关列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('setup')" style="margin-top:20rpx;border-bottom: none; ">
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
<view class="mine-nav-label">设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="角色升级" placeholder="请输入六位邀请码"
@confirm="upgrade"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: true,
userInfo: {}
}
},
computed: {
roleName () {
let roleName = ''
switch (this.userInfo.role) {
case 1:
roleName = '运维管理'
break
case 2:
roleName = '专职管理'
break
case 3:
roleName = '工程'
break
case 4:
roleName = '主用户'
break
case 5:
roleName = '子用户'
break
}
return roleName
}
},
methods: {
init () {
this.loading = false
},
upgrade (code) {
console.log(code);
uni.showToast({
title: '升级成功',
icon: 'none'
})
},
jump (type) {
switch (type) {
case 'login':
uni.navigateTo({
url: `/pages/user/login`
})
break;
case 'gateway':
uni.navigateTo({
url: `/pages/gateway/list`
})
break;
case 'upgrade':
this.$refs.inputDialog.open()
break;
case 'basic':
uni.navigateTo({
url: `/pages/user/basic`
})
break;
break;
default:
uni.navigateTo({
url: `/pages/mine/${type}`
})
break;
}
}
},
onShow () {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
},
}
</script>
<style lang="scss">
.mine {
.mine-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx #e7e7e74c;
.mine-header-head {
margin-right: 30rpx;
height: 128rpx;
width: 128rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
.mine-header-name {
margin-right: 30rpx;
flex: 1;
font-size: 36rpx;
color: #111;
font-weight: 700;
.tag {
margin-top: 10rpx;
font-size: 24rpx;
color: #aaa;
}
}
}
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
}
}
</style>