pano_museum/src/views/base/Toolbar.vue

<template>
  <div class="app-view-toolbar app-view-full-toolbar">
    <div class="main">
      <div class="ui-title-big">基础设置</div>
      <div class="upload-con">
        <div class="uc-r">
          <div class="ui-title">
            <span class="">名称</span>
          </div>
          <div :class="{ 'ui-warning': false }">
            <input
              v-model.trim="info.name"
              @blur="$store.commit('SetInfo',info)"
              type="text"
              class="ui-input"
              maxlength="50"
              placeholder="作品标题，限50字"
            />
          </div>
        </div>
      </div>
      <div class="ui-title-big">全局设置</div>
      <ul class="setting-con">
        <li @click="activeSetting=item" v-for="(item,i) in settings" :key="i">
         <button class="ui-button" :class="{submit:activeSetting.id==item.id}">{{item.name}}</button>
        </li>

      </ul>
    </div>
    <eidt-panel :select="select" @openMaterial="handleOpen" v-if="activeSetting" @close="onCloseEdit" :show="activeSetting"></eidt-panel>

    <div class="dialog" style="z-index: 2000" v-if="isShowSelect">
      <Table
        :list="list"
        :tabHeader="$MAPTABLEHEADER[type]"
        @updateList="update"
        @cancle="isShowSelect = false"
        :title="`选择${$MARERIALSTR[type]}`"
        @changeCurrent="changeCurrent"
        :paging="paging"
        :hideAll="true"
        @submit="handleSelect"
      >
    </Table>
    </div>

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

<script>
import { getMaterialList} from "@/api";
import EidtPanel from "./EditPanel";
import Table from "@/components/tableSelect";
import { changeByteUnit } from '@/utils/file'

import { mapGetters } from "vuex";
import Select from "@/components/select";

export default {
  components: {
    EidtPanel,
    Table,
    Select
  },
  data() {
    return {
      type:'',
      settings:[
      // {
      //   name:"开场提示",
      //   id:"opening"
      // },
      {
        name:"自动巡游",
        id:"xy"
      },{
        name:"背景音乐",
        id:"bgm"
      }],
      showScene:false,
      activeSetting:'',
      dataURL: "",
      isShowSelect:false,
      list:[],
      key:'',
      clickFrom:'',
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1
      },
      select:''
    };
  },
  computed: {
    ...mapGetters({
      info:'info'
    })
  },
  mounted(){

  },
  watch:{
    "paging.pageNum": function () {
      this.isShowSelect && this.getMaterialList();
    },
    isShowSelect(newVal){
      if (!newVal) {
        this.paging.pageNum = 1
        this.key = ''
      }
    }
  },
  methods: {
    handleOpen(){
      this.selectHandle('image','editpanel')
    },
    addScene(){
      this.clickFrom = 'scene'
      this.showScene = true
    },
    changeCurrent(data){
      this.paging.pageNum = data;
    },
    update(data) {
      this.key = data;
      this.getMaterialList();
    },
    handleSelect(data){
      if (this.clickFrom == 'scene') {
        this.info.icon = data.icon
        this.showScene = false
      }
      else{
        this.clickFrom == 'editpanel'?  this.select = data[0].icon :this.info.icon = data[0].icon
        this.isShowSelect = false
      }
      setTimeout(() => {
        this.select = ''
      });
    },
    getMaterialList() {
      getMaterialList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
          type:this.type
        },
        (data) => {
          this.paging.pageNum = data.data.pageNum;
          this.paging.pageSize = data.data.pageSize;
          this.paging.total = data.data.total;

          this.list = data.data.records.map(i=>{
            i.isUse = i.fileSize>600 ?'1':'0'
            i.fileSize = changeByteUnit(Number(i.fileSize))
            i.createTime = i.createTime.substring(0,i.createTime.length-3)
            i.updateTime = i.updateTime.substring(0,i.updateTime.length-3)
            return i
          })

        }
      );
    },
    selectHandle(type, from='base'){
      this.clickFrom = from
      this.type = type
      this.isShowSelect = true
      this.getMaterialList()
    },
    onCloseEdit(){
      this.activeSetting = ''
    }
  },
};
</script>

<style lang="less" scoped>

.ui-title-big{
  margin-top: 40px;
}
.main {
  position: fixed;
  width: 468px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.upload-con {
  display: flex;
  margin-top: 50px;
}
.uc-l {
  .ui-remark{
    margin-top: 10px;
  }

}

.uc-r {
  width: 100%;
}

.upload-btn {
  display: flex;
  width: 216px;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  .ui-button {
    width: 48%;
    min-width: 64px;
    position: relative;
    &:hover {
    > div {
        display: block;
      }
    }
    > div {
        cursor: default;
        padding: 0 10px;
        display: none;
        z-index: 10000;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -46px;
        background: rgba(0, 0, 0, 0.8); 
        border-radius: 5px;
        color: #fff;
        pointer-events: none;
        &::before{
          border: 10px solid transparent;
          border-top: 10px solid rgba(0, 0, 0, 0.8);
          width: 0;
          height: 0px;
          content: "";
          display: inline-block;
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
        }
      .remark {
          line-height: 2.5;
      }
    }
  }
}

.guide {
  cursor: pointer;
  position: relative;
  &:hover {
    > div {
      display: block;
    }
  }
  i {
    color: #ababab;
  }
  > div {
    cursor: default;
    padding: 10px 18px;
    display: none;
    z-index: 10000;
    position: fixed;
    right: 0;
    top: -90px;
    width: 500px;
    background: #161a1a;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    .remark {
      line-height: 2.5;
    }

    .strong {
      color: #fff;
    }

    .line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.16);
      margin: 10px 0;
    }
  }
}

.preview {
  overflow: hidden;
  img {
    height: 100%;
  }
}

.setting-con{
  >li{
    display: inline-block;
    .ui-button{
      padding: 0 20px;
      margin-right: 10px;
    }
  }
}
</style>