115 lines
7.0 KiB
Plaintext
115 lines
7.0 KiB
Plaintext
<view class="page application-page">
|
||
<view class="progress-card" aria-label="申请步骤">
|
||
<view class="progress-meta">
|
||
<text>第 {{step}} 步，共 {{totalSteps}} 步</text>
|
||
<text>{{step === 1 ? '选择服务' : step === 2 ? '申请关系' : step === 3 ? '联系方式' : step === 4 ? '描述需求' : '确认提交'}}</text>
|
||
</view>
|
||
<view class="progress-track"><view class="progress-value step-{{step}}"></view></view>
|
||
</view>
|
||
|
||
<view wx:if="{{loading}}" class="form-card" aria-live="polite">
|
||
<view class="skeleton-card" wx:for="{{[1, 2, 3]}}" wx:key="*this"></view>
|
||
<text class="state-text">正在读取服务类型…</text>
|
||
</view>
|
||
|
||
<view wx:elif="{{loading === false && categories.length === 0}}" class="state-card">
|
||
<text class="state-title">暂时无法读取服务类型</text>
|
||
<text class="state-text">{{errorMessage}}</text>
|
||
<button class="secondary-button" bindtap="retryLoad">重新加载</button>
|
||
</view>
|
||
|
||
<block wx:else>
|
||
<view wx:if="{{step === 1}}" class="form-card">
|
||
<view class="application-banner"><text>请选择需要的服务类型</text><text>我们会认真了解并及时回应</text></view>
|
||
<button
|
||
wx:for="{{categories}}"
|
||
wx:key="code"
|
||
class="selection-card {{serviceCategory === item.code ? 'selection-card--selected' : ''}}"
|
||
data-code="{{item.code}}"
|
||
bindtap="selectCategory"
|
||
aria-label="{{item.label}}：{{item.description}}"
|
||
>
|
||
<image wx:if="{{item.code === 'OLD_AGE'}}" class="selection-photo" src="/assets/images/brand-elder-care.jpg" mode="aspectFill" />
|
||
<image wx:elif="{{item.code === 'WOMEN_CHILDREN'}}" class="selection-photo" src="/assets/images/brand-women-support.jpg" mode="aspectFill" />
|
||
<image wx:elif="{{item.code === 'DISABILITY'}}" class="selection-photo" src="/assets/images/brand-disability-support.jpg" mode="aspectFill" />
|
||
<view wx:else class="selection-photo selection-photo--fallback">公益服务</view>
|
||
<view class="selection-content">
|
||
<text class="selection-title">{{item.label}}</text>
|
||
<text class="selection-description">{{item.description}}</text>
|
||
</view>
|
||
<text class="selection-status">{{serviceCategory === item.code ? '✓' : '›'}}</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view wx:elif="{{step === 2}}" class="form-card">
|
||
<text class="form-title">帮谁申请？</text>
|
||
<text class="form-hint">请选择您与服务对象的关系。</text>
|
||
<button
|
||
wx:for="{{modeOptions}}"
|
||
wx:key="code"
|
||
class="selection-card selection-card--simple {{applyMode === item.code ? 'selection-card--selected' : ''}}"
|
||
data-code="{{item.code}}"
|
||
bindtap="selectMode"
|
||
>
|
||
<text class="selection-title">{{item.label}}</text>
|
||
<text class="selection-status">{{applyMode === item.code ? '已选择' : '选择'}}</text>
|
||
</button>
|
||
</view>
|
||
|
||
<view wx:elif="{{step === 3}}" class="form-card">
|
||
<text class="form-title">留下联系方式</text>
|
||
<text class="form-hint">只填写联系服务所必需的信息，不需要精确门牌地址。</text>
|
||
<text class="field-label">服务对象姓名或称呼 *</text>
|
||
<input class="field-input" value="{{beneficiaryName}}" maxlength="50" placeholder="例如：王阿姨" bindinput="updateBeneficiaryName" />
|
||
<text class="field-label">联系电话 *</text>
|
||
<input class="field-input" value="{{contactMobile}}" type="number" maxlength="11" placeholder="请输入 11 位手机号码" bindinput="updateContactMobile" />
|
||
<text class="field-label">所在地区 *</text>
|
||
<input class="field-input" value="{{regionCode}}" maxlength="100" placeholder="例如：丹阳市开发区" bindinput="updateRegionCode" />
|
||
<text class="field-label">期望联系时间（可选）</text>
|
||
<input class="field-input" value="{{preferredContactTime}}" maxlength="100" placeholder="例如：工作日上午" bindinput="updatePreferredContactTime" />
|
||
</view>
|
||
|
||
<view wx:elif="{{step === 4}}" class="form-card">
|
||
<text class="form-title">简单描述需要的帮助</text>
|
||
<text class="form-hint">请勿填写身份证号码、银行卡号或精确门牌地址。</text>
|
||
<textarea class="field-textarea" value="{{description}}" maxlength="1000" placeholder="请至少用 10 个字描述目前遇到的困难或希望得到的帮助" bindinput="updateDescription"></textarea>
|
||
<text class="character-count">{{description.length}} / 1000</text>
|
||
<view class="switch-row">
|
||
<view><text class="switch-title">是否希望上门服务</text><text class="switch-hint">工作人员会根据情况确认</text></view>
|
||
<switch color="#FF6B35" checked="{{needsHomeVisit}}" bindchange="updateNeedsHomeVisit" />
|
||
</view>
|
||
<view class="switch-row">
|
||
<view><text class="switch-title">行动是否不方便</text><text class="switch-hint">帮助工作人员做好联系准备</text></view>
|
||
<switch color="#FF6B35" checked="{{mobilityDifficulty}}" bindchange="updateMobilityDifficulty" />
|
||
</view>
|
||
<view class="emergency-note">如遇危及生命安全的紧急情况，请立即联系 110 或 120。</view>
|
||
</view>
|
||
|
||
<view wx:else class="form-card">
|
||
<text class="form-title">确认申请信息</text>
|
||
<text class="form-hint">提交前请确认，联系方式仅供授权工作人员提供服务使用。</text>
|
||
<view class="summary-list">
|
||
<view class="summary-row"><text>服务类型</text><text>{{serviceCategoryLabel}}</text></view>
|
||
<view class="summary-row"><text>申请关系</text><text>{{applyModeLabel}}</text></view>
|
||
<view class="summary-row"><text>服务对象</text><text>{{beneficiaryName}}</text></view>
|
||
<view class="summary-row"><text>联系电话</text><text>{{contactMobileMasked}}</text></view>
|
||
<view class="summary-row"><text>所在地区</text><text>{{regionCode}}</text></view>
|
||
</view>
|
||
<view class="description-summary"><text class="summary-label">需求说明</text><text>{{description}}</text></view>
|
||
<checkbox-group bindchange="updatePrivacyConsent">
|
||
<label class="consent-row">
|
||
<checkbox value="accepted" checked="{{privacyConsent}}" color="#FF6B35" />
|
||
<text>我已阅读并同意本次服务申请的隐私授权，确认所填信息用于公益服务联系、评估和必要留痕。</text>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
<text wx:if="{{errorMessage}}" class="inline-error" aria-live="assertive">{{errorMessage}}</text>
|
||
<view class="form-actions">
|
||
<button wx:if="{{step > 1}}" class="secondary-button action-button" disabled="{{submitting}}" bindtap="previousStep">上一步</button>
|
||
<button wx:if="{{step < totalSteps}}" class="primary-button action-button" bindtap="nextStep">下一步</button>
|
||
<button wx:else class="primary-button action-button" loading="{{submitting}}" disabled="{{submitting}}" bindtap="submitApplication">{{submitting ? '正在提交…' : '提交申请'}}</button>
|
||
</view>
|
||
</block>
|
||
</view>
|