开发ing utm和分享

public/shareModule/index.html

@@ -34,28 +34,30 @@
     </div>
   </div>
   <div class="foot"></div>
-  <mp-float-button id="share-button"></mp-float-button>
-  <script src="http://localhost:9528/shareModule/initShare.js?url=https://exporeg-test-api.matchexpo.cn"></script>
   <script>
+    var mpShareModule = {}
     {
-      let sareCard = document.getElementById('share-card')
-      let shareButton = document.getElementById('share-button')
-      window.top.postMessage({msg:'mpShare init done'})
-      window.addEventListener('message', function(e){
+      let body = document.querySelector('body')
+      let isInit = false
+      window.addEventListener('message', function(e) {
         let data = e.data
-        if(data.type === 'card'){
-          console.log('来自父页面：',data)
-          for(let key in data){
-            sareCard.setAttribute(key, data[key])
-          }
-        }
-        if(data.type === 'button'){
-          console.log('来自父页面：',data)
-          for(let key in data){
-            shareButton.setAttribute(key, data[key])
+        if (data.type === 'initView' && !isInit) {
+          let host = data.baseUrl
+          let apiUrl = data.apiUrl
+          mpShareModule = {
+            host: host,
+            apiUrl: apiUrl
           }
+          let initJs = document.createElement('script')
+          initJs.src = `${host}/shareModule/initShare.js?url=${apiUrl}`
+          body.append(initJs)
+          let injectJs = document.createElement('script')
+          injectJs.src = `${host}/shareModule/injectShare.js`
+          body.append(injectJs)
+          isInit = true
         }
       })
+      window.top.postMessage({msg:'mpShare init done'}, '*')
     }
   </script>
   <style>
@@ -88,6 +90,8 @@
       font-family: "Noto Serif SC", serif;
     }
     .body {
+      margin: 0 auto;
+      max-width: 1000px;
       padding: 0 24px;
       display: flex;
       gap: 36px;

public/shareModule/initShare.js

@@ -9,7 +9,7 @@
       const src = script.src
       if(src && src.includes('/shareModule/initShare.js')){
         let url = new URL(src)
-        host = url.origin
+        host = mpShareModule.host
         return url.searchParams
       }
     }

public/shareModule/injectShare.js

@@ -0,0 +1,69 @@
+{
+  let body = document.querySelector('body')
+  let currentEl = null
+  let shareCard = document.createElement('mp-share-card')
+  shareCard.id = 'share-card'
+
+  let shareButton = document.createElement('mp-float-button')
+  shareButton.id = 'share-button'
+  body.append(shareButton)
+
+  let addButton = document.createElement('div')
+  addButton.classList.add('mp-add-button')
+  addButton.innerText = '在此添加分享卡片'
+  addButton.addEventListener('click', function(){
+    const parentElement = currentEl.parentNode;
+    parentElement.insertBefore(shareCard, currentEl.nextSibling);
+    window.top.postMessage({msg:'mpShare init done'})
+    // addButton.style.display = 'none'
+  })
+  let addButtonStyle = document.createElement('style')
+  addButtonStyle.innerHTML = `
+    .mp-add-button{
+      transition-duration: 300ms;
+      background-color: #409EFF;
+      color: white;
+      position: fixed;
+      z-index: 99999;
+      text-align: center;
+      font-size: 14px;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 8px;
+      opacity: 0.5;
+      &:hover{
+        opacity: 1;
+        scale: 1.02;
+      }
+    }
+  `
+  body.append(addButtonStyle)
+  body.append(addButton)
+
+  document.addEventListener('mousemove', function(e){
+    if(e.target.classList.contains('mp-add-button') || ['share-card', 'share-button'].includes(e.target.id)){
+
+    }else{
+      currentEl = e.target
+      let rect = e.target.getBoundingClientRect()
+      addButton.style.left = rect.left +'px'
+      addButton.style.top = rect.top + rect.height +'px'
+      addButton.style.width = rect.width +'px'
+    }
+
+  })
+  window.addEventListener('message', function(e){
+    let data = e.data
+    if(data.type === 'card'){
+      for(let key in data){
+        shareCard.setAttribute(key, data[key])
+      }
+    }
+    if(data.type === 'button'){
+      for(let key in data){
+        shareButton.setAttribute(key, data[key])
+      }
+    }
+  })
+  window.top.postMessage({msg:'mpShare init done'}, '*')
+}

src/views/shareUtm/share.vue

@@ -12,6 +12,7 @@ import 'hugerte/themes/silver'
 import 'hugerte/skins/ui/oxide/skin.js'
 import 'hugerte/skins/ui/oxide/content.js'
 import 'hugerte/skins/content/default/content.js'
+import vi from 'element-ui/src/locale/lang/vi'
 export default Vue.extend({
   name: 'Share',
   components: {
@@ -73,14 +74,15 @@ export default Vue.extend({
       currentUtm: {},
       utmList: [],
       showExportDialog: false,
-      ossUrl: process.env.VUE_APP_OSS_DOMAIN
+      ossUrl: process.env.VUE_APP_OSS_DOMAIN,
+      selfUrl: ''
     }
   },
   mounted() {
+    this.parseCode()
     this.getUtmList()
     this.getExpoList()
     this.init()
-    this.parseCode()
   },
   methods: {
     init() {
@@ -99,6 +101,9 @@ export default Vue.extend({
         }
       })
     },
+    setPUrl() {
+      this.codeData.viewUrl = 'https://injectshare.zhoujump.club?purl=' + this.selfUrl
+    },
     getUtm() {
       getUtmDetail(this.utm).then(res => {
         this.currentUtm = res.data
@@ -119,8 +124,7 @@ export default Vue.extend({
     },
     parseCode() {
       const url = window.location.protocol + '//' + window.location.host
-      const baseUrl = process.env.VUE_APP_BASE_API
-      this.codeData.viewUrl = `${url}/shareModule?url=${baseUrl}`
+      this.codeData.viewUrl = `${url}/shareModule`
     },
     sentData() {
       const url = window.location.protocol + '//' + window.location.host
@@ -132,6 +136,11 @@ export default Vue.extend({
       this.codeData.cardCode = `<mp-share-card res="${cardRes}"><\/mp-share-card>`
       this.codeData.buttonCode = `<mp-float-button res="${buttonRes}"><\/mp-float-button>`
       viewIframe.window.postMessage({
+        type: 'initView',
+        apiUrl: process.env.VUE_APP_BASE_API,
+        baseUrl: window.location.protocol + '//' + window.location.host
+      }, '*')
+      viewIframe.window.postMessage({
         type: 'card',
         res: cardRes
       }, '*')
@@ -139,6 +148,7 @@ export default Vue.extend({
         type: 'button',
         res: buttonRes
       }, '*')
+      console.log('已发送')
     },
     creatImage() {
       if (this.exportData.rendering) { return }
@@ -411,7 +421,7 @@ export default Vue.extend({
           </div>
         </div>
         <div v-show="shareType==='code_insert' && expoId" class="code-share">
-          <iframe id="viewIframe" name="viewIframe" class="view" :src="codeData.viewUrl" />
+          <iframe @load="sentData()" id="viewIframe" name="viewIframe" class="view" :src="codeData.viewUrl" />
         </div>
       </div>
     </div>
@@ -507,6 +517,13 @@ export default Vue.extend({
           </el-radio-group>
           <div class="sub-title">悬浮按钮代码(请将此代码安装至body之间)</div>
           <el-input autosize resize="none" :value="codeData.buttonCode" type="textarea" />
+          <div class="title">实验性功能</div>
+          <div class="sub-title">预览网址</div>
+          <el-input v-model="selfUrl">
+            <el-button slot="append" @click="setPUrl()">
+              前往
+            </el-button>
+          </el-input>
         </template>
       </div>
     </div>
@@ -758,8 +775,12 @@ export default Vue.extend({
         height: 100%;
         position: relative;
         .view{
-          width: 100%;
-          height: 100%;
+          width: 170%;
+          height: 170%;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%) scale(0.588);
           border: none;
         }
       }