orderDetail.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  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 v-if="orderDetail" :count="orderDetail.orderStateDictValue" :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" v-if="orderDetail">
  11. <a-col :span="8" class="item-cont">
  12. <p class="item-label">下单时间:</p>
  13. <p class="item-main">{{ orderDetail.orderTime }}</p>
  14. </a-col>
  15. <a-col :span="8" class="item-cont">
  16. <p class="item-label">订单编号:</p>
  17. <p class="item-main">{{ orderDetail.orderSn }}</p>
  18. </a-col>
  19. <a-col :span="8" class="item-cont">
  20. <p class="item-label">订单总额:</p>
  21. <p class="item-main">{{ orderDetail.originalGold }}乐豆</p>
  22. </a-col>
  23. <a-col :span="8" class="item-cont">
  24. <p class="item-label">用户手机:</p>
  25. <p class="item-main">{{ orderDetail.customerMobile }}</p>
  26. </a-col>
  27. <a-col :span="8" class="item-cont">
  28. <p class="item-label">收货人姓名:</p>
  29. <p class="item-main">{{ orderDetail.receiverName }}</p>
  30. </a-col>
  31. <a-col :span="8" class="item-cont">
  32. <p class="item-label">收货人手机:</p>
  33. <p class="item-main">{{ orderDetail.receiverPhone }}</p>
  34. </a-col>
  35. <a-col :span="16" class="item-cont">
  36. <p class="item-label">收货地址:</p>
  37. <p class="item-main">{{ orderDetail.receiveAddress }}</p>
  38. </a-col>
  39. <a-col :span="8" class="item-cont">
  40. <p class="item-label">支付时间:</p>
  41. <p class="item-main">{{ orderDetail.payTime ? orderDetail.payTime : '--' }}</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-tabs type="card" @change="handleClick" v-if="orderDetail">
  54. <a-tab-pane v-for="item in orderDetail.officialPartnerOrderList" :key="item.officialPartnerNo" :tab="item.officialPartner.name"></a-tab-pane>
  55. </a-tabs>
  56. <!-- 商品订单 -->
  57. <div v-if="orderData && orderData.orderGoodsList">
  58. <!-- 待发货 -->
  59. <GoodsOrder type="orderGoods" :orderData="orderData.orderGoodsList" :isReset="isReset" @sendGoods="sendGoods" />
  60. </div>
  61. <div v-if="orderData && orderData.orderExpressList">
  62. <!-- 已发货 -->
  63. <GoodsOrder v-for="(item, index) in orderData.orderExpressList" :key="index" type="express" :orderData="item" />
  64. </div>
  65. </div>
  66. </a-card>
  67. <!-- 物流信息 -->
  68. <GoodsLogistics :openModal="openModal" @submit="handleSubmit" @close="openModal=false" />
  69. </div>
  70. </template>
  71. <script>
  72. import GoodsOrder from './GoodsOrder.vue'
  73. import GoodsLogistics from './GoodsLogistics.vue'
  74. import { orderFind, offPartnerOrderFind, orderExpressSend } from '@/api/order'
  75. export default {
  76. name: 'OrderDetail',
  77. components: { GoodsOrder, GoodsLogistics },
  78. data () {
  79. return {
  80. orderDetail: null, // 订单详情
  81. orderData: null,
  82. officialPartnerNo: '', // 供货商编号
  83. openModal: false, // 是否填写物流信息
  84. orderGoodsNoList: [], // 发货订单号
  85. isReset: false // 是否重置数据
  86. }
  87. },
  88. methods: {
  89. // 供应商下的订单信息
  90. handleClick (officialPartnerNo) {
  91. if (officialPartnerNo) {
  92. this.officialPartnerNo = officialPartnerNo
  93. }
  94. offPartnerOrderFind({ orderNo: this.orderDetail.orderNo, officialPartnerNo: officialPartnerNo || this.officialPartnerNo }).then(res => {
  95. if (res.status == 200) {
  96. this.orderData = res.data
  97. } else {
  98. this.orderData = null
  99. }
  100. })
  101. },
  102. // 立即发货
  103. sendGoods (idArr) {
  104. this.orderGoodsNoList = idArr
  105. this.openModal = true
  106. },
  107. getOrderDetail () {
  108. orderFind({ id: this.$route.params.id }).then(res => {
  109. if (res.status == 200) {
  110. this.orderDetail = res.data
  111. if (this.orderDetail.officialPartnerOrderList && this.orderDetail.officialPartnerOrderList.length > 0) {
  112. this.officialPartnerNo = this.orderDetail.officialPartnerOrderList[0].officialPartnerNo
  113. this.handleClick()
  114. }
  115. } else {
  116. this.orderDetail = null
  117. }
  118. })
  119. },
  120. // 提交物流
  121. handleSubmit (form) {
  122. this.isReset = false
  123. form.orderGoodsNoList = this.orderGoodsNoList
  124. form.orderNo = this.orderDetail.orderNo
  125. form.officialPartnerNo = this.officialPartnerNo
  126. orderExpressSend(form).then(res => {
  127. if (res.status == 200) {
  128. this.isReset = true
  129. this.$message.success(res.message)
  130. this.handleClick()
  131. this.openModal = false
  132. }
  133. })
  134. }
  135. },
  136. beforeRouteEnter (to, from, next) {
  137. next(vm => {
  138. vm.getOrderDetail()
  139. })
  140. }
  141. }
  142. </script>
  143. <style lang="less" scoped>
  144. .orderDetail-page-wrapper{
  145. .orderDetail-goods-info{
  146. // 标题
  147. .page-header{
  148. display: flex;
  149. justify-content: space-between;
  150. align-items: center;
  151. h3{
  152. margin: 0;
  153. }
  154. }
  155. .item-cont{
  156. display: flex;
  157. justify-content: space-evenly;
  158. margin-bottom: 24px;
  159. .item-label{
  160. display: inline-block;
  161. flex-shrink: 0;
  162. margin: 0;
  163. width: 90px;
  164. }
  165. .item-main{
  166. display: inline-block;
  167. flex-grow: 1;
  168. margin: 0;
  169. }
  170. }
  171. }
  172. .orderDetail-goods-main{
  173. margin-top: 15px;
  174. }
  175. }
  176. </style>