ZhuHaiGaoXinQuUnmovable/src/components/message/Password.vue

<template>
    <div class="ui-message ui-message-alert" v-if="show">
        <!-- <div class="ui-message-header">
            <span>{{title}}</span>
        </div> -->
        <div class="ui-message-main">
            <div class="ui-message-icon"></div>
            <div class="ui-message-content">
                <!-- <span>{{$t("show.password_title")}}</span> -->
                <input
                    type="password"
                    class="ui-input"
                    maxlength="4"
                    v-model.trim="password"
                    :placeholder="$t('show.password_tips')"
                    @keypress.enter="check"
                />
                <div class="ui-message-tips">
                    <transition
                        appear
                        name="custom-classes-transition"
                        enter-active-class="animated swing faster"
                    >
                        <div v-if="tips">{{tips}}</div>
                    </transition>
                </div>
            </div>
        </div>
        <div class="ui-message-footer">
            <button class="ui-button submit" @click="check">{{okText}}</button>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { PasswordDetector } from "@/core/starter";
export default {
    name: "ui-password",
    data() {
        return {
            title: "提示",
            tips: "",
            okText: this.$t('common.set'),
            password: "",
            isValid: false
        };
    },
    computed: {
        ...mapGetters({
            metadata: "scene/metadata"
        }),
        show() {
            if (this.metadata.needKey == 1 && !this.isValid) {
                return true;
            }
            return false;
        }
    },
    created() {
        PasswordDetector.register(
            detector => new Promise(resolve => detector.resolve(resolve))
        );
    },
    methods: {
        check() {
            this.tips = "";
            this.$nextTick(() => {
                if (!this.password) {
                    return (this.tips = this.$t("show.password_require"));
                }
                this.$api
                    .checkPassword(this.password)
                    .done(response => {
                        if (response.code == 0) {
                            this.isValid = true;
                            PasswordDetector.valid();
                        } else {
                            this.tips = this.$t('tips.password_error');
                        }
                    })
            });
        }
    }
};
</script>
<style lang="less" scoped>
.ui-message-main {
    padding-top: 10px;
    .ui-message-content {
        input {
            width: 180px;
            color: #000;
            border: none;
            background-color: #f0faf9;
        }
    }
    .ui-message-icon {
        background: url(~@/assets/images/icons/icon-lock.png) no-repeat center
            center;
        background-size: contain;
    }
    .ui-message-tips {
        color: red;
        margin-top: 20px;
        height: 24px;
    }
}
.ui-message-footer .ui-button {
    width: 40%;
}
</style>