yshop-pro-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-header v-if="item.type==='header'" :componentContent="item.componentContent" :terminal="terminal"></com-header>
      <com-banner v-if="item.type==='banner'" :componentContent="item.componentContent" :terminal="terminal"></com-banner>
      <com-text v-if="item.type==='text'" :componentContent="item.componentContent" :terminal="terminal"></com-text>
      <com-image-text v-if="item.type==='imageText'" :componentContent="item.componentContent" :terminal="terminal"></com-image-text>
      <com-brand-list v-if="item.type==='brandList'" :componentContent="item.componentContent" :terminal="terminal"></com-brand-list>
      <com-category-list v-if="item.type==='categoryList'" :componentContent="item.componentContent" :terminal="terminal"></com-category-list>
      <com-image-text-list v-if="item.type==='imageTextList'" :componentContent="item.componentContent" :terminal="terminal"></com-image-text-list>
      <com-assist-div v-if="item.type==='assistDiv'" :componentContent="item.componentContent" :terminal="terminal"></com-assist-div>
      <com-image-text-nav v-if="item.type==='imageTextNav'" :componentContent="item.componentContent" :terminal="terminal"></com-image-text-nav>
      <com-product v-if="item.type==='productList'" :componentContent="item.componentContent" :terminal="terminal"></com-product>
      <com-video-box v-if="item.type==='videoBox'" :componentContent="item.componentContent" :terminal="terminal"></com-video-box>
      <com-coupon v-if="item.type==='coupon'" :componentContent="item.componentContent" :terminal="terminal"></com-coupon>
      <com-custom v-if="item.type==='custom'" :componentContent="item.componentContent" :terminal="terminal"></com-custom>
      <com-notice v-if="item.type==='notice'" :componentContent="item.componentContent" :terminal="terminal"></com-notice>
      <com-vip v-if="item.type==='vip'" :componentContent="item.componentContent" :terminal="terminal"></com-vip>
      <com-group v-if="item.type==='groupList'" :terminal="terminal" :componentContent="item.componentContent"></com-group>
      <com-discount v-if="item.type==='discountList'" :componentContent="item.componentContent" :terminal="terminal"></com-discount>
      <com-spike v-if="item.type==='spikeList'" :componentContent="item.componentContent" :terminal="terminal"></com-spike>
      <com-price v-if="item.type==='priceList'" :terminal="terminal"></com-price>
      <com-new-product v-if="item.type==='newProduct'" :componentContent="item.componentContent" :terminal="terminal"></com-new-product>
      <com-shop v-if="item.type==='shop'" :componentContent="item.componentContent" :terminal="terminal"></com-shop>
    </div>
  </div>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import comHeader from '@/components/canvasShow/basics/header/app/index.vue'
import comBanner from '@/components/canvasShow/basics/banner.vue'
import comText from '@/components/canvasShow/basics/text.vue'
import comImageText from '@/components/canvasShow/basics/imageText.vue'
import comBrandList from '@/components/canvasShow/basics/brandList.vue'
import comCategoryList from '@/components/canvasShow/basics/categoryList.vue'
import comImageTextList from '@/components/canvasShow/basics/imageTextList.vue'
import comAssistDiv from '@/components/canvasShow/basics/assistDiv.vue'
import comImageTextNav from '@/components/canvasShow/basics/imageTextNav.vue'
import comProduct from '@/components/canvasShow/basics/product/app/index.vue'
import comVideoBox from '@/components/canvasShow/basics/video.vue'
import comCoupon from '@/components/canvasShow/basics/coupon/index.vue'
import comCustom from '@/components/canvasShow/basics/custom.vue'
import comNotice from '@/components/canvasShow/basics/notice.vue'
import comVip from '@/components/canvasShow/basics/vip/app/index.vue'
import comGroup from '@/components/canvasShow/basics/group/app/index.vue'
import comDiscount from '@/components/canvasShow/basics/discount/app/index.vue'
import comSpike from '@/components/canvasShow/basics/spike/app/index.vue'
import comPrice from '@/components/canvasShow/basics/price/app/index.vue'
import comNewProduct from '@/components/canvasShow/basics/newProduct/app/index.vue'
import comShop from '@/components/canvasShow/basics/shop.vue'
import config from '@/components/canvasShow/config/config'
import sendReqMixin from './config/mixin/sendReqMixin'
import { ref } from 'vue';
import api from "@/components/canvasShow/config/api";
const terminal = ref(config.terminal)
const { sendReq } = sendReqMixin()
const componentsData = ref([])

const getCanvasData = ()=>{
  const params = {
    method: 'GET',
    url: `${api.getCanvas}?terminal=${terminal.value}`,
  }
  sendReq(params, (res) => {
    if (res.data.json) {
      componentsData.value = JSON.parse(res.data.json)
    }
  })
}

onLoad(() => {
  getCanvasData()
})
</script>

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

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

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

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