express-detail.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <app-layout>
  3. <view v-if="is_show" class='express-box'>
  4. <view class='box-grow-1 top-box dir-left-wrap'>
  5. <view class='box-grow-0 cross-center main-center'>
  6. <image class='goods-pic' mode='aspectFill' :src='cover_pic'></image>
  7. </view>
  8. <view class='dir-top-wrap box-grow-1'>
  9. <view class='dir-left-nowrap'>
  10. <text class='box-grow-0 label'>物流状态:</text>
  11. <text class='box-grow-0 sign-text'>
  12. {{expressDetail.status_text ? expressDetail.status_text : '未知'}}
  13. </text>
  14. </view>
  15. <view class='dir-left-nowrap'>
  16. <text class='box-grow-0 label'>快递公司:</text>
  17. <text class='box-grow-0'>{{order.express}}</text>
  18. </view>
  19. <view class='dir-left-nowrap cross-center'>
  20. <text class='box-grow-0 label'>快递单号:</text>
  21. <text class='box-grow-1'>{{order.express_no}}</text>
  22. <view @click='copyText' class='box-grow-0 detail-btn'>复制</view>
  23. </view>
  24. </view>
  25. </view>
  26. <view class='logistics-box dir-top-wrap'>
  27. <block v-if='expressDetail.list'>
  28. <view class='item-box'>
  29. <view v-for='item in expressDetail.list' :key='item.id'
  30. :class="{'sign-text': index == 0 ? true : false}" class='dir-top item'>
  31. <image v-if='index == 0' class='sign-big'
  32. src='/static/image/icon/order/point-green.png'></image>
  33. <image v-else class='sign' src='/static/image/icon/order/point-gray.png'></image>
  34. <view>{{item.desc}}</view>
  35. <view>{{item.datetime}}</view>
  36. </view>
  37. </view>
  38. </block>
  39. <view v-else class='main-center empty-box'>
  40. <view>暂无物流信息</view>
  41. </view>
  42. </view>
  43. </view>
  44. </app-layout>
  45. </template>
  46. <script>
  47. export default {
  48. data() {
  49. return {
  50. expressDetail: null,
  51. order: null,
  52. express: '',
  53. express_no: '',
  54. cover_pic: '',
  55. customer_name: '',
  56. is_show: false,
  57. }
  58. },
  59. methods: {
  60. getExpressDetail() {
  61. this.$showLoading();
  62. this.$request({
  63. url: this.$api.order.express_detail,
  64. data: {
  65. express: this.express,
  66. customer_name: this.customer_name,
  67. express_no: this.express_no
  68. }
  69. }).then(response => {
  70. this.$hideLoading();
  71. this.is_show = true;
  72. if (response.code === 0) {
  73. this.order = response.data.order;
  74. this.expressDetail = response.data.express;
  75. } else {
  76. uni.showModal({
  77. title: '',
  78. content: response.msg,
  79. showCancel: false,
  80. });
  81. }
  82. }).catch(() => {
  83. this.$hideLoading();
  84. });
  85. },
  86. copyText() {
  87. this.$utils.uniCopy({
  88. data: this.order.express_no,
  89. success: function () {
  90. uni.showToast({
  91. title: '复制成功',
  92. icon: 'none',
  93. })
  94. }
  95. });
  96. },
  97. },
  98. onLoad(options) { this.$commonLoad.onload(options);
  99. this.express = options.express;
  100. this.express_no = options.express_no;
  101. this.customer_name = options.customer_name;
  102. this.cover_pic = options.cover_pic;
  103. this.getExpressDetail();
  104. }
  105. }
  106. </script>
  107. <style lang="scss" scoped>
  108. .express-box {
  109. position: absolute;
  110. height: 100%;
  111. width: 100%;
  112. }
  113. .express-box .top-box {
  114. padding: #{20rpx};
  115. background-color: #ffffff;
  116. }
  117. .express-box .label {
  118. margin-right: #{10rpx};
  119. }
  120. .express-box .goods-pic {
  121. width: #{130rpx};
  122. height: #{130rpx};
  123. margin-right: #{20rpx};
  124. }
  125. .logistics-box {
  126. padding: #{20rpx} #{25rpx};
  127. background-color: #fff;
  128. margin-top: #{25rpx};
  129. font-size: $uni-font-size-weak-two;
  130. color: $uni-general-color-two;
  131. }
  132. .logistics-box .item-box {
  133. border-left: #{1rpx} solid $uni-weak-color-one;
  134. padding-left: #{45rpx};
  135. position: relative;
  136. }
  137. .logistics-box .item {
  138. margin-bottom: #{25rpx};
  139. padding-bottom: #{25rpx};
  140. border-bottom: #{1rpx} solid $uni-weak-color-one;
  141. }
  142. .logistics-box .item .sign {
  143. width: #{16rpx};
  144. height: #{16rpx};
  145. position: absolute;
  146. left: #{-7rpx};
  147. }
  148. .logistics-box .item .sign-big {
  149. width: #{32rpx};
  150. height: #{32rpx};
  151. position: absolute;
  152. left: #{-16rpx};
  153. }
  154. .sign-text {
  155. color: #25ae5f;
  156. }
  157. .empty-box {
  158. font-size: $uni-font-size-general-one;
  159. }
  160. .detail-btn {
  161. border: 1#{rpx} solid #bbbbbb;
  162. border-radius: 30#{rpx};
  163. padding: 10#{rpx} 30#{rpx};
  164. }
  165. </style>