community-front/subPages/my/myProfile.vue

<template>
  <view class="profile-container">
    
    <!-- 基本资料 -->
    <view class="section">
      <view class="section-title">
        <!-- 小竖线 -->
        <view class="vertical-line"></view>
        <view>
          <text class="title-text">基本资料</text>
        </view>
      </view>
      
      <!-- 头像 -->
      <view class="avatar-section">
        <button 
          class="avatar-button" 
          open-type="chooseAvatar" 
          @chooseavatar="onChooseAvatar"
        >
          <image 
            class="avatar" 
            :src="userInfo.headImage || '/static/待上传头像.png'" 
            mode="aspectFill"
          ></image>
        </button>
        <text class="avatar-tip">点击更换头像</text>
      </view>
      
      <!-- 昵称 -->
      <view class="info-item">
        <text class="label">真实姓名</text>
        <view class="value-container">
          <input 
            class="nickname-input" 
            v-model="userInfo.name" 
            placeholder="请输入"
          />
        </view>
      </view>
      <view class="info-item">
        <text class="label">昵称</text>
        <view class="value-container">
          <input 
            class="nickname-input" 
            v-model="userInfo.nickName" 
            placeholder="请输入"
            type="nickname"
            @blur="onNicknameBlur"
          />
        </view>
      </view>
      
      <!-- 手机号 -->
      <view class="info-item">
        <text class="label">手机号</text>
        <view class="value-container">
          <input 
            class="phone-input" 
            v-model="userInfo.phone" 
            placeholder="请输入"
            type="number"
            maxlength="11"
          />
        </view>
      </view>
      
      <!-- 宿集区选择器 -->
      <view class="info-item">
        <text class="label">宿集区</text>
        <view class="value-container">

        <view class="picker-display" @click="showPicker">
          <text class="picker-text" :class="{placeholder: !userInfo.area}">{{ userInfo.area || '请选择宿集区' }}</text>
          <!-- <text class="picker-arrow">></text> -->
        </view>

        </view>
      </view>
      
      <view class="info-item">
        <text class="label">地址</text>
        <view class="value-container">
          <input 
            class="address-input" 
            v-model="userInfo.address" 
            :placeholder="configParamText('config_rubric')"
            type="text"
            maxlength="11"
          />
        </view>
      </view>

    </view>
    
    <!-- 保存按钮 -->
    <view class="save-section">
      <button class="save-button" @click="saveProfile">
        保存
      </button>
    </view>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
  </view>
</template>

<script>
export default {
  name: 'MyProfile',
  data() {
    return {
      userInfo: {
        headImage: '',
        nickName: '',
        phone: '',
        address: '',
        area: '',
        name: ''
      }
    }
  },
  computed: {
    columns() {
      return [[...this.$store.state.areaList?.map(item => item.title)]] || [[]]
    }
  },
  methods: {
    showPicker(){
      this.$refs.picker.open()
    },
    confirm(e){
      console.log('我是地区列表',this.columns);
      
      // this.selectedAreaText = e.detail.value[0]
      this.userInfo.area = e.value[0]
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    
    // 选择微信头像
    async onChooseAvatar(e) {
      console.log('选择头像回调', e);
      if (e.detail.avatarUrl) {
        const file = {
          path: e.detail.avatarUrl
        }
        const res = await this.$utils.uploadImage(file)
        this.userInfo.headImage = res.url
        
        uni.showToast({
          title: '头像更新成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '头像选择失败',
          icon: 'none'
        });
      }
    },
    
    // 昵称输入失焦验证
    onNicknameBlur() {
      if (!this.userInfo.nickName.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        });
      }
    },
    
    // 保存资料
    async saveProfile() {
      // 验证昵称
      if (!this.userInfo.nickName.trim()) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        });
        return;
      }
      
      // 验证手机号（如果填写了）
      if (this.userInfo.phone && !/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
    

      const res = await this.$api.user.updateUser({
        nickName: this.userInfo.nickName,
        phone: this.userInfo.phone,
        headImage: this.userInfo.headImage,
        address: this.userInfo.address,
        name: this.userInfo.name,
        area: this.userInfo.area
      })
      if (res.code === 200) {
        uni.showToast({
          title: `${res.message}`,
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 1000);
      }
    },

    // 获取个人信息
    async getUserInfo() {
      const res = await this.$api.user.queryUser()
      this.userInfo = {...this.userInfo, ...res.result}
      if (!userInfo.area) {
        userInfo.area = ''
      }
    }
  },
  onLoad() {
    if (uni.getStorageSync('token')) {
      this.getUserInfo();
    }else {
      uni.redirectTo({
        url: '/subPages/login/login'
      })
    }
  }
}
</script>

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

.vertical-line {
  width: 9rpx;
  height: 33rpx;
  background-color: #1488DB;
  margin-right: 20rpx;
}

// 自定义导航栏
.custom-navbar {
  background: linear-gradient(90deg, #1488db 0%, #1488db 100%);
  padding-top: var(--status-bar-height, 44rpx);
  
  .navbar-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    
    .navbar-left {
      .back-icon {
        font-size: 40rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }
    
    .navbar-title {
      font-size: 36rpx;
      color: #ffffff;
      font-weight: 500;
    }
    
    .navbar-right {
      display: flex;
      gap: 20rpx;
      
      .more-icon,
      .settings-icon {
        font-size: 32rpx;
        color: #ffffff;
      }
    }
  }
}

.section {
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  
  .section-title {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .avatar-button {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    outline: none;
    margin-bottom: 20rpx;
    
    &::after {
      border: none;
    }
    
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 80rpx;
      border: 4rpx dashed #cccccc;
    }
  }
  
  .avatar-tip {
    font-size: 26rpx;
    color: #999999;
  }
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
    width: 120rpx;
  }
  
  .value-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    .nickname-input,
    .phone-input,
    .address-input {
      width: 100%;
      text-align: right;
      font-size: 30rpx;
      color: #666666;
      border: none;
      outline: none;
      background: transparent;
      
      &::placeholder {
        color: #cccccc;
      }
    }
  }
}

.save-section {
  padding: 40rpx 20rpx;
  
  .save-button {
    width: 100%;
    height: 88rpx;
    background-color: #1488db;
    border-radius: 44rpx;
    border: none;
    outline: none;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &::after {
      border: none;
    }
  }
}
</style>