Files
app-govern/pages/index/mine.vue
2023-02-06 13:34:15 +08:00

139 lines
4.3 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">工程</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('message')"
>
<image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" />
<view class="mine-nav-label">个人消息</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('message')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<image mode="aspectFill" class="mine-nav-icon" src="/static/message2.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: false
}
},
methods: {
init () {
},
upgrade (code) {
console.log(code);
uni.showToast({
title: '升级成功',
icon: 'none'
})
},
jump (type) {
switch (type) {
case 'login':
uni.navigateTo({
url: `/pages/user/login`
})
break;
case 'upgrade':
this.$refs.inputDialog.open()
break;
default:
uni.navigateTo({
url: `/pages/mine/${type}`
})
break;
}
}
},
onLoad () {
this.init()
},
}
</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>