微信小程序demo：国际包裹查询，二维码扫描

柿霖不是林

实现了二维码扫描后直接查询
自定义字体使用
真机可用
模板使用
简易动画








[mw_shl_code=html,true].tracking {
  width: 100%;
}

.track-detail {
  width: 100%;
}

.track-title {
  padding: 30rpx;
  margin-bottom: 20rpx;
  min-height: 72rpx;
}

.track-title-right{
  margin-left: 100rpx;
}

.track-title icon {
  float: left;
  overflow: hidden;
  margin-top: 0;
}

.track-title text {
  display: block;
}

.track-title .track-number {
  font-size: 32rpx;
  color: #31708f;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.track-title .track-state {
  font-size: 26rpx;
}

.track-success {
  background-color: #dff0d8;
}

.track-success .track-state {
  color: #3c763d;
}

.track-info {
  background-color: #d9edf7;
}

.track-info .track-state {
  color: #31708f;
}

.track-error {
  background-color: #f2dede;
}

.track-error .track-state {
  color: #a94442;
}

.track-null {
  background-color: #f5f5f5;
}

.track-null .track-state {
  color: #555;
}

.track-content {
  font-size: 28rpx;
  padding: 20rpx;
  padding-left: 40rpx;
}

.track-content-title {
  margin-bottom: 20rpx;
}

.track-content-title label {
  color: #a37c5c;
}

.track-content-item {
  padding: 12rpx 0;
}

.track-content-time-dot {
  position: relative;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: transparent;
  margin-bottom: -12rpx;
  margin-right: 10rpx;
}

.track-content-time-dot-first {
  background-color: rgba(245, 184, 85, 0.3);
}

.track-content-time {
  display: inline-block;
  color: #3a87ad;
  margin-bottom: 8rpx;
}

.track-content-time-dot:before {
  position: absolute;
  content: ' ';
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: rgb(245, 184, 85);
  top: 50%;
  left: 50%;
  margin-top: -10rpx;
  margin-left: -10rpx;
}

.track-content-time-dot:after {
  content: ' ';
  border-left: 2rpx dashed rgba(245, 184, 85, 0.7);
  height: 120rpx;
  position: absolute;
  z-index: 100;
  top: 40rpx;
  left: 20rpx;
}

.track-content-time-dot-last:after {
  height: 60rpx;
}

.track-content-event {
  display: block;
  color: #333;
  padding-left: 50rpx;
  line-height: 1.3;
}

.i-destination {
  width: 5%;
  margin-bottom: -4rpx;
  margin-right: 8rpx;
}

.i-from {
  width: 5%;
  margin-bottom: -4rpx;
  margin-right: 8rpx;
}


.spinner {
  width: 100rpx;
  height: 100rpx;
  background-color: #f5b855;

  margin: 250rpx auto 0;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}[/mw_shl_code]






[mw_shl_code=html,true]<import src="_track_result.wxml" />
<view class="container">
  <block wx:if="{{tracking}}">
    <view class="spinner"></view>
    <view class="f-12 mt-10 text-muted">正在为您查询，请稍后...</view>
  </block>
  <view wx:else class="track-detail">
    <view class="track-title {{titleInfo.css}}">
      <icon type="{{titleInfo.iconType}}" size="40" />
      <view class="track-title-right">
        <text class="track-number">{{result.TrackingNumber}}</text>
        <view wx:if="{{result.Exception==='None'}}" class="track-state">
          {{result.StatusDescription}}
          <label class="text-muted">（{{result.Duration}}）</label>
        </view>
      </view>
    </view>
    <view class="track-history-empty" wx:if="{{result.Exception!=='None'}}">
      <icon type="info_circle" size="45" color="orange" />
      <text>
        您的包裹查询不到跟踪信息。
      </text>
    </view>
    <template is="trackResult" wx:if="{{result.Destination.Carrire.Code}}" data="{{name:'目的地',...result.Destination}}" />
    <template is="trackResult" wx:if="{{result.Original.Carrire.Code}}" data="{{name:'发件地',...result.Original}}" />
  </view>
</view>[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

白首不分离

啥也不说了，感谢楼主分享哇！

李泽

给力的lz

kaihuayanpen

啥也不说了，感谢楼主分享哇！

1050489186

路过。表示看不懂 感谢！

柳州吴彦祖

666666666666666

蜜蜂

看看看66666

ly116190596

dddddddddddddd

arman1278745774

啥也不说了，感谢楼主分享哇！

jyhsww

真的假的卡卡积分