OrderDetail.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <a-card :bordered="false">
  3. <v-select ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear v-show="false"></v-select>
  4. <div class="orderDetail-content">
  5. <a-form>
  6. <a-row :gutter="24">
  7. <a-col :span="8">
  8. <a-form-item label="下单时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  9. <span>{{orderDetailData.orderTime}}</span>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="8">
  13. <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  14. <span>{{orderDetailData.orderNo}}</span>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="8">
  18. <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  19. <span>{{orderDetailData.storeName}}</span>
  20. </a-form-item>
  21. </a-col>
  22. </a-row>
  23. <a-row :gutter="24">
  24. <a-col :span="8">
  25. <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  26. <span>{{orderDetailData.itemName}}</span>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :span="8">
  30. <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  31. <span>{{orderDetailData.customerMobile}}</span>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :span="8">
  35. <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  36. <span>{{orderDetailData.orderStatus}}</span>
  37. </a-form-item>
  38. </a-col>
  39. </a-row>
  40. <a-row :gutter="24">
  41. <a-col :span="8">
  42. <a-form-item label="应付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  43. <span>{{orderDetailData.payableAmount}} 元</span>
  44. </a-form-item>
  45. </a-col>
  46. <a-col :span="8">
  47. <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  48. <span>{{'-'}}</span>
  49. </a-form-item>
  50. </a-col>
  51. <a-col :span="8">
  52. <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  53. <span>{{"-"}}</span>
  54. </a-form-item>
  55. </a-col>
  56. </a-row>
  57. <a-row :gutter="24">
  58. <a-col :span="8">
  59. <a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  60. <span>{{orderDetailData.paymentAmount}} 元</span>
  61. </a-form-item>
  62. </a-col>
  63. <a-col :span="8">
  64. <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  65. <div style="display: flex;">
  66. <!-- <div>
  67. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px; margin-right: 20px;">
  68. <Upload :file-list="" :fileSize="0.25" listType="picture-card">
  69. </Upload>
  70. </div>
  71. <div style="text-align: center;">洗车前</div>
  72. </div>
  73. <div>
  74. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px;">
  75. <Upload :file-list="" :fileSize="0.25" listType="picture-card">
  76. </Upload>
  77. </div>
  78. <div style="text-align: center;">洗车后</div>
  79. </div> -->
  80. </div>
  81. </a-form-item>
  82. </a-col>
  83. </a-row>
  84. <a-row style="text-align: center;margin-top: 100px;">
  85. <a-col>
  86. <a-form-item>
  87. <a-button type="default" @click="goBack()">返回列表</a-button>
  88. </a-form-item>
  89. </a-col>
  90. </a-row>
  91. </a-form>
  92. </div>
  93. </a-card>
  94. </template>
  95. <script>
  96. import { Upload, VSelect } from '@/components'
  97. import { orderDetail } from '../../api/order.js'
  98. export default {
  99. components: { Upload, VSelect },
  100. data() {
  101. return {
  102. orderDetailData:[]
  103. }
  104. },
  105. methods: {
  106. // // 查看详情
  107. // getOrderDetail(){
  108. // orderDetail()
  109. // },
  110. // 返回列表
  111. goBack() {
  112. this.$router.push({
  113. name: 'OrderCenter'
  114. })
  115. },
  116. },
  117. beforeRouteEnter (to, from, next) {
  118. next(vm => {
  119. let params = vm.$route.query
  120. if(params.id){
  121. orderDetail({id: params.id}).then(res=>{
  122. console.log(res,'------------')
  123. if(res.status == 200){
  124. vm.orderDetailData = res.data
  125. vm.orderDetailData.orderStatus = vm.$refs.orderStatus.getNameByCode(vm.orderDetailData.orderStatus)
  126. }
  127. })
  128. }
  129. })
  130. }
  131. }
  132. </script>
  133. <style lang="less">
  134. .orderDetail-content .ant-form-inline .ant-form-item {
  135. margin-bottom: 20px;
  136. }
  137. /* 去掉上传图片组件原有的删除按钮 */
  138. :global(.anticon-delete) {
  139. display: none;
  140. }
  141. </style>