让你的物流信息一目了然:微信小程序实现进度展示

前言

微信小程序作为一种新型的移动应用程序,已经成为了人们获取信息的重要途径之一。在这篇文章中,我们将介绍如何利用微信小程序实现物流信息的展示和跟踪,帮助用户更加便捷地了解物流进度。


实现效果如下:

在这里插入图片描述


实现思路

其实可以把整体拆分成两大块,分别是最上方:物流详情,下方:物流信息;最上方实现起来比较简单,就不多赘述,主要跟大家说一下下面的实现思路,下面我又将它们分成了左边和右边两个大块,左边是进度的竖线展示,右边是物流文字信息展示,其中有两个点需要注意,首先是根据数组的长度判断了展示具体内容,若 >0 正常展示,反之则展示 “暂无物流信息” 字样,其次是线条也会根据判断条件展示不同的样式,这一点主要是为了兼容一条信息及多条信息不同的样式,剩下的就是样式的一些调整,代码中有详细的注释,大家可以在实现功能的同时根据注释调整为自己的需要的样子。


代码如下:

wxml文件

<view class="outerBox">
    <!-- 头部物流信息 -->
    <view class="navBox">
        <view class="navLeftBox">
            <view>
                <image src="https://b.bdstatic.com/searchbox/icms/searchbox/img/zhongtonglogo.png"></image>
            </view>
            <view>中通快递</view>
            <view>78465464135654565</view>
        </view>
        <view class="navRightBox">
            <text>复制</text>
            <text>|</text>
            <text>电话</text>
        </view>
    </view>
    <!-- 主体内容 -->
    <view class="contantBox">
        <!-- 通过数组长度判断显示内容 >0显示物流信息-->
        <view wx:if="{{dataList.length > 0}}">
            <view class="itemBox" wx:for="{{dataList}}" wx:key="index">
                <!-- 左边线条 -->
                <view class="itemLeftBox">
                    <view class="lineBox">
                        <view class="topLineBox {{index == 0 ? '' : 'longLineBox'}}"></view>
                        <view class="bomLineBox {{index + 1 == dataList.length ? '' : 'longLineBox'}}"></view>
                    </view>
                    <image class="newestIconBox" src="https://s1.ax1x.com/2022/03/29/qySZi4.png" wx:if="{{index == 0}}"></image>
                    <view class="dotBox" wx:else="{{index > 0}}"></view>
                </view>
                <!-- 右边内容 -->
                <view class="rightBigBox {{index == 0 ? '' : 'oldTxtBox'}} {{index + 1 == dataList.length ? '' : 'borderBomBox'}}">
                    <view>{{item.content}}</view>
                    <view class="timeBox">{{item.time}}</view>
                </view>
            </view>
        </view>
        <!-- 通过数组长度判断显示内容 除了大于0之外显示暂无物流信息-->
        <view class="notBox" wx:else>暂无物流信息</view>
    </view>
</view>

js文件

Page({
  data: {
    dataList: [
      {
        content: '已签收,签收人凭取货码签收。',
        time: '2022-03-27 21:01'
      },
      {
        content: '北京昌平二部中通张三[18821444747]正在派件(95720为中通快递员外呼专属电话,请放心接听)',
        time: '2022-03-27 17:51'
      },
      {
        content: '快件已到达北京昌平二部中通',
        time: '2022-03-27 07:11'
      },
      {
        content: '快件离开潮汕中心已发往北京昌平二部中通',
        time: '2022-03-26 17:45'
      },
      {
        content: '快件发往潮汕中心',
        time: '2022-03-26 07:45'
      },
      {
        content: '包裹已揽收',
        time: '2022-03-25 16:15'
      },
      {
        content: '包裹正在等待揽收',
        time: '2022-03-25 09:16'
      },
      {
        content: '商品已下单',
        time: '2022-03-24 18:01'
      }
    ]
  },
})

wxss文件

.outerBox {
    /* 最外层的盒子 */
    width: 100%;
    font-size: 24rpx;
}

.navBox {
    /* 头部样式 */
    padding: 18rpx;
    border-bottom: 2rpx solid rgb(236, 236, 236);
}

.navBox,
.navLeftBox {
      /* 头部内容样式 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.navLeftBox view {
     /* 头部左边的样式 */
    margin-left: 10rpx;
}

.navRightBox text {
    /* 头部右边的样式 */
    margin-left: 10rpx;
}

.navRightBox text:nth-child(2) {
    /* 头部竖线文字颜色 */
    color: rgb(226, 225, 225);
}

.navBox image {
    /* 图片样式 */
    width: 46rpx;
    height: 46rpx;
    border-radius: 50%;
}

.contantBox {
    /* 物流信息整体样式 */
    padding: 0 18rpx;
}

.itemBox {
    width: 100%;
    display: flex;
}

.itemLeftBox {
    /* 左边一整条竖线外层盒子的样式 */
    position: relative;
    width: 62rpx;
}

.lineBox {
    /* 左边一整条竖线的样式 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 28rpx;
}

.longLineBox {
    /* 线的样式 */
    background-color: rgb(215, 215, 215);
}

.topLineBox {
    /* 线的样式 */
    width: 1px;
    height: 50rpx;
}

.bomLineBox {
    /* 线的样式 */
    flex: 1;
    width: 1px;
}
.newestIconBox {
    /* 最新物流信息icon样式 */
    position: absolute;
    top: 36rpx;
    left: 9rpx;
    width: 40rpx;
    height: 40rpx;
}

.dotBox {
    /* 圆点样式 */
    position: absolute;
    top: 44rpx;
    left: 20rpx;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: rgb(201, 201, 201);
}

.rightBigBox {
    /* 右边物流信息每一个节点的样式 */
    flex: 1;
    padding: 38rpx 0;
}

.borderBomBox {
    /* 物流信息下划线 */
    border-bottom: 1px solid rgb(243, 241, 241);
}

.oldTxtBox {
    /* 之前物流信息文字样式 */
    color: rgb(159,159,159);
}


.timeBox {
    /* 时间样式 */
    margin-top: 4rpx;
    font-size: 20rpx;
}


.notBox {
    /* 暂无物流信息样式 */
    padding: 20rpx 0;
    text-align: center;
    color: rgb(159,159,159);
}
  • 10
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
介绍一下这个软件的目前功能 功能详解: 1:最重要的功能,也就是小程序转码(由于是官方口,部分只取路径不转码的为手动转码都不可以的,当然机器人也实现不了) 2:一键查询群ID(此功能用于自动加好友拉指定群和发送关键词拉指定群) 3:关键词加群(如上,我见还有人专门另外写个插件另外推广,我的直在一个软件内) 4:扫码登录小程序账号和收登录小程序账号(扫码模式直点击登录公众号会出现一个二维码在软件内,直扫码登录,收模式要提前设置一个WXID,给你的机器人发送登录公众号即可自动给你指定的wxid也就是微信号发送一个登录二维码,此举是为了免登服务器,且如果ck到期会自动提醒收人) 5:自动加好友 6:加上好友自动发送指定消息或图片,或两者并存,且自定义拉群 7:自定义水印(可设置为群水印,私聊水印,这两种模式下又分为转码人的用户名和自定义水印,自定义水印主用于引流) 8:群聊和私聊都可以转二维码模式,别人分享给你网址或者直发你链即可转二维码,前提是前缀加http或者https协议头如:https://www.baidu.com 9:二维码转链模式,发送二维码即可自动解析二维码要跳转的地址,也就是取链. 10:自动生成appid功能,这个功能其实没啥用,我用于自己的发布活动平台跳转用的,所以加了个. 11:自定义是否关闭私聊功能(此功能折中意见,防止和公众号互怼!) 12:获取小程序路径,一目了然查看邀请链邀请码,更方便薅羊毛 13:进群@通知并赠送点数(用于收费模式,如下) 14:重点推行的功能,也就是收费模式!支持私聊转码收费和群聊转码收费(转小程序码和转二维码均可设置,且价格自定义)新人加群送多少次数,邀请人进群送多少次数 15:消费提醒,当然这个也没什么卵用,之前定制的客户要的功能,就保留了. 16:这个需要留意:如果收费功能群里面要想转码的需要发送:创建账号 这四个字,否则不能转码,因为这个免费实行给你们,你们的客户无法在我这付费,只能给你们采取这个加数据表的功能,让数据库可以记录付费者的余额.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值