metaverse2024vue/src/views/create/createSceneH5.vue

<template>
  <div class=" w-full h-full app-pageContainer" style="overflow: hidden;">
    <div class=" w-full py-3 px-10 border-b border-gray-200">
      创建场景
    </div>
    <!-- 第一步场景基本信息 -->
    <div v-show="active == 1" class="px-6 py-8 mx-auto overflow-y-auto w-full"
      style="height: calc(100% - 49px - 80px - 60px);">
      <div>
        <div class="py-4 flex flex-col">
          <div class="w-20 h-20">
            <div v-if="!character.id" @click="showPopup1 = true"
              class="w-20 h-20 bg-gray-100 rounded-full cursor-pointer flex flex-col justify-center items-center text-sm hover:bg-gray-200">
              <p>选择</p>
              <p>角色</p>
            </div>
            <img v-else class="w-20 h-20 rounded-full cursor-pointer object-cover shadow" @click="showPopup1 = true"
              :src="baseApi + character.picture" alt="">
          </div>
          <div class="mt-1.5 text-2xl">{{ character.id ? character.characterName : '请选择角色' }}</div>
          <div class="mt-1 text-gray-400 text-sm">定义角色所属的上下文，为角色补充创作的故事或设定。</div>
        </div>

        <div class="py-4">
          <div>场景名称</div>
          <div class="mt-1 text-gray-400 text-sm">场景的标题</div>
          <el-input class="mt-4" v-model="form.sceneName" placeholder="例如：第一次约会" maxlength="10"
            show-word-limit></el-input>
        </div>

        <div class="py-4">
          <div>场景描述</div>
          <div class="mt-1 text-gray-400 text-sm">
            详细的场景描述，可以为角色补充创作的故事或设定，可以指定互动发生的位置和时间。
          </div>
          <el-input class="mt-4" v-model="form.sceneDescription" placeholder="例：{char} 成为 {user} 的女朋友已有一段時間了，今天你们决定开始同居。"
            type="textarea" maxlength="400" :autosize="{ minRows: 4 }" show-word-limit></el-input>
        </div>
        <div class="py-4">
          <div>欢迎语</div>
          <div class="mt-1 text-gray-400 text-sm">
            请填写欢迎语和指定的发言角色，這将会是进入场景时收到的第一句话，将会印象场景的剧情走向
          </div>
          <el-input class="mt-4" v-model="form.sceneWelcome" placeholder="例如：他的声音里充满了恼怒，问道： “你是我新來的保姆吗？”" type="textarea"
            maxlength="400" :autosize="{ minRows: 4 }" show-word-limit></el-input>
        </div>
        <div class="py-4">
          <div>模型</div>
          <div class="flex items-start py-3">
            <el-radio-group class="radio" v-model="form.modelId">
              <el-radio-button v-for="(item, index) in modelList" :key="index" :label="item.id">
                {{ item.model }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二步背景 -->
    <div v-show="active == 2" class="w-full relative" style="height: calc(100% - 49px - 80px - 60px);">
      <img v-if="uploadList.length > 0" class=" w-full h-full object-cover" :src="baseApi + uploadList[bgActive].url"
        alt="">
      <div
        class="absolute bg-white p-4 bottom-1/2 right-1/2 transform translate-x-1/2 translate-y-1/2 rounded-lg border border-gray-200"
        style="height: 582px;">
        <el-tabs v-model="tabActive2">
          <el-tab-pane label="上传背景" name="1">
            <div class="flex flex-col">
              <div>直接使用上传的图像</div>
              <div class="mt-1 text-gray-400 text-sm">直接使用上传的图像</div>
              <el-upload class=" w-full text-center mt-4" drag :action="uploadUrl" :headers="headers"
                :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError"
                :show-file-list="false" :limit="10">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5M</div>
              </el-upload>
              <div>背景</div>
              <div class="mt-2 grid grid-cols-4 gap-1 gap-y-2">
                <div v-for="(item, index) in uploadList" :key="index" @click="bgActive = index">
                  <img class=" rounded object-cover cursor-pointer border" :class="bgActive === index ? 'bgActive' : ''"
                    style="width: 120px; height: 90px;" :src="baseApi + item.url" alt="">
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="bottom flex justify-end items-center pr-6">
      <el-button v-if="active == 1" type="primary" :disabled="nextDisabled" @click="next()">下一步</el-button>
      <el-button v-if="active == 2" @click="active--">上一步</el-button>

      <el-dropdown @command="handleCommand" trigger="click">
        <el-button class="mx-2 w-28 " v-show="active == 2">
          {{ this.form.type == 0 ? '公开' : '非公开' }}
          <i class="el-icon-arrow-up el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="0">公开</el-dropdown-item>
          <el-dropdown-item command="1">非公开</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button v-if="active == 2" :disabled="uploadList.length == 0" type="primary" @click="submit">发布</el-button>
    </div>
    <!-- 选择角色对话框 -->
    <el-dialog class="dialog" title="选择角色" :visible.sync="showPopup1" fullscreen>
      <div>
        <span>选择要在哪个角色上新增场景？</span>
        <el-tabs v-model="tabActive" @tab-click="handleClickTab">
          <el-tab-pane label="我的角色" name="1">
            <div class=" grid grid-cols-3 gap-8">
              <div v-for="(item, index) in userCharacterList" :key="index" @click="selectCharacter(item)">
                <img class="rounded-full object-cover cursor-pointer w-20 h-20" :src="baseApi + item.picture" alt="">
                <div class="characterName text-center w-20">{{ item.characterName }}</div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="热门角色" name="2">
            <div class=" grid grid-cols-3 gap-8 justify-items-center">
              <div v-for="(item, index) in characterList" :key="index" @click="selectCharacter(item)">
                <img class="rounded-full object-cover cursor-pointer w-20 h-20" :src="baseApi + item.picture" alt="">
                <div class="characterName text-center w-20">{{ item.characterName }}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  getModelListApi,
} from "@/api/chat.js"
import { characterListApi } from "@/api/home.js"
import { addSceneApi, getSceneDetailApi, editSceneApi } from "@/api/create.js"
import { detailApi } from "@/api/detail.js"
import { queryCharactersApi } from "@/api/profile.js"
export default {
  data() {
    return {
      active: 1,
      showPopup1: false,
      tabActive: '1',
      tabActive2: '1',
      form: {
        // 角色id
        characterId: '',
        // 场景名称
        sceneName: '',
        // 场景描述
        sceneDescription: '',
        // 欢迎语
        sceneWelcome: '',
        // 模型
        modelId: '',
        // 背景图
        background: '',
        //公开非公开
        type: 0
      },
      // 模型列表
      modelList: [],
      bagImg: '',
      // 用户创建的角色列表
      userCharacterList: [],
      // 热门角色列表
      characterList: [],
      // 选中的角色对象
      character: {},
      // 上传图片相关↓
      uploadUrl: process.env.VUE_APP_BASE_API + "/appUser/system/app/upload", // 上传的图片服务器地址
      headers: {
        UserToken: getToken()
      },
      uploadList: [],
      fileSize: 5,
      bgActive: 0
    }
  },
  mounted() {
    // 查询用户自己创建的角色
    this.queryCharacters()
    this.getModelList()
    this.getCharacterList()
    if (this.$route.query.characterId) {
      this.getDetail(this.$route.query.characterId)
      // this.character = {
      //   id: this.$route.query.characterId,
      // }
      this.form.characterId = this.$route.query.characterId
    }
    if (this.$route.query.sceneId) {
      this.getSceneDetai(this.$route.query.sceneId)
    }
  },
  computed: {
    nextDisabled() {
      return this.form.sceneName == '' || this.form.sceneDescription == '' || this.form.sceneWelcome == '' || this.form.modelId == ''
    }
  },
  methods: {
    queryCharacters() {
      let params = {
        pageSize: 10,
        pageNum: 1
      }
      queryCharactersApi(params).then(res => {
        console.log(res, '人物列表');
        this.userCharacterList = res.rows
      })
    },
    getCharacterList(query) {
      let params = {
        pageSize: 10,
        pageNum: 1
      }
      if (query) {
        params = { ...params, ...query }
      }
      characterListApi(params).then(res => {
        // console.log(res, '角色列表');
        this.characterList = res.rows
      })
    },
    getModelList() {
      getModelListApi().then(res => {
        console.log(res, '模型列表');
        this.modelList = res.data
      })
    },
    // 获取角色详情
    getDetail(id) {
      detailApi(id).then(res => {
        console.log(res, '角色详情');
        this.character = res.data
      })
    },
    // 获取场景详情
    getSceneDetai(id) {
      getSceneDetailApi(id).then(res => {
        console.log(res, '场景详情');
        this.form = res.data
        let backgroundArr = res.data.background.split('/')
        this.uploadList.push({ name: backgroundArr[backgroundArr.length - 1], url: res.data.background });
      })
    },
    // 选择角色
    selectCharacter(value) {
      console.log(value, 'value');
      this.character = value
      this.form.characterId = value.id
      this.showPopup1 = false
    },
    handleCommand(value) {
      this.form.type = value
    },
    // 下一步
    next() {
      this.active++
    },
    submit() {
      this.form.background = this.uploadList[this.bgActive].url
      if (this.form.sceneId) {
        // 修改
        editSceneApi(this.form).then(res => {
          console.log(res, 'res>>>>>');
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.$router.push('/profile')
        })
      } else {
        // 新增
        addSceneApi(this.form).then(res => {
          console.log(res, 'res>>>>>');
          this.$message({
            type: 'success',
            message: '发布成功!'
          });
          this.$router.push('/profile')
        })
      }
    },
    handleClickTab(tab, event) {

    },
    // 上传背景相关业务
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({ name: res.originalFilename, url: res.fileName });
        this.$message({
          type: 'success',
          message: '上传成功!'
        });
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        });
      }
    },
    // 上传结束处理
    uploadedSuccessfully() {
      console.log(this.uploadList, 'this.uploadList');
      // this.$emit("input", this.listToString(this.fileList));
      // this.$modal.closeLoading();
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传图片失败，请重试");
    },
  }
}
</script>

<style lang="scss" scoped>
.bottom {
  height: 80px;
}

.characterName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgActive {
  border: solid 2px var(--bg-color1);
}
</style>
<style scoped>
.radio>>>.el-radio-button {
  margin-bottom: 5px;
  margin-right: 10px;
  /* border-left: solid 1px #DCDFE6; */
}

.radio>>>.el-radio-button__inner {
  border-left: solid 1px #DCDFE6;
  border-radius: 4px;
}

.radio>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  border-left: solid 1px var(--bg-color1);
  background-color: var(--bg-color1);
  border-color: var(--bg-color1);
  -webkit-box-shadow: -1px 0 0 0 var(--bg-color1);
  box-shadow: -1px 0 0 0 var(--bg-color1);
}
</style>