electronic-store/pages/editProfile/editProfile.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-back" @click="goBack">‹</text>
        <text class="nav-title">修改资料</text>
        <text class="nav-save" @click="saveProfile">保存</text>
      </view>
    </view>

    <!-- 头像设置 -->
    <view class="avatar-section">
      <view class="section-title">头像</view>
      <view class="avatar-container" @click="chooseAvatar">
        <image 
          :src="userInfo.avatar || '/static/logo.png'" 
          class="avatar"
          mode="aspectFill"
        />
        <view class="avatar-overlay">
          <text class="avatar-text">点击更换</text>
        </view>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="form-section">
      <view class="form-item">
        <text class="form-label">姓名</text>
        <input 
          class="form-input" 
          v-model="userInfo.name" 
          placeholder="请输入姓名"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">手机号</text>
        <input 
          class="form-input" 
          v-model="userInfo.phone" 
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">邮箱</text>
        <input 
          class="form-input" 
          v-model="userInfo.email" 
          placeholder="请输入邮箱地址"
          type="email"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">职位</text>
        <input 
          class="form-input" 
          v-model="userInfo.position" 
          placeholder="请输入职位"
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">部门</text>
        <input 
          class="form-input" 
          v-model="userInfo.department" 
          placeholder="请输入部门"
        />
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-section">
      <button class="save-btn" @click="saveProfile">保存修改</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      userInfo: {
        name: '',
        phone: '',
        email: '',
        position: '',
        department: '',
        avatar: ''
      }
    }
  },
  onLoad() {
    this.getSystemInfo()
    this.loadUserInfo()
  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight
    },
    loadUserInfo() {
      // 从本地存储加载用户信息
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = { ...this.userInfo, ...userInfo }
      }
    },
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
        },
        fail: (err) => {
          console.log('选择图片失败:', err)
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },
    saveProfile() {
      // 验证必填字段
      if (!this.userInfo.name.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
      }
      
      // 验证邮箱格式（如果填写了邮箱）
      if (this.userInfo.email && this.userInfo.email.trim()) {
        const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
        if (!emailReg.test(this.userInfo.email)) {
          uni.showToast({
            title: '请输入正确的邮箱地址',
            icon: 'none'
          })
          return
        }
      }
      
      // 保存到本地存储
      uni.setStorageSync('userInfo', this.userInfo)
      
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
      
      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

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

.nav-bar {
  background-color: #007aff;
  color: white;
}

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

.nav-back {
  font-size: 24px;
  font-weight: bold;
  width: 60px;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.nav-save {
  font-size: 16px;
  width: 60px;
  text-align: right;
}

.avatar-section {
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  display: inline-block;
}

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

.avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 50px 50px;
  padding: 5px;
}

.avatar-text {
  color: white;
  font-size: 12px;
}

.form-section {
  background-color: white;
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

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

.form-label {
  width: 80px;
  font-size: 16px;
  color: #333;
}

.form-input {
  flex: 1;
  font-size: 16px;
  color: #333;
  text-align: right;
}

.save-section {
  margin: 30px 15px;
}

.save-btn {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 25px;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
}

.save-btn:active {
  background-color: #0056cc;
}
</style>