qjkankan_v1.1.1/packages/qjkankan-editor/src/framework/EditorHead.vue

<template>
  <header class="app-head" app-border dir-bottom>
    <a class="app-head-back" :href="`./material.html?lang=${$lang}#/works`">
      <i class="iconfont icon-editor_return"></i>
      {{ back_myworks }}
    </a>
    <span class="app-head-title">{{ info.name }}</span>
    <div
      class="app-head-save ui-button deepcancel app-head-view"
      @click="onView"
      :class="{ disable: !canLoad || isEditing }"
    >
      <i class="iconfont icon-editor_play"></i>
      {{ preview }}
    </div>

    <div
      class="ui-button submit app-head-save"
      @click="onSave"
      :class="{ disable: !canLoad || isEditing }"
    >
      <i class="iconfont icon-editor_save"></i>
      {{ savetips }}
    </div>
    <preview
      v-if="info"
      :key="Math.random()"
      :name="info.name"
      :show="showPreview"
      :ifr="`./show.html?id=${info.id}&lang=${$lang}&rnd=${Math.random()}`"
      @close="showPreview = false"
    />
  </header>
</template>
<script>
import { saveWorks, getPanoInfo, checkLogin } from "@/api";
import { mapGetters } from "vuex";
// import config from '@/config'
import preview from "@/components/preview";
import { i18n } from "@/lang";
import { $waiting } from "@/components/shared/loading";

let hhhreg = /\\\\\\\\/g;

export default {
  name: "app-head",
  data() {
    return {
      back_myworks: i18n.t("edit_page.back_myworks"),
      preview: i18n.t("edit_page.preview"),
      savetips: i18n.t("edit_page.save"),

      showPreview: false,
      canLoad: false,
    };
  },

  components: { preview },

  mounted() {
    this.$bus.on("canLoad", (data) => {
      this.canLoad = data;
      if (data) {
        this.getInfo().then((res) => {
          // getInfo里调用了后端接口，底层用了jquery的网络请求方法，为啥会导致promise嵌套没有展平，res拿到的不是promise 对象的resolve值而是promise对象本身？？？？
          res.then(() => {
            this.$store.commit("TakeInfoSnapShotAtSave");
          });
        });
      }
    });
  },
  computed: {
    ...mapGetters({
      info: "info",
      isShow: "isShow",
      catalogTopology: "catalogTopology",
      currentScene: "scene/currentScene",
      isEditing: "isEditing",
    }),
  },
  methods: {
    checkParams() {
      if (
        !this.info.name &&
        !this.info.icon &&
        !this.info.description &&
        this.info.scenes.length <= 0
      ) {
        this.$alert({
          content: this.$i18n.t("gather.nothing_edit"),
          ok: () => {
            this.$router.push({ path: "/base" });
          },
        });
        return false;
      }
      return true;
    },
    onView() {
      if (!this.checkParams()) {
        return;
      }
      const isFixData = this.fixData();
      if (isFixData) {
        this.info.scenes = this.info.scenes.map((item) => {
          if (typeof item.someData == "string") {
            item.someData = item.someData.replace(hhhreg, "");
          }
          return item;
        });
        $waiting.show();

        saveWorks(
          {
            password: this.info.password,
            someData: { ...this.info, status: 1 },
          },
          () => {
            this.$msg.success(this.$i18n.t("gather.save_done"));
            // document.title = this.info.name;
            document.title = this.info.name || this.$i18n.t("gather.no_title");
            // this.getInfo().then((res) => {
            //   // getInfo里调用了后端接口，底层用了jquery的网络请求方法，为啥会导致promise嵌套没有展平，res拿到的不是promise 对象的resolve值而是promise对象本身？？？？
            //   res.then(() => {
            //     this.$store.commit("UpdateIsShowState", true);
            //     $waiting.hide()
            //     setTimeout(() => {
            //       if (this.info.scenes.length <= 0 && this.isShow) {
            //         return this.$alert({
            //           content: this.$i18n.t('gather.at_least_one_scene'),
            //         });
            //       }
            //       this.showPreview = true;
            //     }, 500);
            //   })
            // });
            $waiting.hide();
            if (this.info.scenes.length <= 0 && this.isShow) {
              return this.$alert({
                content: this.$i18n.t("gather.at_least_one_scene"),
              });
            }
            this.showPreview = true;
          }
        );
      }
    },

    fixData() {
      // 如果没有设置作品封面，拿第一个一级分组内第一个二级分组内第一个场景作为作品封面。
      if (!this.info.icon) {
        this.info.icon = this.catalogTopology[0].children[0].children[0].icon;
      }

      if (this.info.firstScene) {
        this.info.firstScene = this.info.scenes.find(
          (item) => item.sceneCode == this.info.firstScene.sceneCode
        );
      }
      const scenes = this.info.scenes;
      if (scenes && scenes.length > 0) {
        scenes.forEach((scene, index) => {
          if (
            scene.someData &&
            scene.someData.hotspots &&
            scene.someData.hotspots.length > 0
          ) {
            this.lockHotspotResourceTree(index, scene.someData.hotspots);
          }
        });
      }
      //开场校验
      if (this.info.coverInfo.isShowCover === 1) {
        if (this.info.coverInfo.coverSelect === "videoAndImg") {
          if (
            !this.info.coverInfo.coverPc ||
            !this.info.coverInfo.coverMo ||
            !this.info.coverInfo.videoPc ||
            !this.info.coverInfo.videoMo
          ) {
            this.$msg.warning(this.$i18n.t("gather.converinfo_no_valid"));
            return false;
          }
        }
        if (this.info.coverInfo.coverSelect === "video") {
          if (
            !this.info.coverInfo.videoPc ||
            !this.info.coverInfo.videoMo ||
            this.info.coverInfo.videoPc == "" ||
            this.info.coverInfo.videoMo == ""
          ) {
            this.$msg.warning(this.$i18n.t("gather.converinfo_no_valid"));
            return false;
          }
        }
        if (this.info.coverInfo.coverSelect === "img") {
          if (
            !this.info.coverInfo.coverPc ||
            !this.info.coverInfo.coverMo ||
            this.info.coverInfo.coverPc == "" ||
            this.info.coverInfo.coverMo == ""
          ) {
            this.$msg.warning(this.$i18n.t("gather.converinfo_no_valid"));
            return false;
          }
        }

        //新增不上传背景底图限制
        if (this.info.coverInfo.coverImgBac === "imgTile") {
          if (!this.info.coverInfo.coverBac) {
            this.$msg.warning(this.$i18n.t("gather.converinfo_no_valid"));
            return false;
          }
        }
      }
      return true;
      // this.lockHotspotResourceTree();
      // fodderId:[] 资源引用给后端
    },
    /**
     * 给热点的资源引用上锁
     */
    lockHotspotResourceTree(sceneIndex, hotspots) {
      hotspots.forEach((item, index) => {
        const target = this.info.scenes[sceneIndex].someData.hotspots[index];
        let fodderId = [];

        switch (item.hotspotType) {
          case "image":
            fodderId = target.image
              .reduce((p, c) => p.concat(c["id"]), [])
              .map((i) => i);
            target.fodderId = fodderId;
            break;
          case "audio":
            target.fodderId = [target.audio.id].map((i) => i);
            break;
          case "imageText":
            fodderId = target.imageTextInfo.imageList
              .reduce((p, c) => p.concat(c["id"]), [])
              .map((i) => i);
            target.imageTextInfo.audio.id &&
              fodderId.push(target.imageTextInfo.audio.id);
            target.fodderId = fodderId;
            break;
          case "video":
            target.fodderId = [target.video.id];
            break;
          default:
            target.fodderId = [];
            break;
        }
      });
    },

    onSave() {
      if (!this.checkParams()) {
        return;
      }
      const isFixData = this.fixData();
      if (isFixData) {
        this.info.scenes = this.info.scenes.map((item) => {
          if (typeof item.someData == "string") {
            item.someData = item.someData.replace(hhhreg, "");
          }
          return item;
        });
        $waiting.show();

        saveWorks(
          {
            password: this.info.password,
            someData: { ...this.info, status: 1 },
          },
          () => {
            this.$msg.success(this.$i18n.t("gather.save_done"));
            // document.title = this.info.name;
            document.title = this.info.name || this.$i18n.t("gather.no_title");
            $waiting.hide();
            // this.getInfo();
            // this.$store.commit("UpdateIsShowState", true);
            this.$store.commit("TakeInfoSnapShotAtSave");
          },
          () => {}
        );
      }
    },
    getInfo() {
      return checkLogin().then((res) => {
        return new Promise((resolve, reject) => {
          $waiting.hide();

          if (res.code == 0) {
            $waiting.show();
            getPanoInfo(
              "",
              (data) => {
                this.$store.commit("SetInfo", data);
                this.$store.commit("scene/setScenes", data.scenes);
                $waiting.hide();

                let firstScene = "";

                if (data.firstScene) {
                  firstScene = data.scenes.find(
                    (item) => item.sceneCode == data.firstScene.sceneCode
                  );
                }

                //判断列表里是否有全景图
                if (
                  data.scenes.some((item) => item.type == "pano") &&
                  firstScene &&
                  firstScene.type == "4dkk"
                ) {
                  console.log(this.currentScene.sceneCode);
                  //如果当前有选中场景，则激活选中场景，无则显示第一个全景图
                  firstScene = this.currentScene.sceneCode
                    ? this.currentScene
                    : data.scenes.find((item) => item.type == "pano");
                }

                console.log(firstScene, "firstScene");
                this.$store.commit(
                  "scene/setCurrentScene",
                  firstScene || data.scenes[0]
                );

                // 查询初始场景的所在1级分组
                let catalog = data.catalogs.find(
                  (item) => item.id == this.currentScene.category
                );
                data.catalogRoot.forEach((item) => {
                  let temp =
                    item.children &&
                    item.children.find((sub) => sub == catalog.id);
                  if (temp) {
                    this.$store.commit("scene/setCurrentCatalogRoot", item);
                    return;
                  }
                });
                resolve();
              },
              (err) => {
                reject(err);
              }
            );
          } else {
            reject();
          }
        });
      });
    },
  },
};
</script>
<style lang="less">
.app-head {
  width: 100%;
  min-width: 50px;
  height: 60px;
  position: relative;
}

.app-head-back {
  color: white;
  display: flex;
  align-items: baseline;
  font-size: 16px;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);

  > i {
    margin-right: 15px;
  }
}

.app-head-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: white;
}

.app-head-save {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;

  i {
    font-size: 14px;
    margin-right: 4px;
  }
}

.ui-preview {
  background: #313131;
}

.app-head-view {
  right: 120px;
}
</style>