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

<template>
  <view class="content-style">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <uni-nav-bar title="我的" backgroundColor="transparent" :border="false" />
    <scroll-view class="page" scroll-y>
      <view class="user-card">
        <image src="https://wuyeadmin.bugtc.com/images/guanjia-logo.png" class="avatar" />
        <view class="user-info">
          <text class="user-name">{{ loginName }}</text>
          <text class="user-phone">{{ phoneNum }}</text>
        </view>
      </view>
      <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" />
          <text class="item-title">{{ item.title }}</text>
          <view class="item-arrow"></view>
        </view>
      </view>
    </scroll-view>
    <!-- 底部备案号展示 -->
    <view class="icp-footer">
    	<text class="icp-text">ICP备案号：鲁ICP备2024131497号-5A</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getSettingInfo } from '../../api/api.js'

// const defaultAvatar = 'https://wuyeadmin.bugtc.com/images/imgs/default-avatar.png'

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://wuye.ckdzkj.com/images/home/updateDevice.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 onItemClick = item => {
  const routes = {
    上报记录: '/pageSubPack/report-record/report-record',
    巡检记录: '/pageSubPack/inspection/inspection_record',
    仪表换新: '/pageSubPack/instrument/replacement_record',
    设置: '/pageSubPack/setting/setting'
  }
  const url = routes[item.title]
  if (!url) return
  if (item.title === '设置') {
    uni.redirectTo({ url })
  } else {
    uni.navigateTo({ url })
  }
}
</script>

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

.status-bar {
  width: 100%;
  flex-shrink: 0;
}

:deep(.uni-nav-bar-text) {
  font-size: 32rpx !important;
}

.page {
  flex: 1;
  padding: 0 40rpx;
  box-sizing: border-box;
}

.user-card {
  display: flex;
  align-items: center;
  padding: 40rpx 0;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  background-color: #eee;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}
.user-info > .user-name:not(:last-child) {
  margin-right: 8rpx;
}
.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.user-phone {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

.list-container {
  margin-top: 20rpx;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  // border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    opacity: 0.7;
  }
}

.item-icon {
  width: 84rpx;
  height: 84rpx;
  flex-shrink: 0;
}

.item-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: 400;
  margin-left: 20rpx;
}

.item-arrow {
  width: 16rpx;
  height: 16rpx;
  border-right: 3rpx solid #999;
  border-bottom: 3rpx solid #999;
  transform: rotate(-45deg);
  margin-right: 10rpx;
  flex-shrink: 0;
}
	.icp-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.icp-text {
		font-size: 22rpx;
		color: #999999;
	}
</style>