OrderDetail.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="orderDetail-content">
  4. <a-form>
  5. <a-row :gutter="24">
  6. <a-col :span="8">
  7. <a-form-item label="创建时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  8. <span>{{"123456789"}}</span>
  9. </a-form-item>
  10. </a-col>
  11. <a-col :span="8">
  12. <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  13. <span>{{"123456789"}}</span>
  14. </a-form-item>
  15. </a-col>
  16. <a-col :span="8">
  17. <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  18. <span>{{"123456789"}}</span>
  19. </a-form-item>
  20. </a-col>
  21. </a-row>
  22. <a-row :gutter="24">
  23. <a-col :span="8">
  24. <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  25. <span>{{"123456789"}}</span>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :span="8">
  29. <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  30. <span>{{"123456789"}}</span>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :span="8">
  34. <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  35. <span>{{"123456789"}}</span>
  36. </a-form-item>
  37. </a-col>
  38. </a-row>
  39. <a-row :gutter="24">
  40. <a-col :span="8">
  41. <a-form-item label="应付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  42. <span>{{"123456789"}}</span>
  43. </a-form-item>
  44. </a-col>
  45. <a-col :span="8">
  46. <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  47. <span>{{"123456789"}}</span>
  48. </a-form-item>
  49. </a-col>
  50. <a-col :span="8">
  51. <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  52. <span>{{"123456789"}}</span>
  53. </a-form-item>
  54. </a-col>
  55. </a-row>
  56. <a-row :gutter="24">
  57. <a-col :span="8">
  58. <a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  59. <span>{{"123456789"}}</span>
  60. </a-form-item>
  61. </a-col>
  62. <a-col :span="8">
  63. <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  64. <div style="display: flex;">
  65. <!-- <div>
  66. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px; margin-right: 20px;">
  67. <Upload :file-list="" :fileSize="0.25" listType="picture-card">
  68. </Upload>
  69. </div>
  70. <div style="text-align: center;">洗车前</div>
  71. </div>
  72. <div>
  73. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px;">
  74. <Upload :file-list="" :fileSize="0.25" listType="picture-card">
  75. </Upload>
  76. </div>
  77. <div style="text-align: center;">洗车后</div>
  78. </div> -->
  79. </div>
  80. </a-form-item>
  81. </a-col>
  82. </a-row>
  83. <a-row style="text-align: center;margin-top: 100px;">
  84. <a-col>
  85. <a-form-item>
  86. <a-button type="default" @click="goBack()">返回列表</a-button>
  87. </a-form-item>
  88. </a-col>
  89. </a-row>
  90. </a-form>
  91. </div>
  92. </a-card>
  93. </template>
  94. <script>
  95. import { Upload } from '@/components'
  96. export default {
  97. components: { Upload },
  98. data() {
  99. return {
  100. }
  101. },
  102. methods: {
  103. // 返回列表
  104. goBack() {
  105. this.$router.push({
  106. name: 'OrderCenter'
  107. })
  108. },
  109. }
  110. }
  111. </script>
  112. <style lang="less">
  113. .orderDetail-content .ant-form-inline .ant-form-item {
  114. margin-bottom: 20px;
  115. }
  116. /* 去掉上传图片组件原有的删除按钮 */
  117. :global(.anticon-delete) {
  118. display: none;
  119. }
  120. </style>