<!--pages/registration/registration.wxml-->
|
<view class="container">
|
<!-- 加载状态 -->
|
<view wx:if="{{loading}}" class="loading-wrapper">
|
<view class="loading"></view>
|
<text class="loading-text">加载中...</text>
|
</view>
|
|
<!-- 报名表单 -->
|
<view wx:else class="form-container">
|
<!-- 活动信息 -->
|
<view wx:if="{{activity}}" class="activity-info">
|
<text class="activity-title">{{activity.name}}</text>
|
<text class="activity-desc">{{activity.description}}</text>
|
</view>
|
|
<!-- 基本信息 -->
|
<view class="form-section">
|
<view class="section-title">基本信息</view>
|
|
<!-- 姓名 -->
|
<view class="form-item {{errors.name ? 'error' : ''}}">
|
<text class="label required">姓名</text>
|
<view class="input-wrapper">
|
<input
|
class="input"
|
placeholder="请输入真实姓名"
|
value="{{formData.name}}"
|
data-field="name"
|
bindinput="onInputChange"
|
/>
|
<text wx:if="{{errors.name}}" class="error-text">{{errors.name}}</text>
|
</view>
|
</view>
|
|
<!-- 手机号 -->
|
<view class="form-item {{errors.phone ? 'error' : ''}}">
|
<text class="label required">手机号</text>
|
<view class="input-wrapper">
|
<view class="phone-container">
|
<view class="phone-display {{!formData.phone ? 'placeholder' : ''}}">
|
{{formData.phone || '点击授权获取手机号'}}
|
</view>
|
<button
|
class="phone-auth-btn"
|
open-type="getPhoneNumber"
|
bindgetphonenumber="onGetPhoneNumber"
|
wx:if="{{!formData.phone}}"
|
>
|
授权获取
|
</button>
|
<button
|
class="phone-change-btn"
|
bindtap="onClearPhone"
|
wx:else
|
>
|
重新获取
|
</button>
|
</view>
|
<text wx:if="{{errors.phone}}" class="error-text">{{errors.phone}}</text>
|
</view>
|
</view>
|
|
<!-- 性别 -->
|
<view class="form-item {{errors.gender ? 'error' : ''}}">
|
<text class="label required">性别</text>
|
<view class="input-wrapper">
|
<picker
|
class="picker"
|
mode="selector"
|
range="{{genderOptions}}"
|
value="{{genderIndex}}"
|
bindchange="onGenderChange"
|
>
|
<view class="picker-text">
|
{{formData.gender !== null ? genderOptions[formData.gender] : '请选择性别'}}
|
</view>
|
</picker>
|
<text wx:if="{{errors.gender}}" class="error-text">{{errors.gender}}</text>
|
</view>
|
</view>
|
|
<!-- 生日 -->
|
<view class="form-item {{errors.birthDate ? 'error' : ''}}">
|
<text class="label">生日</text>
|
<view class="input-wrapper">
|
<picker
|
class="picker"
|
mode="date"
|
value="{{formData.birthDate}}"
|
bindchange="onBirthDateChange"
|
end="{{today}}"
|
>
|
<view class="picker-text">
|
{{formData.birthDate || '请选择生日'}}
|
</view>
|
</picker>
|
<text wx:if="{{errors.birthDate}}" class="error-text">{{errors.birthDate}}</text>
|
</view>
|
</view>
|
|
<!-- 所在区域 -->
|
<view class="form-item {{errors.regionId ? 'error' : ''}}">
|
<text class="label">所在区域</text>
|
<view class="input-wrapper">
|
<picker
|
class="picker"
|
mode="selector"
|
range="{{regions}}"
|
range-key="name"
|
value="{{regionIndex}}"
|
bindchange="onRegionChange"
|
>
|
<view class="picker-text">
|
{{formData.regionId !== null && regionIndex >= 0 ? regions[regionIndex].name : '请选择所在区域'}}
|
</view>
|
</picker>
|
<text wx:if="{{errors.regionId}}" class="error-text">{{errors.regionId}}</text>
|
</view>
|
</view>
|
|
<!-- 教育背景 -->
|
<view class="form-item {{errors.education ? 'error' : ''}}">
|
<text class="label">教育背景</text>
|
<view class="input-wrapper">
|
<picker
|
class="picker"
|
mode="selector"
|
range="{{educationOptions}}"
|
value="{{educationIndex}}"
|
bindchange="onEducationChange"
|
>
|
<view class="picker-text">
|
{{formData.education || '请选择教育背景'}}
|
</view>
|
</picker>
|
<text wx:if="{{errors.education}}" class="error-text">{{errors.education}}</text>
|
</view>
|
</view>
|
|
<!-- 头像上传 -->
|
<view class="form-item vertical-layout {{errors.avatar ? 'error' : ''}}">
|
<text class="label">头像</text>
|
<view class="avatar-upload-container">
|
<!-- 未选择状态 -->
|
<view wx:if="{{!localAvatarPath && !formData.avatarUrl && !avatarUploading}}"
|
class="avatar-upload-btn"
|
bindtap="onChooseAvatar">
|
<text class="upload-icon ic-add"></text>
|
<text class="upload-text">点击选择头像</text>
|
</view>
|
|
<!-- 上传中状态 -->
|
<view wx:if="{{avatarUploading}}" class="avatar-upload-btn uploading">
|
<view class="avatar-uploading-indicator"></view>
|
<text class="upload-text">上传中 {{avatarUploadProgress}}%</text>
|
<view class="upload-progress">
|
<view class="progress-bar">
|
<view class="progress-fill" style="width: {{avatarUploadProgress}}%"></view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 已选择状态（本地预览） -->
|
<view wx:if="{{localAvatarPath && !avatarUploading}}" class="avatar-preview">
|
<image class="avatar-image" src="{{localAvatarPath}}" mode="aspectFill"></image>
|
<view class="avatar-actions">
|
<text class="action-btn" bindtap="onChooseAvatar">重新选择</text>
|
<text class="action-btn delete" bindtap="onDeleteAvatar">删除</text>
|
</view>
|
</view>
|
|
<!-- 已上传状态（服务器图片） -->
|
<view wx:if="{{formData.avatarUrl && !localAvatarPath && !avatarUploading}}" class="avatar-preview">
|
<image class="avatar-image" src="{{formData.avatarUrl}}" mode="aspectFill"></image>
|
<view class="avatar-actions">
|
<text class="action-btn" bindtap="onChooseAvatar">重新选择</text>
|
<text class="action-btn delete" bindtap="onDeleteAvatar">删除</text>
|
</view>
|
</view>
|
|
<!-- 提示文字 -->
|
<view class="avatar-upload-hint">
|
<text wx:if="{{!localAvatarPath && !formData.avatarUrl}}">支持JPG、PNG、WebP格式，建议尺寸200x200以上，文件大小不超过5MB</text>
|
<text wx:elif="{{localAvatarPath}}">头像已选择，提交时将自动上传</text>
|
<text wx:else>头像上传成功，可重新选择或删除</text>
|
</view>
|
</view>
|
<text wx:if="{{errors.avatar}}" class="error-text">{{errors.avatar}}</text>
|
</view>
|
|
<!-- 简介 -->
|
<view class="form-item vertical-layout {{errors.introduction ? 'error' : ''}}">
|
<text class="label">简介</text>
|
<textarea
|
class="textarea"
|
placeholder="请简要介绍自己的背景、技能和经验"
|
value="{{formData.introduction}}"
|
data-field="introduction"
|
bindinput="onInputChange"
|
maxlength="500"
|
/>
|
<text wx:if="{{errors.introduction}}" class="error-text">{{errors.introduction}}</text>
|
</view>
|
|
</view>
|
|
<!-- 个人介绍 -->
|
<view class="form-section">
|
<view class="section-title">个人介绍</view>
|
|
<!-- 项目名称 -->
|
<view class="form-item {{errors.projectName ? 'error' : ''}}">
|
<text class="label required">项目名称</text>
|
<view class="input-wrapper">
|
<input
|
class="input"
|
placeholder="请输入项目名称"
|
value="{{formData.projectName}}"
|
data-field="projectName"
|
bindinput="onInputChange"
|
/>
|
<text wx:if="{{errors.projectName}}" class="error-text">{{errors.projectName}}</text>
|
</view>
|
</view>
|
|
<!-- 项目描述 -->
|
<view class="form-item vertical-layout {{errors.description ? 'error' : ''}}">
|
<text class="label required">项目描述</text>
|
<textarea
|
class="textarea"
|
placeholder="请详细描述您的项目内容、目标和特色"
|
value="{{formData.description}}"
|
data-field="description"
|
bindinput="onInputChange"
|
maxlength="1000"
|
/>
|
<text wx:if="{{errors.description}}" class="error-text">{{errors.description}}</text>
|
</view>
|
|
</view>
|
|
<!-- 附件上传 -->
|
<view class="form-section vertical-layout">
|
<view class="section-title">附件资料</view>
|
<view class="section-subtitle">支持上传相关资料，最多8个文件</view>
|
|
<!-- 上传按钮 -->
|
<view class="attachment-upload-area">
|
<view wx:if="{{attachments.length < 8}}" class="upload-btn" bindtap="onChooseAttachment">
|
<view class="upload-icon">📎</view>
|
<text class="upload-text">选择文件</text>
|
<view class="upload-hint">
|
支持视频(≤200MB)、图片(≤10MB)、PDF、Word等文档
|
</view>
|
</view>
|
|
<!-- 附件列表 -->
|
<view wx:if="{{attachments.length > 0}}" class="attachment-list">
|
<view wx:for="{{attachments}}" wx:key="index" class="attachment-item {{item.uploading ? 'uploading' : ''}}">
|
<view class="attachment-info">
|
<view class="attachment-icon">
|
<text wx:if="{{item.type === 'image'}}">🖼️</text>
|
<text wx:elif="{{item.type === 'video'}}">🎬</text>
|
<text wx:elif="{{item.type === 'pdf'}}">📄</text>
|
<text wx:elif="{{item.type === 'word'}}">📝</text>
|
<text wx:else>📎</text>
|
</view>
|
<view class="attachment-details">
|
<text class="attachment-name">{{item.name}}</text>
|
<text class="attachment-size">{{item.sizeText}}</text>
|
<view wx:if="{{item.uploading}}" class="upload-progress">
|
<view class="progress-bar">
|
<view class="progress-fill" style="width: {{item.progress}}%"></view>
|
</view>
|
<text class="progress-text">{{item.progress}}%</text>
|
</view>
|
<text wx:elif="{{item.uploaded}}" class="upload-status success">上传成功</text>
|
<text wx:elif="{{item.error}}" class="upload-status error">{{item.error}}</text>
|
</view>
|
</view>
|
<view class="attachment-actions">
|
<text wx:if="{{!item.uploading}}" class="action-btn delete" bindtap="onDeleteAttachment" data-index="{{index}}">删除</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 附件数量提示 -->
|
<view wx:if="{{attachments.length > 0}}" class="attachment-count">
|
已上传 {{attachments.length}}/8 个文件
|
</view>
|
</view>
|
|
<text wx:if="{{errors.attachments}}" class="error-text">{{errors.attachments}}</text>
|
</view>
|
|
<!-- 底部操作栏 -->
|
<view class="bottom-actions">
|
<view class="submit-btn {{submitting ? 'disabled' : ''}}" bindtap="onSubmit">
|
{{submitting ? '提交中...' : '提交报名'}}
|
</view>
|
</view>
|
</view>
|
|
|
</view>
|
