@@ -0,0 +1,14 @@ | |||||
//index.js | |||||
var wxbarcode = require('../../utils/index.js'); | |||||
Page({ | |||||
data: { | |||||
code: '1234567890123456789' | |||||
}, | |||||
onLoad: function() { | |||||
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); | |||||
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420); | |||||
} | |||||
}) |
@@ -0,0 +1,14 @@ | |||||
<!--index.wxml--> | |||||
<view class="container page"> | |||||
<view class="panel"> | |||||
<view class="header"> | |||||
</view> | |||||
<view class="barcode"> | |||||
<view class="barnum">{{code}}</view> | |||||
<canvas canvas-id="barcode" /> | |||||
</view> | |||||
<view class="qrcode"> | |||||
<canvas canvas-id="qrcode" /> | |||||
</view> | |||||
</view> | |||||
</view> |
@@ -0,0 +1,70 @@ | |||||
/**index.wxss**/ | |||||
page { | |||||
background-color: #439057; | |||||
} | |||||
.page { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.container { | |||||
padding-bottom: 10rpx; | |||||
} | |||||
.panel { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
align-items: stretch; | |||||
box-sizing: border-box; | |||||
width: 710rpx; | |||||
margin-top: 40rpx; | |||||
border-radius: 10rpx; | |||||
background-color: #fff; | |||||
} | |||||
.header { | |||||
height: 140rpx; | |||||
background-color: #f0f0f0; | |||||
border-radius: 10rpx 10rpx 0 0; | |||||
} | |||||
.barcode { | |||||
display: flex; | |||||
height: 320rpx; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.barnum { | |||||
width: 670rpx; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-size: 38rpx; | |||||
font-weight: bold; | |||||
text-align: center; | |||||
letter-spacing: 10rpx; | |||||
white-space: nowrap; | |||||
} | |||||
.barcode > canvas { | |||||
width: 680rpx; | |||||
height: 200rpx; | |||||
} | |||||
.qrcode { | |||||
height: 420rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
} | |||||
.qrcode > canvas { | |||||
width: 420rpx; | |||||
height: 420rpx; | |||||
} |