qjkankan_v1.1.1/packages/qjkankan-editor/src/views/navigation/initialSceneSettings.vue

<template>
  <div class="initial-scene-settings" app-border dir-left>
    <div class="initial-scene-settings__title">
      {{$i18n.t('navigation.init_scene')}}
      <i class="iconfont icon-help_i tool-tip-for-editor" v-tooltip="$i18n.t('navigation.init_scene_tips')"/>
    </div>
    
    <img class="preview" v-if="info.firstScene" :src="info.firstScene.icon" alt="">
    <img class="placeholder" v-else src="@/assets/images/pano-image-placeholder.png" alt="">

    <div class="change-init" v-if="info.firstScene">
      <button class="ui-button deepcancel" @click="deleteIndexInfo">{{$i18n.t('navigation.delete_init_scene')}}</button>
      <button @click="showInitScene=true" class="ui-button submit">
        {{$i18n.t('navigation.edit_init_scene')}}
      </button>
    </div>
    <div class="set-init" v-else>
      <button @click="showInitScene=true" class="ui-button submit">
        {{$i18n.t('navigation.setting_init_scene')}}
      </button>
    </div>

    <div class="dialog" style="z-index: 2000" v-if="showInitScene">
      <Selector
        @cancle="showInitScene = false"
        @submit="handleSelect"
      />
    </div>

    <!-- <div class="dialog" style="z-index: 2000" v-if="showInitScene">
      <Select
        @cancle="showInitScene = false"
        :selected='info.firstScene'
        :title="'选择素材'"
        @submit="handleSelect"
      >
      </Select>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Selector from "@/components/materialSelectorFromWork.vue";

export default {
  components:{
    Selector,
  },
  data(){
    return {
      showInitScene:false
    }
  },
  methods:{
    deleteIndexInfo(){
      this.$confirm({
          content: this.$i18n.t('tips.delete'),
          ok: () => {
              this.info.firstScene = ''
              this.$store.commit("SetInfo", this.info);
              this.$msg.success(this.$i18n.t('tips.delete_done'))
          }
      });
      
    },
    handleSelect(data) {
      this.info.firstScene = data[0] // 注意此处是浅拷贝
      this.showInitScene = false
    }
  },
  computed: {
    ...mapGetters({
      info: "info",
    })
  },
  mounted(){
  }
}
</script>

<style lang="less" scoped>
.initial-scene-settings {
  padding: 20px;
  > .initial-scene-settings__title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
    > i {
      font-size: 12px;
      position: relative;
      top: -2px;
    }
  }
  .preview {
    width: 100%;
    height: 132px;
    border-radius: 4px;
    margin-bottom: 16px;
    object-fit: cover;
    image-rendering: smooth;
  }
  .placeholder {
    width: 100%;
    height: 132px;
    margin-bottom: 16px;
  }
  .change-init {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .ui-button {
      width: calc((100% - 14px) / 2);
      white-space: initial;
    }
  }
  .set-init {
    width: 100%;
    .ui-button {
      width: 100%;
    }
  }
  .dialog {
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>