微信生态常用代码
来自ling
常用连接
长按分享
<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>