画布移植

src/views/theme/container/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="containerMall">
+    <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> -->
+          <i class="iconfont" :class="'el-icon-' + item.name"></i>
+        </li>
+      </ul>
+      <el-button class="btn-save"
+      type="primary" @click="canvasSave">保存画布</el-button>
+    </div>
+    <div class="bottomWarp">
+      <div class="leftBox">
+        <LeftBar />
+      </div>
+      <div class="mainContentWarp">
+        <div class="mainContent" :class="'view-' + terminal">
+          <CereshopLayout :terminal="terminal"></CereshopLayout>
+        </div>
+      </div>
+      <div class="RightBox">
+        <ToolPanel />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import LeftBar from '../components/leftBar/panel.vue'
+import ToolPanel from '@/views/theme/components/rootcompToolbar/toolPanel.vue'
+import CereshopLayout from '../components/canvasEditPage'
+import {
+  getCanvasData,
+  getProducts,
+  saveCanvasData
+} from '@/api/canvasApi.js'
+export default {
+  components: {
+    CereshopLayout,
+    LeftBar,
+    ToolPanel
+  },
+  data() {
+    return {
+      deviceList: [
+        // {
+        //   id: 1,
+        //   name: "xiaochengxu",
+        // },
+        // {
+        //   id: 2,
+        //   name: "h5",
+        // },
+        {
+          id: 3,
+          name: 'mobile-phone'
+        },
+        {
+          id: 4,
+          name: 'monitor'
+        }
+        // {
+        //   id: 1,
+        //   name: 'pc'
+        // }
+      ],
+      canvasId: null
+    }
+  },
+  computed: {
+    ...mapGetters(['terminal', 'componentsData'])
+  },
+  mounted () {
+    this.canvasGet()
+  },
+  methods: {
+    ...mapMutations({
+      setTerminal: 'SET_TERMINAL',
+      setComponentsData: 'SET_COMPONENTSDATA'
+    }),
+    toggleDevice (id) {
+      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].icon
+        delete cloneComponentsData[i].iconH
+        if (cloneComponentsData[i].type === 'productList') {
+          cloneComponentsData[i].componentContent.imgTextData = []
+        }
+      }
+      saveCanvasData({
+        terminal: this.terminal,
+        json: JSON.stringify(cloneComponentsData),
+        name: '1',
+        canvasId: this.canvasId || ''
+      }).then(res => {
+        if (res) {
+          this.$message.success('保存成功！')
+        }
+      })
+    },
+    // 读取画布
+    async canvasGet () {
+      var res = await getCanvasData({'terminal': 3})
+      // var res = await getCanvasData({'terminal': this.terminal})
+      if (JSON.stringify(res) !== '{}') {
+        this.canvasId = res.canvasId
+        var componentsData = JSON.parse(res.json)
+        for (let i = 0; i < componentsData.length; i++) {
+          if (componentsData[i].type === 'productList') {
+            if (componentsData[i].componentContent.categoryId) {
+                getProducts({
+                  'pageSize': 20,
+                  'page': 1,
+                  'classifyId': componentsData[i].componentContent.categoryId
+                }).then(res => {
+                  componentsData[i].componentContent.imgTextData = res.list
+                })
+            }
+          }
+        }
+        this.setComponentsData(componentsData)
+      } else {
+        this.setComponentsData([])
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.containerMall {
+  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;
+    // }
+    ul{
+      margin: 0;
+    }
+    li {
+      width: 56px;
+      height: 52px;
+      cursor: pointer;
+      text-align: center;
+      display: inline-block;
+      .iconfont {
+        font-size: 24px;
+        line-height: 52px;
+      }
+      &: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%;
+  }
+  .mainContentWarp {
+    background-color: #f0f3f4;
+    overflow: auto;
+    height: 100%;
+    flex: 1;
+    .mainContent {
+      margin: 0 auto;
+      max-width: 100%;
+      width: 500px;
+      &.view-4 {
+        width: 1200px;
+      }
+    }
+  }
+  .RightBox {
+    height: 100%;
+    overflow: auto;
+  }
+}
+</style>