orderDetail.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <div class="orderDetail-page-wrapper">
  3. <a-card :bordered="false" class="orderDetail-goods-info">
  4. <!-- 标题 -->
  5. <div class="page-header">
  6. <h3>订单信息</h3>
  7. <a-badge count="部分发货" :number-style="{ border: '1px solid #ff9900', backgroundColor: 'transparent', color: '#ff9900', padding: '1px 10px', height: '24px' }" />
  8. </div>
  9. <a-divider />
  10. <a-row :gutter="48">
  11. <a-col :span="8" class="item-cont">
  12. <p class="item-label">下单时间:</p>
  13. <p class="item-main">2020-10-30 16:45</p>
  14. </a-col>
  15. <a-col :span="8" class="item-cont">
  16. <p class="item-label">订单编号:</p>
  17. <p class="item-main">No12387612387</p>
  18. </a-col>
  19. <a-col :span="8" class="item-cont">
  20. <p class="item-label">订单总额:</p>
  21. <p class="item-main">1123乐豆</p>
  22. </a-col>
  23. <a-col :span="8" class="item-cont">
  24. <p class="item-label">用户手机:</p>
  25. <p class="item-main">15757989887</p>
  26. </a-col>
  27. <a-col :span="8" class="item-cont">
  28. <p class="item-label">收货人姓名:</p>
  29. <p class="item-main">豆豆</p>
  30. </a-col>
  31. <a-col :span="8" class="item-cont">
  32. <p class="item-label">收货人手机:</p>
  33. <p class="item-main">15712457854</p>
  34. </a-col>
  35. <a-col :span="16" class="item-cont">
  36. <p class="item-label">收货地址:</p>
  37. <p class="item-main">陕西省西安市未央区阿克苏接电话高科技大厦</p>
  38. </a-col>
  39. <a-col :span="8" class="item-cont">
  40. <p class="item-label">支付时间:</p>
  41. <p class="item-main">2020-10-30 16:46</p>
  42. </a-col>
  43. </a-row>
  44. </a-card>
  45. <a-card :bordered="false" class="orderDetail-goods-main">
  46. <!-- 标题 -->
  47. <div class="page-header">
  48. <h3>商品信息</h3>
  49. </div>
  50. <a-divider />
  51. <div class="goods-info-cont">
  52. <!-- 供应商列 -->
  53. <a-menu class="menu-cont" :defaultSelectedKeys="[menuList[0].id]" mode="horizontal" @click="handleClick">
  54. <a-menu-item v-for="item in menuList" :key="item.id" :title="item.name">
  55. {{ item.name }}
  56. </a-menu-item>
  57. </a-menu>
  58. <!-- 商品订单 -->
  59. <GoodsOrder v-for="(item, index) in orderData" :key="index" :orderData="item" @sendGoods="sendGoods" />
  60. </div>
  61. </a-card>
  62. <!-- 物流信息 -->
  63. <GoodsLogistics :openModal="openModal" @success="sendGoodsSuccess" @close="openModal=false" />
  64. </div>
  65. </template>
  66. <script>
  67. import GoodsOrder from './GoodsOrder.vue'
  68. import GoodsLogistics from './GoodsLogistics.vue'
  69. export default {
  70. name: 'OrderDetail',
  71. components: { GoodsOrder, GoodsLogistics },
  72. data () {
  73. return {
  74. menuList: [
  75. { id: 1, name: '供应商1' },
  76. { id: 2, name: '供应商2' },
  77. { id: 3, name: '供应商3' }
  78. ],
  79. orderData: [
  80. {
  81. orderStatus: 1,
  82. listData: [
  83. { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
  84. { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 },
  85. { id: 3, name: '三只松鼠', price: 143, buyNum: 10 }
  86. ]
  87. },
  88. {
  89. orderStatus: 2,
  90. companyName: '韵达快递',
  91. orderNo: '476136981238',
  92. listData: [
  93. { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
  94. { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
  95. ]
  96. },
  97. {
  98. orderStatus: 2,
  99. companyName: '顺丰快递',
  100. orderNo: '4665476136981238',
  101. listData: [
  102. { id: 1, name: '蓝精灵阿斯达克洗衣液', price: 52, buyNum: 30 },
  103. { id: 2, name: '前往东京国际权威的沐浴露', price: 22, buyNum: 7 }
  104. ]
  105. }
  106. ],
  107. openModal: false // 是否填写物流信息
  108. }
  109. },
  110. methods: {
  111. // 切换 供应商
  112. handleClick (item) {
  113. console.log(item, '---切换供应商')
  114. },
  115. // 立即发货
  116. sendGoods (idArr) {
  117. console.log(idArr)
  118. this.openModal = true
  119. },
  120. // 物流信息填写成功
  121. sendGoodsSuccess () {
  122. console.log('物流信息填写成功')
  123. }
  124. }
  125. }
  126. </script>
  127. <style lang="less" scoped>
  128. .orderDetail-page-wrapper{
  129. .orderDetail-goods-info{
  130. // 标题
  131. .page-header{
  132. display: flex;
  133. justify-content: space-between;
  134. align-items: center;
  135. h3{
  136. margin: 0;
  137. }
  138. }
  139. .item-cont{
  140. display: flex;
  141. justify-content: space-evenly;
  142. margin-bottom: 24px;
  143. .item-label{
  144. display: inline-block;
  145. flex-shrink: 0;
  146. margin: 0;
  147. width: 90px;
  148. }
  149. .item-main{
  150. display: inline-block;
  151. flex-grow: 1;
  152. margin: 0;
  153. }
  154. }
  155. }
  156. .orderDetail-goods-main{
  157. margin-top: 15px;
  158. }
  159. }
  160. </style>