目录
2.8 订单模块
1. 填写订单
渲染基本信息
收货地址
立即购买
提交订单
2. 订单详情
自定义导航栏交互
订单状态渲染
待付款-倒计时
待付款-订单支付
待发货-模拟发货
待收货–确认收货
订单物流
删除订单
3. 订单列表
Tabs 滑动切换
Tabs 页面跳转高亮
列表渲染
订单支付
2.9 项目打包
微信小程序端发布上线
条件编译和网页端打包
App端打包上线
1. Android 系统
预览和调试
云打包
2. iOS 系统
预览/调试、打包
2.10 跨段兼容
样式兼容
1. 视口差异
2. 样式隔离
组件兼容
JS API兼容
2.11 uniCloud 云开发
准备工作
2.8 订单模块
1. 填写订单
渲染基本信息
如果遇到报错，例如：
通常原因是：
这个 400 报错的本质是后端业务层返回的"无有效商品"（错误码 18008），而不是网络或语法层的问题。/member/order/pre 是项目的"填写订单-获取预付订单"接口，它需要从当前登录用户的购物车里取出有效商品来生成结算信息；当后端发现购物车里没有可结算商品（购物车为空 / 商品已下架 / token 失效导致购物车归属错乱）时，就会抛出 code:18008。
解决办法：
登录 → 商品详情选规格加购 → 购物车勾选 → 点结算进 create 页。完整走一遍通常就恢复正常。
提交代码：
收货地址
提交代码：
立即购买
提交代码：
提交订单
（1）封装请求API
（2）类型声明文件
（3）提交按钮事件
（4）接口调用成功，跳转订单详情
创建订单详情页面：
跳转订单详情页：
提交代码：
2. 订单详情
自定义导航栏交互
文档链接
（1）准备静态结构
<style lang="scss"> page { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .navbar { width: 750rpx; color: #000; position: fixed; top: 0; left: 0; z-index: 9; /* background-color: #f8f8f8; */ background-color: transparent; .wrap { position: relative; .title { height: 44px; display: flex; justify-content: center; align-items: center; font-size: 32rpx; /* color: #000; */ color: transparent; } .back { position: absolute; left: 0; height: 44px; width: 44px; font-size: 44rpx; display: flex; align-items: center; justify-content: center; /* color: #000; */ color: #fff; } } } .viewport { background-color: #f7f7f8; } .overview { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-bottom: 30rpx; color: #fff; background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png); background-size: cover; .status { font-size: 36rpx; } .status::before { margin-right: 6rpx; font-weight: 500; } .tips { margin: 30rpx 0; display: flex; font-size: 14px; align-items: center; .money { margin-right: 30rpx; } } .button-group { margin-top: 30rpx; display: flex; justify-content: center; align-items: center; } .button { width: 260rpx; height: 64rpx; margin: 0 10rpx; text-align: center; line-height: 64rpx; font-size: 28rpx; color: #27ba9b; border-radius: 68rpx; background-color: #fff; } } .shipment { line-height: 1.4; padding: 0 20rpx; margin: 20rpx 20rpx 0; border-radius: 10rpx; background-color: #fff; .locate, .item { min-height: 120rpx; padding: 30rpx 30rpx 25rpx 75rpx; background-size: 50rpx; background-repeat: no-repeat; background-position: 6rpx center; } .locate { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png); .user { font-size: 26rpx; color: #444; } .address { font-size: 24rpx; color: #666; } } .item { background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
