myCode.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. uni.showShareMenu({
  23. withShareTicket: true,
  24. menus: ['shareAppMessage', 'shareTimeline']
  25. })
  26. },
  27. methods: {
  28. creatQrCode() {
  29. let userData = this.$store.state.vuex_userData
  30. console.log(userData)
  31. drawQrcode({
  32. width: 200,
  33. height: 200,
  34. canvasId: 'myQrcode',
  35. text: `userId=${userData.customNo}&type=user`
  36. })
  37. }
  38. }
  39. }
  40. </script>
  41. <style>
  42. .codes{
  43. width: 100%;
  44. padding: 50rpx;
  45. }
  46. .canvasbox{
  47. box-shadow: 3upx 3upx 6upx #eee;
  48. background: #FFFFFF;
  49. height: 230px;
  50. width: 230px;
  51. display: flex;
  52. justify-content: center;
  53. align-items: center;
  54. margin: 50rpx auto;
  55. }
  56. .text{
  57. text-align: center;
  58. padding: 20rpx;
  59. color: #999999;
  60. }
  61. </style>