当前位置：首页 > news >正文

微信小程序电商项目实战uni-app（四）

news 2026/7/26 9:03:33

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。

解决办法：

提交代码：

收货地址

提交代码：

立即购买

提交代码：

提交订单

（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);

查看全文

http://www.cnnetsun.cn/news/3657469.html