需求变更
拆包出现异常,需要留下照片凭证,以防后期抵赖。这当然属于手机端功能,于是强烈向电商老板推荐手机客户端。
另外近期出现了一个奇怪的bug,经常扫码时重复出现同一个编码,明明已经扫了别的码了,系统里接收一的还是前一个。非常难复现,初步怀疑是扫码枪的缓存功能造成的,但没有办法根治,造成仓库抱怨。于是将扫码入库功能也加到手机客户端上,并控制该功能只允许在仓库使用(GPS定位,划定区域内使用,有点电子围栏的意思)。
开发过程中,封装了几个组件,版本升级已放到uni的插件市场上,我写了一个非常详细的使用方法,欢迎大家免费下载,顺手打个星。
https://ext.dcloud.net.cn/plugin?id=3931
主要功能预览
1. 登录
在线升级支持多种皮肤定制,支持强制升级和非强制升级,支持下载进度并中途中断升级,支持ios下载升级(企业证书)和appstore升级。图片截的有点高高低低的,凑合看吧。
![](https://i-blog.csdnimg.cn/blog_migrate/40e8bc54811ea519bbcea92c20295405.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b5c052fbeaf04d053149db2c6cbbdcb6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a52af16aaaa8ab5a12cc23c00cd9547.png)
2. 拆包检验
默认出现列表供拆包,也可以快速扫条形码进入检验。列表上拉翻页下拉刷新用的是MescrollBody,比uni自带的那个好用且体验好很多。
多照片布局直接用的colorui。最多支持9张照片上传。
![](https://i-blog.csdnimg.cn/blog_migrate/49716ca8e91c81e8e2cbb8dc234d0fb8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ea049398d1bdc26fe867be7bce115e80.png)
3. 扫码入库
界面应该是首页,后面应该会做成首页。
业务逻辑跟电脑客户端一致,先选择快递公司,然后扫码入库,不同的是,手机端不会暂存,直接调单个入库接口上传服务器。
![](https://i-blog.csdnimg.cn/blog_migrate/beeb3adf02ea79e95f6e832fcdee1a20.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3bceaafbda593eba19cf98510710ae0c.png)
4. 照片补录
为保证补录的是当前快递的照片,不允许列表选择和手动输入单号,只能扫码拍照,最多支持9张照片。
![](https://i-blog.csdnimg.cn/blog_migrate/8add11de6a7c6cb51fefddffccfe28e0.png)
5. 关于
现在界面上还叫“我的”,应该叫“关于”更合适点。功能比较少。我从colorui里把wave.gif扒出来了,顶部图片显示波纹效果,看着就很舒服了,我特意截了一个 gif
![](https://i-blog.csdnimg.cn/blog_migrate/767c14a5b03a71a793fe3d23be52ee1b.gif)
部分代码
1. 封装一个httpclient用于请求网络。
由于每次请求都有签名验证、时间戳等参数一同上传,就封了一个js文件。多图片上传,本来也准备封到这个js里,结果服务端只能收到一张,h5端正常,已向dcloud报了bug,有了解的同学也请帮忙回复下:https://ask.dcloud.net.cn/question/115109
function request(url, data = {}, type = 'GET', header = {
}){
let ts = util.gettimestamp();
let transid = util.gettransid(ts);
let sign = util.getsign(transid);
const baseUrl = getApp().globalData.serverInterfaceUrl
data.ts = ts
data.transid = transid
data.sign = sign
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: data,
header: header,
dataType: 'json',
}).then((response) => {
console.log(response)
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
console.log(err)
reject(err)
})
});
}
调用:
httpclient.request('user',{method:"login","uname":that.user_name,"ucode":that.password}
).then(res=>{
if(res.code == 100){
//登录成功
if(that.remember_username){
uni.setStorageSync("remember_username",true)
}
if(that.remember_password){
uni.setStorageSync("remember_password",true)
}
//写入其他缓存.......
//跳转首页
uni.switchTab({
url:'../index/index'
})
}else{
uni.showToast({
title: '登录失败:'+res.msg,
icon:'none'
});
}
});
2. 升级业务代码也放下吧,不解释了。差分升级还在实现中,暂未放在代码里。
<template>
<view class="zy-modal" :class="dshow?'show':''">
<view class="zy-dialog" style="background-color: transparent;">
<view class="padding-top text-white" :class="'zy-upgrade-topbg-'+theme">
<view>
<text class="zy-upgrade-title">
发现新版本
</text>
</view>
<text class="flex-wrap">{{version}}</text>
</view>
<view class="padding-xl bg-white text-left">
<scroll-view style="max-height: 200rpx;" scroll-y="auto" v-if="!update_flag">
<text>{{update_tips}}</text>
</scroll-view>
<view class="zy-progress radius striped active" v-if="update_flag">
<view :class="'bg-'+theme" :style="'width: '+update_process+'%;'">
{{update_process}}
</view>
</view>
</view>
<view class="zy-bar bg-white justify-end">
<view class="action" v-if="!update_flag">
<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_checked">确认升级</button>
<button class="zy-btn margin-left" :class="'line-'+theme"
v-if="!forceupgrade"
@click="upgrade_cancel">取消升级</button>
</view>
<view class="action text-center" v-if="update_flag&&!forceupgrade">
<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_break">中断升级</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'ZyUpgrade',
props: {
theme: { //主题,目前支持green,pink,blue,yellow,red
type: String,
default: 'green'
},
updateurl: { //升级检测url,全路径
type:String,
default: ''
},
h5preview:{ //H5界面下是否预览升级
type: Boolean,
default: false
},
oldversion: { //如果是H5,为了方便测试,可以传入一个旧版本号进来。
type: String,
default: ''
},
oldcode: { //如果是H5,为了方便测试,可以传一个旧版本的code进来。
type: Number,
default: 0
},
appstoreflag: { //是否启用appstore升级,如果启用,由服务端返回appstore的地址
type: Boolean,
default: false
},
noticeflag:{ //是否通知主界面无需更新
type:Boolean,
default: false
},
autocheckupdate:{ //是否页面截入时就判断升级
type:Boolean,
default: false
}
},
data() {
return {
update_flag: false, //点击升级按钮后,显示进度条
dshow: false,
update_process: 0,
downloadTask: [],
updated2version: '',
version_url: '',
update_tips: '',
forceupgrade: false,
currentversion: this.oldversion,
versionname: '',
vesioncode: this.oldcode
}
},
mounted() {
let app_flag = false
// #ifdef APP-PLUS
app_flag = true
// #endif
if((this.h5preview || app_flag) && this.autocheckupdate){
console.log("检测升级")
this.check_update()
}
},
computed:{
version(){
let retversion = ''
retversion = this.currentversion + (this.currentversion!=''&&this.updated2version!=''?'->':'')+this.updated2version
return retversion
}
},
methods:{
//检测升级
check_update(){
let that = this
// #ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
that.currentversion = widgetInfo.version
that.versionname = widgetInfo.name
that.versioncode = widgetInfo.versionCode
that.updatebusiness(that)
});
// #endif
// #ifdef H5
if(this.h5preview){
this.updatebusiness(that)
}
// #endif
},
updatebusiness: function(that){ //具体升级的业务逻辑
uni.showLoading({
title: '',
mask: false
});
let platform = uni.getSystemInfoSync().platform
let formdata = {
method: "upgrade",
version: that.currentversion,
name: that.versionname,
code: that.versioncode,
ts:'123',
transid:'123',
sign:'123',
platform: platform
}
uni.request({
url: that.updateurl,
data: formdata,
success: (result) => {
uni.hideLoading()
let data = result.data
if(data.code == 100){
console.log(data)
//提示升级
if(data.data.update_flag == 1){
that.dshow = true
that.update_tips = data.data.update_tips
that.forceupgrade = data.data.forceupdate==1
that.version_url = data.data.update_url
//that.currentversion = widgetInfo.version
that.updated2version = data.data.version
}else{
if(that.noticeflag){
//通知父组件,当前版为最新版本
that.$emit("showupdateTips",0)
}
}
}else{
uni.showToast({
title: '请求升级出错:'+data.msg,
icon:'none'
});
}
}
});
},
//点击开始升级按钮,开始升级
upgrade_checked:function(){
this.update_flag = true
this.updateversion()
},
//点击取消升级按钮,取消升级
upgrade_cancel:function(){
this.dshow = false
},
//升级过程中,点击中断升级按钮,中断升级
upgrade_break: function(){
this.downloadTask.abort()
this.update_flag = false
},
//升级下载apk安装包的具体处理业务逻辑
updateversion: function(){
let platform = uni.getSystemInfoSync().platform
console.log("操作系统:",platform)
if(platform == 'ios' && this.appstoreflag){
//如果启用ios appstore升级,则打开appstore
that.dshow = false
console.log("跳转至appstore")
plus.runtime.launchApplication({
action: that.version_url
}, function(e) {
uni.showToast({
title: '打开appstore失败',
icon:'none'
});
});
}else{
let that = this
this.update_confirm = true
this.downloadTask = uni.downloadFile({
url: that.version_url,
success:function(res){
if(res.statusCode == 200){
//开始安装
plus.runtime.install(res.tempFilePath, {
force: false
}, function() {
console.log('install success...');
plus.runtime.restart();
}, function(e) {
console.error('install fail...');
});
}else{
uni.showToast({
title: '下载失败,网络错误',
icon:'none'
});
}
},
fail:function(e) {
console.log("下载失败",e)
uni.showToast({
title: '下载失败:'+e.errMsg,
icon:'none'
});
this.update_flag = false
},
complete:function(){
}
})
this.downloadTask.onProgressUpdate(function(res){
that.update_process = res.progress
})
}
},
}
}
</script>
<style scoped>
@import url("static/css/main.css");
.zy-upgrade-topbg-green {
background-image: url('static/images/green.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 290rpx;
}
.zy-upgrade-topbg-red {
background-image: url('static/images/red.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 290rpx;
}
.zy-upgrade-topbg-pink {
background-image: url('static/images/pink.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 290rpx;
}
.zy-upgrade-topbg-yellow {
background-image: url('static/images/yellow.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 290rpx;
}
.zy-upgrade-topbg-blue {
background-image: url('static/images/blue.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 290rpx;
}
.zy-upgrade-title {
font-size: 50rpx;
color: white;
}
</style>
其他代码不放了,都是一些轮子。