scan.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="container">
  3. <view class="scan-content">
  4. <image class="logo" src="/static/scan.png" mode="widthFix"></image>
  5. <button class="cu-btn block bg-black margin-tb-sm lg" @click="scancode()">
  6. <text class="cuIcon-scan margin-right-xs"></text> 扫描设备二维码</button>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. }
  15. },
  16. onLoad(query) {
  17. if (query && ('q' in query)) {
  18. // 获取到二维码原始链接内容
  19. let qrcode = decodeURIComponent(query.q)
  20. this.parsingCode(qrcode)
  21. }
  22. },
  23. methods: {
  24. scancode() {
  25. let _self = this
  26. uni.scanCode({
  27. scanType: ['qrCode'],
  28. success: function(res) {
  29. let qrcode = res.result
  30. if (!qrcode) {
  31. _self.tui.toast('无法识别二维码')
  32. return
  33. }
  34. _self.parsingCode(qrcode)
  35. }
  36. })
  37. },
  38. parsingCode(qrcode) {
  39. let qrArr = qrcode.split("/")
  40. let coding = qrArr[qrArr.length - 1]
  41. if (!coding || coding.length != 8) {
  42. this.tui.toast('无法识别二维码')
  43. return
  44. }
  45. uni.navigateTo({
  46. url: '/pages/equipment/info?type=repair&coding=' + coding,
  47. })
  48. }
  49. }
  50. }
  51. </script>
  52. <style lang="scss">
  53. .scan-content {
  54. height: 100vh;
  55. background-color: #FFFFFF;
  56. display: flex;
  57. flex-direction: column;
  58. align-items: center;
  59. justify-content: center;
  60. .logo {
  61. width: 50%;
  62. margin-bottom: 100rpx;
  63. }
  64. .text-area {
  65. display: flex;
  66. justify-content: center;
  67. }
  68. .title {
  69. font-size: 36rpx;
  70. color: #8f8f94;
  71. }
  72. }
  73. </style>