目录2.8 订单模块1. 填写订单渲染基本信息收货地址立即购买提交订单2. 订单详情自定义导航栏交互订单状态渲染待付款-倒计时待付款-订单支付待发货-模拟发货待收货–确认收货订单物流删除订单3.订单列表Tabs 滑动切换Tabs 页面跳转高亮列表渲染订单支付2.9 项目打包微信小程序端发布上线条件编译和网页端打包App端打包上线1. Android 系统预览和调试云打包2. iOS 系统预览/调试、打包2.10 跨段兼容样式兼容1. 视口差异2. 样式隔离组件兼容JS API兼容2.11uniCloud 云开发准备工作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);