uniapp订单通过判断显示各板块信息

最新推荐文章于 2024-06-19 11:01:44 发布
最新推荐文章于 2024-06-19 11:01:44 发布
阅读量1.2k 收藏 9
点赞数
分类专栏： 全部订单模块 uniapp 文章标签： app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thigh_d/article/details/107964314
版权

相信大家在写商城类APP的时候都遇到过这种订单模块
在这里插入图片描述
现在来分析这个模块是怎么完成的。

第一步：先做好tab头部
在这里插入图片描述
CSS部分
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
调用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
好啦，基本上就是这样子了，如果有补充的小伙伴可以留言~~~

thigh_d
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app 项目不同状态的单据显示不同状态的底部操作按钮
Gao_Chuanhui的博客
04-09 703
需求： 1.不同的单据 比如申请购买某物品 存在不同的状态：新建 待审核 审核通过 下达 取消等等 不同状态的单据 细节页面的底部可能有不同的操作按钮，比如 新建的单据底部的操作可以是：通过审核 ，取消 ，添加协助人等等 往往这些按钮是可以在不同细节页面重复使用的 2.有些员工因为权限限制 ，只能在他的页面显示某些操作按钮 页面展示： 逻辑 detail.js import { checkOperationPermission} from "@/lib/util.js"; export default{
uniapp-根据后台提供的字段如何切换不同的按钮
m0_60708088的博客
05-31 263
<template> <div class="body"> <div class="body2"> <div class="body3" v-for="(hd,index) in hudong" :key="index"> <div class="img"> <image :src="hd.cover"></image> </div> <div cla.
uni-app微信小程序——商城（8）——订单详情
徐小硕—心之所向，素履以往
08-21 8545
我们上一篇文章中写到了商品详情页的设计和实施，本篇文章讲述了订单详情，订单详情无非就是对商品的几种状态进行分类，参考某宝，把商品分为待付款、待发货、待收货、已完成等几种状态，然后使用VantWeapp组件中的“Tab 标签页”对其状态进行分类，然后使用“Card 商品卡片”组件将商品展示到对应的标签页下。 效果图如下： 在“Card 商品卡片”中使用了一个tag插槽在右上角使用不用的颜色和文字来标明该商品 ...
uni app 树状结构数据展示
最新发布
yuehua_zhang的博客
06-19 1150
注意 treedata 中 isshow 是翻着的 false 展示 true 隐藏 isopen 是正常 false 关闭 true 展开。name: '僧1-曾1-重1-孙1-子1-节点2',name: '僧1-曾1-重1-孙1-子2-节点2',name: '曾1-重1-孙1-子1-节点2',name: '曾1-重1-孙1-子2-节点2',树状数据展示，可以点击item 将点击数据给父组件 ，满足自己需求。name: '重1-孙1-子1-节点2',uselast 只能使用末级。
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离
04-05
点菜订单详情-VUE模板 UNIAPP模板 布局、样式、JS分离 加菜 已支付 支付成功,祝您用餐愉快 杯鸭碟头饭 数量:1 ￥2880 共2份小计￥57.60 订单详情-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片软件生成导出就可以使用 VUE模板 UNIAPP模板 布局、样式、JS分离
uni-app订单详情页导航栏交互
小夏同学呀
01-19 724
uni-app订单详情页导航栏交互
订单列表暂无订单-VUE模板-UNIAPP模板
04-04
在"订单列表暂无订单-VUE模板-UNIAPP模板"这个项目中，开发者提供了一个针对这种场景的模板，即当用户没有任何订单时，应用会显示一个相应的提示。这个模板适合用于快速构建具有类似功能的Vue或UniApp应用程序。 ...
uniapp根据不同身份判断哪些页面不显示哪些页面显示
TYD0313的博客
11-17 1143
uniapp根据不同身份判断哪些页面不显示哪些页面显示
uniapp电商小程序实现订单30分钟倒计时
01-18
本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码，供大家参考，具体内容如下 倒计时函数如下： // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据，当前时间通过new Date() 的方式进行获取 ...
个人信息-VUE模板 UNIAPP模板 布局、样式、JS分离
04-21
【个人信息-VUE模板-UNIAPP模板】是一个用于构建个人资料页面的应用模板，适用于Vue.js和UniApp框架。这个模板提供了完整的布局结构，包括头像、姓名、身份证、手机号码和科室岗位等常见个人信息字段，方便开发者...
8.1 详情页页面展示｜uni-app 项目实战（详情页功能模块）｜uni-app & uniCloud 从零入门开发《IT技术资讯类跨端应用》项目实战
08-31
8.1_详情页页面展示｜uni-app_项目实战（详情页功能模块）｜uni-app_&_uniCloud_从零入门开发《IT技术
uniapp商品分类
thigh_d的博客
10-06 1489
有时候我们会碰到这种 切换不同模式来查看商品的信息（代码如下） HTML部分 JS部分 CSS部分
uniapp实现订单列表以及scss样式布局
kepler星球的博客
03-07 2685
<template> <view class="container"> <view class="bg"> <!-- 防止下面内容滚动遮盖不了内容 --> <view class="tabs-bg"></view> </view> <view class="tabs"> <my-t...
小程序对订单进行分类
weixin_43090018的博客
03-31 540
1、请求接口拿到全部的订单数据后，要把它分类到对应的状态中，如下图 2、根据后台返回数据的状态进行分类 在循环数据之前要对每一个进行重新赋值避免出现重复 //重新初始化赋值 this.arr1 = [] this.arr2 = [] this.arr3 = [] this.arr4 = [] this.arr5 = [] ...
uniapp---------订单多商品评价及图片上传、删除功能
baidu_35290582的博客
08-26 1414
效果图如下： 前端代码如下： <template> <view id="orderPj"> <view class="Box" v-for="(items,i) in info" :key="i" style="background-color: #fff;margin-bottom: 20rpx;"> <view class="goodsBox" > <image :src="items.pic" mode=.
uniapp中订单状态的思想记录
weixin_45803990的博客
02-24 1212
记录思想啊…… order.vue <template> <view> <!-- 订单导航 --> <order-nav :tabNavBars="tabNavBars" navColor="#58c7d1" @changeAct="changeOrderNavAct"></order-nav> <!-- 订单下无内容的提示 也可以封装成组件 --> <view class="no-order">
uniapp订单列表模板的使用，u-tabs-swiper的使用，全屏选项卡
imkaifan的博客
04-29 8615
uniapp官方的模板使用：在线效果请看 demo: 代码： <template> <view class="shenhe-container"> <view class="tab-container"> <u-tabs-swiper ref="uTabs" :current="current" :list="navList" :is-scroll="false" swiperWidth="750" height="80.
uniapp全选与取消全选，订单金额与订单量随多选框选择而进行改变
qq_41973526的博客
05-16 769
<template> <view class="social_security_manage"> <view slot='top'> <view class="header" @click="isAll()"> <view class="radio" :class="{active:checkedAll}"></view> <text class="text">全选</text&g
uniapp常用组件样式大全持续更新中...
神夜空间
08-03 2160
一、支付组件使用uview-ui 效果： 组件：Pay.vue 代码： <template> <!--去付款--> <u-popup v-model="showPay" mode="bottom" border-radius="20" class="upay" :mask-close-able="false"> <view class="pay-alert"> <view class="pay-co...
uniapp各端判断
03-12
在UniApp中，可以通过判断不同的平台来执行不同的代码逻辑。以下是UniApp各端判断的方式： 1. 判断当前平台是否为H5端： 可以使用`uni.getSystemInfoSync().platform`方法获取当前平台信息，如果返回值为"h5"，则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值