92 lines
2.6 KiB
Plaintext
92 lines
2.6 KiB
Plaintext
<view class="connected-wifi">
|
|
|
|
<!-- 顶部装饰:configuring 显示三层同心圆动画;其余状态显示静态占位图 -->
|
|
<block wx:if="{{ status === 'configuring' }}">
|
|
<view class="ripple"></view>
|
|
</block>
|
|
<block wx:else>
|
|
<view class="hero"></view>
|
|
</block>
|
|
|
|
<!-- 主标题:随状态切换 -->
|
|
<view class="title">
|
|
{{
|
|
status === 'idle' ? '为设备配置 WiFi' :
|
|
status === 'configuring' ? '正在配网中...' :
|
|
status === 'success' ? '配网成功' : '配网失败'
|
|
}}
|
|
</view>
|
|
|
|
<!-- 副标题:随状态切换 -->
|
|
<view class="sub-title">
|
|
{{
|
|
status === 'idle' ? '请输入 2.4G WiFi 名称和密码,确保设备处于配网状态' :
|
|
status === 'configuring' ? '请保持设备与手机靠近,正在传输配网信息' :
|
|
status === 'success' ? '设备已成功连入 WiFi 网络,可正常使用' : '请检查 WiFi 密码或设备状态后重试'
|
|
}}
|
|
</view>
|
|
|
|
<!-- 配网表单:idle / configuring / failed 时显示 -->
|
|
<block wx:if="{{ status !== 'success' }}">
|
|
<view class="wifi-form">
|
|
|
|
<!-- WiFi 名称行 -->
|
|
<view class="form-row">
|
|
<text class="form-label">WiFi 名称</text>
|
|
<input
|
|
class="form-input"
|
|
type="text"
|
|
placeholder="请输入 WiFi 名称"
|
|
placeholder-class="form-placeholder"
|
|
value="{{ form.ssid }}"
|
|
disabled="{{ status === 'configuring' }}"
|
|
bindinput="onInputSsid"
|
|
/>
|
|
</view>
|
|
|
|
<!-- WiFi 密码行 -->
|
|
<view class="form-row">
|
|
<text class="form-label">WiFi 密码</text>
|
|
<input
|
|
class="form-input"
|
|
password="{{ !form.showPwd }}"
|
|
placeholder="请输入 WiFi 密码"
|
|
placeholder-class="form-placeholder"
|
|
value="{{ form.password }}"
|
|
disabled="{{ status === 'configuring' }}"
|
|
bindinput="onInputPwd"
|
|
/>
|
|
<view class="form-eye" bind:tap="onTogglePwd">
|
|
{{ form.showPwd ? '隐藏' : '显示' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 成功结果区:仅 success 显示 -->
|
|
<block wx:if="{{ status === 'success' }}">
|
|
<view class="result-success">
|
|
<view class="result-icon-success"></view>
|
|
<view class="result-text">设备已成功连接到 {{ form.ssid || '当前 WiFi' }}</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 主按钮:文案与可用状态随 status 切换 -->
|
|
<view
|
|
class="submit-btn {{ status === 'configuring' ? 'submit-btn-disabled' : '' }}"
|
|
bind:tap="onSubmit"
|
|
>
|
|
{{
|
|
status === 'idle' ? '开始配网' :
|
|
status === 'configuring' ? '配网中...' :
|
|
status === 'success' ? '完成' : '重新配网'
|
|
}}
|
|
</view>
|
|
|
|
<!-- 帮助文案 -->
|
|
<view class="help">
|
|
<text class="help-text">设备无法连接 WiFi?</text>
|
|
<text class="help-link" bind:tap="onOpenHelp">查看帮助</text>
|
|
</view>
|
|
</view>
|