|
|
@@ -1,28 +1,29 @@
|
|
|
<template>
|
|
|
- <a-modal
|
|
|
- :visible="visible"
|
|
|
- :title="!room ? t('room.createRoom') : t('room.editRoom')"
|
|
|
- :after-close="onCancel"
|
|
|
- width="912px"
|
|
|
- :style="{
|
|
|
- top: '10px',
|
|
|
- minWidth: '912px'
|
|
|
- }"
|
|
|
- @cancel="visible = false"
|
|
|
- >
|
|
|
- <template #footer>
|
|
|
- <a-button class="action-bottom" size="middle" @click="visible = false">
|
|
|
- {{ t('base.cancel') }}
|
|
|
- </a-button>
|
|
|
- <a-button
|
|
|
- class="action-bottom"
|
|
|
- type="primary"
|
|
|
- size="middle"
|
|
|
- @click="saveRoom"
|
|
|
- >
|
|
|
- {{ t('base.save') }}
|
|
|
- </a-button>
|
|
|
- <!-- <a-button
|
|
|
+ <a-config-provider :locale="getAntdLocale">
|
|
|
+ <a-modal
|
|
|
+ :visible="visible"
|
|
|
+ :title="!room ? t('room.createRoom') : t('room.editRoom')"
|
|
|
+ :after-close="onCancel"
|
|
|
+ width="912px"
|
|
|
+ :style="{
|
|
|
+ top: '10px',
|
|
|
+ minWidth: '912px'
|
|
|
+ }"
|
|
|
+ @cancel="visible = false"
|
|
|
+ >
|
|
|
+ <template #footer>
|
|
|
+ <a-button class="action-bottom" size="middle" @click="visible = false">
|
|
|
+ {{ t('base.cancel') }}
|
|
|
+ </a-button>
|
|
|
+ <a-button
|
|
|
+ class="action-bottom"
|
|
|
+ type="primary"
|
|
|
+ size="middle"
|
|
|
+ @click="saveRoom"
|
|
|
+ >
|
|
|
+ {{ t('base.save') }}
|
|
|
+ </a-button>
|
|
|
+ <!-- <a-button
|
|
|
v-if="room"
|
|
|
class="action-bottom"
|
|
|
type="primary"
|
|
|
@@ -31,86 +32,150 @@
|
|
|
>
|
|
|
开始带看
|
|
|
</a-button> -->
|
|
|
- </template>
|
|
|
- <div class="edit-room-layout">
|
|
|
- <div class="scene">
|
|
|
- <iframe
|
|
|
- v-if="current.scenes.length"
|
|
|
- :src="`${mainURL}/smg.html?m=${current.scenes[0].num}&mobile=true&lang=${returnLocale}`"
|
|
|
- frameborder="0"
|
|
|
- />
|
|
|
- <img v-else :src="unScenePng" />
|
|
|
- </div>
|
|
|
- <a-form
|
|
|
- ref="formRef"
|
|
|
- class="info"
|
|
|
- :label-col="{ span: 24 }"
|
|
|
- :wrapper-col="{ span: 24 }"
|
|
|
- :model="current"
|
|
|
- >
|
|
|
- <h4>{{ t('room.roomInfo') }}</h4>
|
|
|
- <a-form-item
|
|
|
- :label="t('room.form.title')"
|
|
|
- name="title"
|
|
|
- :rules="[{ required: true, message: t('room.form.titleRequired') }]"
|
|
|
- >
|
|
|
- <a-input
|
|
|
- v-model:value.trim="current.title"
|
|
|
- :placeholder="t('room.form.titleplaceHolder')"
|
|
|
- :maxlength="15"
|
|
|
- show-count
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- <a-form-item :label="t('room.form.desc')" name="desc">
|
|
|
- <a-textarea
|
|
|
- v-model:value="current.desc"
|
|
|
- :placeholder="t('room.form.descplaceHolder')"
|
|
|
- :maxlength="200"
|
|
|
- show-count
|
|
|
+ </template>
|
|
|
+ <div class="edit-room-layout">
|
|
|
+ <div class="scene">
|
|
|
+ <iframe
|
|
|
+ v-if="current.scenes.length"
|
|
|
+ :src="`${mainURL}/smg.html?m=${current.scenes[0].num}&mobile=true&lang=${returnLocale}`"
|
|
|
+ frameborder="0"
|
|
|
/>
|
|
|
- </a-form-item>
|
|
|
- <h4>{{ t('room.form.host') }}</h4>
|
|
|
- <a-form-item
|
|
|
- :label="t('room.form.nickname')"
|
|
|
- name="leaderName"
|
|
|
- :rules="[
|
|
|
- { required: true, message: t('room.form.nicknameRequired') },
|
|
|
- { validator: handleNickRegex }
|
|
|
- ]"
|
|
|
+ <img v-else :src="unScenePng" />
|
|
|
+ </div>
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ class="info"
|
|
|
+ :label-col="{ span: 24 }"
|
|
|
+ :wrapper-col="{ span: 24 }"
|
|
|
+ :model="current"
|
|
|
>
|
|
|
- <a-input
|
|
|
- v-model:value.trim="current.leaderName"
|
|
|
- :placeholder="t('room.form.nicknameDesc')"
|
|
|
- :maxlength="15"
|
|
|
- show-count
|
|
|
+ <h4>{{ t('room.roomInfo') }}</h4>
|
|
|
+ <a-form-item
|
|
|
+ :label="t('room.form.title')"
|
|
|
+ name="title"
|
|
|
+ :rules="[{ required: true, message: t('room.form.titleRequired') }]"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ v-model:value.trim="current.title"
|
|
|
+ :placeholder="t('room.form.titleplaceHolder')"
|
|
|
+ :maxlength="15"
|
|
|
+ show-count
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item :label="t('room.form.desc')" name="desc">
|
|
|
+ <a-textarea
|
|
|
+ v-model:value="current.desc"
|
|
|
+ :placeholder="t('room.form.descplaceHolder')"
|
|
|
+ :maxlength="200"
|
|
|
+ show-count
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <h4>{{ t('room.form.host') }}</h4>
|
|
|
+ <a-form-item
|
|
|
+ :label="t('room.form.nickname')"
|
|
|
+ name="leaderName"
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: t('room.form.nicknameRequired') },
|
|
|
+ { validator: handleNickRegex }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-input
|
|
|
+ v-model:value.trim="current.leaderName"
|
|
|
+ :placeholder="t('room.form.nicknameDesc')"
|
|
|
+ :maxlength="15"
|
|
|
+ show-count
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <h4>{{ t('room.form.selectScene') }}</h4>
|
|
|
+ <a-form-item
|
|
|
+ :label="t('room.form.addScene')"
|
|
|
+ class="select-scene"
|
|
|
+ name="scenes"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ <EditScenes
|
|
|
+ :scenes="current.scenes"
|
|
|
+ @delete="deleteScene"
|
|
|
+ @insert="scene => current.scenes.push(scene)"
|
|
|
/>
|
|
|
- </a-form-item>
|
|
|
- <h4>{{ t('room.form.selectScene') }}</h4>
|
|
|
- <a-form-item
|
|
|
- :label="t('room.form.addScene')"
|
|
|
- class="select-scene"
|
|
|
- name="scenes"
|
|
|
- style="margin-bottom: 2px"
|
|
|
- >
|
|
|
- </a-form-item>
|
|
|
- <EditScenes
|
|
|
- :scenes="current.scenes"
|
|
|
- @delete="deleteScene"
|
|
|
- @insert="scene => current.scenes.push(scene)"
|
|
|
- />
|
|
|
- <h4>{{ t('room.form.advanceConfig') }}</h4>
|
|
|
- <a-form-item
|
|
|
- label="使用时间"
|
|
|
- class="select-scene"
|
|
|
- name="scenes"
|
|
|
- style="margin-bottom: 2px"
|
|
|
- >
|
|
|
- <a-range-picker v-model:value="current.period" />
|
|
|
-
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </a-modal>
|
|
|
+ <h4>{{ t('room.form.advanceConfig') }}</h4>
|
|
|
+ <a-form-item
|
|
|
+ label="使用时间"
|
|
|
+ class="select-scene"
|
|
|
+ name="scenes"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ <a-range-picker
|
|
|
+ :show-time="{ format: 'HH:mm' }"
|
|
|
+ format="YYYY-MM-DD HH:mm"
|
|
|
+ style="width: 80%"
|
|
|
+ v-model:value="current.period"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="设置密码"
|
|
|
+ class="select-scene"
|
|
|
+ name="scenes"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ <v-otp-input
|
|
|
+ class="otp-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="['*', '*', '*', '*']"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="授权"
|
|
|
+ class="select-scene"
|
|
|
+ name="scenes"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ <a-button type="primary" ghost>
|
|
|
+ <template #icon><plus-outlined /></template>添加用户</a-button
|
|
|
+ >
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item
|
|
|
+ label="设置房间人数"
|
|
|
+ class="select-scene"
|
|
|
+ name="scenes"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ placeholder="请输入房间人数"
|
|
|
+ :min="5"
|
|
|
+ :max="50"
|
|
|
+ style="width: 80%"
|
|
|
+ >
|
|
|
+ <template #addonBefore>
|
|
|
+ <UserOutlined />
|
|
|
+ </template>
|
|
|
+ </a-input-number>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="设置模式"
|
|
|
+ class="select-scene"
|
|
|
+ name="mode"
|
|
|
+ style="margin-bottom: 2px"
|
|
|
+ >
|
|
|
+ <!-- v-model:value="value" -->
|
|
|
+ <a-radio-group name="radioGroup">
|
|
|
+ <a-radio value="1">带看</a-radio>
|
|
|
+ <a-radio value="2">自由观看模式</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </a-config-provider>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -121,14 +186,12 @@ import { message } from 'ant-design-vue'
|
|
|
import { mainURL } from '@/env'
|
|
|
import EditScenes from './scene-list.vue'
|
|
|
import unScenePng from '@/assets/images/un-scene.png'
|
|
|
-
|
|
|
+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'
|
|
|
import { useLocale } from '@/locales/useLocale'
|
|
|
|
|
|
-
|
|
|
-
|
|
|
// const titleValidator = ref({
|
|
|
// validator: (_, value) =>
|
|
|
// !value.includes(' ')
|
|
|
@@ -138,10 +201,11 @@ import { useLocale } from '@/locales/useLocale'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'EditRoom',
|
|
|
- components: { EditScenes },
|
|
|
+ components: { EditScenes, VOtpInput },
|
|
|
props,
|
|
|
setup(props) {
|
|
|
const visible = ref(true)
|
|
|
+ const { getAntdLocale } = useLocale()
|
|
|
const roomStore = useRoomStore()
|
|
|
const { getLocale } = useLocale()
|
|
|
const { t } = useI18n()
|
|
|
@@ -181,9 +245,7 @@ export default defineComponent({
|
|
|
'^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,15}$'
|
|
|
)
|
|
|
if (value?.length && !regex.test(value)) {
|
|
|
- return Promise.reject(
|
|
|
- t('room.nickNameRegrexError')
|
|
|
- )
|
|
|
+ return Promise.reject(t('room.nickNameRegrexError'))
|
|
|
}
|
|
|
return Promise.resolve('')
|
|
|
}
|
|
|
@@ -199,7 +261,8 @@ export default defineComponent({
|
|
|
saveRoom,
|
|
|
// startSync,
|
|
|
mainURL,
|
|
|
- unScenePng
|
|
|
+ unScenePng,
|
|
|
+ getAntdLocale
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -208,8 +271,16 @@ export default defineComponent({
|
|
|
<style lang="scss" scoped>
|
|
|
.edit-room-layout {
|
|
|
display: flex;
|
|
|
- min-width: 864px;
|
|
|
+ max-height: 700px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .info {
|
|
|
+ max-height: 700px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.scene {
|
|
|
flex: none;
|
|
|
width: 320px;
|
|
|
@@ -302,4 +373,28 @@ export default defineComponent({
|
|
|
line-height: 1;
|
|
|
content: '*';
|
|
|
}
|
|
|
+.otp-container {
|
|
|
+ input::placeholder {
|
|
|
+ font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+.otp-input {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
+ text-align: center;
|
|
|
+ &.is-complete {
|
|
|
+ background-color: #e4e4e4;
|
|
|
+ }
|
|
|
+ &::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
gemercheung