qjkankan_v1.1.1/packages/qjkankan-editor/src/views/information/Setting.vue

<template>
  <div class="view-setting" app-border dir-left>
    <div class="ui-title">初始场景</div>
    <div class="preview">
      <img v-if="info.firstScene" :src="info.firstScene.icon" alt="">
      <div class="tips" v-else>
        <i class="iconfont iconphotoview" style="font-size: 40px"></i>
      </div>
    </div>
    <div class="setinit" v-if="info.firstScene">
      <button class="ui-button" @click="deleteIndexInfo">删除场景</button>
      <button @click="showInitScene=true" class="ui-button submit" :class="{disable:false}">
        修改场景
      </button>
    </div>

    <template v-else>
      <div class="setinit">
        <button style="width:100%" @click="showInitScene=true" class="ui-button submit" :class="{disable:false}">
          设置初始场景
        </button>
      </div>
      <div class="ui-remark">初始场景为查看链接时进入的第一个场景，未设置时，不固定从某一场景打开</div>
    </template>

    <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 Select from "@/components/select";

export default {
  components:{Select},
  data(){
    return {
      showInitScene:false
    }
  },
  methods:{
    deleteIndexInfo(){
      this.$confirm({
          content: "是否删除？",
          ok: () => {
              this.info.firstScene = ''
              this.$store.commit("SetInfo", this.info);
              this.$msg.success('删除成功')
          }
      });
      
    },
    handleSelect(data){
      this.info.firstScene = data
      this.$store.commit("SetInfo", this.info);
      console.log(this.info.firstScene);
      this.showInitScene=false
    }
  },
  computed: {
    ...mapGetters({
      info: "info",
      backupInfo: "backupInfo"
    })
  },
  mounted(){
 
  }
}
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.view-setting {
  padding: 10px;
  width: 100%;
}
.preview {
  width: 100%;
  height: 102px;
  overflow: hidden;
  >img{
    width: 100%;
    height: 100%;
  }
}
.setinit {
  width: 100%;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  .ui-button {
    width: 48%;
  }
}
</style>