元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现

需求变更

 拆包出现异常,需要留下照片凭证,以防后期抵赖。这当然属于手机端功能,于是强烈向电商老板推荐手机客户端。

另外近期出现了一个奇怪的bug,经常扫码时重复出现同一个编码,明明已经扫了别的码了,系统里接收一的还是前一个。非常难复现,初步怀疑是扫码枪的缓存功能造成的,但没有办法根治,造成仓库抱怨。于是将扫码入库功能也加到手机客户端上,并控制该功能只允许在仓库使用(GPS定位,划定区域内使用,有点电子围栏的意思)。

开发过程中,封装了几个组件,版本升级已放到uni的插件市场上,我写了一个非常详细的使用方法,欢迎大家免费下载,顺手打个星。

https://ext.dcloud.net.cn/plugin?id=3931

主要功能预览

1. 登录

在线升级支持多种皮肤定制,支持强制升级和非强制升级,支持下载进度并中途中断升级,支持ios下载升级(企业证书)和appstore升级。图片截的有点高高低低的,凑合看吧。

元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现

2. 拆包检验

默认出现列表供拆包,也可以快速扫条形码进入检验。列表上拉翻页下拉刷新用的是MescrollBody,比uni自带的那个好用且体验好很多。

多照片布局直接用的colorui。最多支持9张照片上传。

元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现  元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现

3. 扫码入库

界面应该是首页,后面应该会做成首页。

业务逻辑跟电脑客户端一致,先选择快递公司,然后扫码入库,不同的是,手机端不会暂存,直接调单个入库接口上传服务器。

元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现

4. 照片补录

为保证补录的是当前快递的照片,不允许列表选择和手动输入单号,只能扫码拍照,最多支持9张照片。

元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现

5. 关于

现在界面上还叫“我的”,应该叫“关于”更合适点。功能比较少。我从colorui里把wave.gif扒出来了,顶部图片显示波纹效果,看着就很舒服了,我特意截了一个 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>

View Code

 

其他代码不放了,都是一些轮子。

发表评论

评论已关闭。

相关文章