内嵌组件

src/api/shop.js

@@ -20,6 +20,11 @@ export default {
     return requestPOST(`${process.env.OLSHOP_URL}/cms/get_shop_install_pages?homePageFlag=${params.homePageFlag || false}&shopMixId=${params.shopMixId}`,
     );
   },
+  //  查单页面
+  singlePageInfo(params) {
+    return requestPOST(`${process.env.OLSHOP_URL}/cms/get_shop_page_by_id?id=${params.id}`,
+    );
+  },
   checkShowCondition(params) {
     return requestPOST(
       `${process.env.OLSHOP_URL}/cms/check_show_condition`,

src/components/basicTool/embed-module/index.vue

+<template>
+  <!-- 内嵌组件 -->
+  <div class="embed-module">
+    <transverse-label :componentType="false" :datas="datas1"></transverse-label>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
+import shop from "@/api/shop"
+export default {
+  name: "embed-module",
+  props: {
+    datas: {
+      type: Object,
+      default: {}
+    },
+    render: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      datas1: {
+        componentData: {
+          tabList: [
+            {
+              contentList: [],
+            }
+          ]
+        }
+      }
+    }
+  },
+  components: {
+    transverseLabel
+  },
+  computed: {
+    microPageId() {
+      return this.datas.componentData.microPageId;
+    },
+  },
+  created() { 
+    this.init();
+  },
+  mounted() { },
+  methods: {
+    init() {
+      shop.singlePageInfo({ id: this.microPageId }).then(res => {
+        if (res.data.code == 200) {
+          this.datas1.componentData.tabList[0].contentList = res.data.data.pageData?JSON.parse(res.data.data.pageData):[];
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.embed-module {}
+</style>

src/components/basicTool/transverse-label/index.vue

@@ -59,6 +59,7 @@
         'tabStyle' + tabStyle,
         stickyTop ? 'stickyTop' : '',
         'tabLayout' + tabLayout,
+        componentType ? '':'hideTab'
       ]"
 
     >
@@ -203,6 +204,10 @@ export default {
       type: Number,
       default: 0,
     },
+    componentType: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -788,5 +793,11 @@ $wrapWidth: 50px;
       background: var(--select-tab-underline-color) !important;
     }
   }
+  
+  .hideTab{
+    .van-tabs__wrap{
+      display: none !important;
+    }
+  }
 }
 </style>

src/pages/home/index.vue

@@ -116,6 +116,9 @@
         <div v-if="item.componentCode == 'brand-list' && item.componentInfo.visible == 1">
           <brandList :datas="item"></brandList>
         </div>
+        <div v-if="item.componentCode == 'embed-module' && item.componentInfo.visible == 1">
+          <embedModule :datas="item"></embedModule>
+        </div>
       </div>
       <bottomCont v-if="showbottomCont"></bottomCont>
       <template>
@@ -167,6 +170,7 @@ import partition from '@/components/basicTool/partition/index.vue'
 import shopPopup from '@/components/basicTool/shop-popup/index.vue'
 import woTimeout from '@/components/basicTool/wo-timeout/index.vue'
 import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
+import embedModule from '@/components/basicTool/embed-module/index.vue'
 import information from '@/components/content/information/index.vue'
 import text from '@/components/content/text'
 import imgText from '@/components/content/imgText'
@@ -246,6 +250,7 @@ export default {
     coupon,
     integralTurntable,
     transverseLabel,
+    embedModule,
     information,
     spellGroup,
     couponPopup,