vCode.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <up-modal :show="showModal" @cancel="showModal = false" @confirm="completion" ref="uModal" confirmText="确认完工"
  3. showCancelButton :asyncClose="true">
  4. <view class="slot-content">
  5. <!-- #ifndef APP-NVUE -->
  6. <up-input placeholder="完工验证码" v-model="code" :focus="downTime == 59">
  7. <!-- #endif -->
  8. <!-- #ifdef APP-NVUE -->
  9. <up-input placeholder="完工验证码" v-model="code" :focus="downTime == 59">
  10. <!-- #endif -->
  11. <template #suffix>
  12. <up-button @tap="getCode" :disabled="downTime" :text="tips" type="success" size="mini">{{
  13. downTime +
  14. '秒重新获取' }}</up-button>
  15. </template>
  16. <!-- #ifndef APP-NVUE -->
  17. </up-input>
  18. <!-- #endif -->
  19. <!-- #ifdef APP-NVUE -->
  20. </up-input>
  21. <!-- #endif -->
  22. </view>
  23. </up-modal>
  24. </template>
  25. <script setup>
  26. import { getCurrentInstance, ref, defineProps, defineEmits } from 'vue';
  27. const emit = defineEmits(['callBack'])
  28. const { $Http } = getCurrentInstance().proxy;
  29. const props = defineProps({
  30. sa_workorderid: {
  31. type: [Number, String],
  32. },
  33. callBack: {
  34. type: Function
  35. }
  36. });
  37. let code = ref(''),
  38. showModal = ref(false),
  39. downTime = ref(''),
  40. interval = null,
  41. uModal = ref(null);
  42. function completion(e) {
  43. if (code.value.trim() == '') {
  44. uModal.value.loading = false;
  45. return uni.showToast({
  46. title: '请输入完工验证码',
  47. icon: 'none'
  48. });
  49. }
  50. $Http.basic({
  51. "id": "20230215173203",
  52. "content": {
  53. "sa_workorderid": props.sa_workorderid,
  54. "code": code.value
  55. }
  56. }).then(res1 => {
  57. console.log("校验验证码", res1)
  58. if (res1.code == 1) {
  59. $Http.basic({
  60. "id": "20230209144903",
  61. "content": { "sa_workorderid": props.sa_workorderid }
  62. }).then(res => {
  63. console.log("完结工单", res)
  64. if (res.code == 1) {
  65. setTimeout(() => {
  66. showModal.value = false;
  67. code.value = '';
  68. downTime.value = '';
  69. clearInterval(interval);
  70. }, 300)
  71. emit('callBack', true)
  72. } else {
  73. uni.showToast({
  74. title: res.msg,
  75. icon: 'none'
  76. });
  77. uModal.value.loading = false;
  78. }
  79. })
  80. } else {
  81. uni.showToast({
  82. title: res1.msg,
  83. icon: 'none'
  84. });
  85. uModal.value.loading = false;
  86. }
  87. })
  88. }
  89. function openModal() {
  90. if (downTime.value == '') {
  91. getCode().then(res => {
  92. if (res) showModal.value = true;
  93. })
  94. } else {
  95. showModal.value = true;
  96. }
  97. }
  98. // 获取完工验证码
  99. function getCode() {
  100. if (downTime.value != '') return;
  101. return new Promise((resolve) => {
  102. $Http.basic({
  103. id: 20230215173103,
  104. "content": {
  105. "sa_workorderid": props.sa_workorderid
  106. }
  107. }).then(res => {
  108. console.log("获取验证码结果", res)
  109. resolve(res.code == 1);
  110. downTime.value = 60;
  111. if (res.code == 1) {
  112. interval = setInterval(() => {
  113. downTime.value--;
  114. if (downTime.value <= 0) {
  115. clearInterval(interval);
  116. downTime.value = '';
  117. }
  118. }, 1000);
  119. } else {
  120. downTime.value = '';
  121. uni.showToast({
  122. title: res.msg,
  123. icon: 'none'
  124. });
  125. }
  126. })
  127. })
  128. }
  129. // 将内部方法暴露给模板使用
  130. defineExpose({
  131. openModal
  132. });
  133. </script>