confirmLoading.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!-- 确认装车 -->
  2. <template>
  3. <view class="content">
  4. <view class="level1-title">
  5. 任务信息
  6. </view>
  7. <view class="content1">
  8. <view class='row-between'>
  9. <view class="">货主</view>
  10. <view class="flex">
  11. <view>张三</view>
  12. <view>del</view>
  13. </view>
  14. </view>
  15. <view class='row-between'>
  16. <view class="">货主单位</view>
  17. <view>黑龙江中天昊元贸易有限公司</view>
  18. </view>
  19. <view class='row-between'>
  20. <view class="">发货地</view>
  21. <view>鲅鱼圈</view>
  22. </view>
  23. <view class='row-between'>
  24. <view class="">卸货地</view>
  25. <view>黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
  26. </view>
  27. <view class='row-between'>
  28. <view class="">货名</view>
  29. <view>玉米</view>
  30. </view>
  31. <view class='row-between'>
  32. <view class="">运费</view>
  33. <view>100元/吨</view>
  34. </view>
  35. </view>
  36. <view class="level1-title">
  37. 装车信息
  38. </view>
  39. <view class="content2">
  40. <view class='row-between'>
  41. <view class="">车牌号</view>
  42. <view>辽H12345</view>
  43. </view>
  44. <view class='row-between'>
  45. <view class="">装车时间</view>
  46. <view>2022-02-10 16:13:15</view>
  47. </view>
  48. <view class='row-between'>
  49. <view class="">装车净重</view>
  50. </view>
  51. <view class='s-flex'>
  52. <view class="">上传装车照片</view>
  53. <upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="3"
  54. :size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
  55. @on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
  56. </view>
  57. <view class='s-flex'>
  58. <view class="">上传装车磅单</view>
  59. <upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
  60. :size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
  61. @on-uploaded="isAdd = true" :before-upload="filterFileType" @on-progress="onProgress"></upload>
  62. </view>
  63. </view>
  64. <view class="content3 flex">
  65. <u-button text="暂存" type="primary" @click="submit(0)"></u-button>
  66. <u-button text="提交" type="primary" @click="submit(1)"></u-button>
  67. </view>
  68. <u-toast ref="uToast"></u-toast>
  69. <u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true' :showCancelButton='true' confirmColor='#22C572' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
  70. </view>
  71. </template>
  72. <script>
  73. import upload from '@/components/upload.vue';
  74. export default {
  75. components: {
  76. upload
  77. },
  78. data() {
  79. return {
  80. detailData: {
  81. addressUrl: ''
  82. },
  83. action: this.$helper.ossUploadUrl,
  84. maxSize: 50 * 1024 * 1024, //限制文件大小 50M
  85. isAdd: true,
  86. isShowAlert: false,
  87. alertContent: '',
  88. alertTitle: '',
  89. }
  90. },
  91. onLoad(options) {
  92. console.log(options)
  93. },
  94. methods: {
  95. alertBtn() {
  96. // uni.navigateTo({
  97. // url: '/pages/public/login'
  98. // })
  99. },
  100. cancelClick() {
  101. this.isShowAlert = false
  102. },
  103. getImgUrl(res) {
  104. this.detailData.addressUrl = res
  105. console.log(res)
  106. console.log('------------res-----------')
  107. },
  108. onError(error) {
  109. alert(error)
  110. console.log('------------error-----------')
  111. console.log(error)
  112. },
  113. onRemove(index) {},
  114. filterFileType(index, lists) {
  115. if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
  116. lists.splice(index, 1);
  117. // 当前文件不支持
  118. uni.showModal({
  119. title: '暂不支持当前图片类型',
  120. showCancel: false
  121. });
  122. } else {
  123. this.isAdd = false;
  124. }
  125. },
  126. onProgress(e) {
  127. console.log(e)
  128. },
  129. submit(type) {
  130. console.log(type)
  131. let params = {
  132. type: 'success',
  133. title: '成功主题(带图标)',
  134. message: "庄生晓梦迷蝴蝶",
  135. iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
  136. }
  137. if(type==0){
  138. }else{
  139. this.alertContent='确定提交装车信息?'
  140. this.alertTitle='提示'
  141. this.isShowAlert = true
  142. }
  143. // this.$refs.uToast.show({
  144. // ...params,
  145. // complete() {
  146. // params.url && uni.navigateTo({
  147. // url: params.url
  148. // })
  149. // }
  150. // })
  151. },
  152. confirmClick(){
  153. console.log('提交')
  154. }
  155. },
  156. }
  157. </script>
  158. <style>
  159. </style>