Tuniao UI

TimeLine 时间轴

该组件是配合tn-time-line-item配合使用。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

该组件的左边图标默认是显示一个点，如果需要自定义可以通过名为node的插槽进行传入。
- 如果自定义左边内容后无法与右边内容对齐的时候，可以通过设置tn-time-line-item组件的top参数进行调整。
该组件的右边的内容可以通过名为content的插槽进行传入。

vue

<template>

  <view class="components-time-line">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>Timeline时间轴</tn-nav-bar>

    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view class="time-line__wrap">
        <tn-time-line>
          <block v-for="(item, index) in expressData" :key="index">
            <tn-time-line-item :top="item.status === 0 ? '' : 2">
              <template v-if="item.status !== 0" slot="node">
                <view class="time-line-item__node">
                  <view v-if="item.status === 1" class="time-line-item__node--icon tn-icon tn-icon-image-text"></view>
                  <view v-if="item.status === 2" class="time-line-item__node--icon tn-icon tn-icon-prize"></view>
                  <view v-if="item.status === 3" class="time-line-item__node--icon tn-icon tn-icon-gift"></view>
                  <view v-if="item.status === 4" class="time-line-item__node--icon tn-icon tn-icon-logistics"></view>
                  <view v-if="item.status === 5" class="time-line-item__node--icon tn-icon tn-icon-my"></view>
                  <view v-if="item.status === 6" class="time-line-item__node--icon tn-icon tn-icon-cardbag"></view>
                  <view v-if="item.status === 7" class="time-line-item__node--icon tn-icon tn-icon-success"></view>
                </view>
              </template>
              <template slot="content">
                <view>
                	<view v-if="item.status === 1" class="time-line-item__content__title">已下单</view>
                	<view v-if="item.status === 2" class="time-line-item__content__title">已发货</view>
                	<view v-if="item.status === 3" class="time-line-item__content__title">已揽件</view>
                	<view v-if="item.status === 4" class="time-line-item__content__title">运输中</view>
                	<view v-if="item.status === 5" class="time-line-item__content__title">派送中</view>
                	<view v-if="item.status === 6" class="time-line-item__content__title">待取件</view>
                	<view v-if="item.status === 7" class="time-line-item__content__title">已签收</view>
                	<view class="time-line-item__content__desc">{{ item.info }}</view>
                	<view class="time-line-item__content__time">{{ item.time }}</view>
                </view>
              </template>
            </tn-time-line-item>
          </block>
        </tn-time-line>
      </view>

    </view>

  </view>

</template>

<script>
  export default {
    name: 'componentsTimeline',
    data() {
      return {
        expressData: [
          {
            info: '派送成功',
            status: 7,
            time: '2021-11-11 17:42'
          },
          {
            info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
            status: 0,
            time: '2021-11-11 17:31'
          },
          {
            info: '快件领取成功',
            status: 0,
            time: '2021-11-11 17:31'
          },
          {
            info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， 联系电话：18888888888 〖来自代收点〗',
            status: 6,
            time: '2021-11-11 17:15'
          },
          {
            info: '快件交给XXX，正在派送途中（联系电话：18888888888，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
            status: 5,
            time: '2021-11-11 17:07'
          },
          {
            info: '快件到达〖XXX合作点〗',
            status: 4,
            time: '2021-11-11 16:25'
          },
          {
            info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
            status: 0,
            time: '2021-11-11 13:50'
          },
          {
            info: '快件到达〖XXX营业点〗',
            status: 0,
            time: '2021-11-11 13:06'
          },
          {
            info: '快件在〖XXX集散点〗完成分拣，准备发往〖XXX营业点〗',
            status: 0,
            time: '2021-11-11 12:04'
          },
          {
            info: '快件到达〖XXX集散点〗',
            status: 0,
            time: '2021-11-11 10:14'
          },
          {
            info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX集散点〗',
            status: 0,
            time: '2021-11-11 05:52'
          },
          {
            info: '快件到达〖XXX转场〗',
            status: 0,
            time: '2021-11-11 05:36'
          },
          {
            info: '快件在〖XXX中转场〗完成分拣，准备发往〖XXX中转场〗',
            status: 0,
            time: '2021-11-10 23:36'
          },
          {
            info: '快件到达〖XXX中转场〗',
            status: 0,
            time: '2021-11-10 22:34'
          },
          {
            info: '快件在〖XXX营业部〗完成分拣，准备发往〖XXX中转场〗',
            status: 0,
            time: '2021-11-10 22:01'
          },
          {
            info: '顺丰速运已收取快件',
            status: 3,
            time: '2021-11-10 21:54'
          },
          {
            info: '包裹正在等待揽收',
            status: 1,
            time: '2021-11-10 17:41'
          },
          {
            info: '商品已经下单',
            status: 1,
            time: '2021-11-10 12:17'
          }
        ]
      }
    },
    methods: {

    }

  }
</script>

<style lang="scss" scoped>
  
  .tn-time-line-class {
    .tn-time-line-item-class {
      &:first-child {
        .tn-time-line-item__node {
          .time-line-item__node {
            background-color: $tn-main-color !important;
          }
        }
      }
    }
  }
  
  .time-line {
    
    &__wrap {
      padding: 30rpx;
    }
    
    &-item {
      &__node {
        width: 44rpx;
        height: 44rpx;
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #AAAAAA;
        
        &--active {
          background-color: $tn-main-color;
        }
        
        &--icon {
          color: #FFFFFF;
          font-size: 24rpx;
        }
      }
      
      &__content {
        &__title {
          font-weight: bold;
          font-size: 32rpx;
        }
        
        &__desc {
          color: $tn-font-sub-color;
          font-size: 28rpx;
          margin-bottom: 6rpx;
        }
        
        &__time {
          color: $tn-font-holder-color;
          font-size: 26rpx;
        }
      }
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

API

TimeLine Props

none

TimeLine Slots

名称	说明
default	存放时间轴数据内容

TimeLine Event

none

TimeLineItem Props

属性名	说明	类型	默认值	可选值
top	节点左边图标的绝对定位top值	String\|Number	-	-

TimeLineItem Slots

名称	说明
node	节点左边显示的内容，如果没有使用默认显示一个点
content	节点右边的内容

TimeLineItem Event

none

TimeLine 时间轴 ​

平台差异说明 ​

基本使用 ​

API ​

TimeLine Props ​

TimeLine Slots ​

TimeLine Event ​

TimeLineItem Props ​

TimeLineItem Slots ​

TimeLineItem Event ​

TimeLine 时间轴

平台差异说明

基本使用

API

TimeLine Props

TimeLine Slots

TimeLine Event

TimeLineItem Props

TimeLineItem Slots

TimeLineItem Event