找回密码
 立即注册

扫一扫,访问微社区

查看: 6292|回复: 10

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

  [复制链接]
发表于 2017-3-3 16:47:39 | 显示全部楼层 |阅读模式
实现了二维码扫描后直接查询
自定义字体使用
真机可用
模板使用
简易动画








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


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

13

回帖

33

金钱

新人求带

积分
0
发表于 2017-5-5 16:54:55 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

7

回帖

80

金钱

新人求带

积分
0
发表于 2017-5-6 16:10:34 | 显示全部楼层
给力的lz
回复

使用道具 举报

0

主题

3

回帖

17

金钱

新人求带

积分
0
发表于 2017-6-7 21:04:16 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

8

回帖

51

金钱

新人求带

积分
0
发表于 2017-6-7 22:22:13 | 显示全部楼层
路过。表示看不懂 感谢!

0

主题

30

回帖

250

金钱

新人求带

积分
0
发表于 2017-9-9 16:02:54 | 显示全部楼层
666666666666666

0

主题

2

回帖

17

金钱

新人求带

积分
0
发表于 2017-9-12 09:40:41 | 显示全部楼层
看看看66666

0

主题

5

回帖

12

金钱

新人求带

积分
0
发表于 2018-4-3 16:17:42 | 显示全部楼层
dddddddddddddd

0

主题

9

回帖

80

金钱

新人求带

积分
0
发表于 2018-4-20 16:20:38 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

4

回帖

16

金钱

新人求带

积分
0
发表于 2018-4-23 11:36:19 | 显示全部楼层
真的假的卡卡积分
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-29 18:35 , Processed in 0.125227 second(s), 31 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表