310 lines
No EOL
13 KiB
Text
310 lines
No EOL
13 KiB
Text
<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> |