在微信小程序中如何实现物流查询功能?

/ 0评 / 1

最近收快递很烦,每次都要查寻,这次做个实用居家旅行必备,因为在微信小程序我们还可以让他快速通知到我们比客户端方便

因为快递涉及隐私,我就不举例说明的直接看代码

<view class="tips" hidden="{{myExpressList[0]}}">你还没有添加快递单,点击右下角即可添加~</view>
<view bindlongpress="showMenu" bindtap="goToDetailPage" class="expressList" data-index="{{index}}" hidden="{{!myExpressList[0]}}" hoverClass="expressList-hover" wx:for="{{myExpressList}}">
<view class="express-name">{{item.name}}</view>
<view class="express-postid">{{item.postid}}</view>
<view class="express-remarks">{{item.remarks}}</view>
<view class="express-time">{{item.time}}</view>
</view>
<button bindtap="showAddPanel" class="add" hoverClass="add-hover">+</button>
<view class="alert" hidden="{{isShowAddPanel}}">
<form bindsubmit="addExpress" class="alert-content">
<view class="alert-title">添加快递</view>
<input class="alert-input" name="postid" placeholder="请输入快递单号" type="text"></input>
<input class="alert-input" name="remarks" placeholder="快递单备注(非必填)" type="text"></input>
<view class="alert-small-title">快递类型:</view>
<view class="alert-select-input">
<picker bindchange="selectExpress" name="express" range="{{expressArray}}" value="{{selectExpressIndex}}">
<view class="section_input">
{{expressArray[selectExpressIndex]}}
</view>
</picker>
</view>
<button class="alert-button" formType="submit" hoverClass="alert-button-hover">添加</button>
<button catchtap="hideAddPanel" class="alert-button" hoverClass="alert-button-hover">取消</button>
</form>
</view>
<view class="alert" hidden="{{isShowRemarksPanel}}">
<form bindsubmit="updateRemarks" class="alert-content">
<view class="alert-title">修改备注</view>
<input class="alert-input" name="remarks" placeholder="请输入新备注" type="text"></input>
<button class="alert-button" formType="submit" hoverClass="alert-button-hover">添加</button>
<button catchtap="hideRemarksPanel" class="alert-button" hoverClass="alert-button-hover">取消</button>
</form>
</view>

快递品种居多,不过每家快递都有自己的标志像手机号一样

可以实现自动识别功能

Page({
data: {
selectExpressIndex: 0,
expressList: [ {
name: "自动识别",
code: "auto"
}, {
name: "京东快递",
code: "jd"
}, {
name: "圆通快递",
code: "yuantong"
}, {
name: "申通快递",
code: "shentong"
}, {
name: "顺丰快递",
code: "shunfeng"
}, {
name: "韵达快递",
code: "yunda"
}, {
name: "中通快递",
code: "zhongtong"
}, {
name: "百世快递",
code: "huitongkuaidi"
}, {
name: "邮政包裹",
code: "youzhengguonei"
}, {
name: "EMS",
code: "ems"
}, {
name: "天天快递",
code: "tiantian"
}, {
name: "德邦物流",
code: "debangwuliu"
}, {
name: "宅急送",
code: "zhaijisong"
}, {
name: "其他快递",
code: "auto"
} ],
expressArray: [],
myExpressList: [],
isShowAddPanel: !0,
isShowRemarksPanel: !0,
updatRemarksIndex: 0
},
onLoad: function(e) {
var s = this;
wx.getStorage({
key: "myExpressList",
success: function(e) {
s.setData({
myExpressList: e.data
});
}
});
var t = this.data.expressList.map(function(e, s) {
return e.name;
});
this.setData({
expressArray: t
});
},
selectExpress: function(e) {
this.data.expressArray;
this.setData({
selectExpressIndex: e.detail.value
});
},
addExpress: function(s) {
var t = this, a = t.data.expressList, n = t.data.selectExpressIndex, i = a[n].name, o = a[n].code, r = s.detail.value.postid, d = s.detail.value.remarks;
d || (d = "暂无备注"), "auto" == o ? wx.request({
url: e + "/queryExpress.php?type=auto&isGetType=yes&postId=" + r,
success: function(e) {
if (e.data) {
for (var s = !1, n = 0; n < a.length; n++) a[n].code == e.data && (i = a[n].name.slice(0, 2),
o = e.data, t.myExpressPush(i, o, d, r), s = !0);
s || (i = "快递", o = e.data, t.myExpressPush(i, o, d, r));
} else wx.showToast({
title: "呃,查不到这个快递单号",
icon: "none"
});
}
}) : (i = i.slice(0, 2), t.myExpressPush(i, o, d, r));
},
myExpressPush: function(e, s, t, a) {
var n = this, i = new Object(), o = this.data.myExpressList, r = new Date(), d = r.getFullYear() + "/" + (r.getMonth() + 1) + "/" + r.getDate() + " " + r.getHours() + ":" + r.getMinutes();
i.name = e, i.code = s, i.remarks = t, i.postid = a, i.time = d, o.push(i), this.setData({
myExpressList: o
}), console.log(this.data.myExpressList), wx.setStorage({
key: "myExpressList",
data: o
}), n.hideAddPanel(), wx.showToast({
title: "添加成功",
icon: "success"
});
},
showAddPanel: function(e) {
console.log("show"), this.setData({
isShowAddPanel: !1
});
},
hideAddPanel: function(e) {
console.log("hide"), this.setData({
isShowAddPanel: !0
});
},
showMenu: function(e) {
var s = this, t = [ "删除此单", "复制单号", "修改备注" ], a = e.currentTarget.dataset.index;
wx.showActionSheet({
itemList: t,
success: function(e) {
0 == e.tapIndex ? s.removeExpress(a) : 1 == e.tapIndex ? s.copyExpressPostid(a) : 2 == e.tapIndex && s.changeRemarks(a);
}
});
},
removeExpress: function(e) {
var s = this, t = s.data.myExpressList;
t.splice(e, 1), s.setData({
myExpressList: t
}), wx.showToast({
title: "删除成功",
icon: "success"
}), wx.setStorage({
key: "myExpressList",
data: t
});
},
copyExpressPostid: function(e) {
var s = this.data.myExpressList[e].postid;
wx.setClipboardData({
data: s,
success: function(e) {
wx.showToast({
title: "复制成功",
icon: "success"
});
}
});
},
changeRemarks: function(e) {
this.setData({
isShowRemarksPanel: !1,
updateRemarksIndex: e
});
},
updateRemarks: function(e) {
var s = this, t = e.detail.value.remarks, a = s.data.updateRemarksIndex, n = s.data.myExpressList;
n[a].remarks = t, s.setData({
myExpressList: n
}), wx.setStorage({
key: "myExpressList",
data: n
}), wx.showToast({
title: "修改成功",
icon: "success"
}), s.hideRemarksPanel();
},
showRemarksPanel: function(e) {
this.setData({
isShowRemarksPanel: !1
});
},
hideRemarksPanel: function(e) {
this.setData({
isShowRemarksPanel: !0
});
},
goToDetailPage: function(e) {
var s = e.currentTarget.dataset.index, t = this.data.myExpressList;
wx.navigateTo({
url: "./showExpressDetail?thisExpress=" + JSON.stringify(t[s])
});
},
onShareAppMessage: function(s) {
return {
title: "一个木函--快递查询",
path: "/pages/tools/queryExpress/queryExpress",
imageUrl:"https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

然后结果页面我们也要加上特色
<view class="tips" hidden="{{expressDetail[0]}}">哇,什么也没有,凉凉</view>
<view hidden="{{!expressDetail}}">
<view bindlongpress="showMenu" class="express" data-index="{{index}}" hoverClass="express-hover" wx:for="{{expressDetail}}">
<view class="expressInfo">{{item.context}}</view>
<view class="expressTime">{{item.time}}</view>
</view>
</view>

这样就可以实现获取快递单最新进度

Page({
data: {
thisExpress: {},
expressDetail: []
},
onLoad: function(t) {
console.log(t);
var s = this;
wx.showLoading({
title: "正在获取快递单最新进度",
mask: !0
});
var e = JSON.parse(t.thisExpress);
s.setData({
thisExpress: e
}), s.getDetail(e.postid, e.code);
},
getDetail: function(s, e) {
var a = this;
wx.request({
url: t + "/queryExpress.php?isGetType=no&type=" + e + "&postId=" + s,
success: function(t) {
wx.hideLoading(), "ok" == t.data.message ? (a.setData({
expressDetail: t.data.data
}), console.log(t.data)) : wx.showToast({
title: "凉凉,快递单号查不到",
icon: "none"
}), console.log(a.data.expressDetail);
},
fail: function(t) {
wx.hideLoading(), wx.showToast({
title: "恭喜你遇到bug了",
icon: "none"
});
}
});
},
copyExpressDetail: function(t) {
var s = this.data.expressDetail;
wx.setClipboardData({
data: s[t].context,
success: function(t) {
wx.showToast({
title: "已复制",
icon: "none"
});
}
});
},
showMenu: function(t) {
var s = this, e = t.currentTarget.dataset.index, a = [ "复制" ];
wx.showActionSheet({
itemList: a,
success: function(t) {
0 == t.tapIndex && s.copyExpressDetail(e);
}
});
},
onShareAppMessage: function(s) {
return {
title: "一个木函--我的快递进度",
path: "/pages/tools/queryExpress/showExpressDetail?thisExpress=" + JSON.stringify(this.data.thisExpress),
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

评论已关闭。