uniapp 微信小程序/字节小程序商城下单页面列表【待付款、待发货、待收货、已完成】静态页面布局展示

本文链接：https://blog.youkuaiyun.com/weixin_42065713/article/details/120058140

本文展示了使用uniapp开发的微信小程序和字节跳动小程序的商城下单页面静态布局，包括待付款、待发货、待收货、已完成四个状态的页面。目前仅为静态数据，未与后端进行实际数据交互。页面引用了公共样式文件public.css，该样式文件在小程序的common目录下，并在main.js全局引用。文中还提及了安装相关插件，并提供了订单列表页面及goods-order.vue组件的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只是静态页面数据，还没有和后端进行数据对接，如图所示：

微信小程序开发者工具预览：

字节小程序开发者工具预览：

点击选项卡，进行切换，如图所示：

页面代码中会用到自己封装的公共样式public.css

小程序公共样式我放在了common目录下面public.css

在main.js中全局引用：

import 'common/public.css'; /*引入公共样式*/

public.css内容如下：

page {
	font-family: 'Helvetica Neue', Roboto, 'microsoft yahei' !important;
	background: #F5F5F5;
	font-size: 28upx;
	word-break: break-all;
	word-wrap: break-word;
	color: #1a1a1a;
}

.back-white {
	background: #fff;
}

.size-20 {
	font-size: 20upx;
}

.size-22 {
	font-size: 22upx;
}

.size-24 {
	font-size: 24upx;
}

.size-26 {
	font-size: 26upx;
}

.size-28 {
	font-size: 28upx;
}

.size-30 {
	font-size: 30upx;
}

.size-32 {
	font-size: 32upx;
}

.size-34 {
	font-size: 34upx;
}

.size-36 {
	font-size: 36upx;
}

.size-40 {
	font-size: 40upx;
}

/* margin padding */
.mt-1 {
	margin-top: 10upx;
}

.ml-1 {
	margin-left: 10upx;
}

.mb-1 {
	margin-bottom: 10upx;
}

.mr-1 {
	margin-right: 10upx;
}

.mt-2 {
	margin-top: 20upx;
}

.mr-2 {
	margin-right: 20upx;
}

.ml-2 {
	margin-left: 20upx;
}

.mb-2 {
	margin-bottom: 20upx;
}

.mt-3 {
	margin-top: 30upx;
}

.mr-3 {
	margin-right: 30upx;
}

.ml-3 {
	margin-left: 30upx;
}

.mb-3 {
	margin-bottom: 30upx;
}

.p-1 {
	padding: 10upx;
}

.p-2 {
	padding: 20upx;
}

.p-3 {
	padding: 30upx;
}

.p-0 {
	padding: 0;
}

.pt-1 {
	padding-top: 10upx;
}

.pb-1 {
	padding-bottom: 10upx;
}

.pl-1 {
	padding-left: 10upx;
}

.pr-1 {
	padding-right: 10upx;
}

.pt-2 {
	padding-top: 20upx;
}

.pb-2 {
	padding-bottom: 20upx;
}

.pl-2 {
	padding-left: 20upx;
}

.pr-2 {
	padding-right: 2