FD_Pano/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-l">
          <div class="preview">
            <img :src="info.icon || require('@/assets/images/default/img_cover_default_2.png')" alt="" />
            <button class="ui-button submit setting-cover-btn" @click="onClickSettingCover">设置封面</button>
          </div>
          <!-- <div class="upload-btn">
            <button class="ui-button submit" @click="selectHandle('image')">选择图片</button>
            <button class="ui-button submit" @click="addScene">全景封面
              <div>
                <div class="remark">
                  选择全景图封面做为作品封面
                </div>
              </div>
            </button>
          </div> -->
          <div class="ui-remark">512*512px，支持jpg/png格式</div>
        </div>
        <div class="uc-r">
          <div class="ui-title">
            <span class="">标题</span>
          </div>
          <div class="title-input-wrapper">
            <input
              v-model="info.name"
              @blur="$store.commit('SetInfo',info)"
              type="text"
              maxlength="50"
              placeholder="请输入作品标题"
            />
            <span class="count">{{titleLength}}/50</span>
          </div>
          <div class="ui-title jianjie"><span>简介</span></div>
          <div class="jianjie-textarea-wrapper">
            <textarea
              v-model="info.description"
              @blur="$store.commit('SetInfo',info)"
              maxlength="500"
              placeholder="请输入作品简介"
              type="text"
            />
            <span class="count">{{jianjieLength}}/500</span>
          </div>
        </div>
      </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>
      <menu>
        <li
          v-for="(item) in tabs"
          :key="item"
          :class="{active: activeTab === item}"
          @click="activeTab = item"
        >
          {{item}}
        </li>
      </menu>
      <div class="settings-view-wrapper">
        <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
      </div>
    </div>
    <eidt-panel
      :select="select"
      @openMaterial="selectHandle('image','editpanel')"
      v-if="activeSetting"
      @close="onCloseEdit"
      :show="activeSetting"
    ></eidt-panel>

    <div class="dialog" style="z-index: 2000" v-if="isShowSettingCoverWindow">
      <Table2
        title="选择素材"
        @cancle="isShowSettingCoverWindow = false"
        @submit="handleSubmitFromTable2"
      />
    </div>

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

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

<script>
import { getMaterialList} from "@/api";
import EidtPanel from "./EditPanel";
import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
import Table from "@/components/tableSelect";
import Table2 from "@/components/tableSelect2";
import Select from "@/components/select";
import { changeByteUnit } from '@/utils/file'

import { mapGetters } from "vuex";

export default {
  components: {
    EidtPanel,
    Table,
    Table2,
    Select,
    OpeningTipSettings,
  },
  data() {
    return {
      type:'',
      settings:[{
        name:"开场提示",
        id:"opening"
      },{
        name:"自定义LOGO",
        id:"logo"
      },{
        name:"访问密码",
        id:"password"
      },{
        name:"自动巡游",
        id:"xy"
      }],
      activeSetting:'',
      dataURL: "",
      isShowScene:false, // 显示全景图片选择窗口
      isShowSelect:false, // 显示普通图片选择窗口
      isShowSettingCoverWindow: false,
      list:[],
      key:'',
      clickFrom:'', // 来自“选择图片”：base。来自“全景封面”：scene。来自右侧的“选择图片”：editPanel
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1
      },
      select:'',

      tabs: [
        '开场提示',
        '开场动画',
        '访问密码',
        '自动巡游',
        '背景音乐',
        '自定义LOGO',
        '自定义遮罩',
        '自定义按钮',
      ],
      activeTab: '开场提示',
    };
   },
  computed: {
    ...mapGetters({
      info:'info'
    }),
    titleLength() {
      return this.info?.name?.length || '0'
    },
    jianjieLength() {
      return this.info?.description?.length || '0'
    },
  },
  mounted(){

  },
  watch:{
    "paging.pageNum": function () {
      this.isShowSelect && this.getMaterialListProxy();
    },
    isShowSelect(newVal){
      if (!newVal) {
        this.paging.pageNum = 1
        this.key = ''
      }
    }
  },
  methods: {
    addScene(){
      this.clickFrom = 'scene'
      this.isShowScene = true
    },
    changeCurrent(data){
      this.paging.pageNum = data;
    },
    updateList(data) {
      this.key = data;
      this.getMaterialListProxy();
    },
    handleSelect(data){
      if (this.clickFrom == 'scene') {
        this.info.icon = data.icon
        this.isShowScene = false
      } else {
        this.clickFrom == 'editpanel'?  this.select = data[0].icon :this.info.icon = data[0].icon
        this.isShowSelect = false
      }
      setTimeout(() => {
        this.select = ''
      });
    },
    getMaterialListProxy() {
      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.list.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
          })

        }
      );
    },
    onClickSettingCover() {
      this.isShowSettingCoverWindow = true
    },
    // 点击各种选择素材按钮后调用这个
    selectHandle(type, from='base'){
      this.clickFrom = from
      this.type = type
      this.isShowSelect = true
      this.getMaterialListProxy()
    },
    handleSubmitFromTable2(selected) {
      this.info.icon = selected[0].icon
      this.isShowSettingCoverWindow = false
    },
    onCloseEdit(){
      this.activeSetting = ''
    }
  },
}
</script>

<style lang="less" scoped>

.main {
  position: fixed;
  width: 930px;
  top: 15%;
  left: calc(50% - (930px) / 2);
}

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

.uc-r {
  width: 100%;
  > .title-input-wrapper {
    position: relative;
    border: 1px solid rgba(151, 151, 151, 0.2);
    padding: 0 16px;
    background: #252526;
    border-radius: 2px;
    height: 36px;
    width: 100%;
    > input {
      border: none;
      background: transparent;
      outline: none;
      height: 100%;
      width: calc(100% - 50px);
      padding: none;
      color: #fff;
      letter-spacing: 1px;
      font-size: 14px;
    }
    > .count {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.2);
    }
  }
  > .jianjie {
    margin-top: 20px;
  }
  > .jianjie-textarea-wrapper {
    position: relative;
    border: 1px solid rgba(151, 151, 151, 0.2);
    background: #252526;
    border-radius: 2px;
    height: 123px;
    width: 100%;
    > textarea {
      padding: 9px 16px 30px 16px;
      resize: none;
      border: none;
      background: transparent;
      outline: none;
      width: 100%;
      height: calc(100% - 30px);
      padding: none;
      color: #fff;
      letter-spacing: 1px;
      font-size: 14px;
    }
    > .count {
      position: absolute;
      right: 16px;
      bottom: 9px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.2);
    }
  }
}

/* 
.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;
  position: relative;
  img {
    height: 100%;
  }
  .setting-cover-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
  }
}

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

menu {
  display: inline-block;
  width: 133px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 0;
  margin: 0;
  vertical-align: top;
  li {
    display: block;
    height: 47px;
    padding-left: 16px;
    cursor: pointer;
    &::after {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    &.active {
      font-size: 16px;
      font-weight: bold;
      color: #FFFFFF;
      background: #252526;
      &::before {
        content: "";
        display: inline-block;
        width: 2px;
        height: 10px;
        border-radius: 1px;
        background: #0076F6;
        margin-right: 4px;
        vertical-align: middle;
      }
    }
  }
}

.settings-view-wrapper {
  vertical-align: top;
  display: inline-block;
  width: 797px;

}
</style>