expressInfo.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="container">
  3. <view class="express-box">
  4. <view class="top-text">
  5. <text class="top-com">{{ expressList.com }}</text>
  6. <text>{{ expressList.nu }}</text>
  7. </view>
  8. <view class="express-body"><uni-steps :options="expressList.data" active-color="#007AFF" :active="active" direction="column"></uni-steps></view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. id: '',
  17. expressList: [],
  18. active: 0
  19. };
  20. },
  21. onLoad(option) {
  22. this.id = option.id;
  23. },
  24. onShow() {
  25. this.loadData();
  26. },
  27. methods: {
  28. loadData() {
  29. express_query({
  30. id: this.id
  31. }).then(({ data }) => {
  32. this.expressList = data;
  33. console.log(this.expressList);
  34. });
  35. }
  36. }
  37. };
  38. </script>
  39. <style lang="scss">
  40. .container {
  41. padding: 40rpx;
  42. .express-box {
  43. .top-text {
  44. width: 100%;
  45. height: 60rpx;
  46. background: #ffffff;
  47. padding-left: 20rpx;
  48. display: flex;
  49. align-items: center;
  50. .top-com {
  51. margin-right: 10rpx;
  52. }
  53. }
  54. .express-body {
  55. margin-top: 20rpx;
  56. background: #ffffff;
  57. padding: 20rpx 10rpx 20rpx 0;
  58. }
  59. }
  60. }
  61. </style>