xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/edit-profile.vue

<template>
  <view class="edit-profile" :class="{ 'dark-mode': isDarkTheme }">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">编辑资料</text>
      <view class="placeholder"></view>
    </view>

    <scroll-view scroll-y class="content">
      <view class="card">
        <!-- 头像区域 -->
        <view class="avatar-section">
          <view class="avatar-circle">
            <image v-if="form.avatar" :src="form.avatar" class="avatar-img" mode="aspectFill" />
            <view v-else class="avatar-placeholder">👩</view>
            <view class="camera-btn" @click="changeAvatar">
              <text class="camera-icon">📷</text>
            </view>
          </view>
          <text class="change-avatar-text" @click="changeAvatar">更换头像</text>
        </view>

        <!-- 表单项 -->
        <view class="form-group">
          <text class="label">姓名</text>
          <input class="input" v-model="form.name" placeholder="请输入姓名" />
        </view>

        <view class="form-group">
          <text class="label">性别</text>
          <picker mode="selector" :range="genderOptions" :value="genderIndex" @change="onGenderChange">
            <view class="input picker-value">{{ form.gender || '请选择性别' }}</view>
          </picker>
        </view>

        <view class="form-group">
          <text class="label">手机号</text>
          <input class="input" v-model="form.phone" placeholder="请输入手机号" type="number" maxlength="11" />
        </view>

        <view class="form-group">
          <text class="label">红娘等级</text>
          <view class="input readonly">
            <text class="level-icon">🏅</text>
            <text class="level-text">{{ form.level || '金牌红娘' }}</text>
          </view>
        </view>

        <view class="form-group">
          <text class="label">个人简介</text>
          <textarea class="textarea" v-model="form.bio" placeholder="请输入个人简介..." />
        </view>

        <view class="save-btn" @click="handleSave">保存</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'matchmaker-edit-profile',
  data() {
    return {
      isDarkTheme: false,
      genderOptions: ['女', '男'],
      genderIndex: 0,
      form: {
        avatar: '',
        name: '高红娘',
        gender: '女',
        phone: '',
        level: '金牌红娘',
        bio: '我是一名专业的红娘，拥有丰富的婚恋服务经验，已成功帮助1200对单身男女找到幸福。'
      }
    }
  },
  onShow() {
    const stored = uni.getStorageSync('matchmakerDarkMode')
    if (stored === true || stored === false) {
      this.isDarkTheme = stored
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    changeAvatar() {
      uni.showToast({ title: '更换头像开发中', icon: 'none' })
    },
    onGenderChange(e) {
      const index = Number(e.detail.value)
      this.genderIndex = index
      this.form.gender = this.genderOptions[index]
    },
    handleSave() {
      uni.showToast({ title: '已保存', icon: 'success' })
      // 这里可以接入实际保存接口
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile {
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  padding-top: calc(25rpx + env(safe-area-inset-top));
  background: #E9D7F5;

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .back-icon {
      font-size: 40rpx;
      color: #333;
      font-weight: bold;
    }
  }

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .placeholder {
    width: 60rpx;
  }
}

.content {
  flex: 1;
  padding: 20rpx 20rpx 40rpx;
}

.card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 30rpx 24rpx 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;

  .avatar-circle {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    border: 4rpx solid #E1D5FA;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .avatar-img,
    .avatar-placeholder {
      width: 130rpx;
      height: 130rpx;
      border-radius: 50%;
      background: #F5F5F5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 64rpx;
    }

    .camera-btn {
      position: absolute;
      right: 0;
      bottom: 10rpx;
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: #9C27B0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.4);

      .camera-icon {
        font-size: 26rpx;
        color: #FFF;
      }
    }
  }

  .change-avatar-text {
    margin-top: 16rpx;
    font-size: 26rpx;
    color: #9C27B0;
  }
}

.form-group {
  margin-top: 20rpx;

  .label {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .input {
    width: 100%;
    padding: 18rpx 20rpx;
    border-radius: 16rpx;
    background: #F7F7F9;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }

  .picker-value {
    line-height: 1.4;
  }

  .readonly {
    display: flex;
    align-items: center;
    gap: 8rpx;

    .level-icon { font-size: 30rpx; }
    .level-text { font-size: 28rpx; color: #333; }
  }

  .textarea {
    width: 100%;
    min-height: 160rpx;
    padding: 18rpx 20rpx;
    border-radius: 16rpx;
    background: #F7F7F9;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
  }
}

.save-btn {
  margin-top: 30rpx;
  width: 100%;
  padding: 22rpx 0;
  text-align: center;
  border-radius: 26rpx;
  background: linear-gradient(135deg, #F48FB1 0%, #EC407A 100%);
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: bold;
}

/* 深色模式适配 */
.edit-profile.dark-mode {
  background: #121212;
  color: #f5f5f5;

  .header {
    background: #1f1f1f;

    .back-icon,
    .header-title {
      color: #f5f5f5;
    }
  }

  .content {
    background: #121212;
  }

  .card {
    background: #1e1e1e;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
  }

  .form-group {
    .label { color: #b0b0b0; }
    .input,
    .textarea,
    .readonly {
      background: #242424;
      color: #f5f5f5;
    }
  }

  .change-avatar-text { color: #c792ea; }
}
</style>