store-shop-uniapp/components/canvasShow/canvasShowPage.vue

<template>
  <div class="layout hom-layout">
    <div class="list-group-item"
         v-for="(item,index) in componentsData"
         :key="index">
      <!--        <component :is="componentMap[terminal-1].get(item.type)" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId"></component>-->
      <com-banner v-if="item.type==='banner'"
                  :componentContent="item.componentContent"
                  :terminal="terminal"
                  :typeId="typeId"
                  :shopId="shopId"></com-banner>
      <com-text v-if="item.type==='text'"
                :componentContent="item.componentContent"
                :terminal="terminal"
                :typeId="typeId"
                :shopId="shopId"></com-text>
      <com-image-text v-if="item.type==='imageText'"
                      :componentContent="item.componentContent"
                      :terminal="terminal"
                      :typeId="typeId"
                      :shopId="shopId"></com-image-text>
      <com-brand-list v-if="item.type==='brandList'"
                      :componentContent="item.componentContent"
                      :terminal="terminal"
                      :typeId="typeId"
                      :shopId="shopId"></com-brand-list>
      <com-category-list v-if="item.type==='categoryList'"
                         :componentContent="item.componentContent"
                         :terminal="terminal"
                         :typeId="typeId"
                         :shopId="shopId"></com-category-list>
      <com-image-text-list v-if="item.type==='imageTextList'"
                           :componentContent="item.componentContent"
                           :terminal="terminal"
                           :typeId="typeId"
                           :shopId="shopId"></com-image-text-list>
      <com-assist-div v-if="item.type==='assistDiv'"
                      :componentContent="item.componentContent"
                      :terminal="terminal"
                      :typeId="typeId"
                      :shopId="shopId"></com-assist-div>
      <com-image-text-nav v-if="item.type==='imageTextNav'"
                          :componentContent="item.componentContent"
                          :terminal="terminal"
                          :typeId="typeId"
                          :shopId="shopId"></com-image-text-nav>
      <com-product v-if="item.type==='productList'"
                   :componentContent="item.componentContent"
                   :terminal="terminal"
                   :typeId="typeId"
                   :shopId="shopId"></com-product>
      <com-video-box v-if="item.type==='videoBox'"
                     :componentContent="item.componentContent"
                     :terminal="terminal"
                     :typeId="typeId"
                     :shopId="shopId"></com-video-box>
      <com-coupon v-if="item.type==='coupon'"
                  :componentContent="item.componentContent"
                  :terminal="terminal"
                  :typeId="typeId"
                  :shopId="shopId"></com-coupon>
      <com-custom v-if="item.type==='custom'"
                  :componentContent="item.componentContent"
                  :terminal="terminal"
                  :typeId="typeId"
                  :shopId="shopId"></com-custom>
      <com-notice v-if="item.type==='notice'"
                  :componentContent="item.componentContent"
                  :terminal="terminal"
                  :typeId="typeId"
                  :shopId="shopId"></com-notice>
      <com-vip v-if="item.type==='vip'"
               :componentContent="item.componentContent"
               :terminal="terminal"
               :typeId="typeId"
               :shopId="shopId"></com-vip>
      <com-group v-if="item.type==='groupList'"
                 :componentContent="item.componentContent"
                 :terminal="terminal"
                 :typeId="typeId"
                 :shopId="shopId"></com-group>
      <com-discount v-if="item.type==='discountList'"
                    :componentContent="item.componentContent"
                    :terminal="terminal"
                    :typeId="typeId"
                    :shopId="shopId"></com-discount>
      <com-spike v-if="item.type==='spikeList'"
                 :componentContent="item.componentContent"
                 :terminal="terminal"
                 :typeId="typeId"
                 :shopId="shopId"></com-spike>
      <com-price v-if="item.type==='priceList'"
                 :componentContent="item.componentContent"
                 :terminal="terminal"
                 :typeId="typeId"
                 :shopId="shopId"></com-price>
      <com-new-product v-if="item.type==='newProduct'"
                       :componentContent="item.componentContent"
                       :terminal="terminal"
                       :typeId="typeId"
                       :shopId="shopId"></com-new-product>
      <com-shop v-if="item.type==='shop'"
                :componentContent="item.componentContent"
                :terminal="terminal"
                :typeId="typeId"
                :shopId="shopId"></com-shop>
      <com-live v-if="item.type==='live'"
                :componentContent="item.componentContent"
                :terminal="terminal"
                :typeId="typeId"
                :shopId="shopId"></com-live>
    </div>
  </div>
</template>

<script>
// import comComponentMap from './componentMap'
import comBanner from '@/components/canvasShow/basics/banner'
import comText from '@/components/canvasShow/basics/text'
import comImageText from '@/components/canvasShow/basics/imageText'
import comBrandList from '@/components/canvasShow/basics/brandList'
import comCategoryList from '@/components/canvasShow/basics/categoryList'
import comImageTextList from '@/components/canvasShow/basics/imageTextList'
import comAssistDiv from '@/components/canvasShow/basics/assistDiv'
import comImageTextNav from '@/components/canvasShow/basics/imageTextNav'
import comProduct from '@/components/canvasShow/basics/product/app/index'
import comVideoBox from '@/components/canvasShow/basics/video'
import comCoupon from '@/components/canvasShow/basics/coupon/app'
import comCustom from '@/components/canvasShow/basics/custom'
import comNotice from '@/components/canvasShow/basics/notice'
import comVip from '@/components/canvasShow/basics/vip/app'
import comGroup from '@/components/canvasShow/basics/group/app/index'
import comDiscount from '@/components/canvasShow/basics/discount/app'
import comSpike from '@/components/canvasShow/basics/spike/app'
import comPrice from '@/components/canvasShow/basics/price/app'
import comNewProduct from '@/components/canvasShow/basics/newProduct/app'
import comShop from '@/components/canvasShow/basics/shop'
import comLive from '@/components/canvasShow/basics/live/app'
import api from './config/api'
import {sendReqMixin} from './config/mixin'

export default {
  name: 'canvasPage',
  mixins: [sendReqMixin],
  data() {
    return {
      // terminal: 4, // 画布设备 1 小程序，2 H5，3 App 4 电脑
      // typeId: 3, // 画布类型 1 平台画布，2 自定义页面，3 商家店铺装修
      // shopId: 0, // 店铺id
      componentsData: [],
      activeComponent: -1,
      // componentMap: componentMap
    }
  },
  components: {
    comBanner,
    comText,
    comImageText,
    comBrandList,
    comCategoryList,
    comImageTextList,
    comAssistDiv,
    comImageTextNav,
    comProduct,
    comVideoBox,
    comCoupon,
    comCustom,
    comGroup,
    comDiscount,
    comSpike,
    comPrice,
    comNotice,
    comVip,
    comNewProduct,
    comShop,
    comLive
  },
  props: {
    terminal: {
      type: Number,
      default: 4
    },
    typeId: {
      type: Number,
      default: 1
    },
    shopId: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    // this.shopId = Cookies.get('cereShopId')
    this.canvasGet()
  },
  methods: {
    // 读取画布
    canvasGet() {
      var _this = this
      var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId
      if (this.shopId) {
        apiUrl += '&shopId=' + this.shopId
      }
      let params = {
        url: apiUrl,
        method: 'GET'
      }
      this.sendReq(params, (res) => {
        if (JSON.stringify(res.data) !== '{}') {
          _this.canvasId = res.data.canvasId
          var componentsData = JSON.parse(res.data.json)
          _this.componentsData = componentsData
        } else {
          _this.canvasId = ''
        }
        // console.log(JSON.parse(res.data.json))
      })
    }
  }
}
</script>

<style lang="scss"
       scoped>
.hom-layout {
  background-color: #ffffff;
  width: 100%;
  overflow: hidden;
}
</style>

<style lang="scss">
.warp {
  width: 710upx;
  margin: 0 auto;
  max-width: 100%;

  &.terminal4 {
    width: 1200px;
    max-width: 100%;
  }
}

.flex-box {
  display: flex;
}
</style>