个人名片+微信名片二维码 VUE

个人名片

功能：根据数据库查出个人数据，生成个人名片，名片中有个人二维码，微信扫描二维码可快速保存联系人信息到手机通讯录。

vue中引入html2canvas实现将整块dom进行图片化

引包

npm install --save html2canvas

引入相关文件（在我的资源中有）

<template><div class="container"><!--v-loading.fullscreen.lock 加载动画--><div class="cardWrap" v-loading.fullscreen.lock="loading" element-loading-text="加载后，长按图片分享"><div class="card" ref="cardCanvas"><div class="card-info"><div class="card-imgwrap"><div class="card-empty" ><img class="card-empty-img1" src="../assets/logo3.png" /></div></div><div class="card-detail"><!--姓名--><div class="name" v-model="user.ZUSERID">{{user.ZUSERNAME}}</div><!--职位--><div class="position" v-if="this.user.ZGSDMB == ''" style="font-weight: bold;">{{user.ZZHIWU}}</div><!--公司--><div class="companyName" >{{user.ZGSMCA}}</div><!--公司--><div class="companyName" >{{user.ZGSMCB}}</div><!--职位2--><!--<div class="position">职务2:{{user.ZZHIWU2}}</div>--><div class="address" >地址:{{user.ZGSDZA}}</div><div class="Tel" >电话:{{user.ZTELE}}</div><div class="e-mail" >邮箱:{{user.ZMAILBOX}}</div><div class="e-ZURL" >网址:{{user.ZURL}}</div><!--二维码按钮，点击时生成二维码，在下面设置自动触发--><button id="btn" hidden="hidden">二维码</button></div><!--编辑页面--><!--弹出dialog对话框，:visible.sync="dialogVisible"  需要设置visible的sync属性，它接收Boolean，当为true时显示 Dialog。:before-close  点击x号时，提示信息slot="footer"  页脚信息--><el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" width="90%" :fullscreen= "true":close-on-click-modal="false" :show-close = "false"><el-form class="dialogfrom"  ><el-form-item label="姓名:":label-width="formLabelWidth"><el-input v-model="user.ZUSERNAME" autocomplete="off" minlength="16" maxlength="19" ></el-input></el-form-item><el-form-item label="公司:"  :label-width="formLabelWidth"><el-select v-model="user.ZGSDMA"placeholder="请输入公司"style="width: 100%;"><el-option v-for="(item,index) in companys" :key="index" :label="item.ZDESC" :value="item.ZVALUE"></el-option></el-select></el-form-item><el-form-item label="职位:" :label-width="formLabelWidth"><el-input v-model="user.ZZHIWU" autocomplete="off" minlength="16" maxlength="19" ></el-input></el-form-item><el-form-item label="公司2:" :label-width="formLabelWidth"><el-select v-model="user.ZGSDMB"placeholder="请输入公司2"style="width: 100%;"><el-option v-for="(item,index) in companys" :key="index" :label="item.ZDESC" :value="item.ZVALUE"></el-option></el-select></el-form-item><el-form-item label="职位2:" :label-width="formLabelWidth"><el-input v-model="user.ZZHIWU2" autocomplete="off" minlength="16" maxlength="19" ></el-input></el-form-item><el-form-item label="电话:" :label-width="formLabelWidth"><el-input v-model="user.ZTELE" autocomplete="off" minlength="16" maxlength="19" ></el-input></el-form-item><el-form-item label="邮箱:" :label-width="formLabelWidth"><el-input v-model="user.ZMAILBOX" autocomplete="off" minlength="16" maxlength="19" ></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="saveCard" size="small">确 定</el-button></div></el-dialog></div><!--jh静态图片--><div ref="jhImg"><img src="../assets/jhImg.jpeg" style="width: 100%;margin-bottom: -6px;"></div><!--二维码--><div class="card-code" v-if="cardSaveTxtStatus === 1"><!--响应性式布局，两行四列--><!--第一行--><el-row :gutter="10"><el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col><el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11"><div class="grid-content" id="qrcode"><img id="qrCodeIco" src="../assets/logo8.jpg" style="position: absolute;width: 20px; height: 20px; margin: 25.5px;" /></div></el-col><el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11"><div class="grid-content"><img class="officialWebsite" src="../assets/官网.png"></div></el-col><el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col></el-row><!--第二行--><el-row :gutter="10"><el-col :xs="0" :sm="1" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col><el-col :xs="12" :sm="11" :md="8" :lg="9" :xl="11"><span class="grid-content">长按识别添加至通讯录</span></el-col><el-col :xs="9" :sm="9" :md="8" :lg="9" :xl="11"><span class="grid-content">长按识别关注官微</span></el-col><el-col :xs="3" :sm="3" :md="4" :lg="3" :xl="1"><div class="grid-content"></div></el-col></el-row><div ref="cloudImg"><img src="../assets/云彩.png" style="width: 100%;margin-bottom: -6px;"></div></div><!--ref='cardSave'获取这个dom元素，保存图片的时候，把该dom除外--><!--<div class="card-share" ref='cardShare'><div class="card-shareTxt"  @click="saveImage">分享</div></div>--><div class="card-share" ref='cardShare'><div class="card-shareTxt" v-if="cardSaveTxtStatus === 1"  @click="editCard">编辑</div><div class="card-shareTxt" v-if="cardSaveTxtStatus === 2"  @click="saveCard">保存</div></div><div class="card-save" ref='cardSave'><!--<div class="card-saveTxt" v-if="cardSaveTxtStatus === 1" @click="editCard()">编辑</div>--><div class="card-saveTxt" @click="saveImage">分享</div></div></div></div></div>
</template><script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/qrcode.js"></script>
<script src="../../static/js/kk-1.3.10.min.js"></script><script>import html2canvas from 'html2canvas';import axiosInstance from "../utils/request";export default {name: "MyCard",inject: ['reload'],data: function () {return {loading: false,vision: "",formLabelWidth: '60px', //form的宽度dialogFormVisible: false,   //  弹出框标记位option: [{ZVALUE: '',  // 代码ZDESC: ''  // 名称}],QrImg: "", //二维码地址position: "",companyCode:'',company_:'',zgsdma:'',//下拉数据companys: [],//公司，jsonarrayuser: {},//用户信息，jsonobjectzhiwu:'',selected:"",dataURL: '',cardUserName: '', // 当前商户的昵称currentQrCode: '', // 当前名片的二维码数据cardSaveTxtStatus: 1, // 名片右上角编辑按钮状态 1-不可编辑 2-可编辑form: {region: {"re" : ["asdf"]}}}},methods:{/*一进个人名片发送查询请求*/created(){// 获取到员工号，存到浏览器的sessionconst customUser = sessionStorage.getItem('user');axiosInstance.post("/mycard/select",//  kk员工号  100267[{ZFIELD: "ZUSERID",ZVALUE: "100942"}],{headers: {'Content-Type': 'application/json'}}).then(result =>{this.user = result.data.data.userList[0];// jQuery生成二维码var name, company, title, address, mobile, email, web, desc;let u = this.user;$("#btn").one("click",function() {name = "FN:" + u.ZUSERNAME + "\n";        //姓名company = "ORG:" + u.ZGSMCA + "\n";      //公司title = "TITLE:" + u.ZZHIWU + "\n";        //职务address = "ADR;WORK:" + u.ZGSDZA + "\n";     //地址mobile = "TEL;TYPE=work:" + u.ZTELE + "\n";        //手机email = "EMAIL;TYPE=pref:" + u.ZMAILBOX + "\n";        //邮箱//web = "URL:" + u.ZURL + "\n";              //网址var info = "BEGIN:VCARD\n" + name + company + title + email + mobile + address + "END:VCARD";//生成二维码var qrcode = new QRCode("qrcode");qrcode.makeCode(info);// var margin = ($("#qrcode").width() - $("#qrCodeIco").width()) / 2; //控制Logo图标的位置// $("#qrCodeIco").css("margin", 25.5px);//$("#qrcode img:not('#qrCodeIco')").css("width","70px");})//id为btn的按钮，自动触发点击事件$("#btn").trigger("click");})},/* 保存图片的方法（即按钮点击触发的方法）第一个参数为需要保存的div的id名第二个参数为保存图片的名称 */saveImage(){this.loading = true;// cardCanvas要生成图片的dom元素，cardSave要剔除的dom元素let canvasID = this.$refs.cardCanvaslet removeDiv = this.$refs.cardSavelet removeDiv2 = this.$refs.cardSharecanvasID.removeChild(removeDiv);canvasID.removeChild(removeDiv2);/*把对应的dom生成图片*/html2canvas(canvasID, {backgroundColor: null     // 解决生成的图片有白边}).then(canvas => {canvasID.appendChild(removeDiv)canvasID.appendChild(removeDiv2)// 返回图片的二进制数据let dataURL = canvas.toDataURL('image/png');this.dataURL = dataURL//console.log(dataURL);console.log(this.user.ZUSERID);this.vision = Math.random().toString(12).substr(2);console.log(this.vision);// 把图片保存到服务器axiosInstance.post("/mycard/getImg",{binaryImg:this.dataURL, userId:this.user.ZUSERID ,vision:this.vision},{headers: {'Content-Type': 'application/json'}}).then(result =>{//console.log('地址'+'http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg')//this.vision = this.vision+1;//console.log('地址'+'http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg')this.loading = false;// kk中分享图片kk.media.previewImage({paths: ['http://zmsg.jangho.com:8085/image/'+this.user.ZUSERID+this.vision+'.jpg',],operations: true}, function(code, msg){this.vision = this.vision+1;alert('错误信息:' + msg + ',错误代码:' + code);});this.vision = this.vision+1;});//保存到本地（手机上）//this.saveFile(dataURL, 'wahaha')})},editCard () { // 点击编辑按钮// 显示dialogthis.dialogFormVisible = true;this.cardSaveTxtStatus = 2;// 公司名称和公司代码查询axiosInstance.post("/mycard/dropDown","",{headers: {'Content-Type': 'application/json'}}).then(result =>{this.companys = result.data.data.company;})},open(msg) {this.$confirm('您暂未填写'+msg, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success', message: '请再次填写!'});})},saveCard () { // 点击保存按钮this.cardSaveTxtStatus = 1;let msg = "";let flag = 0; //flag = 1 需要跳出提醒if (this.user.ZGSDMB != "" && this.user.ZZHIWU2 == ""){msg = msg.concat(" 职位2");flag = 1;}if (this.user.ZGSDMB == "" && this.user.ZZHIWU2 != ""){msg = msg.concat(" 公司2");flag = 1;}if (this.user.ZUSERNAME == ""){msg = msg.concat(" 姓名");flag = 1;};if (this.user.ZGSDMA == ""){msg = msg.concat(" 公司");flag = 1;};if (this.user.ZZHIWU == ""){msg = msg.concat(" 职务1");flag = 1;};if (this.user.ZTELE == ""){msg = msg.concat(" 电话");flag = 1;};if (this.user.ZMAILBOX == ""){msg = msg.concat(" 邮箱");flag = 1;};if(flag == 1){//开启消息提示框//this.$toast.fail(msg+"不能为空！")this.open(msg);}else if(flag == 0){//关闭消息提示框axiosInstance.post("/mycard/update",[this.user],{headers: {'Content-Type': 'application/json'}}).then(result =>{this.created();this.dialogFormVisible = false;// console.log(result.data.data.promptMsg[0].MSGTX);});}},saveFile (data, filename) {let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')saveLink.href = datasaveLink.download = filenamelet event = document.createEvent('MouseEvents')event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)saveLink.dispatchEvent(event)}},mounted() {// 生命周期创建时this.created();}}</script>
<style scoped>.container {width: 100%;height: calc((100vh - 40px));background: #fff;}.container img[lazy=loading] {padding: 40%;}
/*  .container img {width: 100%;}*/.officialWebsite{width: 70px;}.companyName{font-weight: bold;}.cardImg{}#qrcode img{display: block;width: 70px;}#btn{width:100px;height:40px;text-align: center;line-height: 40px;background: #6c0;}.cardWrap {padding: 10px 6% 10px;background: #fff;}.card {position: relative;}.card-info {background-color: #f7f5f6;padding: 30px 0 30px 5px;}.card-bottom {height: 46px;padding: 5px 0;background: linear-gradient(to right, #63a3d1, #c8e5f1);/*渐变色*/color: #fff;text-align: center;font-size: 12px;box-sizing: border-box;}.card-bottom .txt {width: 200px;line-height: 18px;}.card-save {position: absolute;right: 0;top: 0px;width: 0;height: 0;font-size: 10px;color: #fff;border-width: 0px 45px 45px 0;border-style: solid;border-color: transparent #009900;}.card-share {position: absolute;left: 0;top: 0px;width: 0;height: 0;font-size: 10px;color: #fff;border-width: 0px 0 45px 45px;border-style: solid;border-color: transparent #009900;}.card-saveTxt {width: 45px;height: 45px;transform-origin: bottom center;transform: rotate(45deg);position: absolute;display: inline-block;width: 45px;right: -37px;top: 3px;}.card-shareTxt {width: 45px;height: 45px;-webkit-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotate(275deg);transform: rotate(315deg);position: absolute;display: inline-block;width: 45px;right: -25px;top: -12px;}/*.cardWrap-txt {margin-top: 8px;font-size: 14px;line-height: 20px;color: #333333;text-align: center;}.cardWrap-txt .grey {margin: 5px 0 0 0;color: #111111;font-weight: bold;}*/.card-code {background-color: #eeeced;/*position: absolute;*/right: 4%;bottom: -12px;/*color: #fff;*/font-size: 12px;text-align: center;}.qrcode {display: inline-block;height: 54px;width: 54px;line-height: 54px;text-align: center;background: #fff;}.qrcode img {height: 48px;width: 48px;vertical-align: middle;}.grid-content {font-size: 12px;color: grey;border-radius: 4px;min-height: 36px;}.triangle-up {display: inline-block;margin-right: 4px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #fff;}.card-imgwrap{width: 65px;height: 86px;float: left;margin-right:10px;}.card-imgwrap>img{width: 100%;height: 100%;}.card-empty {height: 100%;background: #f7f5f6;text-align: center;color: #333;font-size: 10px;vertical-align: middle}.card-empty .card-empty-img1{margin-top: 45px;width: 99px;}.card-empty{margin-top:10px;width: 92px;}.card-detail{color: #666;font-size: 10px;line-height: 19px;padding-left: 32px;overflow: hidden;}.card-detail img{width: 12px;vertical-align: middle;}.name{font-size: 18px;line-height: 26px;font-weight: bold;}.card-detail .name .card-detail .tel{color:#333}.card-detail .edit-name{z-index:999;}.card-switch{top: 15px;line-height:13px;font-size: 13px;position: relative;}.address{display: inline-block;}.el-input {position: relative;font-size: 14px;width: 120px;display: inline-block;width: 70%;height: 70%;}.el-input--suffix .el-input__inner {padding-right: 13px;height: 80%;}.el-dialog__headerbtn .el-dialog__close {display: none;}.el-input__inner {-webkit-appearance: none;background-color: #FFF;background-image: none;border-radius: 4px;border: 1px solid #DCDFE6;-webkit-box-sizing: border-box;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 40px;line-height: 40px;outline: 0;padding: 11px 15px;-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);transition: border-color .2s cubic-bezier(.645, .045, .355, 1);width: 135%;}
</style>
<style>.el-message-box {width: 260px;}
</style>

第一次写vue，还请大家多多指点。

个人名片+微信名片二维码 VUE相关推荐

使用 canvas 模拟微信生成二维码名片
需求说明模拟微信的二维码名片的功能接口获取到用户的二维码,前端将二维码,背景图,用户头像(圆形),用户姓名等信息结合生成一张图片示例等比例创建画布获取背景图,监听图片的 onload 事件 ...
Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
企业微信个人二维码在哪里？会失效吗？
当企业在使用企业微信营销时,员工每个月都需要完成一定的KPI,就需要将自己的个人二维码放在各处使用,那么如何生成企业微信个人二维码呢?二维码会失效吗? 前言当企业使用企业微信移动办公时,每个员工都可 ...
用qrcode生成微信支付二维码
项目场景: 用qrcode生成微信支付二维码问题描述根据后台返回的路径动态生成微信二维码在这里我们用的是qrcodejs2,它有官网文档 npm i qrcodejs2 导入: import Q ...
js调用微信利用二维码扫码登录
js调用微信利用二维码扫码登录准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐 ...
iOS15仿微信详情二维码支持保存本地相册
iOS15仿微信详情二维码支持保存本地相册具体实现步骤请在b站搜索上面标题
微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面
实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面而进入商城下载该项目详情地址:gitee.com/DuJiaHui123- 1.创建完之后替换文件里面的ios ...
微信扫描二维码在内置浏览器打不开文件的下载链接怎么办？哪些api接口可以解决...
有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...
企业微信渠道二维码如何制作？
很多企业在做活动推广时会用到企业微信渠道二维码,既可以将客户引流到企业微信中进行统一管理,又可以看到渠道投放效果,一举两得. 前言当企业员工邀请客户添加企业微信时,需要客户通过扫描企业微信二维码进行 ...
微信推广二维码接口使用总结
前一段时间小编的公司接手了一个微信分销的项目,该项目中有一个推广二维码的功能:分销商可以生成自己的二维码,当其他用户首次扫描的时候会自动成为该分销商的下级.这个过程中最主要的就是利用微信的生成二维码接 ...

个人名片+微信名片二维码 VUE

个人名片

个人名片+微信名片二维码 VUE相关推荐

最新文章

热门文章