Skip to content

M
mt-education-mobile
Commit 40cdb6ae authored by yun's avatar yun
Browse files
Options

智学logo二维码

parent 5d9b1f48
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 17 deletions
src/components/qrCodeUtil.vue 0 → 100644
View file @ 40cdb6ae
<template>
<div id="meQrcode" :title="qrUrl">
<div class="qrcode_box">
<img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码本图" />
<canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas"></canvas>
</div>
</div>
</template>
<script>
import QRCode from 'qrcode'
import logo from '@/assets/images/zhixuelogo.png'
export default {
name: 'AQrcode',
props: {
bQrUrl: {
type: String,
default: 'http://www.baidu.com/'
},
qrSize: {
type: Number,
default: 100
},
qrText: {
default: ''
},
qrLogo: {
default: logo
},
qrLogoSize: {
type: Number,
default: 30
},
qrTextSize: {
type: Number,
default: 14
}
},
data() {
return {
qrUrl: ''
}
},
methods: {
// 将canvas生成的二维码保存为图片
saveImg() {
const canvasData = this.$refs.canvas
console.log(canvasData.toDataURL())
// a = document.createElement('a')
// a.href = canvasData.toDataURL()
// a.download = 'drcQrcode'
// a.click()
this.$wnsdk.media.saveBase64AsImage({
base64: canvasData.toDataURL(),
success(result) {
console.log(result)
},
error(error) {
// 失败处理...
console.log(error)
}
})
},
/**
* @argument qrUrl 二维码内容
* @argument qrSize 二维码大小
* @argument qrText 二维码下方显示文字
* @argument qrTextSize 二维码下方显示文字大小(默认16px)
* @argument qrLogo 二维码中间显示图片
* @argument qrLogoSize 二维码中间显示图片大小(默认为80)
*/
handleQrcodeToDataUrl() {
let qrcode_canvas = this.$refs.qrcode_canvas
let canvas = this.$refs.canvas
const that = this
QRCode.toDataURL(
that.qrUrl,
{ errorCorrectionLevel: "H" },
(err, url) => {
qrcode_canvas.src = url;
let ctx = canvas.getContext("2d");
setTimeout(() => {
ctx.drawImage(qrcode_canvas, 0, 0, that.qrSize, that.qrSize);
if (that.qrLogo) {
let qrcode_logo = new Image();
qrcode_logo.src = that.qrLogo;
//设置logo大小
//设置获取的logo将其变为圆角以及添加白色背景
ctx.fillStyle = "#fff";
// ctx.strokeStyle = "#f00"; // 中间logo描边颜色为 #f00
ctx.beginPath();
let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
let h = that.qrLogoSize + 6; //圆角高 10为基数(logo四周白色背景为10/2)
let w = that.qrLogoSize + 6; //圆角宽
let x = logoPosition - 3;
let y = logoPosition - 3;
let r = 5; //圆角半径
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
// ctx.stroke(); // 中间logo描边
ctx.fill();
qrcode_logo.onload = () => {
ctx.drawImage(
qrcode_logo,
logoPosition,
logoPosition,
that.qrLogoSize,
that.qrLogoSize
);
};
}
if (that.qrText) {
// 设置字体
let fpadd = 10 // 规定内间距
ctx.font = 'bold ' + that.qrTextSize + 'px Arial'
let tw = ctx.measureText(that.qrText).width // 文字真实宽度
let ftop = that.qrSize - that.qrTextSize // 根据字体大小计算文字top
let fleft = (that.qrSize - tw) / 2 // 根据字体大小计算文字left
let tp = that.qrTextSize / 2 // 字体边距为字体大小的一半可以自己设置
ctx.fillStyle = '#fff'
ctx.fillRect(
fleft - tp / 2,
ftop - tp / 2,
tw + tp,
that.qrTextSize + tp
)
ctx.textBaseline = 'top' // 设置绘制文本时的文本基线。
ctx.fillStyle = '#333'
ctx.fillText(that.qrText, fleft, ftop)
}
qrcode_canvas.src = canvas.toDataURL()
}, 0)
}
)
}
},
watch: {
bQrUrl(nv) {
this.qrUrl = nv
}
},
created() {
this.qrUrl = this.bQrUrl
},
mounted() {
this.handleQrcodeToDataUrl()
},
updated() {
this.handleQrcodeToDataUrl()
}
}
</script>
<style scoped>
.qrcode_box,
#meQrcode {
display: inline-block;
}
.qrcode_box img {
display: none;
}
</style>
src/views/CourseDetail/index.vue
View file @ 40cdb6ae
......@@ -359,10 +359,11 @@
{{ outLinkClint | dealWithLength(90) }}
</div>
<div class="code-border">
<canvas
<!--<canvas
class="ewmStyle"
ref="qRCode"
/>
/>-->
<q-r-code-util ref="codeUtil" :bQrUrl="bQrUrl"/>
</div>
</div>
<div>
......@@ -421,6 +422,7 @@ import MtPdf from '@comp/MtPdf'
import MtPdfPpt from '@comp/MtPdfPpt'
import MtWord from '@comp/MtWord'
import MtAudio from '@/components/MtAudio'
import QRCodeUtil from '@/components/qrCodeUtil.vue'
// import {Button} from 'vant'
import {videoPlayer} from 'mt-video-player'
import {getChapters, getFileUrl, updateProgress, addLearnLesson, cancleFollow, toFollow, post} from '@/api/test'
......@@ -428,7 +430,6 @@ import 'video.js/dist/video-js.css'
import 'mt-video-player/src/custom-theme.css'
import Coursediscuss from '../../components/CourseDiscuss/Coursediscuss'
import {Loading, Button, Icon, Toast} from 'vant'
import QRCode from 'qrcode'
import Clipboard from 'clipboard'
import {getSystem} from '../../utils/mt-utils'
......@@ -448,10 +449,11 @@ export default {
MtAudio,
Loading,
[Toast.name]: Toast,
QRCode
QRCodeUtil
},
data() {
return {
bQrUrl: '',
isOutLine: window.location.href.indexOf('CourseTrainOut') > -1, // 是否为外链
showShare: false, // 是否展示分享弹出框
course: {
......@@ -694,7 +696,8 @@ export default {
// 将canvas生成的二维码保存为图片
saveImg() {
const canvasData = this.$refs.qRCode
this.$refs.codeUtil.saveImg()
/* const canvasData = this.$refs.canvas
// a = document.createElement('a')
// a.href = canvasData.toDataURL()
// a.download = 'drcQrcode'
......@@ -708,7 +711,7 @@ export default {
// 失败处理...
console.log(error)
}
})
}) */
},
/* 复制链接 */
copyUrl() {
......@@ -810,9 +813,11 @@ export default {
this.businessId = this.$route.query.id
this.title = this.$route.query.title
this.fromName = this.$route.query.fromName
QRCode.toCanvas(this.$refs.qRCode, process.env.VUE_APP_BASE_API4 + '/#/CourseTrainOut?id=' + this.businessId, {width: 80, margin: 1}, function(error) {
/* QRCode.toCanvas(this.$refs.qRCode, process.env.VUE_APP_BASE_API4 + '/#/CourseTrainOut?id=' + this.businessId, {width: 80, margin: 1}, function(error) {
console.log(error)
})
}) */
this.bQrUrl = process.env.VUE_APP_BASE_API4 + '/#/CourseTrainOut?id=' + this.businessId
})
} else {
Toast({
......@@ -1307,9 +1312,9 @@ export default {
margin-top: 3.6vw;
}
.code-border{
width: 22.3vw;
height: 22.3vw;
margin-top:4vw;
/*width: 22.3vw;*/
/*height: 22.3vw;*/
margin-top:2vw;
border: 3px black solid;
/*border-radius: 5px;*/
display: inline-block;
......
src/views/TrainDetail/SignCode.vue
View file @ 40cdb6ae
......@@ -10,7 +10,7 @@
</div>
<div class="code">
<div class="code-border">
<canvas ref="qRCode"/>
<q-r-code-util ref="codeUtil" :bQrUrl="bQrUrl" :qrSize="195" :qrLogoSize="60"/>
</div>
<div class="code-info">
请扫描上方二维码进行签到
......@@ -26,21 +26,24 @@
</template>
<script>
import QRCode from 'qrcode'
import {Loading} from 'vant'
import NavBarView from '@layouts/NavBarView'
import QRCodeUtil from '@/components/qrCodeUtil.vue'
export default {
name: 'SignCode',
components: {
NavBarView,
Loading
Loading,
QRCodeUtil
},
data() {
return {
loading: false,
title: '新人入职培训',
businessId: '',
fromName: ''
fromName: '',
bQrUrl: ''
}
},
methods: {
......@@ -51,9 +54,10 @@ export default {
this.fromName = this.$route.query.fromName
console.log(this.businessId, '22222222222')
console.log(this.title, '11111111111')
QRCode.toCanvas(this.$refs.qRCode, process.env.VUE_APP_BASE_API4 + '/#/TrainSign?MT_ZX_QR_CODE=userCode&businessId=' + this.businessId + '&courseName=' + encodeURI(this.title) + '&corpId=6', {margin: 1}, function(error) {
/* QRCode.toCanvas(this.$refs.qRCode, process.env.VUE_APP_BASE_API4 + '/#/TrainSign?MT_ZX_QR_CODE=userCode&businessId=' + this.businessId + '&courseName=' + encodeURI(this.title) + '&corpId=6', {margin: 1}, function(error) {
console.log(error)
})
}) */
this.bQrUrl = process.env.VUE_APP_BASE_API4 + '/#/TrainSign?MT_ZX_QR_CODE=userCode&businessId=' + this.businessId + '&courseName=' + encodeURI(this.title) + '&corpId=6'
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment