|
|
@@ -0,0 +1,542 @@
|
|
|
+<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: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
