exhibit-front/subPages/user/profile.vue

<template>
  <view class="profile-page">

    
    <view class="profile-content">
      <!-- 头像上传区域 -->
      <view class="avatar-section">
        <!-- 基本资料标签 -->
        <view class="profile-label">
          <text class="label-text">基本资料</text>
        </view>
        
        <view class="avatar-container" @click="uploadAvatar">
          <image 
            v-if="userInfo.headImage" 
            :src="userInfo.headImage" 
            class="avatar-image"
            mode="aspectFill"
          />
          <view v-else class="avatar-placeholder">
            <image src="@/static/待上传头像.png" class="placeholder-image" mode="aspectFit" />
          </view>
        </view>
        <text class="avatar-tip">点击更换头像</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 昵称 -->
        <view class="form-item">
          <text class="form-label">昵称</text>
          <uv-input 
            v-model="userInfo.nickName" 
            placeholder="请输入" 
            border="none"
            class="form-input"
          ></uv-input>
        </view>
        
        <!-- 手机号 -->
        <view class="form-item">
          <text class="form-label">手机号</text>
          <uv-input 
            v-model="userInfo.phone" 
            placeholder="请输入" 
            border="none"
            class="form-input"
          ></uv-input>
        </view>
      </view>
      
      <!-- 保存按钮 -->
      <view class="save-section">
        <uv-button 
          type="primary" 
          text="保存" 
          @click="saveProfile"
          :custom-style="saveButtonStyle"
        ></uv-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        headImage: '',
        nickName: '',
        phone: ''
      },
      saveButtonStyle: {
        backgroundColor: '#C70019',
        borderRadius: '41rpx',
        height: '94rpx',
        width: '594rpx',
        border: 'none'
      }
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 上传头像
    async uploadAvatar() {
      try {
        const result = await this.$utils.chooseAndUpload()
        if (result && result.success) {
          console.log(result);
          
          this.userInfo.headImage = result.url
        }
      } catch (error) {
        console.error('头像上传失败:', error)
        uni.showToast({
          title: '头像上传失败',
          icon: 'error'
        })
      }
      
    },
    
    // 保存资料
    async saveProfile() {
      if (!this.userInfo.nickName.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
        return
      }
      
      if (!this.userInfo.phone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      // 简单的手机号验证
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(this.userInfo.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // TODO: 调用API保存用户信息
      const res = await this.$api.user.updateUser({
        headImage: this.userInfo.headImage,
        nickName: this.userInfo.nickName,
        phone: this.userInfo.phone
      })
      if (res.code === 200) {
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } 
    },

    // 获取个人信息
    async getProfile() {
      const res = await this.$api.user.queryUser()
      if (res.code === 200) {
        this.userInfo = res.result
      }
    }
  },
  onLoad() {
    this.getProfile()
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  // background-color: #f5f5f5;
}

.profile-content {
  padding:45rpx 32rpx;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
  position: relative;
  
  .profile-label {
    position: absolute;
    top: 0;
    left: 28rpx;
    z-index: 10;
    
    .label-text {
      font-size: 30rpx;
      // font-weight: bold;
      color: $primary-text-color;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        left: -16rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 9rpx;
        height: 33rpx;
        background-color: $primary-color;
        border-radius: 5rpx;
      }
    }
  }
  
  .avatar-container {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20rpx;
    margin-top: 66rpx;
    
    .avatar-image {
      width: 100%;
      height: 100%;
    }
    
    .avatar-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f0f0;
      
      .placeholder-image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
  
  .avatar-tip {
    font-size: 28rpx;
    color: $secondary-text-color;
  }
}

.form-section {
  // background-color: #fff;
  // border-radius: 16rpx;
  padding: 0 32rpx;
  margin-bottom: 500rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    padding: 40rpx 0;
    border-bottom: 0.5rpx solid #f0f0f0;
    
   
    
    .form-label {
      font-size: 30rpx;
      color: $secondary-text-color;
      width: 120rpx;
      flex-shrink: 0;
    }
    
    .form-input {
      flex: 1;
      margin-left: 40rpx;

    }
  }
}

.save-section {
  display: flex;
  justify-content: center;
}
</style>