riderOrderModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. title="详情"
  6. v-model="isshow"
  7. @cancle="cancel"
  8. width="70%"
  9. :centered="true">
  10. <a-row :gutter="48" >
  11. <a-col :span="8" class="item-cont">
  12. <p class="item-label">单号:</p>
  13. <p class="item-main">{{ pageInfo.orderReserveNo ? pageInfo.orderReserveNo : '--' }}</p>
  14. </a-col>
  15. <a-col :span="8" class="item-cont">
  16. <p class="item-label">状态:</p>
  17. <p class="item-main">{{ pageInfo.orderStatusDictValue ? pageInfo.orderStatusDictValue : '--' }}</p>
  18. </a-col>
  19. <a-col :span="8" class="item-cont">
  20. <p class="item-label">支付方式:</p>
  21. <p class="item-main">{{ pageInfo.payTypeDictValue ? pageInfo.payTypeDictValue : '--' }}</p>
  22. </a-col>
  23. </a-row>
  24. <a-row :gutter="48" >
  25. <a-col :span="8" class="item-cont">
  26. <p class="item-label">下单时间:</p>
  27. <p class="item-main">{{ pageInfo.createDate ? pageInfo.createDate : '--' }}</p>
  28. </a-col>
  29. <a-col :span="8" class="item-cont">
  30. <p class="item-label">预约时间:</p>
  31. <p class="item-main">{{pageInfo.reserveDateBegin ? pageInfo.reserveDateBegin.substring(0,10) :''}} {{pageInfo.reserveTimeTypeDictValue}}</p>
  32. <p v-if="!pageInfo.reserveDateBegin && !pageInfo.reserveTimeTypeDictValue">--</p>
  33. </a-col>
  34. <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
  35. <p class="item-label">服务时间:</p>
  36. <p class="item-main">{{ pageInfo.finishDate ? pageInfo.finishDate : '--' }}</p>
  37. </a-col>
  38. </a-row>
  39. <a-row :gutter="48" >
  40. <a-col :span="8" class="item-cont">
  41. <p class="item-label">服务骑手:</p>
  42. <p class="item-main">{{ pageInfo.name ? pageInfo.name+'-' : '' }}{{ pageInfo.phone? pageInfo.phone :'' }}</p>
  43. <p v-if="!pageInfo.name && !pageInfo.phone">--</p>
  44. </a-col>
  45. <a-col :span="8" class="item-cont">
  46. <p class="item-label">回收重量(kg):</p>
  47. <p class="item-main">{{ pageInfo.TOTAL_WEIGHT ? (pageInfo.TOTAL_WEIGHT/1000).toFixed(3)/1 : '0' }}</p>
  48. </a-col>
  49. <a-col :span="8" class="item-cont" v-if="pageInfo.orderStatus=='FINISH'">
  50. <p class="item-label">支付金额(元):</p>
  51. <p class="item-main">{{ pageInfo.originalAmount ? pageInfo.originalAmount : '0' }}</p>
  52. </a-col>
  53. </a-row>
  54. <a-row :gutter="48" >
  55. <a-col :span="8" class="item-cont">
  56. <p class="item-label">联系人信息:</p>
  57. <p class="item-main">{{ pageInfo.contactName ? pageInfo.contactName+'-' : '' }} {{ pageInfo.contactMobile ? pageInfo.contactMobile : '' }}</p>
  58. <p class="item-main" v-if="!pageInfo.contactName && !pageInfo. contactName">--</p>
  59. </a-col>
  60. <a-col :span="8" class="item-cont">
  61. <p class="item-label">地址:</p>
  62. <p class="item-main">{{ pageInfo.contactAddress ? pageInfo.contactAddress : '' }}{{pageInfo.houseAddress ? pageInfo.houseAddress : ''}}</p>
  63. </a-col>
  64. <a-col :span="8" class="item-cont">
  65. <p class="item-label">门头照:</p>
  66. <viewer :image="pageInfo.imageHeader ? pageInfo.imageHeader :[]" class="viewer" ref="viewer" @inited="inited" rebuild>
  67. <img v-for="src in pageInfo.imageHeader" :src="src" :key="src" class="image1">
  68. </viewer>
  69. </a-col>
  70. </a-row>
  71. <a-row :gutter="48" >
  72. <a-col :span="8" class="item-cont">
  73. <p class="item-label">类型:</p>
  74. <p class="item-main">{{ pageInfo.addressTypeDictValue ? pageInfo.addressTypeDictValue : '--' }}</p>
  75. </a-col>
  76. <a-col :span="8" class="item-cont" v-if="pageInfo.cencelReason=='CANCEL'">
  77. <p class="item-label">取消原因:</p>
  78. <p class="item-main">{{ pageInfo.cencelReason ? pageInfo.cencelReason : '--' }}</p>
  79. </a-col>
  80. <a-col :span="8" class="item-cont">
  81. <p class="item-label">图片:</p>
  82. <viewer :images="pageInfo.imageList? pageInfo.imageList:[]" class="viewer" ref="viewer" @inited="inited" rebuild>
  83. <img v-for="src in pageInfo.imageList" :src="src" :key="src" class="image">
  84. </viewer>
  85. <P style="margin-bottom: 0;">{{ pageInfo.imageList ? pageInfo.imageList.length+' 张' :'0 张' }}</P>
  86. <!-- <img :src="item" alt="" v-for="item in pageInfo.imageList" style="width: 40px;height: 40px;"/> -->
  87. </a-col>
  88. </a-row>
  89. <a-row :gutter="48" >
  90. <a-col :span="8" class="item-cont">
  91. <p class="item-label">下单账号:</p>
  92. <p class="item-main">{{ pageInfo.mobile ? pageInfo.mobile : '--' }}</p>
  93. </a-col>
  94. </a-row>
  95. <!-- 列表 -->
  96. <div class="table-title">回收明细</div>
  97. <!-- 列表 -->
  98. <a-table
  99. ref="table"
  100. :rowKey="(record) => record.id"
  101. :columns="columns"
  102. :data-source="tableData"
  103. :pagination="false"
  104. :scroll="{ y: 450 }"
  105. bordered
  106. >
  107. </a-table>
  108. </a-modal>
  109. </div>
  110. </template>
  111. <script>
  112. import { orderDetails } from '@/api/recoveryManage.js'
  113. export default {
  114. name: 'RiderOrderModal',
  115. components: {
  116. // VSelect
  117. },
  118. props: {
  119. visible: {
  120. type: Boolean,
  121. default: false
  122. },
  123. itemOrderNo: {
  124. type: [String, Number],
  125. default: ''
  126. }
  127. },
  128. data () {
  129. return {
  130. isshow: this.visible,
  131. tableData: [], // 列表数据
  132. image:[],
  133. images:[],
  134. pageInfo: {},
  135. columns: [{ title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  136. { title: '回收类别', dataIndex: 'rubbishTypeDictValue', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
  137. { title: '回收名称', dataIndex: 'typeName', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
  138. { title: '回收价格', dataIndex: 'rubbishPrice', width: 200, align: 'center', customRender: (text) => { return text || '--' } },
  139. { title: '回收重量(kg)', dataIndex: 'rubbishWeight', width: 150, align: 'center', customRender: (text) => { return (text / 1000).toFixed(3) / 1 || '0' } },
  140. { title: '交易金额(元)', dataIndex: 'totalAmount', width: 150, align: 'center', customRender: (text) => { return text || 0 } }]
  141. }
  142. },
  143. methods: {
  144. // 详情数据
  145. getPageData () {
  146. orderDetails({ orderReserveNo: this.itemOrderNo }).then(res => {
  147. if (res.status == 200) {
  148. this.pageInfo = res.data
  149. if(res.data.imageHeader){
  150. this.pageInfo.imageHeader=this.pageInfo.imageHeader.split()
  151. }
  152. console.log( this.pageInfo.imageHeader,'---------------v')
  153. this.tableData = res.data.orderReserveItemEntityList || []
  154. this.tableData.forEach((item,index)=>{
  155. item.no=index+1
  156. })
  157. }
  158. })
  159. },
  160. inited (viewer) {
  161. this.$viewer = viewer
  162. },
  163. isShow () {
  164. this.$viewer.update()
  165. },
  166. cancel (e) {
  167. this.clear()
  168. this.$emit('close')
  169. },
  170. // 取消
  171. handleCancel () {
  172. this.cancel()
  173. }
  174. },
  175. watch: {
  176. visible (newValue, oldValue) {
  177. this.isshow = newValue
  178. },
  179. isshow (newValue, oldValue) {
  180. if (newValue) {
  181. if (this.itemOrderNo) {
  182. this.getPageData()
  183. }
  184. } else {
  185. this.$emit('close')
  186. }
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang="less">
  192. .ant-modal-footer {
  193. display: none;
  194. }
  195. .network-edit-search-jwd{
  196. margin-top: 8px;
  197. }
  198. .table-title{
  199. margin-bottom: 10px;
  200. }
  201. .item-cont{
  202. display: flex;
  203. }
  204. .image1 {
  205. width:25px;
  206. height: 25px;
  207. cursor: pointer;
  208. margin: 5px;
  209. display: inline-block;
  210. }
  211. .image {
  212. width:25px;
  213. height: 25px;
  214. cursor: pointer;
  215. margin: 5px;
  216. display: inline-block;
  217. }
  218. .image:not(:first-child){
  219. display: none;
  220. }
  221. </style>