咫尺论坛 › 微信小程序开发教程 › 微信小程序demo：国际包裹查询，二维码扫描

柿霖不是林 发表于 2017-3-3 16:47:39

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

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








.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);
}
}






<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>


**** Hidden Message *****

白首不分离 发表于 2017-5-5 16:54:55

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

李泽 发表于 2017-5-6 16:10:34

给力的lz

kaihuayanpen 发表于 2017-6-7 21:04:16

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

1050489186 发表于 2017-6-7 22:22:13

路过。表示看不懂:loveliness: 感谢！

柳州吴彦祖 发表于 2017-9-9 16:02:54

666666666666666

蜜蜂 发表于 2017-9-12 09:40:41

看看看66666

ly116190596 发表于 2018-4-3 16:17:42

dddddddddddddd

arman1278745774 发表于 2018-4-20 16:20:38

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

jyhsww 发表于 2018-4-23 11:36:19

真的假的卡卡积分

查看完整版本: 微信小程序demo：国际包裹查询，二维码扫描