fix:wifi页面弹窗隐藏逻辑修改&密码输入框新增查看密码功能

This commit is contained in:
2026-06-02 15:03:10 +08:00
parent 209103742d
commit 32c37e283f

View File

@@ -24,6 +24,8 @@ const connectInput = ref({ ssid: "", password: "" });
const connectMode = ref("secure"); // secure | open | manual const connectMode = ref("secure"); // secure | open | manual
const connectError = ref(""); const connectError = ref("");
const keyboardHeight = ref(0); const keyboardHeight = ref(0);
// 控制密码输入框是否显示明文
const showPassword = ref(false);
const progress = ref(0); const progress = ref(0);
let progressTimer = null; let progressTimer = null;
@@ -457,7 +459,7 @@ onUnmounted(() => {
</view> </view>
<!-- CONNECTING 底部弹窗 --> <!-- CONNECTING 底部弹窗 -->
<view v-if="currentState === 'CONNECTING'" class="sheet-mask" @click="closeConnectSheet"> <view v-if="currentState === 'CONNECTING'" class="sheet-mask">
<view class="sheet" :style="{ marginBottom: keyboardHeight + 'px' }" @click.stop=""> <view class="sheet" :style="{ marginBottom: keyboardHeight + 'px' }" @click.stop="">
<image src="../static/ota/ota-bg.png" mode="aspectFill" class="sheet-bg" /> <image src="../static/ota/ota-bg.png" mode="aspectFill" class="sheet-bg" />
<view class="sheet-inner"> <view class="sheet-inner">
@@ -481,13 +483,21 @@ onUnmounted(() => {
<text class="input-label">密码</text> <text class="input-label">密码</text>
<input <input
class="input-field" class="input-field"
password :password="!showPassword"
v-model="connectInput.password" v-model="connectInput.password"
placeholder="输入网络密码" placeholder="输入网络密码"
placeholder-class="input-placeholder" placeholder-class="input-placeholder"
confirm-type="done" confirm-type="done"
@confirm="joinNetwork" @confirm="joinNetwork"
/> />
<!-- 密码显示/隐藏切换按钮 -->
<view class="pwd-eye-btn" @click="showPassword = !showPassword">
<image
:src="showPassword ? '../static/like-on.png' : '../static/like-off.png'"
mode="aspectFit"
style="width: 40rpx; height: 40rpx;"
/>
</view>
</view> </view>
<text v-if="connectError" class="connect-error">{{ connectError }}</text> <text v-if="connectError" class="connect-error">{{ connectError }}</text>
</block> </block>
@@ -535,13 +545,21 @@ onUnmounted(() => {
<text class="input-label">密码</text> <text class="input-label">密码</text>
<input <input
class="input-field" class="input-field"
password :password="!showPassword"
v-model="connectInput.password" v-model="connectInput.password"
placeholder="输入网络密码" placeholder="输入网络密码"
placeholder-class="input-placeholder" placeholder-class="input-placeholder"
confirm-type="done" confirm-type="done"
@confirm="joinNetwork" @confirm="joinNetwork"
/> />
<!-- 密码显示/隐藏切换按钮 -->
<view class="pwd-eye-btn" @click="showPassword = !showPassword">
<image
:src="showPassword ? '../static/like-on.png' : '../static/like-off.png'"
mode="aspectFit"
style="width: 40rpx; height: 40rpx;"
/>
</view>
</view> </view>
<text v-if="ssidWarning" class="connect-error">{{ ssidWarning }}</text> <text v-if="ssidWarning" class="connect-error">{{ ssidWarning }}</text>
<text v-else-if="connectError" class="connect-error">{{ connectError }}</text> <text v-else-if="connectError" class="connect-error">{{ connectError }}</text>
@@ -873,4 +891,14 @@ onUnmounted(() => {
.input-placeholder { .input-placeholder {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
} }
/* 密码查看切换按钮 */
.pwd-eye-btn {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
</style> </style>