shopTourOver.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <view class="shopTourOver-wrap">
  3. <!-- 店长签名 -->
  4. <view class="autograph-con">
  5. <text class="autograph-tit">店长签名:</text>
  6. <view class="autograph-main">
  7. <autograph-to-pic ref="dz" canvasId="handWriting-dz" @generatePictures="autographDz"/>
  8. </view>
  9. </view>
  10. <!-- 巡店人签名 -->
  11. <view class="autograph-con">
  12. <text class="autograph-tit">巡店人签名:</text>
  13. <view class="autograph-main">
  14. <autograph-to-pic ref="xdr" canvasId="handWriting-xd" @generatePictures="autographXdr" />
  15. </view>
  16. </view>
  17. <u-button type="primary" :style="{background: $config('buttonColors')}" shape="circle" class="submit-btn" @click="submitFun">提交</u-button>
  18. </view>
  19. </template>
  20. <script>
  21. import AutographToPic from '@/components/autograph-to-pic/autograph-to-pic.vue'
  22. import {submitTask} from '@/api/task'
  23. import { clzConfirm,saveBase64ToAliOss } from '@/libs/tools'
  24. export default{
  25. components: {
  26. AutographToPic
  27. },
  28. data(){
  29. return{
  30. taskId: '',
  31. storeManagerSign:'', // 店长签名
  32. inspectorSign:'', // 巡店人签名
  33. sign: 0 // 标记 是否两张签名都已生成
  34. }
  35. },
  36. onLoad(opts) {
  37. this.taskId = opts.taskId
  38. },
  39. methods: {
  40. // 店长签名 生成图片
  41. autographDz(res){
  42. console.log(res,'店长签名+++')
  43. if(res.status == 200){
  44. this.storeManagerSign = res.data
  45. this.sign++
  46. this.$refs.xdr.subCanvas()
  47. }else{
  48. this.storeManagerSign = ''
  49. uni.hideLoading()
  50. uni.showToast({ icon: 'none', title: '店长签名生成失败,请重新提交' })
  51. }
  52. },
  53. // 巡店人签名 生成图片
  54. autographXdr(res){
  55. console.log(res,'巡店人签名+++')
  56. if(res.status == 200){
  57. this.inspectorSign = res.data
  58. this.sign++
  59. this.isSubmit()
  60. }else{
  61. this.inspectorSign = ''
  62. uni.hideLoading()
  63. uni.showToast({ icon: 'none', title: '巡店人签名生成失败,请重新提交' })
  64. }
  65. },
  66. // 是否提交
  67. isSubmit(){
  68. let _this = this
  69. if(this.storeManagerSign && this.inspectorSign){
  70. console.log('正常提交')
  71. clzConfirm({
  72. title: '提示',
  73. content: '确定提交本次巡店?',
  74. success: function(res) {
  75. if (res.confirm || res.index == 0) {
  76. // 上传图片后提交代码
  77. _this.submitTask()
  78. }
  79. }
  80. })
  81. }else{
  82. uni.showToast({ icon: 'none', title: '签名生成失败,请重新提交' })
  83. }
  84. },
  85. // 提交本次任务
  86. submitFun(){
  87. const dzIsEmpty = this.$refs.dz.isEmpty
  88. const xdrIsEmpty = this.$refs.xdr.isEmpty
  89. if(dzIsEmpty){
  90. uni.showToast({
  91. icon:'none',
  92. title:'店长未签名'
  93. })
  94. return
  95. }
  96. if(xdrIsEmpty){
  97. uni.showToast({
  98. icon:'none',
  99. title:'巡店人未签名'
  100. })
  101. return
  102. }
  103. uni.showLoading({
  104. title: '保存中,请稍后...',
  105. mask: true
  106. })
  107. this.$refs.dz.subCanvas()
  108. },
  109. // 提交
  110. submitTask(){
  111. const _this = this
  112. const data = {
  113. id: _this.taskId,
  114. storeManagerSignPath: _this.storeManagerSign,
  115. inspectorSignPath:_this.inspectorSign
  116. }
  117. console.log(data,'submit data')
  118. submitTask(data).then(ret=>{
  119. console.log(ret)
  120. if(ret.status == 200){
  121. // 关闭上页
  122. uni.$emit("closeTour",1)
  123. // 打开完成页面
  124. uni.redirectTo({
  125. url:"/pages/shopTourCompleted/shopTourCompleted?taskId="+_this.taskId
  126. })
  127. }
  128. uni.showToast({
  129. icon:'none',
  130. title: ret.message
  131. })
  132. uni.hideLoading()
  133. })
  134. }
  135. }
  136. }
  137. </script>
  138. <style lang="scss">
  139. page{
  140. background-color: #f8f8f8;
  141. height: calc(100vh - 44px);
  142. }
  143. .shopTourOver-wrap{
  144. height: 100%;
  145. .autograph-con{
  146. margin: 30upx 30upx 0;
  147. border-radius: 12upx;
  148. background-color: #fff;
  149. .autograph-tit{
  150. display: block;
  151. padding: 20upx 30upx;
  152. }
  153. }
  154. .submit-btn{
  155. width: 80%;
  156. margin: 60upx auto 40upx;
  157. }
  158. }
  159. </style>