用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-1-24 12:39:26 天下雪原创达人 造轮子 人生巅峰 楼主 478688
实现了二维码扫描后直接查询
自定义字体使用
真机可用
模板使用
简易动画

Screenshot_20170118-165730.png Screenshot_20170118-165759.png Screenshot_20170118-165805.png

代码示例:
[AppleScript] 纯文本查看 复制代码
.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);
  }
}

[AppleScript] 纯文本查看 复制代码
<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>


项目地址及下载:
https://github.com/dushouke/wxapp-track
wxapp-track-master.zip (55.5 KB, 下载次数: 153)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
2017-1-24 14:45:21 wx_143a030079 来自手机 架构狮
沙发
看看
我要下载看看
学习,辛苦作业
2017-1-24 16:33:53 lhbjava 架构狮
5#
下载做个测试
2017-1-24 19:15:12 abc001 布道者
6#
谢谢
谢谢分享demo
地方撒打算发达的说法是
2017-1-26 10:02:40 leeee 架构狮
9#
好好好
我也想要看看
666666666666
2017-2-3 13:07:38 cxb 诠释者
12#
国际包裹查询,二维码扫描,自定义字体
下载看看
想下载来看看
6666666666666666666
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册