You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
4.6 KiB
183 lines
4.6 KiB
<template>
|
|
<view class="layout">
|
|
<view class="code">
|
|
<canvas class="bar_code" canvas-id="Brcode"></canvas>
|
|
</view>
|
|
|
|
<view class="number">{{card.cardnumber}}</view>
|
|
<view>
|
|
<canvas type="2d" class='canvas-style' id="myQrcode"></canvas>
|
|
</view>
|
|
<view class="text">
|
|
<text class="iconfont icon-shuaxin"></text>
|
|
<text>每分钟自动更新，限当前使用</text>
|
|
<text class="blue" @click="createcode">点击刷新</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { toLogin } from '../../util/common.js';
|
|
import drawQrcode from '../../util/createcode/weapp.qrcode.esm.js';
|
|
import brCode from "../../util/createcode/barcode.js"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: [],
|
|
card: [],
|
|
codetext:'',
|
|
createtime:'',
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
toLogin();
|
|
var that = this;
|
|
that.userInfo = uni.getStorageSync('userInfo');
|
|
that.card = uni.getStorageSync('card');
|
|
that.card.cardnumber = that.formatCard(that.card.cardnumber);
|
|
//setInterval函数在刷新页面的时候第一次执行需要等到设置的循环时间到才执行
|
|
that.createcode();
|
|
that.createbarcode();
|
|
setInterval(function () { //每分钟刷新一次二维码
|
|
that.createcode();
|
|
}, 20*1000);
|
|
},
|
|
|
|
methods: {
|
|
createcode() {
|
|
const query = uni.createSelectorQuery();
|
|
var codetext = '';
|
|
query.select('#myQrcode')
|
|
.fields({
|
|
node: true,
|
|
size: true
|
|
})
|
|
.exec((res) => {
|
|
var nowtime = Date.parse(new Date());//当前时间戳(单位ms)
|
|
nowtime = nowtime / 1000;//(转为单位s)
|
|
this.createtime = nowtime;
|
|
codetext += nowtime;
|
|
codetext += this.userInfo.id;
|
|
this.codetext = codetext;
|
|
this.$forceUpdate();
|
|
var canvas = res[0].node;
|
|
// 调用方法drawQrcode生成二维码
|
|
drawQrcode({
|
|
canvas: canvas,
|
|
canvasId: 'myQrcode',
|
|
padding: 50,
|
|
background: '#ffffff',
|
|
foreground: '#000000',
|
|
text: this.codetext,//时间戳+uid
|
|
})
|
|
// 保存二维码
|
|
this.saveCode();
|
|
// 获取临时路径
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'myQrcode',//画布标识
|
|
canvas: canvas,
|
|
x: 0,//画布x轴起点（默认0）
|
|
y: 0,//画布y轴起点（默认0）
|
|
width: 200,//画布宽度
|
|
height: 200,//画布高度
|
|
destWidth: 300,//输出图片宽度
|
|
destHeight: 300,//输出图片高度
|
|
success(res) {
|
|
console.log('二维码临时路径：', res.tempFilePath)
|
|
},
|
|
fail(res) {
|
|
console.error(res)
|
|
}
|
|
})
|
|
|
|
})
|
|
},
|
|
|
|
// 保存生成二维码记录
|
|
saveCode(){
|
|
var that = this;
|
|
let data = {
|
|
code: that.codetext,
|
|
uid: that.userInfo.id,
|
|
createtime: that.createtime
|
|
}
|
|
that.$u.post('wxapp/verify/saveCode',data).then(res => {
|
|
if (res.code == 1) {
|
|
console.log('保存成功');
|
|
}else{
|
|
console.log('保存失败');
|
|
}
|
|
})
|
|
},
|
|
createbarcode(){
|
|
// 第一个参数创建 canvas 绘图上下文并且制定了创建canvasId，这里的canvasId为Brcode，需要与第一步骤的id对上；
|
|
// 第二个参数为要生成条码的卡号
|
|
// 第三、四个参数分别为宽度、高度，可以根据自己需求来定
|
|
brCode.code128(uni.createCanvasContext('Brcode'), this.card.cardnumber, uni.getSystemInfoSync().windowWidth, 50);
|
|
|
|
},
|
|
// 卡号四位一个空格
|
|
formatCard(card){
|
|
var data = card.replace(/(\s)/g,'').replace(/(\d{4})/g,'$1 ').replace(/\s*$/,'');
|
|
return data;
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ background: #34b16f; }
|
|
.layout{
|
|
border-radius: 8rpx;
|
|
margin: 120rpx 35rpx 40rpx;
|
|
background-color: #FFFFFF;
|
|
.code{
|
|
width: 600rpx;
|
|
height: 100rpx;
|
|
margin: 60rpx auto 10rpx;
|
|
.bar_code{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: -8rpx;
|
|
}
|
|
}
|
|
|
|
.number{
|
|
font-size: 34rpx;
|
|
text-align: center;
|
|
}
|
|
.text{
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #999999;
|
|
text-align: center;
|
|
padding-bottom: 60rpx;
|
|
.icon-shuaxin{
|
|
font-size: 26rpx;
|
|
padding-right: 6rpx;
|
|
}
|
|
.blue{
|
|
color: #1688f1;
|
|
padding-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.buy-btn{ display: flex; justify-content: center; background: #07c160; padding: 12upx 0upx 12upx;
|
|
border-radius: 12upx; color: #FFFFFF; align-items: center;
|
|
.iconfont{ font-size: 46upx; width: 54upx; height: 64upx; line-height: 64upx; }
|
|
.text{ font-size: 34upx; line-height: 64upx; padding-left: 18upx; }
|
|
}
|
|
.canvas-style{
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|