|
|
<template> <div class="layout hom-layout"> <div class="list-group-item" v-for="(item,index) in componentsData" :key="index"> <com-header v-if="item.type==='header'" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId"></com-header>
<!--类别分组--> <com-classify-header v-if="item.type==='classify-header'" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId"></com-classify-header> <!-- <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-product-group-list v-if="item.type==='productGroupList'" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId"></com-product-group-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'" ref="productPage" :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 comHeader from '@/components/canvasShow/basics/header/app'import comClassifyHeader from '@/components/canvasShow/basics/classifyHeader/app'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 comProductGroupList from '@/components/canvasShow/basics/productGroupList'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 {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: [],
// componentMap: componentMap
} }, components: { comHeader, comClassifyHeader, comBanner, comText, comImageText, comBrandList, comCategoryList, comProductGroupList, 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 }, componentsData: { type: Array, default: ()=>[] } }, methods: {
}}</script>
<style lang="scss" scoped>.hom-layout {
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>
|
