exhibition_service_admin/src/views/shareUtm/share.vue

<script lang="ts">
import Vue from 'vue'
import vueQr from 'vue-qr'
import { getExpoList, getMyExpoInfo } from '@/api/expo'
export default Vue.extend({
  name: 'Share',
  components: {
    vueQr
  },
  data() {
    return {
      rootPath: window.location.origin,
      shareType: 'link',
      currentExpo: {},
      renderData: {},
      shareData: {
        qrLogo: '',
        qrLogoSize: 2,
        qrLogoName: '',
        qrImage: ''
      },
      expoId: '',
      expoList: []
    }
  },
  mounted() {
    this.getExpoList()
    this.init()
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.expoId = this.$route.query.id - 0
        this.getExpo()
      }
    },
    getExpoList() {
      getExpoList(1, 1000).then(res => {
        this.expoList = res.data.data
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '获取展会列表失败' + err,
          type: 'error'
        })
      })
    },
    initRenderData() {
      this.renderData = {
        title: this.currentExpo.expo_name,
        sub_title: '请编辑副标题',
        phone: this.currentExpo.contact_phone || '请编辑电话',
        address: this.currentExpo.location || '请编辑地址'
      }
    },
    getExpo() {
      getMyExpoInfo(this.expoId).then(res => {
        this.currentExpo = res.data
        this.initRenderData()
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '获取展会信息失败' + err,
          type: 'error'
        })
      })
    },
    copyText(text) {
      navigator.clipboard.writeText(text)
      this.$notify({
        title: '提示',
        message: '复制成功',
        type: 'success'
      })
    },
    qrImageReady(e) {
      this.shareData.qrImage = e
    },
    downloadQrImage() {
      const a = document.createElement('a')
      a.href = this.shareData.qrImage
      a.download = '二维码.png'
      a.click()
    },
    setQrLogo(file) {
      this.shareData.qrLogoName = file.name
      this.shareData.qrLogo = URL.createObjectURL(file)
    },
    goto(url) {
      window.open(url, '_blank')
    }
  }
})
</script>

<template>
  <div class="share-center">
    <div class="share-type">
      <div class="sub-title">分享展会</div>
      <el-select v-model="expoId" placeholder="请选择参展名称" @change="getExpo()">
        <el-option v-for="item in expoList" :value="item.id" :label="item.expo_name" />
      </el-select>
      <div class="sub-title">分享方式</div>
      <el-radio-group v-model="shareType" class="radio-list">
        <el-radio border label="link">网页链接</el-radio>
        <el-radio border label="qrcode">二维码图片</el-radio>
        <!--        <el-radio border label="social_media" >社交媒体/社交软件</el-radio>-->
        <el-radio border label="post_image">生成海报图片</el-radio>
        <el-radio border label="wechat_insert">微信公众平台嵌入</el-radio>
        <el-radio border label="code_insert">网页代码嵌入</el-radio>
      </el-radio-group>
    </div>
    <div class="share-view">
      <div v-if="!expoId" class="chose-expo">
        <div class="sub-title">选择需要分享的展会</div>
        <el-select v-model="expoId" placeholder="请选择参展名称" @change="getExpo()">
          <el-option v-for="item in expoList" :value="item.id" :label="item.expo_name" />
        </el-select>
      </div>
      <div v-if="shareType==='link' && expoId" class="link-share">
        <div class="link-inner">
          {{ rootPath }}/register/{{ currentExpo.urla }}
        </div>
        <div class="button-list">
          <el-button size="small" icon="el-icon-link" round @click="goto(rootPath+'/register/'+currentExpo.urla)">打开链接</el-button>
          <el-button size="small" icon="el-icon-document-copy" round @click="copyText(rootPath+'/register/'+currentExpo.urla)">复制链接</el-button>
        </div>
      </div>
      <div v-if="shareType==='qrcode' && expoId" class="qrcode-share">
        <div class="qrcode-inner">
          <vue-qr :callback="qrImageReady" :logo-margin="4" :logo-src="shareData.qrLogo" :logo-scale="shareData.qrLogoSize*0.1" :text="rootPath+'/register/'+currentExpo.urla" :margin="16" :size="260" />
          <div class="title">{{ currentExpo.expo_name }}</div>
        </div>
        <div class="button-list">
          <el-button size="small" icon="el-icon-download" round @click="downloadQrImage">下载图片</el-button>
        </div>
      </div>
      <div v-if="shareType==='social_media' && expoId" class="social-share" />
      <div v-if="shareType==='post_image' && expoId" class="post-share">
        <div class="post-inner">
          <div class="post-temp blue-temp-1">
            <div class="title">{{ renderData.sub_title }}</div>
            <div class="sub-title">{{ renderData.title }}</div>
            <div class="phone" />
            <div class="address" />
          </div>
          <div class="border-box" />
        </div>
      </div>
    </div>
    <div class="share-config">
      <template v-if="['qrcode','post_image'].includes(shareType)">
        <div class="sub-title">二维码logo</div>
        <div class="logo-input">
          <img v-if="shareData.qrLogo" class="logo" :src="shareData.qrLogo">
          <div v-else class="logo" />
          <div class="file-name">{{ shareData.qrLogoName||'点击选择/拖拽logo图片' }}</div>
          <input type="file" accept="image/*" @change="setQrLogo($event.target.files[0])">
          <div v-if="shareData.qrLogo" class="del el-icon-close" @click="shareData.qrLogo=shareData.qrLogoName=''" />
        </div>
        <div class="sub-title">logo尺寸</div>
        <el-slider v-model="shareData.qrLogoSize" :min="1.5" :max="3.5" :step="0.1" show-tooltip />
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .share-center{
    overflow: hidden;
    padding: 0 !important;
    height: 100%;
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    .sub-title{
      font-size: 14px;
      margin-left: 4px;
      color: grey;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .share-type{
      z-index: 2;
      position: relative;
      box-shadow: 0 1px 4px 0 #00000022;
      padding: 16px;
      .el-select{
        width: 100%;
        margin-bottom: 4px;
      }
      .radio-list{
        display: flex;
        flex-direction: column;
        gap: 6px;
        .el-radio{
          margin: 0;
          width: 100%;
        }
      }
    }
    .share-config{
      z-index: 2;
      position: relative;
      box-shadow: 0 1px 4px 0 #00000022;
      padding: 16px;
      .logo-input{
        transition-duration: 300ms;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        background-color: #f6f6f6;
        width: 100%;
        height: 80px;
        padding: 12px;
        display: grid;
        grid-gap: 12px;
        grid-template-columns: 56px 1fr;
        align-items: center;
        .del{
          padding: 6px;
          position: absolute;
          right: 6px;
          top: 6px;
          border-radius: 50%;
          cursor: pointer;
          &:hover{
            background-color: #e3e3e3;
          }
        }
        .logo{
          border-radius: 6px;
          object-fit: cover;
          background-color: white;
          width: 56px;
          height: 56px;
        }
        .file-name{
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          flex: 1;
          font-size: 13px;
        }
        input{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
    .share-view{
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background-color: #F9FAFB;
      .chose-expo{
        box-shadow: 0 1px 4px 0 #00000022;
        padding: 16px;
        border-radius: 8px;
        background-color: white;
        width: 360px;
        .el-select{
          width: 100%;
        }
      }
      .button-list{
        text-align: right;
        margin-top: 8px;
      }
      .qrcode-share{
        .qrcode-inner{
          overflow: hidden;
          background-color: white;
          box-shadow: 0 1px 4px 0 #00000022;
          border-radius: 8px;
          .title{
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 16px;
          }
        }
      }
      .post-share{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        background-image: url("/static/image/prototype/wallpost/prototypewall.jpg");
        display: flex;
        justify-content: center;
        align-items: center;
        .post-inner{
          padding: 8px 8px 13px 15px;
          position: relative;
          background-color: white;
          .border-box{
            border: 20px solid;
            border-image: url("/static/image/prototype/wallpost/prototypepost.png") 20 stretch;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
          .post-temp{
            width: 280px;
          }
          .blue-temp-1{
            overflow: hidden;
            display: block;
            padding: 8px;
            position: relative;
            background: #EAFBFF;
            &::before{
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              //width: 100px;
              //height: 20px;
              border-top: 14px solid #45A8FF;
              border-right: 100px solid #45A8FF;
              border-bottom: 14px solid transparent;
              border-left: 100px solid transparent;

            }
            .title{
              color: #45A8FF;
              font-weight: 1000;
              text-align: center;
              letter-spacing: 1.1px;
              font-size: 24px;
              line-height: 1.1;
              margin: 24px auto 0;
              width: 110px;
            }
            .sub-title{
              position: relative;
              width: fit-content;
              padding: 2px 12px;
              margin: 6px auto 0;
              background: #45A8FF;
              color: white;
            }
          }
        }
      }
      .link-share{
        .link-inner{
          font-size: 15px;
          border-radius: 8px;
          box-shadow: 0 1px 4px 0 #00000022;
          padding: 16px 24px;
          background-color: white;
        }
      }
    }
  }
</style>