fix:wifi页面弹窗隐藏逻辑修改&密码输入框新增查看密码功能
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user