使用APICloud开发物流仓储app项目实践

莫道桑榆晚，为霞尚满天。这篇文章主要讲述使用APICloud开发物流仓储app项目实践相关的知识，希望能为你提供帮助。
一、前端思维导图

文章图片
< /div>
< div class="_image1" @click="goindex(overseas)">
< div class="_title"> 韩文< /div>
< img src="https://www.songbingjia.com/android/@/assets/hanzhong.png" style="margin: 0 auto; width: 100%" />
< /div>
< /view>
< /template>

< script>
let api = window.api;
export default
data()
return ;
,
methods:
async goindex()
api.openWin(
name: "index",
url: "./index",
);
,
,
;
< /script>

< style>
._select
font-size: 24px;
font-weight: 400;
color: #333333;
line-height: 100px;

._image1
margin: 0px 27px;
position: relative;

margin-top: 27px;

._image1 img
height: 102px;

._title
position: absolute;
height: 100%;
line-height: 102px;
text-align: center;
left: 10%;
top: 10%;

< /style>

文章图片
< /van-cell>
< /van-cell-group>
< /view>

< view class="foot">
< view class="bt" @click="tijiaoruku()"> 提交出库< /view>
< /view>
< /view>
< /template>

//主要方法
saoyisao()
let _this =this;
var zyHmsScan = api.require(zyHmsScan);
var param =
//returnAll:true
;
zyHmsScan.openDefaultView(param,function(ret)
//alert(JSON.stringify(ret));
_this.danhao=ret.result
);

3、卡片列表
卡片列表这个功能，通过横向等分，设置界面。首先这个页面通过各个ui的插件库很好的实现，如果自己写的话大概的思路是，等分，里面套用块状元素，设置padding和margin，这样可以快速的设置出来兼容性良好的css。

4．包裹预报
包裹预报这个页面比较难写
（1）涉及到星号和字的对齐---可以用postion absolut实现。

< van-cell-group>

< van-cell title="中国快递单号"titleStyle="font-size: 28rpx; font-weight: 600; color: #333333; "
arrow-direction="right"rightIconStyle="font-size:24rpx"
icon="https://qrcode.deui.cn/xing.png">
< view slot="value" > < input value="https://www.songbingjia.com/android/单号" /> < /view>

< /van-cell>
< /van-cell-group>

（2）选择发货仓和快递公司，可以快速的选择快递公司和仓库
可以用APICloud自带的底步弹框实现，可参考官方文档：??https://docs.apicloud.com/Client-API/api#50??

select()
let _this =this;
api.actionSheet(
title: 请选择,
buttons: [威海仓, 青岛仓, 深圳仓]
, function(ret, err)
var index = ret.buttonIndex;
_this.cang = canglists[index]
);

（3）添加商品，我们可以vue的双向绑定，再加上数据的地址传递来实现。

5、入库包裹状态
包裹的入库主要是未入库、已入库、待出库、已出库的状态改变比较难写，这里一般用vue class的active绑定来实现，还有就是用css after伪类来实现，如果学习伪类比较少的可以关注一下这里的内容。

//该代码主要是用的vant的van-tabs
< van-tabs v-model:active="active">
< van-tab title="标签 1"> 未入库 1< /van-tab>
< van-tab title="标签 2"> 已入库< /van-tab>
< van-tab title="标签 3"> 未出库< /van-tab>
< van-tab title="标签 4"> 已出库< /van-tab>
< /van-tabs>
//用到的vant的list组件来构成的下拉刷新的
< van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
< van-cell v-for="item in list" :key="item" :title="item" />
< /van-list>

6、我的地址
我的地址这个页面是很平常的列表页面，我们可以通过UI类插件来实现。就是这个背景的渐变色
background: linear-gradient(156deg, #C7EBFF 0%, #70ADFF 100%); 有机会可以看一看。

【使用APICloud开发物流仓储app项目实践】

< template>
< div>
< div class="tishi"> 1收件人姓名填写韩语英文且证件名字一致 2 若无通关序列号，请用登录证号代替 3地址请使用韩语填写，精准到门牌号< /div>
< div class="content">
< van-cell-group>
< van-cell title="收件人" titleStyle="font-size: 28px; font-weight: 600; color: #333333; "
arrow-direction="right" rightIconStyle="font-size:24px"
icon="https://qrcode.deui.cn/xing.png">
< input type="text" placeholder="请输入收件人姓名" slot="value" v-model="consignee" class="u-slot-value" />
< /van-cell>
< van-cell title="通关号码/身份证" titleStyle="font-size: 28px; font-weight: 600; color: #333333; "
arrow-direction="right" rightIconStyle="font-size:24px"
icon="https://qrcode.deui.cn/xing.png">
< input type="text" placeholder="请输入通关号码" slot="value" v-model="personalCustomsClearanceCode" class="u-slot-value" />
< /van-cell>
< van-cell title="电话" titleStyle="font-size: 28px; font-weight: 600; color: #333333; "
icon="https://qrcode.deui.cn/xing.png">
< input type="text" placeholder="请输入电话" v-model="consigneeTel"slot="value" class="u-slot-value" />
< /van-cell>
< van-cell title="地址" titleStyle="font-size: 28px; font-weight: 600; color: #333333; "
icon="https://qrcode.deui.cn/xing.png">
< input type="text" placeholder="请输入地址" v-model="consigneeAddr" slot="value" class="u-slot-value" />
< /van-cell>

< /van-cell-group>

< /div>
< div style="margin-top: 40px; background-color: #FFFFFF; ">
< van-cell-group>
< van-cell title="设为默认地址" titleStyle="font-size: 28px; font-weight: 600; color: #333333; "
icon="https://qrcode.deui.cn/xing.png">
< van-switchsize="36" v-model="isDefault" @change="change" slot="value" class="u-slot-value"> < /u-switch>
< /van-cell>
< /van-cell-group>

< /div>

< div class="foot">
< div class="bt" @click="addadress()"> 添加地址< /div>
< /div>
< /div>
< /template>

< script>
import common from "../../../common/common.js"
import ajax from "../../../common/ajax.js"

export default
data()
return
cang: "威海仓",
value:true,
consignee:"",//姓名
personalCustomsClearanceCode:"",
consigneeTel:"",
consigneeAddr:"",
isDefault:false

,
methods:
change()
console.log(this.value)
,
async addadress()
if(!this.consignee)
alert(请您输入用户名)
return false

if(!this.personalCustomsClearanceCode)
alert(请您输入通关号)
return false

if(!this.consigneeTel)
alert(请您输入电话)
return false

if(!this.consigneeAddr)
alert(请您输入地址)
return false

let data =https://www.songbingjia.com/android/
wxOpenId:common.fu.getStorageSync("openid"),
consignee:this.consignee,
personalCustomsClearanceCode:this.personalCustomsClearanceCode,
consigneeTel:this.consigneeTel,
consigneeAddr:this.consigneeAddr,
isDefault:this.isDefault==true?Y:N

console.log(data)
let direction =common.fu.getStorageSync("direction")
if(direction=="domestic")
let datas = await ajax.fu(POST,business/BizConsigneeAddressDomestic,data);
this.assignment(datas)
else
let datas = await ajax.fu(POST,business/BizConsigneeAddressOverseas,data);
this.assignment(datas)

,
assignment(datas)
if(datas.code==200)
alert(添加成功)

< /script>

< style lang="scss" scoped>
.zhuce
position: absolute;
right: -28px;
top: -1px;
width: 24px;
height: 24px;
background-color: #FFF0E1;
color: #FE5252;
font-size: 00px;
text-align: center;
border-radius: 50%;
line-height: 24px;

.jian1
position: absolute;
right: -56px;
top: -4px;
width: 24px;
height: 24px;
background-color: #FFF0E1;
color: #FE5252;
font-size: 10px;
text-align: center;
border-radius: 50%;
line-height: 24px;

.jian
position: absolute;
right: -30px;
top: -1px;
width: 24px;
height: 24px;
background-color: #FFF0E1;
color: #FE5252;
font-size: 10px;
text-align: center;
border-radius: 50%;
line-height: 24px;

.foot

margin: 0px 16px;

.foot_title
line-height: 44px;

.bt
height: 44px;
line-height: 44px;
text-align: center;
color: #FFFFFF;
font-size: 17px;
background-color: #0365FC;
border-radius: 4px;
position: fixed;
left: 10px;
bottom: 10px;
right: 10px;

.content
// padding: 0px 32px;
background-color: #FFFFFF;

.content1
margin: 17px 16px;

.u-slot-value
text-align: right;
color: red;
position: relative;

.tishi
font-size: 12px;
line-height: 23px;
height: 45px;
text-align: center;
padding: 0 10px;
background: linear-gradient(156deg, #C7EBFF 0%, #70ADFF 100%);

< /style>

7、云修复
首先在APICloud Studio3 这边的xml文件修改文件，设置开启云修复开启，然后提交到打包的后台。注意一定到提交到打包的后台，否则会不生效。然后我们正常的包，发版。如果遇到有的页面修改的问题，将修改后的文件上传到APICloud的云修复的后台，然后同步的下发下去，就可以改变原来的我们发的版本下的页面，从而实现云修复。

8、闪屏广告端设置
启用定制广告页注意：启用该功能后，应用的启动页将动态显示为您在此提交的图片。关闭该功能时，应用默认显示“端设置”中设置的启动页。

9、云编译
登录自己的APICloud账号，在对应的应用（测试）下，进行云编译刚提交的代码，云编译完成后会出现APP下载的二维码，手机扫描下载后安装即可。从云编译的地方编译正式版的安卓或者苹果iOS软件。