exhibition_service_admin/public/shareModule/initShare.js

{
  var LZString=function(){var r=String.fromCharCode,o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",e={};function t(r,o){if(!e[r]){e[r]={};for(var n=0;n<r.length;n++)e[r][r.charAt(n)]=n}return e[r][o]}var i={compressToBase64:function(r){if(null==r)return"";var n=i._compress(r,6,function(r){return o.charAt(r)});switch(n.length%4){default:case 0:return n;case 1:return n+"===";case 2:return n+"==";case 3:return n+"="}},decompressFromBase64:function(r){return null==r?"":""==r?null:i._decompress(r.length,32,function(n){return t(o,r.charAt(n))})},compressToUTF16:function(o){return null==o?"":i._compress(o,15,function(o){return r(o+32)})+" "},decompressFromUTF16:function(r){return null==r?"":""==r?null:i._decompress(r.length,16384,function(o){return r.charCodeAt(o)-32})},compressToUint8Array:function(r){for(var o=i.compress(r),n=new Uint8Array(2*o.length),e=0,t=o.length;e<t;e++){var s=o.charCodeAt(e);n[2*e]=s>>>8,n[2*e+1]=s%256}return n},decompressFromUint8Array:function(o){if(null==o)return i.decompress(o);for(var n=new Array(o.length/2),e=0,t=n.length;e<t;e++)n[e]=256*o[2*e]+o[2*e+1];var s=[];return n.forEach(function(o){s.push(r(o))}),i.decompress(s.join(""))},compressToEncodedURIComponent:function(r){return null==r?"":i._compress(r,6,function(r){return n.charAt(r)})},decompressFromEncodedURIComponent:function(r){return null==r?"":""==r?null:(r=r.replace(/ /g,"+"),i._decompress(r.length,32,function(o){return t(n,r.charAt(o))}))},compress:function(o){return i._compress(o,16,function(o){return r(o)})},_compress:function(r,o,n){if(null==r)return"";var e,t,i,s={},u={},a="",p="",c="",l=2,f=3,h=2,d=[],m=0,v=0;for(i=0;i<r.length;i+=1)if(a=r.charAt(i),Object.prototype.hasOwnProperty.call(s,a)||(s[a]=f++,u[a]=!0),p=c+a,Object.prototype.hasOwnProperty.call(s,p))c=p;else{if(Object.prototype.hasOwnProperty.call(u,c)){if(c.charCodeAt(0)<256){for(e=0;e<h;e++)m<<=1,v==o-1?(v=0,d.push(n(m)),m=0):v++;for(t=c.charCodeAt(0),e=0;e<8;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;e<h;e++)m=m<<1|t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=c.charCodeAt(0),e=0;e<16;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}0==--l&&(l=Math.pow(2,h),h++),delete u[c]}else for(t=s[c],e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;0==--l&&(l=Math.pow(2,h),h++),s[p]=f++,c=String(a)}if(""!==c){if(Object.prototype.hasOwnProperty.call(u,c)){if(c.charCodeAt(0)<256){for(e=0;e<h;e++)m<<=1,v==o-1?(v=0,d.push(n(m)),m=0):v++;for(t=c.charCodeAt(0),e=0;e<8;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}else{for(t=1,e=0;e<h;e++)m=m<<1|t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t=0;for(t=c.charCodeAt(0),e=0;e<16;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1}0==--l&&(l=Math.pow(2,h),h++),delete u[c]}else for(t=s[c],e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;0==--l&&(l=Math.pow(2,h),h++)}for(t=2,e=0;e<h;e++)m=m<<1|1&t,v==o-1?(v=0,d.push(n(m)),m=0):v++,t>>=1;for(;;){if(m<<=1,v==o-1){d.push(n(m));break}v++}return d.join("")},decompress:function(r){return null==r?"":""==r?null:i._decompress(r.length,32768,function(o){return r.charCodeAt(o)})},_decompress:function(o,n,e){var t,i,s,u,a,p,c,l=[],f=4,h=4,d=3,m="",v=[],g={val:e(0),position:n,index:1};for(t=0;t<3;t+=1)l[t]=t;for(s=0,a=Math.pow(2,2),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;switch(s){case 0:for(s=0,a=Math.pow(2,8),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;c=r(s);break;case 1:for(s=0,a=Math.pow(2,16),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;c=r(s);break;case 2:return""}for(l[3]=c,i=c,v.push(c);;){if(g.index>o)return"";for(s=0,a=Math.pow(2,d),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;switch(c=s){case 0:for(s=0,a=Math.pow(2,8),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;l[h++]=r(s),c=h-1,f--;break;case 1:for(s=0,a=Math.pow(2,16),p=1;p!=a;)u=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=e(g.index++)),s|=(u>0?1:0)*p,p<<=1;l[h++]=r(s),c=h-1,f--;break;case 2:return v.join("")}if(0==f&&(f=Math.pow(2,d),d++),l[c])m=l[c];else{if(c!==h)return null;m=i+i.charAt(0)}v.push(m),l[h++]=i+m.charAt(0),i=m,0==--f&&(f=Math.pow(2,d),d++)}}};return i}();"function"==typeof define&&define.amd?define(function(){return LZString}):"undefined"!=typeof module&&null!=module?module.exports=LZString:"undefined"!=typeof angular&&null!=angular&&angular.module("LZString",[]).factory("LZString",function(){return LZString});

  const oss_domain = 'https://matchexpo.obs.cn-north-1.myhuaweicloud.com'
  let host = ''
  function getParams(){
    const scripts = document.getElementsByTagName('script')
    for(let script of scripts){
      const src = script.src
      if(src && src.includes('/shareModule/initShare.js')){
        let url = new URL(src)
        host = mpShareModule.host
        return url.searchParams
      }
    }
    return null
  }
  function initModule(){
    let params = getParams()
    if(params.get('url') === undefined){
      console.error('多果表单分享初始化失败,分享代码未携带apiUrl')
    }else{
      console.log('多果表单分享初始化成功')
      class mpShareCard extends HTMLElement {
        static observedAttributes = ['res']
        renderData = {}
        expoData = {}
        shadow = null
        getData(){
          window.fetch(`${params.get('url')}/api/expo/info?key=${this.renderData.key}`,{
            method: 'GET'
          })
            .then(res => {
              return res.json()
            })
            .then(json => {
              if(json.data){
                json = json.data
              }
              json.images = JSON.parse(json.images)
              json.social_links = JSON.parse(json.social_links)
              this.expoData = json
              this.render()
            })
            .catch(err => {
              console.error('多果表单分享卡片数据获取失败',err)
            })
        }
        render(){
          console.log('多果表单分享卡片渲染开始')
          if(!this.shadow){
            this.shadow = this.attachShadow({mode: 'open'})
          }
          let url = ''
          if(this.renderData.utm){
            url= `https://s1.matchexpo.cn/${this.renderData.utm}`
          }else{
            url = `${host}/register/${this.renderData.key}`
          }
          const body = `
                <div class="mp-card">
                  <img class="bg-img" src="${oss_domain}${this.expoData.images[0]}" />
                  <div class="info-cont">
                    <div class="head">
                      <img class="avatar" src="${oss_domain}${this.expoData.logo}">
                      <div class="name">${this.expoData.expo_name}</div>
                    </div>
                    <div class="content">
                      ${this.expoData.content}
                    </div>
                    <div class="button-list">
                      <a class="button" href="${url}">${this.renderData.cardbuttontext}</a>
                    </div>
                  </div>
                </div>
              `
          const style = `
                <style>
                  .mp-card{
                    font-family: ${this.renderData.cardfontinherit==1?'inherit':'sans-serif'};
                    position: relative;
                    width: 100%;
                    border-radius: 16px;
                    overflow: hidden;
                    background-color: ${this.renderData.backcolor};
                    color: ${this.renderData.fontcolor};
                    box-shadow: 0 0 12px 0 #00000022;
                    &::after{
                        content: '';
                        display: block;
                        position: absolute;
                        height: 50px;
                        width: 100%;
                        top: 130px;
                        left: 0;
                        background-image: linear-gradient(${this.renderData.backcolor}00,${this.renderData.backcolor}ff);
                        @media (max-width: 992px) {
                          top: 81px;
                          height: 40px;
                        }
                      }
                    .bg-img{
                      display: block;
                      width: 100%;
                      height: 180px;
                      object-fit: cover;
                      position: relative;
                      @media (max-width: 992px) {
                        height: 120px;
                      }
                    }
                    .info-cont{
                      z-index: 1;
                      position: relative;
                      padding: 0 20px 20px;
                      .button-list{
                        display: flex;
                        justify-content: flex-end;
                        .button{
                          text-decoration: none;
                          text-align: center;
                          border-radius: 4px;
                          color: ${this.renderData.cardbuttoncolor};
                          background-color: ${this.renderData.themecolor};
                          padding: 12px 36px;
                          display: inline-block;
                          font-weight: bold;
                          font-size: 18px;
                        }
                        @media (max-width: 992px) {
                          .button{
                            width: 100%;
                            font-size: 16px;
                          }
                        }
                      }
                      .content{
                        margin-top: 24px;
                        font-size: 16px;
                        img{
                          width: 100%;
                        }
                        @media (max-width: 992px) {
                          font-size: 14px;
                        }
                      }
                      .head{
                        display: flex;
                        align-items: flex-end;
                        gap: 16px;
                        margin-top: -32px;
                        .avatar{
                          box-shadow: 0 0 8px 0 #00000022;
                          border-radius: 8px;
                          border: 4px solid white;
                          width: 72px;
                          height: 72px;
                          object-fit: cover;
                          @media (max-width: 992px) {
                            width: 52px;
                            height: 52px;
                            border: 2px solid white;
                          }
                        }
                        .name{
                          color: #111111;
                          font-weight: bolder;
                          line-height: 1;
                          font-size: 28px;
                          margin-bottom: 8px;
                          @media (max-width: 992px) {
                            font-size: 20px;
                            margin-bottom: 4px;
                          }
                        }
                      }
                    }
                  }
                </style>
              `
          this.shadow.innerHTML = ''
          this.shadow.innerHTML = style + body
        }
        constructor() {
          super()
        }
        attributeChangedCallback(name, oldValue, newValue) {
          if(name === 'res'){
            let attr = ['key','themecolor','backcolor','fontcolor','cardbuttontext','cardbuttoncolor','cardfontinherit','utm']
            let dataArr = LZString.decompressFromBase64(newValue).split(',')
            if(dataArr[0] !== this.renderData.key){
              for(let i = 0; i < dataArr.length; i++){
                this.renderData[attr[i]] = dataArr[i]
              }
              this.getData()
            }else{
              for(let i = 0; i < dataArr.length; i++){
                this.renderData[attr[i]] = dataArr[i]
              }
              this.render()
            }
          }
        }
      }
      class mpFloatButton extends HTMLElement {
        static observedAttributes = ['res']
        renderData = {}
        expoData = {}
        shadow = null
        getData(){
          window.fetch(`${params.get('url')}/api/expo/info?key=${this.renderData.key}`,{
            method: 'GET'
          })
            .then(res => {
              return res.json()
            })
            .then(json => {

              if(json.data){
                json = json.data
              }
              json.images = JSON.parse(json.images)
              json.social_links = JSON.parse(json.social_links)
              this.expoData = json
              this.render()
            })
            .catch(err => {
              console.error('多果表单浮动按钮数据获取失败',err)
            })
        }
        render() {
          if(!this.shadow){
            this.shadow = this.attachShadow({mode: 'open'})
          }
          let url = ''
          if(this.renderData.utm){
            url= `https://s1.matchexpo.cn/${this.renderData.utm}`
          }else{
            url = `${host}/register/${this.renderData.key}`
          }
          const body = `
              <a href="${url}" class="mp-button">
                <img class="background" src="${oss_domain}${this.expoData.images[0]}">
                <div class="expo-name">${this.expoData.expo_name}</div>
                <div class="goto-text">${this.renderData.buttontext}</div>
              </a>`
          const style = `
              <style>
                .mp-button{
                  max-width: 240px;
                  border-radius: 16px;
                  overflow: hidden;
                  font-family: sans-serif;
                  text-decoration: none;
                  display: block;
                  position: fixed;
                  z-index: 10;
                  ${this.renderData.buttonposition.includes('l')?'left: 24px;':''}
                  ${this.renderData.buttonposition.includes('r')?'right: 24px;':''}
                  ${this.renderData.buttonposition.includes('c')?'bottom: 40%;':''}
                  ${this.renderData.buttonposition.includes('b')?'bottom: 24px;':''}
                  padding: 10px 20px;
                  background-color: ${this.renderData.themecolor};
                  .goto-text{
                    text-align: right;
                    position: relative;
                    color: ${this.renderData.buttoncolor};
                  }
                  .expo-name{
                    position: relative;
                    margin-bottom: 0.5em;
                    font-weight: bold;
                    color: ${this.renderData.buttoncolor};
                    font-size: 1.4em;
                  }
                  .background{
                  transition-duration: 300ms;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: 0.1;
                    filter: grayscale(1);
                  }
                  &:hover{
                    .background{
                      opacity: 0.15;
                      scale: 1.1;
                    }
                  }
                }
              </style>
            `
          this.shadow.innerHTML = ''
          this.shadow.innerHTML = style + body
        }
        constructor() {
          super()
        }
        attributeChangedCallback(name, oldValue, newValue) {
          if(name === 'res'){
            let attr = ['key','themecolor','backcolor','fontcolor','buttontext','buttoncolor','buttonposition','utm']
            let dataArr = LZString.decompressFromBase64(newValue).split(',')
            if(dataArr[0] !== this.renderData.key){
              for(let i = 0; i < dataArr.length; i++){
                this.renderData[attr[i]] = dataArr[i]
              }
              this.getData()
            }else{
              for(let i = 0; i < dataArr.length; i++){
                this.renderData[attr[i]] = dataArr[i]
              }
              this.render()
            }
          }
        }
      }
      customElements.define('mp-share-card', mpShareCard)
      customElements.define('mp-float-button', mpFloatButton)
    }
  }
  initModule()
}