|
@@ -1,60 +1,123 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="edit-profile" :class="{ 'dark-mode': isDarkTheme }">
|
|
|
|
|
<!-- 顶部导航栏 -->
|
|
<!-- 顶部导航栏 -->
|
|
|
<view class="header">
|
|
<view class="header">
|
|
|
- <view class="back-btn" @click="goBack">
|
|
|
|
|
|
|
+ <view class="back-btn" @click="handleBack">
|
|
|
<text class="back-icon">←</text>
|
|
<text class="back-icon">←</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="header-title">编辑资料</text>
|
|
<text class="header-title">编辑资料</text>
|
|
|
- <view class="placeholder"></view>
|
|
|
|
|
|
|
+ <view class="right-empty"></view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<scroll-view scroll-y class="content">
|
|
<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 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="change-avatar-text" @click="changeAvatar">更换头像</text>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <text class="avatar-text">更换头像</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
- <!-- 表单项 -->
|
|
|
|
|
- <view class="form-group">
|
|
|
|
|
- <text class="label">姓名</text>
|
|
|
|
|
- <input class="input" v-model="form.name" placeholder="请输入姓名" />
|
|
|
|
|
|
|
+ <!-- 表单区域 -->
|
|
|
|
|
+ <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>
|
|
|
|
|
|
|
|
- <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>
|
|
|
|
|
|
|
+ <!-- 性别 -->
|
|
|
|
|
+ <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>
|
|
</picker>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view class="form-group">
|
|
|
|
|
- <text class="label">手机号</text>
|
|
|
|
|
- <input class="input" v-model="form.phone" placeholder="请输入手机号" type="number" maxlength="11" />
|
|
|
|
|
|
|
+ <!-- 个人简介 -->
|
|
|
|
|
+ <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>
|
|
|
|
|
|
|
|
- <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 class="form-item">
|
|
|
|
|
+ <view class="form-label">
|
|
|
|
|
+ <text class="label-icon">📧</text>
|
|
|
|
|
+ <text class="label-text">邮箱</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <input
|
|
|
|
|
+ class="form-input"
|
|
|
|
|
+ v-model="userInfo.email"
|
|
|
|
|
+ placeholder="请输入邮箱"
|
|
|
|
|
+ placeholder-style="color: #999"
|
|
|
|
|
+ type="email"
|
|
|
|
|
+ >
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view class="form-group">
|
|
|
|
|
- <text class="label">个人简介</text>
|
|
|
|
|
- <textarea class="textarea" v-model="form.bio" placeholder="请输入个人简介..." />
|
|
|
|
|
|
|
+ <!-- 省市区选择 -->
|
|
|
|
|
+ <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>
|
|
|
|
|
|
|
|
- <view class="save-btn" @click="handleSave">保存</view>
|
|
|
|
|
|
|
+ <!-- 保存按钮 -->
|
|
|
|
|
+ <view class="save-btn-section">
|
|
|
|
|
+ <button class="save-btn" @click="handleSave">保存</button>
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
@@ -62,43 +125,221 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
- name: 'matchmaker-edit-profile',
|
|
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- isDarkTheme: false,
|
|
|
|
|
- genderOptions: ['女', '男'],
|
|
|
|
|
- genderIndex: 0,
|
|
|
|
|
- form: {
|
|
|
|
|
|
|
+ // 默认头像
|
|
|
|
|
+ defaultAvatar: 'https://q.qlogo.cn/qqapp/1105591438/05E13358B43B3D39D6AC2D6888828201/100',
|
|
|
|
|
+
|
|
|
|
|
+ // 用户信息
|
|
|
|
|
+ userInfo: {
|
|
|
avatar: '',
|
|
avatar: '',
|
|
|
- name: '高红娘',
|
|
|
|
|
- gender: '女',
|
|
|
|
|
- phone: '',
|
|
|
|
|
- level: '金牌红娘',
|
|
|
|
|
- bio: '我是一名专业的红娘,拥有丰富的婚恋服务经验,已成功帮助1200对单身男女找到幸福。'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- onShow() {
|
|
|
|
|
- const stored = uni.getStorageSync('matchmakerDarkMode')
|
|
|
|
|
- if (stored === true || stored === false) {
|
|
|
|
|
- this.isDarkTheme = stored
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ // 从本地存储获取用户信息
|
|
|
|
|
+ this.loadUserInfo()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- goBack() {
|
|
|
|
|
- uni.navigateBack()
|
|
|
|
|
|
|
+ // 加载用户信息
|
|
|
|
|
+ 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
|
|
|
},
|
|
},
|
|
|
- changeAvatar() {
|
|
|
|
|
- uni.showToast({ title: '更换头像开发中', icon: 'none' })
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 返回上一页
|
|
|
|
|
+ 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'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
- onGenderChange(e) {
|
|
|
|
|
- const index = Number(e.detail.value)
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 性别选择变化
|
|
|
|
|
+ handleGenderChange(e) {
|
|
|
|
|
+ const index = e.detail.value
|
|
|
this.genderIndex = index
|
|
this.genderIndex = index
|
|
|
- this.form.gender = this.genderOptions[index]
|
|
|
|
|
|
|
+ this.userInfo.gender = this.genderOptions[index]
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
|
|
+ // 保存资料
|
|
|
handleSave() {
|
|
handleSave() {
|
|
|
- uni.showToast({ title: '已保存', icon: 'success' })
|
|
|
|
|
- // 这里可以接入实际保存接口
|
|
|
|
|
|
|
+ // 验证表单
|
|
|
|
|
+ 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)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -107,22 +348,24 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.edit-profile {
|
|
.edit-profile {
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background: #F5F5F5;
|
|
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 顶部导航栏 */
|
|
|
.header {
|
|
.header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
padding: 25rpx 30rpx;
|
|
padding: 25rpx 30rpx;
|
|
|
padding-top: calc(25rpx + env(safe-area-inset-top));
|
|
padding-top: calc(25rpx + env(safe-area-inset-top));
|
|
|
- background: #E9D7F5;
|
|
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
|
|
|
|
.back-btn {
|
|
.back-btn {
|
|
|
- width: 60rpx;
|
|
|
|
|
- height: 60rpx;
|
|
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -130,178 +373,169 @@ export default {
|
|
|
.back-icon {
|
|
.back-icon {
|
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
- font-weight: bold;
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header-title {
|
|
.header-title {
|
|
|
- font-size: 36rpx;
|
|
|
|
|
|
|
+ font-size: 38rpx;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
color: #333;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .placeholder {
|
|
|
|
|
- width: 60rpx;
|
|
|
|
|
|
|
+ .right-empty {
|
|
|
|
|
+ width: 44rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
.content {
|
|
|
flex: 1;
|
|
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);
|
|
|
|
|
|
|
+ padding-bottom: 40rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 头像上传区域 */
|
|
|
.avatar-section {
|
|
.avatar-section {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
|
|
|
|
+ padding: 40rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
|
|
|
|
- .avatar-circle {
|
|
|
|
|
- width: 150rpx;
|
|
|
|
|
- height: 150rpx;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- border: 4rpx solid #E1D5FA;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
|
|
+ .avatar-container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ height: 160rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
- .avatar-img,
|
|
|
|
|
- .avatar-placeholder {
|
|
|
|
|
- width: 130rpx;
|
|
|
|
|
- height: 130rpx;
|
|
|
|
|
|
|
+ .avatar {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
background: #F5F5F5;
|
|
background: #F5F5F5;
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- font-size: 64rpx;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .camera-btn {
|
|
|
|
|
|
|
+ .avatar-upload-btn {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
|
+ bottom: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- bottom: 10rpx;
|
|
|
|
|
width: 48rpx;
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
height: 48rpx;
|
|
|
- border-radius: 50%;
|
|
|
|
|
- background: #9C27B0;
|
|
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.4);
|
|
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border: 2rpx solid #E91E63;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
- .camera-icon {
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
|
|
+ .upload-icon {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #E91E63;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .change-avatar-text {
|
|
|
|
|
- margin-top: 16rpx;
|
|
|
|
|
- font-size: 26rpx;
|
|
|
|
|
- color: #9C27B0;
|
|
|
|
|
|
|
+ .avatar-text {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #E91E63;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.form-group {
|
|
|
|
|
- margin-top: 20rpx;
|
|
|
|
|
|
|
+/* 表单区域 */
|
|
|
|
|
+.form-section {
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
|
|
|
|
- .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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .form-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding: 25rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #F5F5F5;
|
|
|
|
|
|
|
|
- .picker-value {
|
|
|
|
|
- line-height: 1.4;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .readonly {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- gap: 8rpx;
|
|
|
|
|
|
|
+ .form-label {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-bottom: 15rpx;
|
|
|
|
|
|
|
|
- .level-icon { font-size: 30rpx; }
|
|
|
|
|
- .level-text { font-size: 28rpx; color: #333; }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .label-icon {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ margin-right: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .textarea {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- min-height: 160rpx;
|
|
|
|
|
- padding: 18rpx 20rpx;
|
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
- background: #F7F7F9;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #333;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ .label-text {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-.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;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ .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;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-/* 深色模式适配 */
|
|
|
|
|
-.edit-profile.dark-mode {
|
|
|
|
|
- background: #121212;
|
|
|
|
|
- color: #f5f5f5;
|
|
|
|
|
|
|
+ .form-picker {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
|
|
- .header {
|
|
|
|
|
- background: #1f1f1f;
|
|
|
|
|
|
|
+ .picker-content {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .back-icon,
|
|
|
|
|
- .header-title {
|
|
|
|
|
- color: #f5f5f5;
|
|
|
|
|
|
|
+ /* 性别选择器特定样式 */
|
|
|
|
|
+ .gender-picker {
|
|
|
|
|
+ width: 10%;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .content {
|
|
|
|
|
- background: #121212;
|
|
|
|
|
|
|
+ .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;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- .card {
|
|
|
|
|
- background: #1e1e1e;
|
|
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+/* 保存按钮 */
|
|
|
|
|
+.save-btn-section {
|
|
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
|
|
|
|
|
- .form-group {
|
|
|
|
|
- .label { color: #b0b0b0; }
|
|
|
|
|
- .input,
|
|
|
|
|
- .textarea,
|
|
|
|
|
- .readonly {
|
|
|
|
|
- background: #242424;
|
|
|
|
|
- color: #f5f5f5;
|
|
|
|
|
|
|
+ .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);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- .change-avatar-text { color: #c792ea; }
|
|
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|