property-manager-side/wuye-manager-uniapp/pages/my/my.vue

<template>
  <view class="contentStyle" style="">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <uni-nav-bar title="我的" backgroundColor="transparent" :border="false"> </uni-nav-bar>
    <scroll-view class="page" scroll-y>
      <view class="topBox">
        <view class="name">
          <image :src="avatar" class="img" />
          <span style="padding: 5rpx 5rpx; display: flex; flex-direction: column; line-height: 60rpx">
            <span style="font-size: 36rpx; font-weight: 600">
              {{ loginName }}
            </span>
            <span style="font-size: 26rpx; color: #666666">
              {{ phoneNum }}
            </span>
          </span>
        </view>
      </view>
      <view class="contentBox">
        <div class="page-container">
          <view class="list-container">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
              <image :src="item.icon" class="item-icon" />
              <view class="item-content">
                <text class="item-title">{{ item.title }}</text>
              </view>
              <view class="item-arrow"></view>
              <!-- <image src="https://wuyeadmin.bugtc.com/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
            </view>
          </view>
        </div>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
  import {
    ref
  } from 'vue'
  import {
    onShow
  } from '@dcloudio/uni-app'
  import {
    getSettingInfo
  } from '../../api/api.js'

  const list = ref([{
      icon: 'https://wuyeadmin.bugtc.com/images/imgs/shangbao.png',
      title: '上报记录'
    },
    {
      icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png',
      title: '巡检记录'
    },
    {
      icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png',
      title: '仪表换新'
    },
    {
      icon: 'https://wuyeadmin.bugtc.com/images/propertyImgs/setting.png',
      title: '设置'
    }
  ])
  const loginName = ref('')
  const phoneNum = ref('')
  const avatar = ref('')
  const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)

  // 获取管家信息
  const fetchUserInfo = () => {
    getSettingInfo().then(res => {
      if (res.code === 200 && res.data) {
        loginName.value = res.data.nickName || ''
        phoneNum.value = res.data.phonenumber || ''
        avatar.value = res.data.avatar
      }
    }).catch(err => {
      uni.showToast({
        title: err.msg || '获取失败',
        icon: 'none'
      })
    })
  }

  onShow(() => {
    fetchUserInfo()
  })

  // --方法----
  const goToDetail = () => {
    uni.navigateTo({
      url: '/pageSubPack/notice-list/noticeListDetails'
    })
  }
  // 返回
  const onItemClick = item => {
    if (item.title == '上报记录') {
      uni.navigateTo({
        url: '/pageSubPack/report-record/report-record'
      })
    } else if (item.title == '巡检记录') {
      uni.navigateTo({
        url: '/pageSubPack/inspection/inspection_record'
      })
    } else if (item.title == '仪表换新') {
      uni.navigateTo({
        url: '/pageSubPack/instrument/replacement_record'
      })
    } else if (item.title == '设置') {
      uni.redirectTo({
        url: '/pageSubPack/setting/setting'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .contentStyle {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
  }

  .topBox {
    width: 100%;
    padding: 20rpx 0px;
    position: relative;
    // background-color: #1A75FF;
  }

  .titleBox {
    width: 100%;

    position: relative;

    .title {
      font-size: 36rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 500;
    }

    .settingImg {
      width: 48rpx;
      height: 48rpx;
      top: 16rpx;
      right: 0px;
    }
  }

  .img {
    width: 60px;
    height: 60px;
    margin-right: 10rpx;
    border-radius: 50%;
  }

  .name {
    bottom: 30rpx;
    left: 30rpx;
    display: flex;
    align-items: center;
  }

  .contentBox {
    position: relative;
  }

  .status-bar {
    width: 100vw;
    // height: 46px;
    height: var(--status-bar-height);
    flex-shrink: 0;
  }
  ::v-deep .uni-nav-bar-text{
    font-size: 32rpx !important;
  }

  .list-item {
    display: flex;
    align-items: center;
    /* background: #fff; */
    padding: 20rpx 6rpx;
    border-radius: 8rpx;
    /* border-bottom:2rpx solid #f2f2f2; */
    /* margin-bottom: 10rpx; */
  }

  .item-icon {
    width: 84rpx;
    height: 84rpx;
    /* margin-right: 20rpx; */
  }

  .item-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .item-title {
    font-size: 32rpx;
    /* color: #333; */
    font-weight: 400;
    margin: 10rpx 20rpx;
    /* margin-bottom: 6rpx; */
  }

  .item-desc {
    font-size: 24rpx;
    color: #b5b5b5;
    white-space: nowrap;
    /* 强制不换行 */
    overflow: hidden;
    /* 超出隐藏 */
    text-overflow: ellipsis;
  }

  .item-arrow {
    width: 16rpx;
    height: 16rpx;
    border-right: 3rpx solid #999999;
    border-bottom: 3rpx solid #999999;
    transform: rotate(-45deg);
    margin-right: 10rpx;
  }

  .page {
    flex: 1;
    overflow-y: auto;
    padding: 0px 40rpx;
    box-sizing: border-box;
  }
</style>