shop-back/src/views/room/edit-room/index.vue

<template>
  <a-modal
    :visible="visible"
    title="创建房间"
    :after-close="onCancel"
    width="912px"
    @cancel="visible = false"
  >
    <template #footer>
      <a-button class="action-bottom" size="middle" @click="visible = false">
        取消
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="saveRoom"
      >
        保存
      </a-button>
      <a-button
        class="action-bottom"
        type="primary"
        size="middle"
        @click="onSave && onSave(current)"
      >
        开始带看
      </a-button>
    </template>
    <div class="edit-room-layout">
      <div class="scene">
        <template v-if="!current.scenes.length">
          {{ current }}
        </template>
        <iframe
          v-else
          :src="`https://test.4dkankan.com/spg.html?m=${current.scenes[0].num}`"
          frameborder="0"
        />
      </div>
      <a-form
        ref="formRef"
        class="info"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 24 }"
        :model="current"
      >
        <h4>房间信息</h4>
        <a-form-item
          label="标题"
          name="title"
          :rules="[{ required: true, message: '标题为必填字段' }]"
        >
          <a-input v-model:value="current.title" :maxlength="15" show-count />
        </a-form-item>
        <a-form-item label="简介" name="desc">
          <a-textarea
            v-model:value="current.desc"
            no
            :maxlength="200"
            show-count
          />
        </a-form-item>
        <h4>主持人信息</h4>
        <a-form-item
          label="昵称"
          name="leaderName"
          :rules="[{ required: true, message: '请输入昵称' }]"
        >
          <a-input
            v-model:value="current.leaderName"
            :maxlength="15"
            show-count
          />
        </a-form-item>
        <h4>选择场景</h4>
        <EditScenes
          :scenes="current.scenes"
          @delete="deleteScene"
          @insert="scene => current.scenes.push(scene)"
        />
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from 'vue'
import { createRoom } from '@/store'
import { props } from './props'
import EditScenes from './scene-list.vue'

import type { RoomScene } from '@/store'
import { FormInstance, message } from 'ant-design-vue'

export default defineComponent({
  name: 'EditRoom',
  components: { EditScenes },
  props,
  setup(props) {
    const visible = ref(true)
    const formRef = ref<FormInstance>()
    const current = reactive(createRoom(props.room || {}))
    const deleteScene = (scene: RoomScene) => {
      const index = current.scenes.indexOf(scene)
      if (~index) {
        current.scenes.splice(index, 1)
      }
    }
    const saveRoom = async () => {
      try {
        await formRef.value?.validate()
        if (!current.scenes.length) {
          return message.error('至少添加一个场景')
        }

        current.cover = current.scenes[0].cover
        props.onSave && props.onSave(current)
        visible.value = false
      } catch (config: any) {
        if (config && config.errorFields && config.errorFields.length) {
          message.error(config.errorFields[0].errors.join('，'))
        }
      }
    }

    return {
      visible,
      current,
      formRef,
      deleteScene,
      saveRoom
    }
  }
})
</script>

<style lang="scss" scoped>
.edit-room-layout {
  display: flex;
}
.scene {
  flex: none;
  width: 320px;
  margin-right: 30px;
  height: 692px;
  background: #f7f8fa;

  iframe {
    width: 100%;
    height: 100%;
  }
}

.info {
  flex: 1;

  h4 {
    font-size: 18px;
    color: #333;
    font-weight: 400;

    &:not(:first-child) {
      margin-top: 20px;
    }
  }
}
</style>

<style lang="scss">
.edit-room-layout {
  .ant-form-item {
    margin-bottom: 16px;
  }

  .ant-input-affix-wrapper,
  .ant-input {
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #ebedf0;
    padding: 6px 11px;
    // height: 36px;
  }

  textarea.ant-input {
    resize: none;
    height: 120px;
  }

  .ant-input-textarea {
    position: relative;

    &::after {
      position: absolute;
      bottom: 4px;
      right: 8px;
      margin: 0;
    }
  }

  .ant-form-item-label {
    padding-bottom: 0;
    > label {
      color: #646566;
    }
  }
}

.action-bottom {
  border-radius: 4px;
  min-width: 100px;
}
</style>