UI优化和bug修复: 1.调整小程序消息列表图标样式 2.优化web端比赛晋级页面布局 3.修复小程序消息列表日期显示问题

lrj

1 天以前 2d410989d32380d31ae3fe6d42aa3b3ba9e09d00

 wx/pages/registration/registration.wxml

@@ -6,31 +6,38 @@
    <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="card">
      <view class="card-title">个人信息</view>

    <!-- 基本信息 -->
    <view class="form-section">
      <view class="section-title">基本信息</view>
      
      <!-- 头像 -->
      <view class="form-item" bindtap="onChooseAvatar">
        <text class="label">照片</text>
        <view class="input-wrapper avatar-wrapper">
          <image 
            class="avatar-image" 
            src="{{localAvatarPath || formData.avatarUrl || '../../images/default-avatar.png'}}" 
            mode="aspectFill"
          />
          <text></text>
        </view>
      </view>

      <!-- 姓名 -->
      <view class="form-item {{errors.name ? 'error' : ''}}">
        <text class="label required">姓名</text>
        <view class="input-wrapper">
          <input 
            class="input" 
            placeholder-class="placeholder-class"
            placeholder="请输入真实姓名"
            value="{{formData.name}}"
            data-field="name"
            bindinput="onInputChange"
          />
          <text wx:if="{{errors.name}}" class="error-text">{{errors.name}}</text>
        </view>
        <text wx:if="{{errors.name}}" class="error-text">{{errors.name}}</text>
      </view>

      <!-- 手机号 -->
@@ -38,27 +45,21 @@
        <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>
            <block wx:if="{{formData.phone}}">
              <view class="phone-display">{{formData.phone}}</view>
              <button class="phone-change-btn" bindtap="onClearPhone">修改</button>
            </block>
            <block wx:else>
              <view class="phone-display placeholder">点击授权获取手机号</view>
              <button 
                class="phone-auth-btn" 
                open-type="getPhoneNumber" 
                bindgetphonenumber="onGetPhoneNumber"
              >授权</button>
            </block>
          </view>
          <text wx:if="{{errors.phone}}" class="error-text">{{errors.phone}}</text>
        </view>
        <text wx:if="{{errors.phone}}" class="error-text">{{errors.phone}}</text>
      </view>

      <!-- 性别 -->
@@ -72,12 +73,12 @@
            value="{{genderIndex}}"
            bindchange="onGenderChange"
          >
            <view class="picker-text">
            <view class="picker-text {{formData.gender === null ? 'placeholder' : ''}}">
              {{formData.gender !== null ? genderOptions[formData.gender] : '请选择性别'}}
            </view>
          </picker>
          <text wx:if="{{errors.gender}}" class="error-text">{{errors.gender}}</text>
        </view>
        <text wx:if="{{errors.gender}}" class="error-text">{{errors.gender}}</text>
      </view>

      <!-- 生日 -->
@@ -91,12 +92,12 @@
            bindchange="onBirthDateChange"
            end="{{today}}"
          >
            <view class="picker-text">
            <view class="picker-text {{!formData.birthDate ? 'placeholder' : ''}}">
              {{formData.birthDate || '请选择生日'}}
            </view>
          </picker>
          <text wx:if="{{errors.birthDate}}" class="error-text">{{errors.birthDate}}</text>
        </view>
        <text wx:if="{{errors.birthDate}}" class="error-text">{{errors.birthDate}}</text>
      </view>

      <!-- 所在区域 -->
@@ -111,12 +112,12 @@
            value="{{regionIndex}}"
            bindchange="onRegionChange"
          >
            <view class="picker-text">
            <view class="picker-text {{formData.regionId === null ? 'placeholder' : ''}}">
              {{formData.regionId !== null && regionIndex >= 0 ? regions[regionIndex].name : '请选择所在区域'}}
            </view>
          </picker>
          <text wx:if="{{errors.regionId}}" class="error-text">{{errors.regionId}}</text>
        </view>
        <text wx:if="{{errors.regionId}}" class="error-text">{{errors.regionId}}</text>
      </view>

      <!-- 教育背景 -->
@@ -130,134 +131,76 @@
            value="{{educationIndex}}"
            bindchange="onEducationChange"
          >
            <view class="picker-text">
            <view class="picker-text {{!formData.education ? 'placeholder' : ''}}">
              {{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>
        <text wx:if="{{errors.education}}" class="error-text">{{errors.education}}</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"
        />
        <view class="input-wrapper">
          <textarea 
            class="textarea" 
            placeholder-class="placeholder-class"
            placeholder="请简要介绍自己的背景、技能和经验"
            value="{{formData.introduction}}"
            data-field="introduction"
            bindinput="onInputChange"
            maxlength="500"
          />
        </view>
        <text wx:if="{{errors.introduction}}" class="error-text">{{errors.introduction}}</text>
      </view>

    </view>

    <!-- 个人介绍 -->
    <view class="form-section">
      <view class="section-title">个人介绍</view>
      
    <!-- 项目信息卡片 -->
    <view class="card">
      <view class="card-title">项目信息</view>
      <!-- 项目名称 -->
      <view class="form-item {{errors.projectName ? 'error' : ''}}">
        <text class="label required">项目名称</text>
        <view class="input-wrapper">
          <input 
            class="input" 
            placeholder-class="placeholder-class"
            placeholder="请输入项目名称"
            value="{{formData.projectName}}"
            data-field="projectName"
            bindinput="onInputChange"
          />
          <text wx:if="{{errors.projectName}}" class="error-text">{{errors.projectName}}</text>
        </view>
        <text wx:if="{{errors.projectName}}" class="error-text">{{errors.projectName}}</text>
      </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"
        />
        <view class="input-wrapper">
          <textarea 
            class="textarea" 
            placeholder-class="placeholder-class"
            placeholder="请详细描述您的项目内容、目标和特色"
            value="{{formData.description}}"
            data-field="description"
            bindinput="onInputChange"
            maxlength="1000"
          />
        </view>
        <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="card">
      <view class="card-title">附件资料</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 wx:for="{{attachments}}" wx:key="id" class="attachment-item">
            <view class="attachment-info">
              <view class="attachment-icon">
                <text wx:if="{{item.type === 'image'}}">🖼️</text>
@@ -269,38 +212,31 @@
              <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>
              <text class="delete-btn" bindtap="onDeleteAttachment" data-index="{{index}}">删除</text>
            </view>
          </view>
        </view>
        
        <!-- 附件数量提示 -->
        <view wx:if="{{attachments.length > 0}}" class="attachment-count">
          已上传 {{attachments.length}}/8 个文件
        <!-- 上传按钮 -->
        <view wx:if="{{attachments.length < maxAttachments}}" class="upload-btn" bindtap="onChooseAttachment">
          <view class="upload-icon">📎</view>
          <text class="upload-text">添加附件</text>
          <view class="upload-hint">
            支持视频/图片/PDF/Word等，最多{{maxAttachments}}个
          </view>
        </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>
      <text wx:if="{{errors.attachments}}" class="error-text" style="padding: 0 30rpx 30rpx;">{{errors.attachments}}</text>
    </view>
  </view>


  <!-- 底部操作栏 -->
  <view class="bottom-actions">
    <button class="submit-btn {{(isSubmitting || submitDisabled) ? 'disabled' : ''}}" bindtap="onSubmit" disabled="{{isSubmitting || submitDisabled}}">
      {{isSubmitting ? '提交中...' : submitText}}
    </button>
  </view>
</view>