Browse Source

feat: input

gemercheung 1 year ago
parent
commit
a2ab6ceb68
2 changed files with 28 additions and 7 deletions
  1. 2 1
      src/locales/lang/webslate/zh.json
  2. 26 6
      src/views/room/edit-room/index.vue

+ 2 - 1
src/locales/lang/webslate/zh.json

@@ -131,7 +131,8 @@
         "avatar": "头像",
         "roomStatus0": "未开始",
         "roomStatus1": "带看中",
-        "roomStatus2": "已结束"
+        "roomStatus2": "已结束",
+        "setPasswordPlaceholder": "请输入4位数字密码"
     },
     "statistic": {
         "allStatus": "整体概况",

+ 26 - 6
src/views/room/edit-room/index.vue

@@ -184,13 +184,27 @@
           </a-form-item>
 
           <a-form-item
+            required
             :label="t('room.setPassword')"
             name="visitPassword"
             style="margin-bottom: 2px"
           >
-            <v-otp-input
-              ref="otpInput"
+            <!-- <a-input v-model:value="current.visitPassword" /> -->
+            <a-input
+              style="width: 200px"
+              type="text"
+              :placeholder="t('room.setPasswordPlaceholder')"
               v-model:value="current.visitPassword"
+              show-count
+              :maxlength="4"
+              :precision="0"
+              :formatter="transformNum"
+              @change="transformNum"
+            />
+
+            <!-- <v-otp-input
+              ref="otpInput"
+              v-model:value="current.visitPasswora-
               class="otp-container"
               input-classes="otp-input"
               input-type="number"
@@ -202,7 +216,7 @@
               :conditionalClass="['one', 'two', 'three', 'four']"
               :placeholder="['-', '-', '-', '-']"
               @on-change="handlePsOnChange"
-            />
+            /> -->
           </a-form-item>
           <a-form-item
             name="scenes"
@@ -337,7 +351,7 @@ import EditAlbum from './album-list.vue'
 import EditAvatar from './avatar.vue'
 import EditVideo from './video.vue'
 import unScenePng from '@/assets/images/un-scene.png'
-import VOtpInput from 'vue3-otp-input'
+// import VOtpInput from 'vue3-otp-input'
 import type { Scene } from '@/store/modules/scene'
 import type { FormInstance } from 'ant-design-vue'
 import { useI18n } from '@/hook/useI18n'
@@ -386,7 +400,7 @@ export default defineComponent({
   name: 'EditRoom',
   components: {
     EditScenes,
-    VOtpInput,
+    // VOtpInput,
     EditAlbum,
     EditAvatar,
     EditVideo
@@ -786,6 +800,11 @@ export default defineComponent({
         addFormRef.value.clearValidate()
       }
     }
+    const transformNum = () => {
+      if (current.visitPassword) {
+        current.visitPassword = current.visitPassword.replace(/[^\-?\d.]/g, '')
+      }
+    }
 
     return {
       isLive,
@@ -827,7 +846,8 @@ export default defineComponent({
       editorRef,
       handleEditorCreated,
       handlePsOnChange,
-      addFormRef
+      addFormRef,
+      transformNum
     }
   }
 })