Sented.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div class="container">
  3. <div style="display: flex; justify-content: space-between; background-color: #fff;">
  4. <van-search @search="onSearch" style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
  5. <!-- <van-icon @click="onSearch" size="20" style="margin: 19px 8px 0 0px;" name="search" /> -->
  6. </div>
  7. <ScrollRefresh height="calc(100vh - 99px)" ref="scrollRefresh" :request="request" :defaultLimit="6">
  8. <template v-slot="slotProps">
  9. <div class="onther" v-for="(item, index) in slotProps.list" :key="index">
  10. <div class="onther-top">
  11. <div style="font-size: 12px;">批次号:{{ item.dispatchBatchNo
  12. }}
  13. </div>
  14. <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
  15. </div>
  16. <div class="onther-middel">
  17. <div class="onther-middel-text">
  18. <div class="onther-middel-text-style">批次完成时间:{{ item.time }}</div>
  19. </div>
  20. </div>
  21. <div class="onther-bottom">
  22. <van-cell is-link @click="showPopup(item)"><span
  23. style="color: #169bd5;">展开查看详情</span></van-cell>
  24. </div>
  25. </div>
  26. </template>
  27. </ScrollRefresh>
  28. <van-popup v-model="show" style="width: 100%; height: 60%;">
  29. <div class="batch-middel" v-for="(item, index) in popupList" :key="index">
  30. <div class="batch-middel-text">
  31. <div class="batch-middel-text-style" style="width: 100%; margin-left: -4px;margin-top: 0px;">【{{
  32. item.expressCompany
  33. }}】运单号:{{
  34. item.expressNo }}</div>
  35. <div class="batch-middel-text-style">收件人:{{ item.recipient }}</div>
  36. <div class="batch-middel-text-style">部门:{{ item.departmentId }}</div>
  37. <div class="batch-middel-text-style">楼层:{{ item.floorNum }}</div>
  38. <div class="batch-middel-text-style">座位号:{{ item.sendSeat }}</div>
  39. <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ item.phone }} </div>
  40. <div class="batch-middel-text-style">当前状态:
  41. <span style="color: #1989fa;">
  42. {{ item.signinStatus == 0 ? '待签收' : `${item.signinStatus == 1 ?
  43. '已签收' : `${item.signinStatus == 2 ? '代收' : `${item.signinStatus == 3 ? '拒收' : '延迟'}`}`}` }}
  44. </span>
  45. <!-- <span style="color: #1989fa;">查看</span> -->
  46. </div>
  47. <div class="batch-middel-text-style">签收时间:{{ item.signatureTime == undefined ? '' :
  48. item.signatureTime.date.year }}-{{ item.signatureTime == undefined ? '' :
  49. item.signatureTime.date.month }}-{{ item.signatureTime == undefined ? '' :
  50. item.signatureTime.date.day }} {{ item.signatureTime == undefined ? '' :
  51. item.signatureTime.time.hour }}:{{ item.signatureTime == undefined ? '' :
  52. item.signatureTime.time.minute }}:{{ item.signatureTime == undefined ? '' :
  53. item.signatureTime.time.second }}
  54. </div>
  55. </div>
  56. <div style="display: flex; padding-top: 5px;">
  57. </div>
  58. </div>
  59. </van-popup>
  60. </div>
  61. </template>
  62. <script>
  63. import { appOutboundInquiry, appGetTheDetails } from '@/api/index'
  64. import ScrollRefresh from './ScrollRefresh.vue';
  65. export default {
  66. name: 'waitsent',
  67. components: {
  68. ScrollRefresh
  69. },
  70. data() {
  71. return {
  72. show: false,
  73. params: {
  74. search: ''
  75. },
  76. popupList: [],//点击弹框后的
  77. };
  78. },
  79. methods: {
  80. async request(_params) {
  81. let parmas = {
  82. dispatchBatchNo: this.params.search, // 批次号
  83. deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
  84. isFinish: '1',//完成 1已完成 2未完成
  85. ..._params
  86. }
  87. const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
  88. res.data = res.data.map((item) => {
  89. const date = item.signatureTime.date
  90. const time = item.signatureTime.time
  91. return {
  92. ...item,
  93. openCard: false,
  94. time: `${date.year}-${date.month}-${date.day} ${time.hour}:${time.minute}:${time.second}`
  95. }
  96. })
  97. return res
  98. },
  99. // 搜索批次号
  100. async onSearch() {
  101. this.$refs.scrollRefresh.onRefresh()
  102. },
  103. // 展开查看详情
  104. async showPopup(value) {
  105. this.show = true;
  106. const res = await appGetTheDetails({ dispatchBatchNo: value.dispatchBatchNo })
  107. this.popupList = res.data
  108. },
  109. },
  110. };
  111. </script>
  112. <style lang="less" scoped>
  113. * {
  114. font-size: 12px;
  115. }
  116. .bottom_text {
  117. text-align: center;
  118. color: #969799;
  119. font-size: 14px;
  120. }
  121. .container {
  122. height: 100%
  123. }
  124. .batchss {
  125. height: 130px;
  126. // overflow: hidden;
  127. }
  128. .batch {
  129. background-color: #fff;
  130. margin: 10px;
  131. &-top {
  132. display: flex;
  133. justify-content: space-between;
  134. align-items: center;
  135. padding: 10px 0 6px 0;
  136. .jindu {
  137. color: #169bd5
  138. }
  139. }
  140. &-middel {
  141. height: 120px;
  142. background-color: #f2f2f2;
  143. border-radius: 12px;
  144. margin: 10px 6px;
  145. &-text {
  146. display: flex;
  147. flex-wrap: wrap;
  148. &-style {
  149. font-size: 12px;
  150. margin-top: 10px;
  151. }
  152. }
  153. }
  154. &-bottom {
  155. padding: 10px 4px;
  156. color: #169bd5;
  157. }
  158. }
  159. .onther {
  160. background-color: #fff;
  161. margin: 10px;
  162. border-radius: 10px;
  163. padding: 5px;
  164. &-top {
  165. display: flex;
  166. justify-content: space-between;
  167. align-items: center;
  168. padding: 10px 0 10px 0;
  169. .jindu {
  170. color: #169bd5
  171. }
  172. }
  173. &-bottom {
  174. padding: 10px 0;
  175. /deep/ .van-cell {
  176. padding: 0;
  177. }
  178. }
  179. }
  180. .batch-middel {
  181. background-color: #f7f8fa;
  182. border-radius: 12px;
  183. padding: 10px 8px;
  184. height: auto;
  185. &-text {
  186. display: flex;
  187. flex-wrap: wrap;
  188. &-style {
  189. width: 165px;
  190. margin-top: 10px;
  191. }
  192. }
  193. }
  194. </style>