Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
622
pages/edit/edit.js
Normal file
622
pages/edit/edit.js
Normal file
|
|
@ -0,0 +1,622 @@
|
|||
const app = getApp();
|
||||
const config = require('../../config/config.js');
|
||||
const apiClient = require('../../utils/api-client.js');
|
||||
const imageCacheManager = require('../../utils/image-cache-manager.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: '未设置昵称',
|
||||
customId: '123456789',
|
||||
signature: '',
|
||||
career: '',
|
||||
education: '',
|
||||
gender: '',
|
||||
birthday: '',
|
||||
hometown: '',
|
||||
constellation: '',
|
||||
height: '',
|
||||
personalityType: '',
|
||||
sleepHabit: '',
|
||||
socialActivity: ''
|
||||
},
|
||||
isEditingNickname: false,
|
||||
isEditingSignature: false,
|
||||
tempNickname: '',
|
||||
tempSignature: '',
|
||||
showConstellationPicker: false,
|
||||
showPersonalityPicker: false,
|
||||
showCareerPicker: false,
|
||||
showEducationPicker: false,
|
||||
showHometownPicker: false,
|
||||
showBirthdayPicker: false,
|
||||
showHeightPicker: false,
|
||||
showGenderPicker: false,
|
||||
showSleepHabitPicker: false,
|
||||
showSocialActivityPicker: false,
|
||||
constellations: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
|
||||
personalityTypes: ['INTJ', 'INTP', 'ENTJ', 'INFP', 'ENTP', 'INFJ', 'ENFP', 'ENFJ', 'ISTJ', 'ISFJ', 'ISTP', 'ISFP', 'ESTJ', 'ESFJ', 'ESTP', 'ESFP'],
|
||||
careers: ['初中生', '高中生', '大学生', '研究生', '留学生', '科研', '警察', '医生', '护士', '程序员', '老师', '化妆师', '摄影师', '音乐', '美术', '金融', '厨师', '工程师', '公务员', '互联网', '产品经理', '模特', '演员', '导演', '律师', '创业者', '其他'],
|
||||
educations: ['北京大学', '清华大学', '复旦大学', '上海交通大学', '浙江大学', '南京大学', '武汉大学', '中山大学', '四川大学', '哈尔滨工业大学', '大专', '中专', '高职', '高中'],
|
||||
genders: ['男', '女'],
|
||||
sleepHabits: ['早起鸟儿', '夜猫子', '规律型', '深度睡眠追求者', '碎片化睡眠者', '失眠困扰者', '咖啡因敏感型', '数字戒断者', '运动调节型', '挑战打卡型', '鼾声监测者', '生物钟调节者', '社区分享型'],
|
||||
socialActivities: ['内容创作者', '观察者', '吃瓜者', '潜水者', '机器人', '社群型用户', 'KOL', 'KOC', '普通用户', '算法依赖型用户', '事件驱动型用户', '季节性活跃用户', '社交维系型用户', '兴趣社群型用户', '职业网络型用户', '娱乐消遣型用户', '购物种草型用户', '互动型用户'],
|
||||
selectedConstellation: '',
|
||||
selectedPersonality: '',
|
||||
selectedCareer: '',
|
||||
selectedEducation: '',
|
||||
selectedGender: '',
|
||||
selectedHeight: 170,
|
||||
selectedSleepHabit: '',
|
||||
selectedSocialActivity: '',
|
||||
searchCareerText: '',
|
||||
searchEducationText: '',
|
||||
filteredCareers: [],
|
||||
filteredEducations: [],
|
||||
provinces: [],
|
||||
cities: [],
|
||||
selectedProvince: '',
|
||||
selectedCity: '',
|
||||
selectedYear: '',
|
||||
selectedMonth: '',
|
||||
selectedDay: '',
|
||||
years: [],
|
||||
months: [],
|
||||
days: []
|
||||
},
|
||||
|
||||
onLoad: function() {
|
||||
this.loadUserData();
|
||||
this.initDatePicker();
|
||||
this.initLocationData();
|
||||
},
|
||||
|
||||
loadUserData: function() {
|
||||
const userInfo = app.globalData.userInfo || {};
|
||||
this.setData({
|
||||
userInfo: {
|
||||
avatar: userInfo.avatar || '',
|
||||
nickname: userInfo.nickname || '未设置昵称',
|
||||
customId: userInfo.customId || '123456789',
|
||||
signature: userInfo.signature || '',
|
||||
career: userInfo.career || '',
|
||||
education: userInfo.education || '',
|
||||
gender: userInfo.gender || '',
|
||||
birthday: userInfo.birthday || '',
|
||||
hometown: userInfo.hometown || '',
|
||||
constellation: userInfo.constellation || '',
|
||||
height: userInfo.height || '',
|
||||
personalityType: userInfo.personalityType || '',
|
||||
sleepHabit: userInfo.sleepHabit || '',
|
||||
socialActivity: userInfo.socialActivity || ''
|
||||
},
|
||||
tempNickname: userInfo.nickname || '未设置昵称',
|
||||
tempSignature: userInfo.signature || ''
|
||||
});
|
||||
},
|
||||
|
||||
// 头像相关功能
|
||||
changeAvatar: function() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择'],
|
||||
success: (res) => {
|
||||
const sourceType = res.tapIndex === 0 ? ['camera'] : ['album'];
|
||||
this.chooseImage(sourceType);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
chooseImage: function(sourceType) {
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: sourceType,
|
||||
success: (res) => {
|
||||
if (sourceType[0] === 'camera') {
|
||||
this.setData({
|
||||
tempAvatarPath: res.tempFilePaths[0],
|
||||
showCameraPreview: true
|
||||
});
|
||||
} else {
|
||||
this.uploadAvatar(res.tempFilePaths[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
retakePhoto: function() {
|
||||
this.setData({ showCameraPreview: false });
|
||||
this.chooseImage(['camera']);
|
||||
},
|
||||
|
||||
usePhoto: function() {
|
||||
this.uploadAvatar(this.data.tempAvatarPath);
|
||||
this.setData({ showCameraPreview: false });
|
||||
},
|
||||
|
||||
uploadAvatar: async function(tempFilePath) {
|
||||
try {
|
||||
wx.showLoading({ title: '上传中...' });
|
||||
// 模拟上传头像
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
const newAvatarUrl = tempFilePath;
|
||||
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.avatar = newAvatarUrl;
|
||||
this.setData({ userInfo });
|
||||
|
||||
// 更新全局用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.avatar = newAvatarUrl;
|
||||
}
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '头像更新成功', icon: 'success' });
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '上传失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
// 昵称编辑
|
||||
startEditNickname: function() {
|
||||
this.setData({
|
||||
isEditingNickname: true,
|
||||
tempNickname: this.data.userInfo.nickname
|
||||
});
|
||||
},
|
||||
|
||||
confirmEditNickname: function() {
|
||||
if (this.data.tempNickname.length > 30) {
|
||||
wx.showToast({ title: '昵称不能超过30字节', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.nickname = this.data.tempNickname;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
isEditingNickname: false
|
||||
});
|
||||
|
||||
// 更新全局用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.nickname = this.data.tempNickname;
|
||||
}
|
||||
},
|
||||
|
||||
cancelEditNickname: function() {
|
||||
this.setData({ isEditingNickname: false });
|
||||
},
|
||||
|
||||
// 签名编辑
|
||||
startEditSignature: function() {
|
||||
this.setData({
|
||||
isEditingSignature: true,
|
||||
tempSignature: this.data.userInfo.signature
|
||||
});
|
||||
},
|
||||
|
||||
confirmEditSignature: function() {
|
||||
if (this.data.tempSignature.length > 200) {
|
||||
wx.showToast({ title: '简介不能超过200字节', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.signature = this.data.tempSignature;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
isEditingSignature: false
|
||||
});
|
||||
|
||||
// 更新全局用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.signature = this.data.tempSignature;
|
||||
}
|
||||
},
|
||||
|
||||
cancelEditSignature: function() {
|
||||
this.setData({ isEditingSignature: false });
|
||||
},
|
||||
|
||||
// 星座选择
|
||||
openConstellationPicker: function() {
|
||||
this.setData({
|
||||
showConstellationPicker: true,
|
||||
selectedConstellation: this.data.userInfo.constellation
|
||||
});
|
||||
},
|
||||
|
||||
selectConstellation: function(e) {
|
||||
const constellation = e.currentTarget.dataset.value;
|
||||
this.setData({
|
||||
selectedConstellation: constellation
|
||||
});
|
||||
},
|
||||
|
||||
confirmConstellation: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.constellation = this.data.selectedConstellation;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showConstellationPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 人格类型选择
|
||||
openPersonalityPicker: function() {
|
||||
this.setData({
|
||||
showPersonalityPicker: true,
|
||||
selectedPersonality: this.data.userInfo.personalityType
|
||||
});
|
||||
},
|
||||
|
||||
selectPersonality: function(e) {
|
||||
const personality = e.currentTarget.dataset.value;
|
||||
this.setData({
|
||||
selectedPersonality: personality
|
||||
});
|
||||
},
|
||||
|
||||
confirmPersonality: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.personalityType = this.data.selectedPersonality;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showPersonalityPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 职业选择
|
||||
openCareerPicker: function() {
|
||||
this.setData({
|
||||
showCareerPicker: true,
|
||||
searchCareerText: '',
|
||||
filteredCareers: this.data.careers
|
||||
});
|
||||
},
|
||||
|
||||
searchCareer: function(e) {
|
||||
const text = e.detail.value;
|
||||
const filtered = this.data.careers.filter(career =>
|
||||
career.includes(text)
|
||||
);
|
||||
this.setData({
|
||||
searchCareerText: text,
|
||||
filteredCareers: filtered
|
||||
});
|
||||
},
|
||||
|
||||
selectCareer: function(e) {
|
||||
const career = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.career = career;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showCareerPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 教育背景选择
|
||||
openEducationPicker: function() {
|
||||
this.setData({
|
||||
showEducationPicker: true,
|
||||
searchEducationText: '',
|
||||
filteredEducations: this.data.educations
|
||||
});
|
||||
},
|
||||
|
||||
searchEducation: function(e) {
|
||||
const text = e.detail.value;
|
||||
const filtered = this.data.educations.filter(edu =>
|
||||
edu.includes(text)
|
||||
);
|
||||
this.setData({
|
||||
searchEducationText: text,
|
||||
filteredEducations: filtered
|
||||
});
|
||||
},
|
||||
|
||||
selectEducation: function(e) {
|
||||
const education = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.education = education;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showEducationPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 家乡选择
|
||||
openHometownPicker: function() {
|
||||
this.setData({
|
||||
showHometownPicker: true,
|
||||
selectedProvince: this.data.userInfo.hometown ? this.data.userInfo.hometown.split(' ')[0] : '',
|
||||
selectedCity: this.data.userInfo.hometown ? this.data.userInfo.hometown.split(' ')[1] : ''
|
||||
});
|
||||
},
|
||||
|
||||
confirmHometown: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.hometown = `${this.data.selectedProvince} ${this.data.selectedCity}`;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showHometownPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 生日选择
|
||||
openBirthdayPicker: function() {
|
||||
this.setData({
|
||||
showBirthdayPicker: true
|
||||
});
|
||||
},
|
||||
|
||||
confirmBirthday: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.birthday = `${this.data.selectedYear}-${this.data.selectedMonth.toString().padStart(2, '0')}-${this.data.selectedDay.toString().padStart(2, '0')}`;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showBirthdayPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 身高选择
|
||||
openHeightPicker: function() {
|
||||
this.setData({
|
||||
showHeightPicker: true,
|
||||
selectedHeight: this.data.userInfo.height ? parseInt(this.data.userInfo.height) : 170
|
||||
});
|
||||
},
|
||||
|
||||
// 性别选择
|
||||
openGenderPicker: function() {
|
||||
this.setData({
|
||||
showGenderPicker: true,
|
||||
selectedGender: this.data.userInfo.gender
|
||||
});
|
||||
},
|
||||
|
||||
// 睡眠习惯选择
|
||||
openSleepHabitPicker: function() {
|
||||
this.setData({
|
||||
showSleepHabitPicker: true,
|
||||
selectedSleepHabit: this.data.userInfo.sleepHabit
|
||||
});
|
||||
},
|
||||
|
||||
// 社交活跃度选择
|
||||
openSocialActivityPicker: function() {
|
||||
this.setData({
|
||||
showSocialActivityPicker: true,
|
||||
selectedSocialActivity: this.data.userInfo.socialActivity
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化位置数据
|
||||
initLocationData: function() {
|
||||
// 模拟省市数据
|
||||
this.setData({
|
||||
provinces: ['北京市', '上海市', '广东省', '江苏省', '浙江省'],
|
||||
cities: {
|
||||
'北京市': ['北京市'],
|
||||
'上海市': ['上海市'],
|
||||
'广东省': ['广州市', '深圳市', '珠海市'],
|
||||
'江苏省': ['南京市', '苏州市', '无锡市'],
|
||||
'浙江省': ['杭州市', '宁波市', '温州市']
|
||||
},
|
||||
selectedProvince: this.data.userInfo.hometown ? this.data.userInfo.hometown.split(' ')[0] : '',
|
||||
selectedCity: this.data.userInfo.hometown ? this.data.userInfo.hometown.split(' ')[1] : '',
|
||||
hometownValue: [0, 0] // 默认选中第一项
|
||||
});
|
||||
},
|
||||
|
||||
// 家乡选择变化处理
|
||||
onHometownChange: function(e) {
|
||||
const value = e.detail.value;
|
||||
const province = this.data.provinces[value[0]];
|
||||
const city = this.data.cities[province][value[1]];
|
||||
this.setData({
|
||||
selectedProvince: province,
|
||||
selectedCity: city,
|
||||
hometownValue: value
|
||||
});
|
||||
},
|
||||
|
||||
initDatePicker: function() {
|
||||
const years = [];
|
||||
const currentYear = new Date().getFullYear();
|
||||
for (let i = currentYear; i >= 1950; i--) {
|
||||
years.push(i);
|
||||
}
|
||||
|
||||
const months = [];
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i);
|
||||
}
|
||||
|
||||
const days = [];
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i);
|
||||
}
|
||||
|
||||
// 设置默认日期
|
||||
let defaultYear = currentYear - 20;
|
||||
let defaultMonth = 1;
|
||||
let defaultDay = 1;
|
||||
|
||||
if (this.data.userInfo.birthday) {
|
||||
const parts = this.data.userInfo.birthday.split('-');
|
||||
if (parts.length === 3) {
|
||||
defaultYear = parseInt(parts[0]);
|
||||
defaultMonth = parseInt(parts[1]);
|
||||
defaultDay = parseInt(parts[2]);
|
||||
}
|
||||
}
|
||||
|
||||
// 计算默认值的索引
|
||||
const yearIndex = years.indexOf(defaultYear);
|
||||
const monthIndex = months.indexOf(defaultMonth);
|
||||
const dayIndex = days.indexOf(defaultDay);
|
||||
|
||||
this.setData({
|
||||
years: years,
|
||||
months: months,
|
||||
days: days,
|
||||
selectedYear: defaultYear,
|
||||
selectedMonth: defaultMonth,
|
||||
selectedDay: defaultDay,
|
||||
birthdayValue: [yearIndex, monthIndex, dayIndex]
|
||||
});
|
||||
},
|
||||
|
||||
// 生日选择变化处理
|
||||
onBirthdayChange: function(e) {
|
||||
const value = e.detail.value;
|
||||
const year = this.data.years[value[0]];
|
||||
const month = this.data.months[value[1]];
|
||||
const day = this.data.days[value[2]];
|
||||
this.setData({
|
||||
selectedYear: year,
|
||||
selectedMonth: month,
|
||||
selectedDay: day,
|
||||
birthdayValue: value
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
bindProvinceChange: function(e) {
|
||||
const province = this.data.provinces[e.detail.value];
|
||||
this.setData({
|
||||
selectedProvince: province,
|
||||
selectedCity: this.data.cities[province][0]
|
||||
});
|
||||
},
|
||||
|
||||
bindCityChange: function(e) {
|
||||
this.setData({
|
||||
selectedCity: this.data.cities[this.data.selectedProvince][e.detail.value]
|
||||
});
|
||||
},
|
||||
|
||||
bindYearChange: function(e) {
|
||||
this.setData({
|
||||
selectedYear: this.data.years[e.detail.value]
|
||||
});
|
||||
},
|
||||
|
||||
bindMonthChange: function(e) {
|
||||
this.setData({
|
||||
selectedMonth: this.data.months[e.detail.value]
|
||||
});
|
||||
},
|
||||
|
||||
bindDayChange: function(e) {
|
||||
this.setData({
|
||||
selectedDay: this.data.days[e.detail.value]
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
adjustHeight: function(e) {
|
||||
this.setData({
|
||||
selectedHeight: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
selectGender: function(e) {
|
||||
const gender = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.gender = gender;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showHeightGenderPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
confirmHeight: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.height = this.data.selectedHeight;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showHeightPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 睡眠习惯选择处理
|
||||
// 社交活跃度选择处理
|
||||
|
||||
selectSleepHabit: function(e) {
|
||||
const sleepHabit = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.sleepHabit = sleepHabit;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showSleepHabitPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
selectSocialActivity: function(e) {
|
||||
const socialActivity = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.socialActivity = socialActivity;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showSocialActivityPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 身高选择确认
|
||||
confirmHeight: function() {
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.height = this.data.selectedHeight;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showHeightPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 性别选择确认
|
||||
selectGender: function(e) {
|
||||
const gender = e.currentTarget.dataset.value;
|
||||
const userInfo = this.data.userInfo;
|
||||
userInfo.gender = gender;
|
||||
this.setData({
|
||||
userInfo: userInfo,
|
||||
showGenderPicker: false
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭所有弹出层
|
||||
closeAllPickers: function() {
|
||||
this.setData({
|
||||
showConstellationPicker: false,
|
||||
showPersonalityPicker: false,
|
||||
showCareerPicker: false,
|
||||
showEducationPicker: false,
|
||||
showHometownPicker: false,
|
||||
showBirthdayPicker: false,
|
||||
showHeightPicker: false,
|
||||
showGenderPicker: false,
|
||||
showSleepHabitPicker: false,
|
||||
showSocialActivityPicker: false,
|
||||
showCameraPreview: false
|
||||
});
|
||||
},
|
||||
|
||||
// 保存所有修改
|
||||
saveChanges: function() {
|
||||
// 这里可以添加保存到服务器的逻辑
|
||||
wx.showLoading({ title: '保存中...' });
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '资料保存成功', icon: 'success' });
|
||||
// 返回个人资料页面
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
7
pages/edit/edit.json
Normal file
7
pages/edit/edit.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationBarTitleText": "编辑资料",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#000000",
|
||||
"disableScroll": true
|
||||
}
|
||||
310
pages/edit/edit.wxml
Normal file
310
pages/edit/edit.wxml
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
<view class="profile-edit-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-back" bindtap="closeAllPickers">
|
||||
</view>
|
||||
<view class="nav-save" bindtap="saveChanges">
|
||||
<text class="save-text">保存</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 滑动内容容器 -->
|
||||
<view class="scroll-container">
|
||||
<!-- 头像区域 -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-container">
|
||||
<image class="avatar" src="{{userInfo.avatar || '/images/placeholder.txt'}}" mode="aspectFill"></image>
|
||||
<view class="avatar-upload" bindtap="changeAvatar">
|
||||
<text class="upload-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="info-section">
|
||||
<!-- 用户ID -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">用户ID</text>
|
||||
<text class="info-value">{{userInfo.customId}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">昵称</text>
|
||||
<view class="nickname-container" bindtap="startEditNickname">
|
||||
<text class="info-value">{{userInfo.nickname}}</text>
|
||||
<text class="edit-icon">✎</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 个人简历区域 -->
|
||||
<view class="resume-section">
|
||||
<view class="section-title">个人简历</view>
|
||||
<view class="resume-item" bindtap="startEditSignature">
|
||||
<text class="resume-value">{{userInfo.signature || '点击添加个人简历'}}</text>
|
||||
<text class="edit-icon">✎</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关于我区域 -->
|
||||
<view class="about-section">
|
||||
<view class="section-title">关于我</view>
|
||||
|
||||
<!-- 职业 -->
|
||||
<view class="about-item" bindtap="openCareerPicker">
|
||||
<text class="about-label">职业</text>
|
||||
<view class="about-content">
|
||||
<text class="about-value">{{userInfo.career || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教育背景 -->
|
||||
<view class="about-item" bindtap="openEducationPicker">
|
||||
<text class="about-label">教育</text>
|
||||
<view class="about-content">
|
||||
<text class="about-value">{{userInfo.education || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="basic-info">
|
||||
<!-- 性别 -->
|
||||
<view class="basic-info-item" bindtap="openGenderPicker">
|
||||
<text class="info-label">性别</text>
|
||||
<text class="info-value">{{userInfo.gender || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
|
||||
<!-- 生日 -->
|
||||
<view class="basic-info-item" bindtap="openBirthdayPicker">
|
||||
<text class="info-label">生日</text>
|
||||
<text class="info-value">{{userInfo.birthday || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
|
||||
<!-- 家乡 -->
|
||||
<view class="basic-info-item" bindtap="openHometownPicker">
|
||||
<text class="info-label">家乡</text>
|
||||
<text class="info-value">{{userInfo.hometown || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更多区域 -->
|
||||
<view class="more-section">
|
||||
<view class="section-title">更多</view>
|
||||
|
||||
<!-- 星座 -->
|
||||
<view class="more-item" bindtap="openConstellationPicker">
|
||||
<text class="more-label">星座</text>
|
||||
<view class="more-content">
|
||||
<text class="more-value">{{userInfo.constellation || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 身高 -->
|
||||
<view class="more-item" bindtap="openHeightPicker">
|
||||
<text class="more-label">身高</text>
|
||||
<view class="more-content">
|
||||
<text class="more-value">{{userInfo.height ? userInfo.height + 'cm' : ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 人格类型 -->
|
||||
<view class="more-item" bindtap="openPersonalityPicker">
|
||||
<text class="more-label">人格类型</text>
|
||||
<view class="more-content">
|
||||
<text class="more-value">{{userInfo.personalityType || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 睡眠习惯 -->
|
||||
<view class="more-item" bindtap="openSleepHabitPicker">
|
||||
<text class="more-label">睡眠习惯</text>
|
||||
<view class="more-content">
|
||||
<text class="more-value">{{userInfo.sleepHabit || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 社交活跃度 -->
|
||||
<view class="more-item" bindtap="openSocialActivityPicker">
|
||||
<text class="more-label">社交活跃度</text>
|
||||
<view class="more-content">
|
||||
<text class="more-value">{{userInfo.socialActivity || ' '}}</text>
|
||||
<text class="arrow-icon">→</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑昵称弹窗 -->
|
||||
<view class="modal-mask" wx:if="{{isEditingNickname}}" bindtap="cancelEditNickname"></view>
|
||||
<view class="modal-container" wx:if="{{isEditingNickname}}">
|
||||
<view class="modal-title">编辑昵称</view>
|
||||
<input class="modal-input" value="{{tempNickname}}" bindinput="inputNickname" maxlength="30" placeholder="请输入昵称"></input>
|
||||
<view class="modal-buttons">
|
||||
<view class="modal-button cancel" bindtap="cancelEditNickname">取消</view>
|
||||
<view class="modal-button confirm" bindtap="confirmEditNickname">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 编辑签名弹窗 -->
|
||||
<view class="modal-mask" wx:if="{{isEditingSignature}}" bindtap="cancelEditSignature"></view>
|
||||
<view class="modal-container" wx:if="{{isEditingSignature}}">
|
||||
<view class="modal-title">编辑个人简介</view>
|
||||
<textarea class="modal-textarea" value="{{tempSignature}}" bindinput="inputSignature" maxlength="200" placeholder="请输入个人简介"></textarea>
|
||||
<view class="modal-buttons">
|
||||
<view class="modal-button cancel" bindtap="cancelEditSignature">取消</view>
|
||||
<view class="modal-button confirm" bindtap="confirmEditSignature">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 星座选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showConstellationPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showConstellationPicker}}">
|
||||
<view class="picker-title">选择星座</view>
|
||||
<view class="constellation-grid">
|
||||
<view class="constellation-item {{selectedConstellation === item ? 'selected' : ''}}" wx:for="{{constellations}}" wx:key="index" data-value="{{item}}" bindtap="selectConstellation">{{item}}</view>
|
||||
</view>
|
||||
<view class="picker-button confirm" bindtap="confirmConstellation">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 人格类型选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showPersonalityPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showPersonalityPicker}}">
|
||||
<view class="picker-title">选择人格类型</view>
|
||||
<view class="personality-grid">
|
||||
<view class="personality-item {{selectedPersonality === item ? 'selected' : ''}}" wx:for="{{personalityTypes}}" wx:key="index" data-value="{{item}}" bindtap="selectPersonality">{{item}}</view>
|
||||
</view>
|
||||
<view class="picker-button confirm" bindtap="confirmPersonality">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 职业选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showCareerPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showCareerPicker}}">
|
||||
<view class="picker-title">选择职业</view>
|
||||
<view class="search-container">
|
||||
<input class="search-input" placeholder="搜索职业" value="{{searchCareerText}}" bindinput="searchCareer"></input>
|
||||
<text class="search-icon">🔍</text>
|
||||
</view>
|
||||
<scroll-view class="career-scroll" scroll-y>
|
||||
<view class="career-item" wx:for="{{filteredCareers}}" wx:key="index" data-value="{{item}}" bindtap="selectCareer">{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 教育背景选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showEducationPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showEducationPicker}}">
|
||||
<view class="picker-title">选择教育背景</view>
|
||||
<view class="search-container">
|
||||
<input class="search-input" placeholder="搜索院校" value="{{searchEducationText}}" bindinput="searchEducation"></input>
|
||||
<text class="search-icon">🔍</text>
|
||||
</view>
|
||||
<scroll-view class="education-scroll" scroll-y>
|
||||
<view class="education-item" wx:for="{{filteredEducations}}" wx:key="index" data-value="{{item}}" bindtap="selectEducation">{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 家乡选择器 - 滑动选择方式 -->
|
||||
<view class="picker-mask" wx:if="{{showHometownPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showHometownPicker}}">
|
||||
<view class="picker-title">选择家乡</view>
|
||||
<view class="hometown-picker-view">
|
||||
<picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 400rpx;" bindchange="onHometownChange" value="{{hometownValue}}">
|
||||
<picker-view-column>
|
||||
<view wx:for="{{cities[selectedProvince] || []}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view wx:for="{{provinces}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="picker-button confirm" bindtap="confirmHometown">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 生日选择器 - 滑动选择方式 -->
|
||||
<view class="picker-mask" wx:if="{{showBirthdayPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showBirthdayPicker}}">
|
||||
<view class="picker-title">选择生日</view>
|
||||
<view class="birthday-picker-view">
|
||||
<picker-view indicator-style="height: 50rpx;" style="width: 100%; height: 400rpx;" bindchange="onBirthdayChange">
|
||||
<picker-view-column>
|
||||
<view wx:for="{{years}}" wx:key="index" style="line-height: 50rpx;">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view wx:for="{{months}}" wx:key="index" style="line-height: 50rpx;">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view wx:for="{{days}}" wx:key="index" style="line-height: 50rpx;">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
<view class="picker-button confirm" bindtap="confirmBirthday">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 身高选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showHeightPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showHeightPicker}}">
|
||||
<view class="picker-title">选择身高</view>
|
||||
<view class="height-picker">
|
||||
<text class="picker-label">身高</text>
|
||||
<slider min="130" max="220" value="{{selectedHeight}}" show-value bindchange="adjustHeight"></slider>
|
||||
<text class="height-value">{{selectedHeight}}cm</text>
|
||||
</view>
|
||||
<view class="picker-button confirm" bindtap="confirmHeight">确定</view>
|
||||
</view>
|
||||
|
||||
<!-- 性别选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showGenderPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showGenderPicker}}">
|
||||
<view class="picker-title">选择性别</view>
|
||||
<view class="gender-picker">
|
||||
<text class="picker-label">性别</text>
|
||||
<view class="gender-options">
|
||||
<view class="gender-option {{selectedGender === '男' ? 'selected' : ''}}" data-value="男" bindtap="selectGender">男</view>
|
||||
<view class="gender-option {{selectedGender === '女' ? 'selected' : ''}}" data-value="女" bindtap="selectGender">女</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 睡眠习惯选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showSleepHabitPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showSleepHabitPicker}}">
|
||||
<view class="picker-title">选择睡眠习惯</view>
|
||||
<view class="sleep-habit-section">
|
||||
<scroll-view class="sleep-habit-scroll" scroll-y>
|
||||
<view class="habit-item" wx:for="{{sleepHabits}}" wx:key="index" data-value="{{item}}" bindtap="selectSleepHabit">{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 社交活跃度选择器 -->
|
||||
<view class="picker-mask" wx:if="{{showSocialActivityPicker}}" bindtap="closeAllPickers"></view>
|
||||
<view class="picker-container" wx:if="{{showSocialActivityPicker}}">
|
||||
<view class="picker-title">选择社交活跃度</view>
|
||||
<view class="social-activity-section">
|
||||
<scroll-view class="social-activity-scroll" scroll-y>
|
||||
<view class="activity-item" wx:for="{{socialActivities}}" wx:key="index" data-value="{{item}}" bindtap="selectSocialActivity">{{item}}</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 相机预览 -->
|
||||
<view class="camera-mask" wx:if="{{showCameraPreview}}" bindtap="retakePhoto"></view>
|
||||
<view class="camera-preview" wx:if="{{showCameraPreview}}">
|
||||
<image src="{{tempAvatarPath}}" mode="aspectFit"></image>
|
||||
<view class="preview-buttons">
|
||||
<view class="preview-button retake" bindtap="retakePhoto">重拍</view>
|
||||
<view class="preview-button use" bindtap="usePhoto">使用照片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
651
pages/edit/edit.wxss
Normal file
651
pages/edit/edit.wxss
Normal file
|
|
@ -0,0 +1,651 @@
|
|||
.profile-edit-container {
|
||||
min-height: 100vh;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
/* 滑动容器样式 */
|
||||
.scroll-container {
|
||||
height: calc(100vh - 88rpx);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding: 0 30rpx;
|
||||
/* background-color: #6e0000; */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 40rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-save {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.save-text {
|
||||
font-size: 32rpx;
|
||||
color: #07c160;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 头像区域样式 */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid #333333;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #555455;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid #1a1a1a;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 36rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 信息区域样式 */
|
||||
.info-section {
|
||||
margin: 0 40rpx 50rpx;
|
||||
background-color: #242424;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 32rpx;
|
||||
color: #cccccc;
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nickname-container,
|
||||
.signature-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
font-size: 28rpx;
|
||||
color: #07c160;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.signature {
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 关于我区域样式 */
|
||||
.about-section {
|
||||
padding: 40rpx 32rpx;
|
||||
margin: 0 40rpx 50rpx;
|
||||
background-color: #242424;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.resume-section {
|
||||
margin: 0 40rpx 50rpx;
|
||||
padding: 40rpx;
|
||||
background-color: #242424;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.resume-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.resume-value {
|
||||
color: #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 更多 */
|
||||
.more-section {
|
||||
margin: 0 40rpx 50rpx;
|
||||
background-color: #242424;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 30rpx;
|
||||
color: #cccccc;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.about-item,
|
||||
.more-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.about-item:last-child,
|
||||
.more-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.about-label,
|
||||
.more-label {
|
||||
font-size: 32rpx;
|
||||
color: #cccccc;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.about-content,
|
||||
.more-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about-value,
|
||||
.more-value {
|
||||
font-size: 32rpx;
|
||||
color: linear-gradient(123deg, #8361FB 15.54%, #70AAFC 39.58%, #F0F8FB 62.43%, #F07BFF 90.28%);
|
||||
text-align: right;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.basic-info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.basic-info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #242424;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.modal-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
width: 300rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background-color: #333333;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background-color: #07c160;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 选择器样式 */
|
||||
.picker-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.picker-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #242424;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
z-index: 1001;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.picker-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
/* 星座选择器样式 */
|
||||
.constellation-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.constellation-item {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.constellation-item.selected {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
/* 人格类型选择器样式 */
|
||||
.personality-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.personality-item {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.personality-item.selected {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
/* 职业和教育选择器样式 */
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #333333;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.career-scroll,
|
||||
.education-scroll {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.career-item,
|
||||
.education-item {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 2rpx solid #333333;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 家乡和生日选择器样式 */
|
||||
.hometown-picker-view,
|
||||
.birthday-picker-view {
|
||||
background-color: #333333;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.birthday-picker-view picker-view {
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.birthday-picker-view picker-view-column view {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.birthday-picker-view picker-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.hometown-picker,
|
||||
.birthday-picker {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.picker-label {
|
||||
font-size: 32rpx;
|
||||
color: #cccccc;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.picker-text {
|
||||
height: 70rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.birthday-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.birthday-picker .picker {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* 身高和性别选择器样式 */
|
||||
.height-picker,
|
||||
.gender-picker {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.height-value {
|
||||
font-size: 32rpx;
|
||||
color: #07c160;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.gender-options {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.gender-option {
|
||||
width: 150rpx;
|
||||
height: 70rpx;
|
||||
background-color: #333333;
|
||||
border-radius: 35rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.gender-option.selected {
|
||||
background-color: #07c160;
|
||||
}
|
||||
|
||||
/* 睡眠习惯和社交活跃度选择器样式 */
|
||||
.sleep-habit-section,
|
||||
.social-activity-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.sleep-habit-scroll,
|
||||
.social-activity-scroll {
|
||||
height: 250rpx;
|
||||
}
|
||||
|
||||
.habit-item,
|
||||
.activity-item {
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 2rpx solid #333333;
|
||||
font-size: 30rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 相机预览样式 */
|
||||
.camera-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.camera-preview {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.camera-preview image {
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.preview-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 600rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.preview-button {
|
||||
width: 250rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.retake {
|
||||
background-color: #333333;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.use {
|
||||
background-color: #07c160;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 适配底部安全区域 */
|
||||
.bottom-space {
|
||||
height: 34rpx;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue