OrderDetail.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="orderDetail-content">
  4. <a-form layout="inline">
  5. <a-row :gutter="24">
  6. <a-col :span="8">
  7. <a-form-item label="创建时间">
  8. <span>{{"123456789"}}</span>
  9. </a-form-item>
  10. </a-col>
  11. <a-col :span="8">
  12. <a-form-item label="单号">
  13. <span>{{"123456789"}}</span>
  14. </a-form-item>
  15. </a-col>
  16. <a-col :span="8">
  17. <a-form-item label="门店名称">
  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="服务名称">
  25. <span>{{"123456789"}}</span>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :span="8">
  29. <a-form-item label="手机号码">
  30. <span>{{"123456789"}}</span>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :span="8">
  34. <a-form-item label="状态">
  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="应付(¥)">
  42. <span>{{"123456789"}}</span>
  43. </a-form-item>
  44. </a-col>
  45. <a-col :span="8">
  46. <a-form-item label="优惠(¥)">
  47. <span>{{"123456789"}}</span>
  48. </a-form-item>
  49. </a-col>
  50. <a-col :span="8">
  51. <a-form-item label="优惠券名称:">
  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="实付(¥)">
  59. <span>{{"123456789"}}</span>
  60. </a-form-item>
  61. </a-col>
  62. <a-col :span="8">
  63. <a-form-item label="洗车照片">
  64. <div style="display: flex;">
  65. <div style="margin-right: 20px;">
  66. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px">
  67. <img :src="advertisementImg" style="width: 100px; height: 100px;" alt=""/>
  68. </div>
  69. <div>洗车前</div>
  70. </div>
  71. <div>
  72. <div style="border: 1px solid #eee;overflow: hidden;padding: 8px">
  73. <img :src="advertisementImg" style="width: 100px; height: 100px;" alt=""/>
  74. </div>
  75. <div>洗车后</div>
  76. </div>
  77. </div>
  78. </a-form-item>
  79. </a-col>
  80. </a-row>
  81. <a-row style="text-align: center;margin-top: 100px;">
  82. <a-col>
  83. <a-form-item>
  84. <a-button type="default">返回列表</a-button>
  85. </a-form-item>
  86. </a-col>
  87. </a-row>
  88. </a-form>
  89. </div>
  90. </a-card>
  91. </template>
  92. <script>
  93. export default{
  94. data(){
  95. return{
  96. }
  97. }
  98. }
  99. </script>
  100. <style>
  101. .orderDetail-content .ant-form-inline .ant-form-item{
  102. margin-bottom: 20px;
  103. }
  104. </style>