|
|
@@ -0,0 +1,298 @@
|
|
|
+<template>
|
|
|
+ <div id="opt-password" @click.stop v-if="ifShow">
|
|
|
+ <div class="created_dialog">
|
|
|
+ <div class="blurBox"></div>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="dialog_title">请输入房间密码</div>
|
|
|
+ <div class="user_name">
|
|
|
+ <v-otp-input
|
|
|
+ class="otp-input-container"
|
|
|
+ ref="otpInput"
|
|
|
+ input-classes="otp-input"
|
|
|
+ separator="-"
|
|
|
+ :num-inputs="4"
|
|
|
+ :should-auto-focus="true"
|
|
|
+ :is-input-num="true"
|
|
|
+ :conditionalClass="['one', 'two', 'three', 'four']"
|
|
|
+ :placeholder="['*', '*', '*', '*']"
|
|
|
+ @on-change="handleOnChange"
|
|
|
+ @on-complete="handleOnComplete"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="created_btn">
|
|
|
+ <div class="created_cancel" @click="closeCreated">{{ t('base.cancel') }}</div>
|
|
|
+ <div class="created_confirm" @click="createdConfirm">{{ t('base.confirm') }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <Cropper v-bind="option" v-if="showCrop" @close="closeCrop" @ok="confirmCrop" /> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, watchEffect } from 'vue';
|
|
|
+
|
|
|
+ // import Dialog from '/@/components/basic/dialog';
|
|
|
+ import { useI18n } from '/@/hooks/useI18n';
|
|
|
+ // import { useSocket } from '/@/hooks/userSocket';
|
|
|
+ import VOtpInput from 'vue3-otp-input';
|
|
|
+ const emit = defineEmits(['closeDialog', 'confirmDialog']);
|
|
|
+ const { t } = useI18n();
|
|
|
+ // const regex = new RegExp('^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,15}$');
|
|
|
+
|
|
|
+ const password = ref('');
|
|
|
+ // const rtcStore = useRtcStore();
|
|
|
+ const ifShow = ref(false);
|
|
|
+ const props = defineProps({
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ watchEffect(() => {
|
|
|
+ if (props.show) {
|
|
|
+ ifShow.value = props.show;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const closeCreated = () => {
|
|
|
+ ifShow.value = false;
|
|
|
+ // const { closeSocket } = useSocket();
|
|
|
+ // emit('closeDialog');
|
|
|
+ // closeSocket();
|
|
|
+ emit('closeDialog');
|
|
|
+ };
|
|
|
+ const createdConfirm = () => {
|
|
|
+ emit('confirmDialog');
|
|
|
+ };
|
|
|
+ const handleOnChange = () => {};
|
|
|
+
|
|
|
+ const handleOnComplete = (value: string) => {
|
|
|
+ console.log('OTP completed: ', value);
|
|
|
+ password.value = value;
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ #opt-password {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+ // background: rgba(0, 0, 0, 0.5);
|
|
|
+ background: transparent;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000000;
|
|
|
+ // pointer-events: none;
|
|
|
+ .created_dialog {
|
|
|
+ width: 8.64rem;
|
|
|
+ min-height: 5rem;
|
|
|
+ // background: #ffffff;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ // overflow: hidden;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .blurBox {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ filter: blur(1px);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .avatar-box {
|
|
|
+ width: 1.7067rem;
|
|
|
+ height: 1.7067rem;
|
|
|
+ margin: 0.56rem auto 0;
|
|
|
+ border: 1px #fff solid;
|
|
|
+ border-radius: 50%;
|
|
|
+ // background-image: url('@/assets/images/avatar_default.jpg');
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ border: 1px #ed5d18 solid;
|
|
|
+ .tips {
|
|
|
+ color: #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5rem;
|
|
|
+ position: absolute;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ font-size: 0.22rem;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialog_title {
|
|
|
+ font-size: 0.39rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.39rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1.39rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-bottom-style: solid;
|
|
|
+ border-bottom-width: 1px;
|
|
|
+ border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ .user_name {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.11rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ margin: 0.56rem 0;
|
|
|
+ position: relative;
|
|
|
+ .limitNum {
|
|
|
+ position: absolute;
|
|
|
+ right: 0.64rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 0.33rem;
|
|
|
+ color: #b9bdbc;
|
|
|
+ }
|
|
|
+ .input_name {
|
|
|
+ font-size: 0.39rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ padding: 0 1.066667rem 0 0.28rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ &::placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mode_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.11rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 0.56rem;
|
|
|
+ > div.mode {
|
|
|
+ width: 3.61rem;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 0.65rem;
|
|
|
+ border: 0.03rem solid #fff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.active {
|
|
|
+ color: #ed5d18;
|
|
|
+ border: 0.03rem solid #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .created_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.36rem;
|
|
|
+ border-top-style: solid;
|
|
|
+ border-top-width: 1px;
|
|
|
+ border-top-color: rgba(255, 255, 255, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ > div {
|
|
|
+ width: 50%;
|
|
|
+ height: 1.36rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.36rem;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.created_cancel {
|
|
|
+ color: #fff;
|
|
|
+ border-right-style: solid;
|
|
|
+ border-right-width: 1px;
|
|
|
+ border-right-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ &.created_confirm {
|
|
|
+ color: #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .otp-input-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: row;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .otp-input {
|
|
|
+ width: 80px;
|
|
|
+ height: 60px;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 22px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(46, 46, 46, 0.9);
|
|
|
+ text-align: center;
|
|
|
+ caret-color: #ed5d18;
|
|
|
+ }
|
|
|
+ /* Background colour of an input field with value */
|
|
|
+ .otp-input.is-complete {
|
|
|
+ // background-color: #f6eaea;
|
|
|
+ background: rgba(46, 46, 46, 0.9);
|
|
|
+ }
|
|
|
+ .otp-input::-webkit-inner-spin-button,
|
|
|
+ .otp-input::-webkit-outer-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ input::placeholder {
|
|
|
+ font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
gemercheung