autographForm.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <view class="content">
  3. <u-navbar back-text="返回" title="签字" back-icon-color="#ffffff" :back-text-style="{color: '#ffffff'}" title-color="#ffffff"
  4. :background="{backgroundColor: mainColor}" :border-bottom="false"></u-navbar>
  5. <view class="canvas-container" slot="label">
  6. <canvas canvas-id="canvas" id="canvas" :disable-scroll="true" style="width: 100%; height: calc(100vh - 150px);background-color: #FFFFFF;"
  7. @touchstart="handleTouchStart($event)" @touchmove="handleTouchMove($event)" @touchend="handleTouchEnd($event)"
  8. @touchcancel="handleEnd($event)"></canvas>
  9. </view>
  10. <view class="handle-fix-box">
  11. <u-button type="primary" :ripple="true" :custom-style="customStyle" :disabled="!ifSign" @click="submitAutographForm()">提交</u-button>
  12. </view>
  13. <u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
  14. </view>
  15. </template>
  16. <script>
  17. var context = null
  18. import {
  19. mapGetters
  20. } from 'vuex'
  21. const NET = require('@/utils/request')
  22. const API = require('@/config/api')
  23. export default {
  24. computed: {
  25. ...mapGetters([
  26. 'mainColor',
  27. 'customStyle',
  28. ])
  29. },
  30. data() {
  31. return {
  32. taskId: '',
  33. statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
  34. navbarHeight: 44,
  35. ifSign: false,
  36. canvasData: []
  37. }
  38. },
  39. watch: {
  40. canvasData() {
  41. context.moveTo(this.canvasData[0].x, this.canvasData[0].y)
  42. for (let i = 0; i < this.canvasData.length; i++) {
  43. context.lineTo(this.canvasData[i].x, this.canvasData[i].y)
  44. }
  45. context.stroke()
  46. context.draw(true)
  47. }
  48. },
  49. onLoad(options) {
  50. this.taskId = options.taskId
  51. context = uni.createCanvasContext('canvas')
  52. context.setLineWidth(3)
  53. context.setStrokeStyle("#000000")
  54. this.reset()
  55. },
  56. onShow() {},
  57. methods: {
  58. reset() {
  59. this.ifSign = false
  60. context.draw()
  61. },
  62. handleTouchStart(e) {
  63. this.ifSign = true
  64. this.canvasData = []
  65. const a = e.changedTouches[0]
  66. this.canvasData.push({
  67. x: a.x,
  68. y: a.y
  69. })
  70. },
  71. handleTouchMove(e) {
  72. const a = e.changedTouches[0]
  73. this.canvasData.push({
  74. x: a.x,
  75. y: a.y
  76. })
  77. },
  78. handleTouchEnd(e) {
  79. const a = e.changedTouches[0]
  80. this.canvasData.push({
  81. x: a.x,
  82. y: a.y
  83. })
  84. },
  85. handleEnd() {
  86. context.stroke()
  87. context.draw(true)
  88. },
  89. // 提交签字
  90. submitAutographForm() {
  91. let that = this
  92. uni.canvasToTempFilePath({
  93. canvasId: 'canvas',
  94. success: res => {
  95. uni.uploadFile({
  96. url: API.uploadFile,
  97. filePath: res.tempFilePath,
  98. name: 'file',
  99. header: {
  100. Authorization: 'Bearer ' + uni.getStorageSync('token')
  101. },
  102. success: (uploadFileRes) => {
  103. NET.request(API.submitAutographForm, {
  104. taskId: this.taskId,
  105. fileId: JSON.parse(uploadFileRes.data).data[0].fileId,
  106. filePath: JSON.parse(uploadFileRes.data).data[0].filePath,
  107. fileType: JSON.parse(uploadFileRes.data).data[0].fileType,
  108. }, 'POST').then(res => {
  109. that.$refs.uTips.show({
  110. title: '提交成功',
  111. type: 'success',
  112. })
  113. setTimeout(() => {
  114. uni.navigateBack()
  115. }, 1000)
  116. }).catch(error => {
  117. that.$refs.uTips.show({
  118. title: error.message,
  119. type: 'warning',
  120. })
  121. })
  122. }
  123. });
  124. }
  125. })
  126. },
  127. },
  128. }
  129. </script>
  130. <style>
  131. page {
  132. width: 100%;
  133. height: 100%;
  134. }
  135. </style>
  136. <style lang="scss" scoped>
  137. @import "@/static/css/themes.scss";
  138. .content {
  139. width: 100%;
  140. float: left;
  141. padding: 15px 15px 60px 15px;
  142. box-sizing: border-box;
  143. }
  144. </style>