uniapp小程序订单页面UI

前言

之前用模板写了订单页面，由于需求改了导致这个页面做更新麻烦，弄了一下午，索性全部删除了自己写了，上面的tabs用的是b-ui框架写的，其他的都是原生写法。

🙏如果这篇文章对你有帮助还请收藏点赞+关注🙏

推荐Mqtt相关文章（也许能帮到你）
《解决微信小程序MQTT真机连接问题与合法域名配置SSL问题》
《解决微信小程序MQTT通讯真机调试失败的问题附加可用代码》
《Esp8266-01s、51单片机实现连接MQTT踩坑：附加烧录安信可固件+宝塔搭建MQTT服务器 全套攻略》

推荐专栏
⭐⭐欢迎订阅⭐⭐
⭐⭐这是我的付费专栏，希望你可以订阅支持我🙏~⭐⭐
🚀Python爬虫项目实战系列文章！！
⭐⭐欢迎订阅⭐⭐
⭐⭐欢迎订阅⭐⭐
该专栏下的往期文章：
【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口

订单页面的UI可以根据具体需求进行设计，以下是一些常见的UI设计元素：

  1. 订单信息：包括订单号、下单时间、订单状态等。
  2. 商品列表：展示用户购买的商品信息，包括商品名称、价格、数量等。
  3. 订单金额：展示订单的总金额、优惠金额、实际支付金额等。
  4. 操作按钮：包括取消订单、支付订单、确认收货等操作按钮。

分析

根据我的需求，通过订单号查一个群组的商品数据，然后将订单状态以及点击事件、创建时间，商品数量总计 显示出来，在开发时，需要先了解uniapp小程序的开发流程和基本UI组件，以及订单页面的设计原则和需求分析。

布局

首先确定订单页面的整体布局，包括订单信息、商品列表、价格总计等内容。 通过颜色将大致的轮廓勾勒出来，可以使用不同的颜色来区分不同的内容区域，比如订单信息区域使用灰色背景，商品列表区域使用白色背景等。调整好每一本书的距离，可以使用margin和padding属性来控制每个商品之间的距离，保证页面整体美观。 对于商品列表中的每个商品，可以使用flex布局来实现自适应排列，同时使用图片和文字来展示商品信息。最后，根据实际需求添加一些交互效果，比如点击商品可以跳转到商品详情页面等。
在这里插入图片描述

代码：
由于我习惯先写在调整样式，所以现在看上去乱糟糟的，但这不是最终版

<template>
	<view>
		
		<view class="b-bg-white b-text-black-d">
			<!-- tabs -->
			<view class="b-tabs">
				<scroll-view scroll-x>
					<view class="b-tabs-container">
						<view class="b-tabs-item" v-for="(item,index) in tabs1" :key="index"
							:class="{'b-tabs-active':tabs1Current == index}"
							@click="tabs1Current = index"
						>
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- tabs -->
			<view style="width: 735rpx;height: 350rpx;background-color: yellowgreen;margin-top: 10rpx;margin-left: 10rpx;border-radius: 10rpx;display: flex;flex-direction: column;">
				<view style="width: 735rpx;height: 80rpx;background-color: yellowgreen;display: flex;flex-direction: row;align-items: center;justify-items: center;">
					<text>订单号：xxxx</text>
					<text style="margin-left: 450rpx;">待取件</text>
				</view>
				<span style="border: 1rpx solid #ccc;"></span>
				<view style="width: 735rpx;height: 208rpx;background-color: bisque;display: flex;flex-direction: row;align-items: center;">
					<image src="/static/logo.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
					<image src="/static/logo.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
					<image src="/static/logo.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
					<image src="/static/logo.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
					<image src="/static/logo.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
					<image src="/static/slh.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image>
				</view>
				<view style="width: 735rpx;height: 62rpx;background-color: beige;display: flex;flex-direction: row;align-items: center;">
					<text>2023-06-13</text>
					<text style="margin-left: 450rpx;">共三本</text>
				</view>
			</view>
		</view>
		
		</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs1:["全部","待初审","待取件","待审核","待打款"],
				tabs1Current:0,
				
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
// 头像性别标签
.avatar-tags-sex{
	position: absolute;
	z-index: 1;
	width: 40rpx;
	height: 40rpx;
	right: 0;
	bottom: 0;
	border-radius: 50%;
}

// 头像VIP标签
.avatar-tags-vip{
	position: absolute;
	z-index: 1;
	width: 40rpx;
	height: 40rpx;
	right: 0;
	top: 0;
	border-radius: 50%;
}
</style>

通过短时间的修改，勉强能看得过去

实现

成品图：
这里我已经通过js事件将视图层渲染了一遍，有很多不足的地方在慢慢调整，由于功能急需上架，ui只能等后面调整了
在这里插入图片描述

<template>
	<view class="page">
		<view class="b-bg-white b-text-black-d">
			<!-- tabs -->
			<view class="b-tabs">
				<scroll-view scroll-x>
					<view class="b-tabs-container">
						<view class="b-tabs-item" v-for="(item,index) in tabs1" :key="index"
							:class="{'b-tabs-active':tabs1Current == index}"
							@click="tabs1Current = index"
						>
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- tabs -->
				<view class="card" v-for="(item,index) in menuLists" :key="index">
					<view class="card_in_top">
						
					</view>
				<view class="card_in_center">
						<text style="margin-left: 10rpx;">订单号：{{item.sell_order_num}}</text>
						<text style="margin-left: 330rpx;color: #38dd5b;">待取件</text>
					</view>
					<span style="border: 1rpx solid #e1e1e1;"></span>
					<view class="card_in_b">
						<block v-for="(item2,index2) in item.book_data" :key="index2" v-if="index2 < 5">
							<view style="height: 180rpx;width: 140rpx;background-color: #ececec;margin-left: 15rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;justify-self: center;">
								<image :src="item2.book_cover"  style="height: 145rpx;width: 120rpx;"></image>
							</view>
							
						</block>
						<!-- <image src="/static/slh.png"  style="height: 100rpx;width: 100rpx;margin-left: 10rpx;"></image> -->
						
					</view>
					<view class="result">
						<text style="margin-left: 10rpx;">{{item.cre_time}}</text>
						<text style="margin-left: 450rpx;">共{{item.book_data.length}}本</text>
					</view>
				</view>
				
				
			
		
			
			</view>
		
		</view>
</template>

<script>
	export default {
		data() {
			return {
				menuLists: [],	
				tabs1:["全部","待初审","待取件","待审核","待打款"],
				tabs1Current:0,
				
			}
		},
		onLoad() {
			
		},
		methods: {
	
		}
	}
</script>

<style lang="scss">
	.page{
		// background-color: #f5f5f5;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}
	.card{
		width: 750rpx;height: 380rpx;border-radius: 20rpx;display: flex;flex-direction: column;
	}
	.card_in_top{
		width: 100%;height: 30rpx;background-color: #f5f5f5;
	}
	.card_in_center{
		width: 735rpx;height: 80rpx;background-color: #ffffff;display: flex;flex-direction: row;align-items: center;justify-items: center;
	}
	.card_in_b{
		width: 735rpx;height: 208rpx;background-color: #ffffff;display: flex;flex-direction: row;align-items: center;
	}
	.result{
		width: 735rpx;height: 62rpx;background-color: #ffffff;display: flex;flex-direction: row;align-items: center;
	}
</style>

总结

在本文中，我们介绍了如何使用uniapp框架开发小程序订单页面UI。我们首先讲解了订单页面的设计原则和注意事项，然后介绍了uniapp框架的基本使用方法。接着，我们详细讲解了订单页面的UI设计，包括订单列表、订单详情、订单支付等。最后，我们总结了本文的主要内容，强调了订单页面UI设计的重要性，并提供了一些优化建议，希望能够帮助开发者更好地设计和开发小程序订单页面。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/35485.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio 和 Android Gradle 插件的已知问题

Android Studio 和 Android Gradle 插件的已知问题

Android Studio 的已知问题 渲染 Compose 预览时出错 从 Android Studio Chipmunk 开始&#xff0c;如果您在问题面板中看到 java.lang.NoSuchFieldError: view_tree_saved_state_registry_owner 或 java.lang.ClassNotFoundException: androidx.savedstate.R$id&#xff0c;…
阅读更多...
OpenCV库进行图像旋转、仿射变换和透视变换

OpenCV库进行图像旋转、仿射变换和透视变换

#include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp>
阅读更多...
SpringBoot教学补充资料3-Maven安装

SpringBoot教学补充资料3-Maven安装

Maven下载地址&#xff1a;https://maven.apache.org/download.cgi 下载后进行解压&#xff0c;记住解压路径。 mvn -v
阅读更多...
文件共享平台Pingvin Share

文件共享平台Pingvin Share

本文完成于 2 月上旬。最近正好应网友要求折腾了 ClamAV&#xff0c;所以翻出来一起发了&#xff0c;可以作为 ClamAV 的一个应用示例&#xff1b; 什么是 Pingvin Share &#xff1f; Pingvin Share 是自托管文件共享平台&#xff0c;是 WeTransfer 的替代品。使用 Pingvin Sh…
阅读更多...
IP 协议的相关特性

IP 协议的相关特性

目录 IP协议有三大特点&#xff1a;无连接、无状态、不可靠。 四位版本号 四位头部长度 八位服务类型: 十六位总长度 16 位标识, 3 位标志, 13 位片偏移 八位生存时间 八位协议 十六位首部校验和 关于IP v4地址不够的问题 ip地址动态分配: ip地址转换(NAT) 数据传输…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （54）-- 算法导论6.2 6题

文心一言 VS 讯飞星火 VS chatgpt （54）-- 算法导论6.2 6题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;53&#xff09;-- 算法导论6.2 5题 六、证明:对一个大小为 n的堆&#xff0c;MAX-HEAPIFY 的最坏情况运行时间为 Ω(Ign)。(提示对于n个结点的堆&#xff0c;可以通过对每个结点设定恰当的值&#xff0c;使得从根结点到叶结点路径…
阅读更多...
前端学习——HTML5

前端学习——HTML5

新增语义化标签 新增布局标签 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&qu…
阅读更多...
123.【SpringBoot 源码刨析B】

123.【SpringBoot 源码刨析B】

SpringBoot-核心功能 (三)、SpringBoot核心功能1.配置文件1.1、properties1.2、yaml(1).yaml 简介(2).yaml 基本语法(3).数据类型(4).示列 1.3、配置提示 2.WEB 开发1.SpringMVC自动配置概览2.简单功能分析(1).静态资源访问&#xff08;1.1&#xff09;.静态资源目录&#xff0…
阅读更多...
【Linux】程序员的基本素养学习

【Linux】程序员的基本素养学习

这是目录 写在前面一、内存管理1、分段2、分页 二、线程管理三、静态库1、编译1.1、预处理1.2、编译1.3、汇编1.4、链接2、编译器3、目标文件**.text****.data****.bss****__attribute__** 3.1、符号3.2、兼容C语言 -- extern C4、链接 -- ld 写在前面 本文记录自己的学习生涯…
阅读更多...
Haproxy搭建Web集群

Haproxy搭建Web集群

目录 一.Haproxy简介 1.1Haproxy的概述 1.2 Haproxy的主要特征 1.3 Haproxy常见负载均衡策略 二 LVS、Nginx、HAproxy的区别 2.1 nginx 2.2 LVS 2.3 haproxy 三 Haproxy搭建Web群集 环境准备 haproxy 服务器部署 节点服务器部署 四 测试 五 日志定义 一.Haproxy简…
阅读更多...
Python网络爬虫使用教程

Python网络爬虫使用教程

文章目录 一、URL资源抓取1.urllib2.requests3.requests-html二、正则表达式三、数据解析1.Beautiful Soup2.lxml3.selectolax四、自动化爬虫selenium五、爬虫框架1.Scrapy2.pyspider框架六、模拟登录与验证码识别七、autoscraper&#xff08;不需要编程基础&#xff09; 一、U…
阅读更多...
6阶高清视频滤波驱动MS1681

6阶高清视频滤波驱动MS1681

MS1681 是一个单通道视频缓冲器&#xff0c;它内部集成6dB 增益的轨到轨输出驱动器和6 阶输出重建滤波器。MS1681 的-3dB 带宽为35MHz&#xff0c;压摆率为160V/us。MS1681 比无源LC 滤波器与外加驱动的解决方案能提供更好的图像质量。它单电源供电范围为2.5V 到5.5V&#xff0…
阅读更多...
DAY39：贪心算法（七）根据身高重建队列（注意思路）+最少箭引爆气球（重叠区间）

DAY39：贪心算法（七）根据身高重建队列（注意思路）+最少箭引爆气球（重叠区间）

文章目录 406.根据身高重建队列&#xff08;注意思路&#xff09;思路两个维度降序排序注意点 完整版vector容器插入相关复习为什么能直接根据ki数值插入ki位置的下标 时间复杂度vector-insert操作存在的问题链表优化版时间复杂度list和vector的插入与访问操作区别 452.最少弓箭…
阅读更多...
CentOS7安装详细安装

CentOS7安装详细安装

CentOS 7镜像下载 官网下载链接&#xff1a;http://isoredirect.centos.org/centos/7/isos/x86_64/ step1: 进入下载页&#xff0c;选择阿里云站点进行下载 Actual Country 国内资源 Nearby Countries 周边国家资源 阿里云站点&#xff1a;http://mirrors.aliyun.com/cento…
阅读更多...
​浅谈大型语言模型

​浅谈大型语言模型

大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;是一类强大的人工智能模型&#xff0c;具有出色的自然语言处理能力。它们在许多任务中表现出色&#xff0c;如机器翻译、文本摘要、对话生成和情感分析等。下面我们将介绍大型语言模型的训练和生成过…
阅读更多...
计算机体系结构基础知识介绍之缓存性能的十大进阶优化之非阻塞缓存（四）

计算机体系结构基础知识介绍之缓存性能的十大进阶优化之非阻塞缓存（四）

优化四&#xff1a;非阻塞缓存&#xff0c;提高缓存带宽 对于允许乱序执行的流水线计算机&#xff0c;处理器不需要因数据高速缓存未命中而停止。 例如&#xff0c;处理器可以继续从指令高速缓存获取指令&#xff0c;同时等待数据高速缓存返回丢失的数据。 非阻塞高速缓存或无…
阅读更多...
MYSQL的基本数据类型和建库

MYSQL的基本数据类型和建库

1.创建数据库&#xff0c;删除数据库&#xff0c;查询创建数据的语句&#xff0c;使用数据库&#xff0c;查询当前默认的数据库以及使用的编码方式校验规则 2.数字&#xff0c;文本&#xff0c;日期 在一章表中定义多个字段&#xff0c;要使用今天提到的所有的数据类型 1创建数…
阅读更多...
为了实现上网自由，我做了一个多功能串口服务器

为了实现上网自由，我做了一个多功能串口服务器

项目作者&#xff1a;小华的物联网嵌入式之旅 介绍&#xff1a;从事电气自动化行业&#xff0c;多次获得物联网设计竞赛&#xff0c;爱好嵌入式设计开发&#xff0c;物联网开发。 设计方案思路的由来&#xff0c;是因为我们现在的开发板基本需要通过串口与WIFI模组或以太网模…
阅读更多...
图片框架Glide学习总结及插件实现

图片框架Glide学习总结及插件实现

一.前言 图片加载框架个人选择的是Glide&#xff0c;该框架非常优秀&#xff0c;其知识体系很庞大&#xff0c;个人就对Glide部分知识的学习做一下总结&#xff0c;同时对框架的使用做一下封装&#xff0c;做成插件。 二.知识主干 知识主干如下&#xff0c;每一部分的知识会…
阅读更多...
Network Neuroscience：整个生命周期的功能连接体指纹

Network Neuroscience：整个生命周期的功能连接体指纹

导读 随着年龄的增长&#xff0c;人脑功能结构发生了系统性的变化。然而&#xff0c;功能连接(FC)作为一种检测独特“连接体指纹”的强大特征&#xff0c;使个体能够在同龄人中被识别出来。虽然已在年轻人样本中观察到这种指纹&#xff0c;但该方法在整个生命周期内的可靠性尚…
阅读更多...
最新文章

Copyright @ 2022~2023