<template>
|
<view class="user" :style="{paddingTop:topHeight + 'rpx'}">
|
<view class="content">
|
<view class="user" @click="setUser">
|
<view class="userImg">
|
<image :src="userInfo?.headImg ? userInfo.headImg : defaultImg" mode="widthFix"></image>
|
</view>
|
<view class="info">
|
<text class="name">{{userInfo?.nickName ? userInfo.nickName : '用户'}}</text>
|
</view>
|
</view>
|
<view class="typeList">
|
<view class="typeItem">
|
<view class="name">剩余水量</view>
|
<view class="val">{{userInfo?.balance}}m³</view>
|
</view>
|
<view class="typeItem">
|
<view class="name">总购水量</view>
|
<view class="val">{{userInfo?.sumBuyCount}}m³</view>
|
</view>
|
<view class="typeItem">
|
<view class="name">累计水量</view>
|
<view class="val">{{userInfo?.sumUseCount}}m³</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";
|
import { onShow } from "@dcloudio/uni-app"
|
import defaultImg from '../../static/images/default-head.png'
|
|
const topHeight = ref(0)
|
const userInfo = ref()
|
|
// 获取状态栏高度
|
const getTopHeight = () => {
|
if(uni.getMenuButtonBoundingClientRect){
|
topHeight.value = uni.getMenuButtonBoundingClientRect().bottom * 2
|
}
|
}
|
|
const setUser = () => {
|
uni.navigateTo({
|
url: '/pages/userSet/index'
|
})
|
}
|
|
// 退出登录
|
const loginOut = () => {
|
uni.showModal({
|
title: '温馨提示',
|
content: '确认退出登录？',
|
success: (res) => {
|
if(res.confirm){
|
uni.removeStorageSync('openId')
|
uni.removeStorageSync('token')
|
uni.navigateTo({
|
url: '/pages/login/index'
|
})
|
}
|
}
|
})
|
}
|
|
onShow(() => {
|
userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
|
})
|
|
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%;
|
height: 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>
|
