electronic-store/pages/my/my.vue

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="nav-content">
        <text class="nav-title">我的</text>
      </view>
    </view>

    <!-- 个人信息卡片 -->
    <view class="profile-card">
      <view class="profile-info" @click="goToEditProfile">
        <view class="avatar-section">
          <image 
            :src="userInfo.avatar || '/static/logo.png'" 
            class="avatar"
            mode="aspectFill"
          />
        </view>
        <view class="user-details">
          <text class="username">{{ userInfo.name || '请完善头像、姓名' }}</text>
          <text class="phone">{{ userInfo.phone || '' }}</text>
          <text class="text-green text-24">业务员</text>
        </view>
        <text class="edit-arrow">></text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-section">
      <!-- 个人资料 -->
      <view class="function-group">
        <view class="function-item" @click="goToEditProfile">
          <view class="function-left">
            <image src="/static/tabbar/user.png" class="function-icon" />
            <text class="function-text">个人资料</text>
          </view>
          <view class="function-right">
            <text class="function-desc">完善头像、姓名，显示手机号</text>
            <text class="function-arrow">></text>
          </view>
        </view>
      </view>

      <!-- 邀请记录 -->
      <view class="function-group">
        <view class="function-item" @click="goToInvitationRecord">
          <view class="function-left">
            <image src="/static/images/微信图片_20250806143327_218.png" class="function-icon" />
            <text class="function-text">邀请记录</text>
          </view>
          <view class="function-right">
            <text class="function-desc">查看邀请好友记录及收益</text>
            <text class="function-arrow">></text>
          </view>
        </view>
      </view>

      <!-- 客服联系 -->
      <view class="function-group">
        <view class="function-item" @click="goToCustomerService">
          <view class="function-left">
            <image src="/static/images/微信图片_20250806143327_210.png" class="function-icon" />
            <text class="function-text">联系客服</text>
          </view>
          <view class="function-right">
            <text class="function-desc">可联系平台客服</text>
            <text class="function-arrow">></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      userInfo: {
        name: '',
        phone: '',
        avatar: ''
      }
    }
  },
  onLoad() {
    this.getSystemInfo()
    this.loadUserInfo()
  },
  onShow() {
    this.loadUserInfo()
  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight
    },
    loadUserInfo() {
      // 从本地存储加载用户信息
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = userInfo
      }
    },
    goToEditProfile() {
      uni.navigateTo({
        url: '/pages/editProfile/editProfile'
      })
    },
    goToCustomerService() {
      uni.navigateTo({
        url: '/pages/customerService/customerService'
      })
    },
    goToInvitationRecord() {
      uni.navigateTo({
        url: '/pages/invitationRecord/invitationRecord'
      })
    },
    goToMonthlyReport() {
      uni.navigateTo({
        url: '/pages/monthlyReport/monthlyReport'
      })
    },
    goToYearlyReport() {
      uni.navigateTo({
        url: '/pages/yearlyReport/yearlyReport'
      })
    },
    goToElectricityReport() {
      uni.navigateTo({
        url: '/pages/electricityReport/electricityReport'
      })
    },
    showBannerTip() {
      uni.showToast({
        title: '轮播图功能可通过后台设置',
        icon: 'none',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  background-color: #00923F;
  color: white;
}

.nav-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
}

.profile-card {
  margin: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.profile-info {
  display: flex;
  align-items: center;
}

.avatar-section {
  margin-right: 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #f0f0f0;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.phone {
  font-size: 14px;
  color: #999;
}

.edit-arrow {
  color: #ccc;
  font-size: 16px;
}

.function-section {
  margin: 0 15px;
}

.function-group {
  background-color: white;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
}

.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.function-item:last-child {
  border-bottom: none;
}

.function-left {
  display: flex;
  align-items: center;
}

.function-icon {
  width: 24px;
  height: 24px;
  margin-right: 15px;
}

.function-text {
  font-size: 16px;
  color: #333;
}

.function-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.function-desc {
  font-size: 12px;
  color: #999;
  margin-right: 10px;
  text-align: right;
  max-width: 200px;
}

.function-arrow {
  color: #ccc;
  font-size: 16px;
}
</style>