新增iframe模式

2026-01-29 00:02:43 +08:00 · 2022-01-07 18:19:36 +08:00
parent 33197d30ff
commit bc3559d51b
26 changed files with 8311 additions and 18 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,6 @@ bin-release/
 [Oo]bj/
 [Bb]in/
 /node_modules
-/AS-Editor-H5

 # Other files and folders
 .settings/
--- a/AS-Editor-H5/config/config.js
+++ b/AS-Editor-H5/config/config.js
@@ -0,0 +1,4 @@
+window.global_config = {
+	BASE_URL:  "/api",
+	NODE_ENV: "development",
+};
--- a/AS-Editor-H5/favicon(2).ico
+++ b/AS-Editor-H5/favicon(2).ico
--- a/AS-Editor-H5/index.html
+++ b/AS-Editor-H5/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <link rel="icon" href="favicon(2).ico">
+    <title>AS-Editor-H5</title>
+    <script src="./config/config.js"></script>
+  <link href="static/js/0.js" rel="prefetch"><link href="static/js/app.js" rel="preload" as="script"><link href="static/js/chunk-vendors.js" rel="preload" as="script"></head>
+  <body>
+    <noscript>
+      <strong>We're sorry but cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  <script type="text/javascript" src="static/js/chunk-vendors.js"></script><script type="text/javascript" src="static/js/app.js"></script></body>
+</html>
--- a/AS-Editor-H5/static/img/fwb.941cf1e6.png
+++ b/AS-Editor-H5/static/img/fwb.941cf1e6.png
--- a/AS-Editor-H5/static/img/headerimg.49fc73a8.png
+++ b/AS-Editor-H5/static/img/headerimg.49fc73a8.png
--- a/AS-Editor-H5/static/img/imgs.4d159e65.png
+++ b/AS-Editor-H5/static/img/imgs.4d159e65.png
--- a/AS-Editor-H5/static/img/mor.a512a74c.png
+++ b/AS-Editor-H5/static/img/mor.a512a74c.png
--- a/AS-Editor-H5/static/img/obliqueLine.da82153e.png
+++ b/AS-Editor-H5/static/img/obliqueLine.da82153e.png
--- a/AS-Editor-H5/static/img/powder.3b795782.png
+++ b/AS-Editor-H5/static/img/powder.3b795782.png
--- a/AS-Editor-H5/static/js/0.js
+++ b/AS-Editor-H5/static/js/0.js
--- a/AS-Editor-H5/static/js/app.js
+++ b/AS-Editor-H5/static/js/app.js
--- a/AS-Editor-H5/static/js/chunk-vendors.js
+++ b/AS-Editor-H5/static/js/chunk-vendors.js
--- a/src/assets/images/dfa31bc2247240568dad8360de18a4b7-00003.jpg
+++ b/src/assets/images/dfa31bc2247240568dad8360de18a4b7-00003.jpg
--- a/src/assets/images/icon_hfb.png
+++ b/src/assets/images/icon_hfb.png
--- a/src/assets/images/il.jpg
+++ b/src/assets/images/il.jpg
--- a/src/assets/images/jianhang_20200715172306.png
+++ b/src/assets/images/jianhang_20200715172306.png
--- a/src/assets/images/login_pic_bj.jpeg
+++ b/src/assets/images/login_pic_bj.jpeg
--- a/src/assets/images/login_pic_bj.png
+++ b/src/assets/images/login_pic_bj.png
--- a/src/assets/images/no_live.png
+++ b/src/assets/images/no_live.png
--- a/src/assets/images/wodekeshi_pic_floor01.png
+++ b/src/assets/images/wodekeshi_pic_floor01.png
--- a/src/assets/images/wodekeshi_pic_floor02.png
+++ b/src/assets/images/wodekeshi_pic_floor02.png
--- a/src/assets/images/wodekeshi_pic_floor03.png
+++ b/src/assets/images/wodekeshi_pic_floor03.png
--- a/src/assets/images/wodekeshi_pic_floor04.png
+++ b/src/assets/images/wodekeshi_pic_floor04.png
--- a/src/assets/images/wodekeshi_pic_floor05.png
+++ b/src/assets/images/wodekeshi_pic_floor05.png
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -2,7 +2,7 @@
  <div class="shop">
    <section class="phoneAll" ref="imageTofile" id="imageTofile">
      <!-- 导航 -->
-      <headerTop class="containwe-padding" :name="pageSetup"  />
+      <headerTop class="containwe-padding" :name="pageSetup" />
      <!-- 收藏组件 -->
      <div class="collect" v-if="orgid">
        <collect></collect>
@@ -17,14 +17,14 @@
          }"
        >
          <div v-for="(item, index) in pageComponents" :key="index">
-            <keep-alive :include="item.component" >
+            <keep-alive :include="item.component">
              <component
                :key="index"
                :is="item.component"
                :datas="item.setStyle"
                class="componentsClass"
                :data-type="item.type"
-                @clickBanner='clickBanner'
+                @clickBanner="clickBanner"
              />
            </keep-alive>
          </div>
@@ -73,16 +73,13 @@ export default {
      pageComponents: [],
      pageSetup: {
        // 页面设置属性
-        name: '', //页面名称
-        subhead: '', //副标题
-        urlname: '',
+        name: '页面标题', //页面名称
        details: '', //页面描述
+        isPerson: false, // 是否显示个人中心
+        isBack: true, // 是否返回按钮
+        titleHeight: 35, // 高度
        bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
-        bottomLogo: {
-          isShowBootom: true,
-          botLogo: ''
-        }, // 底部logo
-        isPerson: true
+        bgImg: '' // 背景图片
      },
      tota: null
    }
@@ -94,6 +91,17 @@ export default {
    }, 500)
  },
  async created() {
+    // 是否是iframe使用
+    if (this.$route.query.type === 'iframe') {
+      window.addEventListener('message', e => {
+        console.log(e.data, '-------------message')
+        let datas = e.data
+        this.pageComponents = JSON.parse(datas.component)
+        this.pageSetup = JSON.parse(datas.templateJson)
+      })
+      return
+    }
+
    await this.loadShopData()
    let miniprogram = window.localStorage.getItem('miniprogram')
    console.log(miniprogram, '-------------------miniprogram')
@@ -127,12 +135,12 @@ export default {
          error: false /*  */,
          data: {
            shopTemplate: {
-              id: 275,
-              name: '页面标题1231111',
+              id: null,
+              name: 'home',
              templateJson:
-                '{"name":"页面标题1231111","details":"","bgColor":"rgba(249, 249, 249, 10)","bottomLogo":{"isShowBootom":false,"botLogo":""},"isPerson":false,"isBack":true,"titleHeight":35,"bgImg":"https://imgs.starfirelink.com/miniShop//。。。_1622100505794.jpg"}',
+                '{"name":"home","details":"","bgColor":"rgba(249, 249, 249, 10)","bottomLogo":{"isShowBootom":false,"botLogo":""},"isPerson":false,"isBack":true,"titleHeight":35,"bgImg":""}',
              component:
-                '[{"component":"commoditysearch","text":"商品搜索","type":"1-1","active":false,"style":"commoditysearchstyle","setStyle":{"text":"商品搜索","heights":28,"position":0,"sweep":false,"borderRadius":0,"textPosition":0,"backgroundColor":"rgb(249, 249, 249)","borderColor":"rgb(255, 255, 255)","textColor":"rgb(150, 151, 153)","hotords":[]}},{"component":"pictureads","text":"图片广告","type":"1-3","active":false,"style":"pictureadsstyle","setStyle":{"text":"图片广告","swiperType":0,"borderRadius":0,"pageMargin":0,"imageMargin":0,"pagingType":0,"rowindividual":2,"imageList":[{"src":"https://imgs.starfirelink.com/miniShop//haibao_1_1622100790033.jpg","text":"","http":{}}]}},{"component":"magiccube","text":"魔方","type":"1-6","active":false,"style":"magiccubestyle","setStyle":{"text":"魔方","rubiksCubeType":1,"pageMargin":0,"imgMargin":0,"imageList":[{"src":"https://imgs.starfirelink.com/miniShop//coupon_1_1622100837311.png","linktype":"1","http":{}},{"src":"https://imgs.starfirelink.com/miniShop//coupon_2_1622100845102.png","linktype":"1","http":{}},{"src":"https://imgs.starfirelink.com/miniShop//coupon_3_1622100853953.png","linktype":"1","http":{}},{"src":"","linktype":"1","http":{}},{"src":"","linktype":"1","http":{}}]}},{"component":"magiccube","text":"魔方","type":"1-6","active":false,"style":"magiccubestyle","setStyle":{"text":"魔方","rubiksCubeType":0,"pageMargin":0,"imgMargin":0,"imageList":[{"src":"https://imgs.starfirelink.com/miniShop//area_1_1622100909927.png","linktype":"1","http":{}},{"src":"https://imgs.starfirelink.com/miniShop//area_2_1622100919085.png","linktype":"1","http":{}},{"src":"","linktype":"1","http":{}},{"src":"","linktype":"1","http":{}},{"src":"","linktype":"1","http":{}}]}},{"component":"listswitching","text":"商品","type":"2-1","active":true,"style":"listswitchingstyle","setStyle":{"text":"商品","commodityType":0,"moditystyle":0,"borderRadius":0,"pageMargin":15,"commodityMargin":10,"textWeight":400,"positions":"left","priceofcommodity":true,"purchasebutton":true,"commoditycorner":true,"purchasebuttonType":0,"commoditycornertype":0,"commodityTagColor":"#07c160","tagPosition":0,"imageList":[{"coverUrl":"https://imgs.starfirelink.com/minicourse/16230504261_1623050836184.jpg","introduce":"传承 第一季-4.04","price":0,"name":"传承4.04","videoId":"3701925918997853348","id":469,"type":1,"seriesId":"0","httpType":"1"}],"purchase":"马上抢","commoditylisttype":0,"commoditylisttypetab":[{"text":"分组","imageList":[]},{"text":"分组","imageList":[]}],"tabColor":"#f39800","showMore":false,"moreUrl":null,"bgImg":""}},{"component":"notice","text":"公告","type":"1-7","active":false,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"请填写内容，如果过长，将会在手机上滚动显示","backColor":"rgb(255, 248, 233)","textColor":"rgba(100, 101, 102)"}}]'
+                '[{"component":"graphicnavigation","text":"图文导航","type":"1-4","active":false,"style":"graphicnavigationstyle","setStyle":{"text":"图文导航","imageList":[],"navigationType":0,"imgStyle":0,"backgroundColor":"rgb(255, 255, 255)","textColor":"rgb(0, 0, 0)","borderRadius":0,"showSize":5,"textHeight":24,"textSize":12,"bgImg":""}},{"component":"magiccube","text":"魔方","type":"1-6","active":false,"style":"magiccubestyle","setStyle":{"text":"魔方","rubiksCubeType":4,"pageMargin":0,"imgMargin":4,"imageList":[{"src":"https://imgs.starfirelink.com/miniShop//pattern-iconFen_1636526662759.png","linktype":"10","http":{}},{"src":"https://imgs.starfirelink.com/miniShop//pattern-marker_1636526672210.png","linktype":"10","http":{}},{"src":"https://imgs.starfirelink.com/miniShop//pattern-iconFen_1636526703170.png","linktype":"10","http":{}},{"src":"","linktype":"10","http":{}},{"src":"","linktype":"10","http":{}}]}},{"component":"notice","text":"公告","type":"1-7","active":false,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"请填写内容，如果过长，将会在手机上滚动显示","backColor":"rgba(255, 255, 255, 1)","textColor":"rgba(100, 101, 102)"}},{"component":"captiontext","text":"标题文字","type":"1-3","active":false,"style":"captiontextsstyle","setStyle":{"text":"标题文字","name":"星币充值","description":"","wordSize":16,"descriptionSize":12,"wordWeight":400,"positions":"left","descriptionWeight":200,"wordColor":"rgba(50, 50, 51, 10)","descriptionColor":"rgba(150, 151, 153, 10)","backColor":"rgba(255, 255, 255, 10)","borderBott":false,"wordHeight":24,"more":{"show":false,"type":1,"text":"查看更多","httpType":10,"http":""}}},{"component":"listswitching","text":"商品","type":"2-1","active":false,"style":"listswitchingstyle","setStyle":{"text":"商品","commodityType":3,"moditystyle":0,"borderRadius":0,"pageMargin":15,"commodityMargin":10,"textWeight":400,"positions":"left","priceofcommodity":true,"purchasebutton":true,"commoditycorner":true,"purchasebuttonType":0,"commoditycornertype":0,"commodityTagColor":"#07c160","tagPosition":0,"imageList":[],"purchase":"马上抢","commoditylisttype":0,"commoditylisttypetab":[{"text":"分组","imageList":[]},{"text":"分组","imageList":[]}],"tabColor":"#f39800","showMore":false,"moreUrl":null,"bgImg":""}},{"component":"storenotecard","text":"文章模块","type":"2-2","active":false,"style":"storenotecardstyle","setStyle":{"text":"文章模块","name":"","commodityType":0,"moditystyle":0,"borderRadius":0,"textWeight":400,"positions":"bottom","noteLabels":true,"readingNumber":true,"praisePoints":true,"viewMore1":false,"viewMore2":false,"imageList":[],"purchase":"马上抢","linktype":"10","http":{}}}]'
            }
          },
          msg: '成功'
@@ -144,7 +152,7 @@ export default {
        let datas = shopTemplateData.data.shopTemplate
        if (!datas) return this.tota.clear()
        this.pageComponents = JSON.parse(datas.component)
-          this.pageSetup = JSON.parse(datas.templateJson)
+        this.pageSetup = JSON.parse(datas.templateJson)
      } catch (error) {
        console.error(error, '--------------loadShopData error')
      } finally {
@@ -152,7 +160,7 @@ export default {
      }
    },

-    clickBanner(){
+    clickBanner() {
      console.log('clickBanner')
    }
  },