material-pc-admin/canvas-container/views/canvasContainer.vue

<template>
    <div class="canvas">
      <div class="topBox">
        <!--<a class="btn-black">返回店铺</a>-->
        <ul>
          <li v-for="(item,index) in deviceList" :key="index" @click="toggleDevice(item.id)" :class="{'on':terminal == item.id}">
            <i class="iconfont" :class="'icon-' + item.name"></i>
          </li>
        </ul>
        <el-button class="btn-save" type="primary" @click="canvasSave">保存画布</el-button>
      </div>
      <div class="bottomWarp">
        <div class="leftBox">
          <left-bar></left-bar>
        </div>
        <div class="mainContentWarp">
          <div class="mainContent" :class="'view-' + terminal">
            <shop-layout :terminal="terminal" :typeId="typeId" :shopId="shopId" @showRightBox="showRightBox"></shop-layout>
          </div>
        </div>
        <div class="RightBox">
          <tool-panel v-if="comChoose"></tool-panel>
          <div v-else class="noChoose">
            <div> <i class="iconfont icon-kong"></i><p>没有选定的组件<br>请拖拽左侧组件栏添加或者选择一个组件</p></div>
          </div>
      </div>
      </div>
    </div>
</template>

<script>
import leftBar from '../components/leftBar/panel.vue'
import toolPanel from '../components/toolBar/toolPanel'
import ShopLayout from '../components/canvasEditPage'
import { mapGetters, mapMutations } from 'vuex'
import api from '@@/components/canvasShow/config/api'
import {sendReqMixin} from '@@/components/canvasShow/config/mixin'
import Cookies from 'js-cookie'
  export default {
    name: 'canvasContainer',
    mixins: [sendReqMixin],
    components: {
      ShopLayout,
      leftBar,
      toolPanel
    },
    data () {
      return {
        comChoose: false,
        deviceList: [{
          id: 1,
          name: 'xiaochengxu'

        }, {
          id: 2,
          name: 'h5'
        }, {
          id: 4,
          name: 'pc'
        }, {
          id: 3,
          name: 'app'
        }],
        canvasId: '',
        shopId: 0
      }
    },
    computed: {
      ...mapGetters([
        'terminal',
        'componentsData',
        'typeId'
      ])
    },
    mounted () {
      this.shopId = parseInt(Cookies.get('shopID'))
      this.canvasGet()
    },
    methods: {
      ...mapMutations({
        setTerminal: 'SET_TERMINAL',
        setActiveComponent: 'SET_ACTIVECOMPONENT',
        setComponentsData: 'SET_COMPONENTSDATA'
      }),
      toggleDevice (id) {
        this.setActiveComponent({})
        this.setTerminal(id)
        this.canvasGet()
      },
      // 保存画布
      canvasSave () {
        // 删除非必要的字符
        let cloneComponentsData = JSON.parse(JSON.stringify(this.componentsData))
        for (let i = 0; i < cloneComponentsData.length; i++) {
          delete cloneComponentsData[i].iconClass
          if (cloneComponentsData[i].type === 'productList') {
            cloneComponentsData[i].componentContent.productData.imgTextData = [] // 清除展示数据
          }
        }
        console.log(cloneComponentsData);
        var paramsData = {
          terminal: this.terminal,
          json: JSON.stringify(cloneComponentsData)
        }
        if (this.canvasId) {
          paramsData.canvasId = this.canvasId
        }
        if (this.shopId && this.typeId == 3) {
          paramsData.shopId = this.shopId
        }
        paramsData.type = this.typeId
        console.log(paramsData)
        let params = {
          url: api.saveCanvas,
          method: 'POST',
          data: paramsData
        }
        this.sendReq(params, (res) => {
          if (res.message) {
            this.$message.error(res.message)
          } else {
            this.$message({
              message: '保存成功！',
              type: 'success'
            })
          }
        })
      },
      // 读取画布
      canvasGet () {
        var _this = this
        this.setComponentsData([])
        var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId
        if (this.shopId && this.typeId == 3) {
          apiUrl += '&shopId=' + this.shopId
        }
        let params = {
          url: apiUrl,
          method: 'GET'
        }
        this.sendReq(params, (res) => {
          if(typeof(uni) !== 'undefined'){
            uni.setStorage({key: 'sendNum',data: 0});
          } else {
            localStorage.setItem('sendNum', 0)
          }
          if (JSON.stringify(res.data) !== '{}') {
            _this.canvasId = res.data.canvasId
            var componentsData = JSON.parse(res.data.json)
            for (let i = 0; i < componentsData.length; i++) {
              componentsData[i].componentContent.hasDatas = true
            }
            _this.setComponentsData(componentsData)
          } else {
            _this.canvasId = ''
          }
        },(err)=>{

        })
      },
      // 右侧工具栏显隐
      showRightBox (flag) {
        this.comChoose = flag
      }
    }
  }
</script>

<style lang="scss" scoped>
  .canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    .topBox{
      height: 52px;
      line-height: 52px;
      border-bottom: 1px solid #F0F3F4;
      position: relative;
      display: flex;
      justify-content: center;
      .btn-black{
        position: absolute;
        left: 20px;
        top: 0;
      }
      li{
        width: 56px;
        height: 52px;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        .iconfont{
          font-size: 24px;
        }
        &:hover,&.on{
          background-color: $mainColor;
          color: #fff;
        }
      }
      .btn-save{
        position: absolute;
        right: 20px;
        top: 5px;
      }
    }
    .bottomWarp{
      flex: 1;
      display: flex;
      height: 0;
    }
    .leftBox {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .mainContentWarp{
      background-color: #F0F3F4;
      overflow: auto;
      height: 100%;
      flex: 1;
      .mainContent{
        margin: 0 auto;
        max-width: 100%;
        width: 750px;
        &.view-4{
          width: 1300px;
        }
      }
    }
    .RightBox {
      height: 100%;
      overflow: auto;
      .noChoose{
        width: 320px;
        display: flex;
        height: 100%;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        color: #999;
        text-align: center;
        font-size: 16px;
        line-height: 1.8;
        .iconfont{
          font-size: 100px;
          color: $mainColor;
        }
      }
    }
  }
</style>