<template>
|
<view class="user" :style="{paddingTop:topHeight + 'rpx'}">
|
<view class="content">
|
<view class="user">
|
<view class="userImg">
|
<image src="/static/images/login/wx.png" mode="widthFix"></image>
|
</view>
|
<view class="info">
|
<text class="name">张三</text>
|
</view>
|
</view>
|
<view class="typeList">
|
<view class="typeItem">
|
<view class="name">剩余水量</view>
|
<view class="val">750m³</view>
|
</view>
|
</view>
|
<view class="loginOut">
|
<button class="btn" type="primary" plain @click="loginOut">退出登录</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from "vue";
|
|
const topHeight = ref(0)
|
|
// 获取状态栏高度
|
const getTopHeight = () => {
|
if(uni.getMenuButtonBoundingClientRect){
|
topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
|
}
|
}
|
|
// 退出登录
|
const loginOut = () => {
|
uni.showModal({
|
title: '温馨提示',
|
content: '确认退出登录？',
|
success: (res) => {
|
if(res.confirm){
|
uni.removeStorageSync('openId')
|
uni.removeStorageSync('token')
|
uni.navigateTo({
|
url: '/pages/login/index'
|
})
|
}
|
}
|
})
|
}
|
|
onMounted(() => {
|
getTopHeight()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.content{
|
padding: 0 32rpx;
|
.user{
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
.userImg{
|
width: 80rpx;
|
height: 80rpx;
|
image{
|
width: 100%;
|
border-radius: 50%;
|
}
|
}
|
.info{
|
margin-left: 30rpx;
|
.name{
|
vertical-align: text-bottom;
|
}
|
}
|
}
|
.typeList{
|
margin-top: 30rpx;
|
.typeItem{
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #dddddd;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
.loginOut{
|
margin-top: 200rpx;
|
.btn{
|
color: $uni-base-color;
|
border-color: $uni-base-color;
|
}
|
}
|
}
|
</style>
|
