qjkankan_v1.1.1/packages/qjkankan-view/src/components/assembly/Password.vue

<template>
  <div class="passwordcon" v-if="show">
    <img :src="metadata.icon" alt="" />
    <ui-window @ok="onOk" :okText="$t('common.confirm')" :title="$t('common.tips')" :showCloseIcon="false" :showCancelButton="false">
      <template v-slot:content>
        <div class="wrapper">
          <ui-input
            type="password"
            :placeholder="$t('common.passwordTips')"
            maxlength="20"
            v-model.trim="password"
            width="100%"
            autocomplete="new-password"
            @input="onPasswordChange"
            @keyup.enter="onOk"
          />
          <span class="error">{{ error }}</span>
        </div>
      </template>
    </ui-window>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from "vue";
import { useI18n, getLocale } from "@/i18n";
import { useStore } from "vuex";
import { getApp } from '@/app'

const store = useStore();
const { t } = useI18n({ useScope: "global" });
const error = ref("");
const show = ref(false)
const password = ref("");
const passwordkey = computed(() => store.getters["scene/password"]);
const metadata = computed(() => store.getters['scene/metadata'])

const onOk = () => {
  let app = getApp()

  error.value = "";
  if (!password.value) {
    return (error.value = t("toast.inputPassword"));
  }
  if (password.value === passwordkey.value) {
    show.value = false;
    app.Scene.unlock();
  } else{
    error.value = t('common.passwordError')
  }
};
const onPasswordChange = (e) => {
  password.value = e.target.value.replace(/[^\w]/g, "").replace(/_/g, "");
};

watch(passwordkey, () => {
  if (passwordkey.value) {
    show.value = true;
  } else {
    getApp().Scene.unlock();
  }
});
</script>

<style lang="scss" scoped>
.passwordcon {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
  > img {
    width: 100%;
    height: 100%;
    filter: blur(15px);
    z-index: -1;
  }
}
.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.error {
  height: 18px;
  margin-top: 10px;
  color: red;
  text-align: left;
  width: 100%;
}
</style>