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

<template>
  <view class="edit-profile">
  <!-- 顶部导航栏 -->
  <view class="header">
    <view class="back-btn" @click="handleBack">
      <text class="back-icon">←</text>
    </view>
    <text class="header-title">编辑资料</text>
    <view class="right-empty"></view>
  </view>

  <scroll-view scroll-y class="content">
    <!-- 头像上传区域 -->
    <view class="avatar-section">
      <view class="avatar-container">
        <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
        <view class="avatar-upload-btn" @click="handleAvatarUpload">
          <text class="upload-icon">📷</text>
        </view>
      </view>
      <text class="avatar-text">更换头像</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 姓名 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">👤</text>
          <text class="label-text">姓名</text>
        </view>
        <input
            class="form-input"
            v-model="userInfo.name"
            placeholder="请输入姓名"
            placeholder-style="color: #999"
        >
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">⚧️</text>
          <text class="label-text">性别</text>
        </view>
        <picker class="form-picker gender-picker" @change="handleGenderChange" :value="genderIndex"
                :range="genderOptions">
          <view class="picker-content">
            {{ userInfo.gender || '请选择性别' }}
          </view>
        </picker>
      </view>

      <!-- 个人简介 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">📝</text>
          <text class="label-text">个人简介</text>
        </view>
        <textarea
            class="form-textarea"
            v-model="userInfo.bio"
            placeholder="请输入个人简介"
            placeholder-style="color: #999"
            maxlength="200"
            auto-height
        ></textarea>
      </view>

      <!-- 邮箱 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">📧</text>
          <text class="label-text">邮箱</text>
        </view>
        <input
            class="form-input"
            v-model="userInfo.email"
            placeholder="请输入邮箱"
            placeholder-style="color: #999"
            type="email"
        >
      </view>

      <!-- 省市区选择 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">📍</text>
          <text class="label-text">所在地区</text>
        </view>
        <picker
            class="form-picker"
            mode="multiSelector"
            :value="multiIndex"
            :range="multiArray"
            @columnchange="handleColumnChange"
            @change="handleMultiPickerChange"
        >
          <view class="picker-content">{{ selectedArea || '请选择地区' }}</view>
        </picker>
      </view>

      <!-- 详细地址 -->
      <view class="form-item">
        <view class="form-label">
          <text class="label-icon">🏠</text>
          <text class="label-text">详细地址</text>
        </view>
        <textarea
            class="form-textarea"
            v-model="userInfo.address_detail"
            placeholder="请输入详细地址"
            placeholder-style="color: #999"
            maxlength="255"
            auto-height
        ></textarea>
      </view>
    </view>

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

<script>
export default {
  data() {
    return {
      // 默认头像
      defaultAvatar: 'https://q.qlogo.cn/qqapp/1105591438/05E13358B43B3D39D6AC2D6888828201/100',

      // 用户信息
      userInfo: {
        avatar: '',
        name: '',
        gender: '',
        bio: '我是一名专业的红娘，拥有丰富的婚恋服务经验，已成功帮助1200对单身男女找到幸福。',
        email: '',
        province_id: '',
        city_id: '',
        area_id: '',
        address_detail: '',
        province_name: '',
        city_name: '',
        area_name: ''
      },

      // 省市区多列选择器数据
      multiArray: [
        ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
        ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市'],
        ['竞秀区', '莲池区', '满城区', '清苑区', '徐水区', '涞水县']
      ],
      multiIndex: [0, 0, 0],
      selectedArea: '',

      // 省市区详细数据（用于动态加载）
      areaData: {
        '北京市': {
          '北京市': ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山区']
        },
        '天津市': {
          '天津市': ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区']
        },
        '河北省': {
          '石家庄市': ['长安区', '桥西区', '新华区', '井陉矿区', '裕华区', '藁城区'],
          '唐山市': ['路南区', '路北区', '古冶区', '开平区', '丰南区', '丰润区'],
          '秦皇岛市': ['海港区', '山海关区', '北戴河区', '抚宁区', '青龙满族自治县'],
          '邯郸市': ['邯山区', '丛台区', '复兴区', '峰峰矿区', '肥乡区', '永年区'],
          '邢台市': ['桥东区', '桥西区', '邢台县', '临城县', '内丘县', '柏乡县'],
          '保定市': ['竞秀区', '莲池区', '满城区', '清苑区', '徐水区', '涞水县']
        },
        '山西省': {
          '太原市': ['小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区', '晋源区']
        },
        '内蒙古自治区': {
          '呼和浩特市': ['新城区', '回民区', '玉泉区', '赛罕区', '土默特左旗']
        }
      },

      // 性别选项
      genderOptions: ['男', '女'],
      genderIndex: 0
    }
  },
  onLoad() {
    // 从本地存储获取用户信息
    this.loadUserInfo()
  },
  methods: {
    // 加载用户信息
    loadUserInfo() {
      const userInfo = uni.getStorageSync('matchmakerUserInfo')
      if (userInfo) {
        this.userInfo = {...this.userInfo, ...userInfo}
        // 设置性别索引
        this.genderIndex = this.genderOptions.indexOf(this.userInfo.gender) || 0

        // 如果有省市区信息，设置选中的区域文本
        if (this.userInfo.province_name && this.userInfo.city_name && this.userInfo.area_name) {
          this.selectedArea = `${this.userInfo.province_name} ${this.userInfo.city_name} ${this.userInfo.area_name}`

          // 设置对应的索引
          const provinceIndex = this.multiArray[0].indexOf(this.userInfo.province_name)
          if (provinceIndex !== -1) {
            this.multiIndex[0] = provinceIndex
            // 更新城市列表
            this.updateCityList(provinceIndex)

            const cityIndex = this.multiArray[1].indexOf(this.userInfo.city_name)
            if (cityIndex !== -1) {
              this.multiIndex[1] = cityIndex
              // 更新区县列表
              this.updateAreaList(provinceIndex, cityIndex)

              const areaIndex = this.multiArray[2].indexOf(this.userInfo.area_name)
              if (areaIndex !== -1) {
                this.multiIndex[2] = areaIndex
              }
            }
          }
        }
      }
    },

    // 更新城市列表
    updateCityList(provinceIndex) {
      const province = this.multiArray[0][provinceIndex]
      const cities = Object.keys(this.areaData[province] || {})
      this.multiArray[1] = cities
      this.multiIndex[1] = 0
      this.updateAreaList(provinceIndex, 0)
    },

    // 更新区县列表
    updateAreaList(provinceIndex, cityIndex) {
      const province = this.multiArray[0][provinceIndex]
      const city = this.multiArray[1][cityIndex]
      const areas = this.areaData[province]?.[city] || []
      this.multiArray[2] = areas
      this.multiIndex[2] = 0
    },

    // 处理列变化
    handleColumnChange(e) {
      const column = e.detail.column
      const value = e.detail.value
      this.multiIndex[column] = value

      // 根据列索引更新对应的数据
      if (column === 0) {
        // 省份变化，更新城市和区县
        this.updateCityList(value)
      } else if (column === 1) {
        // 城市变化，更新区县
        this.updateAreaList(this.multiIndex[0], value)
      }
    },

    // 处理多列选择器确认
    handleMultiPickerChange(e) {
      this.multiIndex = e.detail.value
      const province = this.multiArray[0][this.multiIndex[0]]
      const city = this.multiArray[1][this.multiIndex[1]]
      const area = this.multiArray[2][this.multiIndex[2]]

      this.selectedArea = `${province} ${city} ${area}`

      // 更新用户信息
      this.userInfo.province_id = this.multiIndex[0] + 1
      this.userInfo.city_id = this.multiIndex[1] + 1
      this.userInfo.area_id = this.multiIndex[2] + 1
      this.userInfo.province_name = province
      this.userInfo.city_name = city
      this.userInfo.area_name = area
    },

    // 返回上一页
    async handleBack() {
      uni.navigateBack({
        delta: 1
      })
    },

    // 更换头像
    handleAvatarUpload() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          // 这里可以添加上传图片到服务器的逻辑
          this.userInfo.avatar = tempFilePath
          uni.showToast({
            title: '头像更换成功',
            icon: 'success'
          })
        }
      })
    },

    // 性别选择变化
    handleGenderChange(e) {
      const index = e.detail.value
      this.genderIndex = index
      this.userInfo.gender = this.genderOptions[index]
    },

    // 保存资料
    handleSave() {
      // 验证表单
      if (!this.userInfo.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }

      if (!this.userInfo.gender) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }

      // 保存到本地存储
      uni.setStorageSync('matchmakerUserInfo', this.userInfo)

      // 提示保存成功
      uni.showToast({
        title: '资料保存成功',
        icon: 'success'
      })

      // 返回上一页
      setTimeout(() => {
        this.handleBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile {
  min-height: 100vh;
  background: #FFFFFF;
  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: #FFFFFF;
  border-bottom: 1rpx solid #F0F0F0;

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

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

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

  .right-empty {
    width: 44rpx;
  }
}

.content {
  flex: 1;
  padding-bottom: 40rpx;
}

/* 头像上传区域 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  border-bottom: 1rpx solid #F0F0F0;

  .avatar-container {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 20rpx;

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

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

      .upload-icon {
        font-size: 28rpx;
        color: #E91E63;
      }
    }
  }

  .avatar-text {
    font-size: 28rpx;
    color: #E91E63;
    font-weight: 500;
  }
}

/* 表单区域 */
.form-section {
  padding: 0 30rpx;

  .form-item {
    display: flex;
    flex-direction: column;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #F5F5F5;

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

    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .label-icon {
        font-size: 28rpx;
        margin-right: 12rpx;
      }

      .label-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }

    .form-input,
    .form-picker {
      width: 90%;
      font-size: 28rpx;
      color: #333;
      padding: 18rpx 20rpx;
      background: #F9F9F9;
      border-radius: 12rpx;
      border: 1rpx solid #E0E0E0;

      &.readonly {
        background: #F5F5F5;
        color: #999;
      }
    }

    .form-picker {
      display: flex;
      align-items: center;

      .picker-content {
        flex: 1;
      }
    }

    /* 性别选择器特定样式 */
    .gender-picker {
      width: 25%;
    }

    .form-textarea {
      width: 90%;
      font-size: 28rpx;
      color: #333;
      padding: 20rpx;
      background: #F9F9F9;
      border-radius: 12rpx;
      border: 1rpx solid #E0E0E0;
      min-height: 160rpx;
      line-height: 1.5;
    }
  }
}

/* 保存按钮 */
.save-btn-section {
  padding: 40rpx 30rpx;

  .save-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #E91E63 0%, #FF6B8A 100%);
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 45rpx;
    border: none;
    box-shadow: 0 6rpx 20rpx rgba(233, 30, 99, 0.3);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 3rpx 10rpx rgba(233, 30, 99, 0.2);
    }
  }
}
</style>