shuangchuangzhou_2022/src/pages/scene/components/qrcode.vue

<template>
  <div class="qrcode">
    <svg height="0" width="0">
      <defs>
        <clipPath id="svgPathdaka">
          <path
            d="M2601-173.034h-39.568l4.886-19.115h-19l-4.886,19.115h-9.773l4.886-19.115h-19l-4.886,19.115h-9.773l4.886-19.115h-19l-4.886,19.115h-12.454l4.886-19.115h-19l-4.886,19.115h-9.773l4.886-19.115h-19l-4.886,19.115h-9.773l4.886-19.115h-19l-4.886,19.115H1571.815L1505-239.851V-889.034h53.886L1554-869.919h19l4.886-19.115h9.773l-4.886,19.115h19l4.886-19.115h9.773l-4.887,19.115h19l4.887-19.115h12.454L1643-869.919h19l4.886-19.115h9.773l-4.886,19.115h19l4.886-19.115h9.773l-4.886,19.115h19l4.887-19.115h767.752L2601-780.219v607.184Z"
            transform="translate(-1505 889.034)"
          />
        </clipPath>
      </defs>
    </svg>

    <div class="downloadQrcon">
      <qrcodetl v-if="tmpPano" :id="'qrpg_' + tmpPano.id" :data="tmpPano" />
      <qrcodetl v-if="currentItem" :id="'qrpgc_' + currentItem.id" :data="currentItem" />
    </div>

    <div class="qrcodecon">
      <h3>扫描二维码，手机观展</h3>
      <div class="ul" :style="{ backgroundImage: `url(${require(`@/assets/images/proj2022/pc/bg_r_s.png`)})` }">
        <div class="li" v-if="tmpPano.name">
          <template v-if="tmpPano.name">
            <p v-if="!currentPanoArr" v-html="tmpPano.name || ''"></p>
            <div v-else class="xiala">
              <span @click="isShowUl = !isShowUl">
                {{ tmpPano.name }}
                <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="" />
              </span>
              <ul class="brightness" v-if="isShowUl">
                <li v-html="item.name" @click="(isShowUl = false), (tmpPano = item)" v-for="(item, i) in currentPanoArr" :key="i"></li>
              </ul>
            </div>
          </template>
          <p v-else></p>
          <!-- <img v-if="tmpPano.id" :src="require(`@/assets/images/project/qrcode/${tmpPano.id}.jpg`)" alt="" /> -->
          <img :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
          <div @click="download(tmpPano.id, 'qrpg_')" class="download">下载二维码</div>
        </div>

        <div class="li" v-if="currentItem.id">
          <img :src="require(`@/assets/images/project/qrcode/11.jpg`)" alt="" />
          <p v-html="currentItem.name"></p>
          <div @click="download(currentItem.id, 'qrpgc_')" class="download">下载二维码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Booth } from "@/data/raw.js";
import qrcodetl from "@/components/qrcodetl/index.vue";
import domtoimage from "dom-to-image";

export default {
  props: ["currentPano", "currentItem"],
  data() {
    return {
      isShowUl: false,
      tmpPano: this.currentPano,
    };
  },
  components: { qrcodetl },
  computed: {
    currentPanoArr: function() {
      let tmp = Booth.filter((item) => item.panoId == this.currentPano.panoId);
      return tmp && tmp.length > 1 ? tmp : "";
    },
  },
  methods: {
    download(id = null, type = "") {
      var node = document.getElementById(type + id);

      domtoimage
        .toPng(node)
        .then(function(dataUrl) {
          let elink = document.createElement("a");
          elink.href = dataUrl;
          elink.download = `poster.png`;
          elink.click();
          document.body.removeChild(elink);
        })
        .catch(function(error) {
          console.error("oops, something went wrong!", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@w: 1096px;
@fixw: 8px;
.qrcode {
  width: @w;
  position: relative;
  height: 716px;
  pointer-events: none;
  > svg {
    opacity: 0;
  }
  .downloadQrcon {
    position: fixed;
    top: 0;
    left: -100vw;
  }
  .qrcodecon {
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 34px 0 0;
    backdrop-filter: blur(50px) brightness(60%);
    clip-path: url(#svgPathdaka);
    > h3 {
      margin: 0 auto 20px;
      font-size: 30px;
      font-family: "pangmen";
      font-weight: normal;
    }
    .ul {
      background-color: rgba(0, 0, 0, 0.4);
      width: 90%;
      margin: 0 auto;
      padding: 66px 30px 86px;
      display: flex;
      justify-content: center;
      background-repeat: no-repeat;
      background-position: bottom center;
      background-size: 100% auto;
      .li {
        text-align: center;
        width: 220px;
        margin: 0 7%;

        > p,
        .xiala {
          font-size: 18px;
          line-height: 1.5;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .xiala {
          position: relative;
          > span {
            border: 1px solid #fff;
            display: inline-block;
            border-radius: 4px;
            width: 100%;
            padding: 10px 30px 10px 10px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            > img {
              position: absolute;
              right: 12px;
              transform: rotate(90deg);
              top: 33%;
              width: 8px;
            }
          }
          > ul {
            position: absolute;
            top: 90%;
            padding: 0 10px;
            width: 100%;
            z-index: 99;
            clip-path: none !important;
            border-radius: 4px;
            overflow: hidden;
            height: auto;
            > li {
              text-align: left;
              line-height: 1.5;
              border-bottom: dashed 1px #fff;
              padding: 10px 0;
              cursor: pointer;
              font-size: 16px;
              &:last-of-type {
                border-bottom: none;
              }
            }
          }
        }
        > img {
          width: 100%;
          margin: 10px 0 40px;
        }
        .download {
          border: 1px solid #fff;
          background-color: rgba(255, 255, 255, 0.4);
          line-height: 60px;
          height: 60px;
          width: 100%;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>