usky-web-pad/src/pages/meeting/setting/password.vue

<template>
  <view class="password-container">
    <view class="password-box">
      <view class="password-title">请输入配置密码</view>
      <view class="password-input-box">
        <u-input v-model="password" type="password" :placeholder="'请输入密码'" border="none" :clearable="true" :maxlength="20" @confirm="handleConfirm"></u-input>
      </view>
      <view class="password-tip" v-if="errorTip">{{ errorTip }}</view>
      <view class="password-buttons">
        <u-button type="primary" :loading="loading" @click="handleConfirm" class="password-button"> 确认 </u-button>
        <u-button type="default" @click="handleCancel" class="password-button"> 取消 </u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance } from "vue";
import { controlStores } from "@/store/modules/index";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const controlStore = controlStores();
const password = ref("");
const errorTip = ref("");
const loading = ref(false);

// 默认密码，可以从配置或存储中读取
const defaultPassword = "123456";

/**
 * @确认密码
 */
function handleConfirm() {
  if (!password.value) {
    errorTip.value = "请输入密码";
    return;
  }

  loading.value = true;
  errorTip.value = "";

  // 模拟密码验证（实际可以从存储或服务器验证）
  setTimeout(() => {
    loading.value = false;

    if (password.value === defaultPassword) {
      // 密码正确，跳转到配置页面
      proxy.$tab.navigateTo("/pages/meeting/setting/index");
    } else {
      errorTip.value = "密码错误，请重新输入";
      password.value = "";
    }
  }, 300);
}

/**
 * @取消
 */
function handleCancel() {
  proxy.$tab.navigateBack(1);
  controlStore.initCamera(); //初始化摄像头
}

onLoad(() => {});
</script>

<style lang="scss" scoped>
.password-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.password-box {
  width: 90%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.password-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.password-input-box {
  margin-bottom: 20px;
}

.password-tip {
  color: #fa3534;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
  min-height: 20px;
}

.password-buttons {
  display: flex;
  gap: 15px;
}

.password-button {
  flex: 1;
}
</style>