myCode.vue 987 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="codes">
  3. <view class="canvasbox">
  4. <canvas style="width: 200px;height: 200px;" canvas-id="myQrcode"></canvas>
  5. </view>
  6. <view class="text">
  7. 请将二维码对准设备摄像头
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. import drawQrcode from 'weapp-qrcode'
  13. export default {
  14. data() {
  15. return {
  16. qrcode: null
  17. }
  18. },
  19. onLoad() {
  20. this.creatQrCode()
  21. },
  22. methods: {
  23. creatQrCode() {
  24. let userData = this.$store.state.vuex_userData
  25. console.log(userData)
  26. drawQrcode({
  27. width: 200,
  28. height: 200,
  29. canvasId: 'myQrcode',
  30. text: `userId=${userData.customNo}&type=user`
  31. })
  32. }
  33. }
  34. }
  35. </script>
  36. <style>
  37. .codes{
  38. width: 100%;
  39. padding: 50rpx;
  40. }
  41. .canvasbox{
  42. box-shadow: 3upx 3upx 6upx #eee;
  43. background: #FFFFFF;
  44. height: 230px;
  45. width: 230px;
  46. display: flex;
  47. justify-content: center;
  48. align-items: center;
  49. margin: 50rpx auto;
  50. }
  51. .text{
  52. text-align: center;
  53. padding: 20rpx;
  54. color: #999999;
  55. }
  56. </style>