Dining_Hall/pages/mine/me/basicInfo.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="header">-->
<!--      <view class="back-icon" @click="goBack">-->
<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
<!--      </view>-->
<!--      <text class="title">基本信息</text>-->
<!--    </view>-->

    <!-- 个人信息表单 -->
    <view class="form-container">
      <!-- 头像区域 -->
      <view class="avatar-section" @click="handleUpdateAvatar">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="camera-icon">
          <image class="icon" :src="require('@/static/images/my/camera.png')" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 信息列表 -->
      <view class="info-list">
        <!-- 姓名 -->
        <view class="info-item" @click="navigateTo('/pages/edit-name/index')">
          <text class="label">姓名</text>
          <view class="value-wrapper">
            <text class="value">冯武鹏</text>
            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
          </view>
        </view>

        <!-- 手机号 -->
        <view class="info-item" @click="navigateTo('/pages/mine/me/bindingPhone')">
          <text class="label">手机号</text>
          <view class="value-wrapper">
            <text class="value">18407028572</text>
            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
          </view>
        </view>

        <!-- 生日 -->
        <view class="info-item" @click="navigateTo('/pages/edit-birthday/index')">
          <text class="label">生日</text>
          <view class="value-wrapper">
            <text class="value placeholder">填写生日完善信息</text>
            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: require('@/static/images/my/face.png'),
        name: '冯武鹏',
        phone: '18407028572',
        birthday: ''
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    },
    handleUpdateAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 这里可以处理选择的图片，比如上传到服务器
          this.userInfo.avatar = res.tempFilePaths[0]
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #FBFCFF;
}

.form-container {
  padding: 32rpx;
  background-color: #FBFCFF;
}

.avatar-section {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin: 50rpx auto 48rpx;

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .camera-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48rpx;
    height: 48rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    .icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.info-list {
  background: #fff;
  border-radius: 16rpx;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #FFFFFF;

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

    .label {
      font-size: 32rpx;
      color: #333;
    }

    .value-wrapper {
      display: flex;
      align-items: center;

      .value {
        font-size: 32rpx;
        color: #333;
        margin-right: 16rpx;

        &.placeholder {
          color: #999;
        }
      }

      .arrow-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>