微信生态常用代码

常用连接

jssdk 从微信H5点击保存图片说起

长按分享

<template>
  <div class="share-box">
      <img class="share-image-canv" v-show="imgUrl" :src="imgUrl" />
      <div class="share-image" v-show="!imgUrl" ref="imageWrapper">
        <div class="prodect" v-if="detail">
          <div class="titel van-ellipsis">{{detail.name}}</div>
          <div class="money van-ellipsis">{{detail.loan/10000}}万</div>
          <div class="orgName van-ellipsis">{{detail.orgName}}</div>
        </div>
        <div class="qrcode" ref="qrCodeUrl"></div>
      </div>
      <div class="foot">长按上图分享给客户</div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
import { mapGetters } from "vuex";
import { getCapitalDetailById } from "@/API/index";
export default {
  name: "Bill",
  components: {},
  data() {
    return {
      loading: false,
      imgUrl: '',
      detail: null,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 获取车贷
    async getCapitalDetail() {
      this.loading = true;
      const { data } = await getCapitalDetailById(this.$route.query.id)
    // 加载状态结束
      this.loading = false;
      if (data.success && data.data) {
        this.detail = data.data;
        this.creatQrCode()
        this.toImage()
        // setTimeout(this.toImage(), 3000);
      }
    },
    // 二维码生成
    creatQrCode() {
        const that =this
        const textUrl = location.origin +"/#/openshare?id=" + this.detail.id + "&userId=" + this.userInfo.userId
          setTimeout(function(){
            var qrcode = new QRCode(that.$refs.qrCodeUrl, {
                text:textUrl,
                width: 100,
                height: 100,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
            });
          },300);
    },
    // 图片生成
    toImage() {
      let that = this;
      setTimeout(function(){
        html2canvas(that.$refs.imageWrapper).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png")
            that.imgUrl = dataURL;
            if (that.imgUrl !== "") {
            that.loading = true;
            }
        });
       },400);
    },
  },
  created(){
    //   this.getCapitalDetail()
  },
  mounted() {
    this.getCapitalDetail()
    
  },
};
</script>

<style lang="less">
    .share-box+.bottem-tab{
        display: none;
    }
.share-box {
    .foot{
        color: #fffeff;
        position: fixed;
        width: 100%;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        font-size: 0.5rem;
        z-index: 2;
        bottom: 0;
        background-color: #e8bc78;
    }
  .prodect {
    position: absolute;
    width: 100%;
    padding-top: 2.5rem;
    .titel {
      text-align: center;
      font-size: 18px;
      color: #fff;
      width: 3rem;
      margin: 1rem auto;
    }
    .orgName {
      width: 4rem;
      margin-top: 2.5rem;
      margin-left: 2rem;
      font-size: 18px;
      color: #fff;
    }
    .money {
      text-align: center;
      margin: 1.6rem auto;
      font-size: 1rem;
      color: #fe7800;
      width: 70%;
    }
  }
  .share-image {
    background-image: url("../assets/img/sharebg.png");
    width: 10rem;
    height: 12.4rem;
    background-size: 80% auto;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    // background-color: #e8bc78;
    .qrcode {
      position: absolute;
      bottom: 1.6rem;
      right: 1.7rem;
    }
  }
  .share-image-canv {
    margin: auto;
    display: block;
    width: 10rem;
    height: 12.4rem;
  }
}
</style>