index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <ContentWrap>
  3. <!-- 订单信息 -->
  4. <el-descriptions title="订单信息">
  5. <el-descriptions-item label="订单号: ">{{ formData.no }}</el-descriptions-item>
  6. <el-descriptions-item label="配送方式: ">
  7. <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.deliveryType!" />
  8. </el-descriptions-item>
  9. <!-- TODO 营销活动待实现 -->
  10. <el-descriptions-item label="营销活动: ">秒杀活动</el-descriptions-item>
  11. <el-descriptions-item label="订单类型: ">
  12. <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" />
  13. </el-descriptions-item>
  14. <el-descriptions-item label="收货人: ">{{ formData.receiverName }}</el-descriptions-item>
  15. <el-descriptions-item label="买家留言: ">{{ formData.userRemark }}</el-descriptions-item>
  16. <el-descriptions-item label="订单来源: ">
  17. <dict-tag :type="DICT_TYPE.TERMINAL" :value="formData.terminal!" />
  18. </el-descriptions-item>
  19. <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
  20. <el-descriptions-item label="商家备注: ">{{ formData.remark }}</el-descriptions-item>
  21. <el-descriptions-item label="支付单号: ">{{ formData.payOrderId }}</el-descriptions-item>
  22. <el-descriptions-item label="付款方式: ">
  23. <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.payChannelCode!" />
  24. </el-descriptions-item>
  25. <!-- <el-descriptions-item label="买家: ">{{ formData.user.nickname }}</el-descriptions-item> -->
  26. <!-- TODO @puhui999:待实现:跳转会员 -->
  27. <el-descriptions-item label="收货地址: ">
  28. {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
  29. <el-link
  30. v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
  31. v-clipboard:success="clipboardSuccess"
  32. icon="ep:document-copy"
  33. type="primary"
  34. />
  35. </el-descriptions-item>
  36. </el-descriptions>
  37. <!-- 订单状态 -->
  38. <el-descriptions :column="1" title="订单状态">
  39. <el-descriptions-item label="订单状态: ">
  40. <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
  41. </el-descriptions-item>
  42. <!-- TODO @puhui999:根据状态,进行展示按钮 -->
  43. <el-descriptions-item label-class-name="no-colon">
  44. <el-button type="primary" @click="openForm('updatePrice')">调整价格</el-button>
  45. <el-button type="primary" @click="openForm('remark')">备注</el-button>
  46. <el-button type="primary" @click="openForm('delivery')">发货</el-button>
  47. <el-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
  48. </el-descriptions-item>
  49. <el-descriptions-item>
  50. <template #label><span style="color: red">提醒: </span></template>
  51. 买家付款成功后,货款将直接进入您的商户号(微信、支付宝)<br />
  52. 请及时关注你发出的包裹状态,确保可以配送至买家手中 <br />
  53. 如果买家表示没收到货或货物有问题,请及时联系买家处理,友好协商
  54. </el-descriptions-item>
  55. </el-descriptions>
  56. <!-- 商品信息 -->
  57. <el-descriptions title="商品信息">
  58. <el-descriptions-item labelClassName="no-colon">
  59. <el-row :gutter="20">
  60. <el-col :span="15">
  61. <el-table :data="formData.items" border>
  62. <el-table-column label="商品" prop="spuName" width="auto">
  63. <template #default="{ row }">
  64. {{ row.spuName }}
  65. <el-tag v-for="property in row.properties" :key="property.propertyId">
  66. {{ property.propertyName }}: {{ property.valueName }}
  67. </el-tag>
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="商品原价" prop="price" width="150">
  71. <template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
  72. </el-table-column>
  73. <el-table-column label="数量" prop="count" width="100" />
  74. <el-table-column label="合计" prop="payPrice" width="150">
  75. <template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
  76. </el-table-column>
  77. <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
  78. <template #default="{ row }">
  79. <dict-tag
  80. :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
  81. :value="row.afterSaleStatus"
  82. />
  83. </template>
  84. </el-table-column>
  85. </el-table>
  86. </el-col>
  87. <el-col :span="10" />
  88. </el-row>
  89. </el-descriptions-item>
  90. </el-descriptions>
  91. <el-descriptions :column="6">
  92. <el-descriptions-item label="商品总额: ">
  93. {{ floatToFixed2(formData.totalPrice!) }}元
  94. </el-descriptions-item>
  95. <el-descriptions-item label="运费金额: ">
  96. {{ floatToFixed2(formData.deliveryPrice!) }}元
  97. </el-descriptions-item>
  98. <el-descriptions-item label="订单调价: ">
  99. {{ floatToFixed2(formData.adjustPrice!) }}元
  100. </el-descriptions-item>
  101. <el-descriptions-item>
  102. <template #label><span style="color: red">商品优惠: </span></template>
  103. {{ floatToFixed2(formData.couponPrice!) }}元
  104. </el-descriptions-item>
  105. <el-descriptions-item>
  106. <template #label><span style="color: red">订单优惠: </span></template>
  107. {{ floatToFixed2(formData.discountPrice!) }}元
  108. </el-descriptions-item>
  109. <el-descriptions-item>
  110. <template #label><span style="color: red">积分抵扣: </span></template>
  111. {{ floatToFixed2(formData.pointPrice!) }}元
  112. </el-descriptions-item>
  113. <el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" />
  114. <!-- 占位 -->
  115. <el-descriptions-item label="应付金额: ">
  116. {{ floatToFixed2(formData.payPrice!) }}元
  117. </el-descriptions-item>
  118. </el-descriptions>
  119. <!-- TODO 芋艿:需要改改 -->
  120. <el-descriptions :column="4" title="物流信息">
  121. <el-descriptions-item label="物流公司: ">
  122. {{ deliveryExpressList.find((item) => item.id === formData.logisticsId)?.name }}
  123. </el-descriptions-item>
  124. <el-descriptions-item label="运单号: ">{{ formData.logisticsNo }}</el-descriptions-item>
  125. <el-descriptions-item label="发货时间: ">
  126. {{ formatDate(formData.deliveryTime!) }}
  127. </el-descriptions-item>
  128. <el-descriptions-item label="物流状态: ">
  129. <!-- TODO 物流状态怎么获取? -->
  130. <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.deliveryStatus!" />
  131. </el-descriptions-item>
  132. <!-- 占位 4 -->
  133. <el-descriptions-item v-for="item in 4" :key="item" label-class-name="no-colon" />
  134. <el-descriptions-item label="物流详情: ">
  135. <el-timeline>
  136. <el-timeline-item
  137. v-for="(express, index) in expressTrackList"
  138. :key="index"
  139. :timestamp="formatDate(express.time)"
  140. >
  141. {{ express.content }}
  142. </el-timeline-item>
  143. </el-timeline>
  144. </el-descriptions-item>
  145. </el-descriptions>
  146. <el-descriptions title="订单操作日志">
  147. <el-descriptions-item labelClassName="no-colon">
  148. <el-timeline>
  149. <el-timeline-item
  150. v-for="(log, index) in formData.orderLog"
  151. :key="index"
  152. :timestamp="formatDate(log.createTime!)"
  153. >
  154. {{ log.content }}
  155. </el-timeline-item>
  156. </el-timeline>
  157. </el-descriptions-item>
  158. </el-descriptions>
  159. </ContentWrap>
  160. <!-- 各种操作的弹窗 -->
  161. <OrderDeliveryForm ref="deliveryFormRef" @success="getDetail" />
  162. <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getDetail" />
  163. <OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
  164. <OrderUpdatePriceForm ref="updatePriceFormRef" @success="getDetail" />
  165. </template>
  166. <script lang="ts" setup>
  167. import * as TradeOrderApi from '@/api/mall/trade/order'
  168. import { floatToFixed2 } from '@/utils'
  169. import { formatDate } from '@/utils/formatTime'
  170. import { DICT_TYPE } from '@/utils/dict'
  171. import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
  172. import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
  173. import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
  174. import OrderUpdatePriceForm from '@/views/mall/trade/order/form/OrderUpdatePriceForm.vue'
  175. import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
  176. defineOptions({ name: 'TradeOrderDetail' })
  177. const message = useMessage() // 消息弹窗
  178. // 订单详情
  179. const formData = ref<TradeOrderApi.OrderVO>({
  180. orderLog: [] // TODO @puhui999:orderLogs
  181. })
  182. // TODO @puhui999:这个最好也拆掉哈
  183. const deliveryFormRef = ref() // 发货表单 Ref
  184. const updateRemarkForm = ref() // 订单备注表单 Ref
  185. const updateAddressFormRef = ref() // 收货地址表单 Ref
  186. const updatePriceFormRef = ref() // 订单调价表单 Ref
  187. const openForm = (type: string) => {
  188. switch (type) {
  189. case 'remark':
  190. updateRemarkForm.value?.open(formData.value)
  191. break
  192. case 'delivery':
  193. deliveryFormRef.value?.open(formData.value)
  194. break
  195. case 'updateAddress':
  196. updateAddressFormRef.value?.open(formData.value)
  197. break
  198. case 'updatePrice':
  199. updatePriceFormRef.value?.open(formData.value)
  200. break
  201. }
  202. }
  203. /** 获得详情 */
  204. const { params } = useRoute() // 查询参数
  205. const getDetail = async () => {
  206. const id = params.orderId as unknown as number
  207. if (id) {
  208. const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
  209. formData.value = res
  210. }
  211. }
  212. /** 复制 */
  213. const clipboardSuccess = () => {
  214. message.success('复制成功')
  215. }
  216. /** 初始化 **/
  217. const deliveryExpressList = ref([]) // 物流公司
  218. const expressTrackList = ref([]) // 物流详情
  219. onMounted(async () => {
  220. await getDetail()
  221. deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
  222. expressTrackList.value = await TradeOrderApi.getExpressTrackList(formData.value.id!)
  223. })
  224. </script>
  225. <style lang="scss" scoped>
  226. :deep(.el-descriptions) {
  227. &:not(:nth-child(1)) {
  228. margin-top: 20px;
  229. }
  230. .el-descriptions__title {
  231. display: flex;
  232. align-items: center;
  233. &::before {
  234. display: inline-block;
  235. width: 3px;
  236. height: 20px;
  237. margin-right: 10px;
  238. background-color: #409eff;
  239. content: '';
  240. }
  241. }
  242. .el-descriptions-item__container {
  243. margin: 0 10px;
  244. .no-colon {
  245. margin: 0;
  246. &::after {
  247. content: '';
  248. }
  249. }
  250. }
  251. }
  252. </style>