express.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <view class="wrap">
  3. <view class="base">
  4. <view class="title">{{expressInfo.expressCompany}}</view>
  5. <view class="item"> 快递单号:{{expressInfo.shippingSn}}</view>
  6. <view class="item"> 收货地址:{{order.consigneeAddress}}</view>
  7. </view>
  8. <view class="list">
  9. <u-time-line v-for="(item, index) in expressInfo.infoList" :key="index">
  10. <u-time-line-item>
  11. <template v-slot:content>
  12. <view class="u-order-title" v-if="index==0">{{expressInfo.stateStr}}</view>
  13. <view class="u-order-desc">
  14. {{ item.AcceptStation }}
  15. </view>
  16. <view class="u-order-time">
  17. {{ item.AcceptTime }}
  18. </view>
  19. </template>
  20. </u-time-line-item>
  21. </u-time-line>
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. order: {
  30. orderSn: '',
  31. address: {
  32. name: ''
  33. }
  34. },
  35. expressInfo: {}
  36. }
  37. },
  38. onLoad(option) {
  39. this.order.orderSn = option.orderSn;
  40. this.init();
  41. },
  42. methods: {
  43. init() {
  44. this.$u.get('user/order/getExpressInfo/' + this.order.orderSn).then(res => {
  45. this.order = res.order;
  46. this.expressInfo = res.expressInfo;
  47. console.log('expressInfo', this.expressInfo);
  48. console.log('order', this.order);
  49. });
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="scss" scoped>
  55. page {
  56. height: 100%;
  57. background-color: #f2f2f2;
  58. }
  59. .base {
  60. background-color: #FFFFFF;
  61. padding: 20rpx;
  62. margin-bottom:30rpx;
  63. .title {
  64. color: #F59A23;
  65. font-size: 30rpx;
  66. }
  67. .item {
  68. padding-top: 10rpx;
  69. }
  70. }
  71. .list {
  72. background-color: #FFFFFF;
  73. padding: 30rpx;
  74. }
  75. .u-node {
  76. width: 44rpx;
  77. height: 44rpx;
  78. border-radius: 100rpx;
  79. display: flex;
  80. justify-content: center;
  81. align-items: center;
  82. background: #d0d0d0;
  83. }
  84. .u-order-title {
  85. color: #333333;
  86. font-weight: bold;
  87. font-size: 32rpx;
  88. }
  89. .u-order-desc {
  90. color: rgb(150, 150, 150);
  91. font-size: 28rpx;
  92. margin-bottom: 6rpx;
  93. }
  94. .u-order-time {
  95. color: rgb(200, 200, 200);
  96. font-size: 26rpx;
  97. }
  98. </style>