fix:修改默认头像

web

2025-07-11 ae00f214aaeb74d8f3c8e9c6fb0a8c793816f892

 pages/user/index.vue

@@ -1,23 +1,30 @@
<template>
   <view class="user" :style="{paddingTop:topHeight + 'rpx'}">
      <view class="content">
         <view class="userInfo">
         <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">
               <view class="name">张三</view>
               <view class="balance">余额：233.5</view>
               <text class="name">{{userInfo?.nickName ? userInfo.nickName : '用户'}}</text>
            </view>
         </view>
         <view class="typeList">
            <view class="typeItem">
               <view class="name">充值记录</view>
               <uni-icons type="right" size="20"></uni-icons>
               <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 type="primary" plain>退出登录</button>
            <button class="btn" type="primary" plain @click="loginOut">退出登录</button>
         </view>
      </view>
   </view>
@@ -25,15 +32,45 @@

<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()
   
   // 获取状态栏高度
   function getTopHeight(){
   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()
@@ -42,28 +79,24 @@

<style lang="scss" scoped>
   .content{
      padding: 20rpx;
      .userInfo{
      padding: 0 32rpx;
      .user{
         height: 100rpx;
         display: flex;
         align-items: center;
         padding: 40rpx;
         background: linear-gradient(90deg, #CCCCCC, #CCFFFF);
         border-radius: 20rpx;
         .userImg{
            flex-shrink: 0;
            width: 100rpx;
            height: 100rpx;
            margin-right: 40rpx;
            width: 80rpx;
            height: 80rpx;
            image{
               width: 100%;
               border-radius: 10rpx;
               height: 100%;
               border-radius: 50%;
            }
         }
         .info{
            flex-grow: 1;
            font-size: 36rpx;
            .balance{
               font-weight: bold;
            margin-left: 30rpx;
            .name{
               vertical-align: text-bottom;
            }
         }
      }
@@ -78,11 +111,11 @@
         }
      }
      .loginOut{
         margin-top: 400rpx;
         // button{
         //    color: $uni-base-color;
         //    border-color: $uni-base-color;
         // }
         margin-top: 200rpx;
         .btn{
            color: $uni-base-color;
            border-color: $uni-base-color;
         }
      }
   }
</style>