web
2025-07-11 ae00f214aaeb74d8f3c8e9c6fb0a8c793816f892
pages/user/index.vue
@@ -1,18 +1,26 @@
<template>
   <view class="user" :style="{paddingTop:topHeight + 'rpx'}">
      <view class="content">
         <view class="user">
         <view class="user" @click="setUser">
            <view class="userImg">
               <image src="/static/images/login/wx.png" mode="widthFix"></image>
               <image :src="userInfo?.headImg ? userInfo.headImg : defaultImg" mode="widthFix"></image>
            </view>
            <view class="info">
               <text class="name">张三</text>
               <text class="name">{{userInfo?.nickName ? userInfo.nickName : '用户'}}</text>
            </view>
         </view>
         <view class="typeList">
            <view class="typeItem">
               <view class="name">剩余水量</view>
               <view class="val">750m³</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">
@@ -24,14 +32,23 @@
<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'
      })
   }
   
   // 退出登录
@@ -51,6 +68,10 @@
      })
   }
   
   onShow(() => {
      userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
   })
   onMounted(() => {
      getTopHeight()
   })
@@ -68,6 +89,7 @@
            height: 80rpx;
            image{
               width: 100%;
               height: 100%;
               border-radius: 50%;
            }
         }