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

随手记:商品信息过多,展开收起功能

UI原型图:


 

页面思路:
在商品信息最小item外面有一个包裹所有item的标签,控制这个标签的高度来实现展开收起功能
 

			<!-- 药品信息 --><view class="drugs" v-if="inquiryInfoSubmitBtn"><view class="medical"><view class="style-height" :style="styleHeight"><view class="medical-item" v-for="item in cartList" :key="item.drugsId"><view class="item-left"><view class="pos-re"><u-image :src="formatImgUrl(item.drugsImg)" height="80" width="80" border-radius="8" class="item-img "><u-loading slot="loading"></u-loading><view slot="error" class="font20">加载失败</view></u-image><view class="pos-ab drugs-icon drug-chufang" v-if="item.preType == 0">处方药</view><view class="pos-ab drugs-icon drug-otc" v-if="item.preType == 1">OTC</view></view><view class="item-text"><view class="item-name text-ellipsis"><text class="tag-insurance mr-8" v-if="item.nationalDrugCode && isInsurance">医保</text>{{ item.drugsName }}</view><view class="item-specification text-ellipsis">规格:{{ item.drugsSpecification }}</view></view></view><view class="item-right"><view class="item-price">¥{{ item.sellingPrice | priceFormat }}</view><view class="item-count">x{{ item.quantity }}</view></view></view></view><view class="spread" @click="clickText" v-if="cartList.length > 1">{{spreadText}}(共{{cartList.length}}个)<u-icon :name="iconName" color="#748099" size="24"></u-icon></view><u-gap height="1" bg-color="#D3DDF0" class="gap"></u-gap><view class="total"><view class="total-text">共计</view><view class="total-price">¥{{ totalPrice | priceFormat }}</view></view></view></view>
data(){return{iconName: 'arrow-down',spreadText: '展开',styleHeight: {height: '100rpx'},}
}
		clickText() {console.log('this.spreadText',this.spreadText)if(this.spreadText == '展开') {this.spreadText = '收起';this.iconName = 'arrow-up';this.styleHeight.height = 'auto';}else{this.spreadText = '展开';this.iconName = 'arrow-down';this.styleHeight.height = '100rpx';}},


相关文章:

随手记:商品信息过多,展开收起功能

UI原型图&#xff1a; 页面思路&#xff1a; 在商品信息最小item外面有一个包裹所有item的标签&#xff0c;控制这个标签的高度来实现展开收起功能 <!-- 药品信息 --><view class"drugs" v-if"inquiryInfoSubmitBtn"><view class"…...

uniapp上传头像并裁剪图片

第一步写上uniapp自带的选择图片button按钮 点击之后会弹出选择图片的方式 拍照或从相册选择图片后将会跳到图片裁剪 然后我们裁剪完之后点击确定在上传图片 这里是上传图片的接口 拿到本地图片 上传的话自己想以那种方式上传都可以...

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程 前情回顾&#xff1a;9.1.2 简单介绍两阶段模型R-CNN、SPPNet、Fast R-CNN、Faster R-CNN的发展过程 摘要 YOLOYOLOv2YOLO9000YOLOv3基本思想使用一个端到端的卷积神经网络直接预测目标的类别和位置针对YOL…...

英智教育智能体,AI Agent赋能教育培训行业数字化升级

教育是当前需求巨大且没有足够人力来满足的领域&#xff0c;每个学生个体差异较大&#xff0c;有限的教师资源无法针对性实行差异教学&#xff0c;学生学不会&#xff0c;教师教学压力大等问题普遍存在。 面对这些难题&#xff0c;英智在通用大模型能力的基础上&#xff0c;整合…...

什么是电脑监控软件?六款知名又实用的电脑监控软件

电脑监控软件是一种专为监控和记录计算机活动而设计的应用程序&#xff0c;它能够帮助用户&#xff08;如家长、雇主或系统管理员&#xff09;了解并管理目标计算机的使用情况。这些软件通常具有多样化的功能&#xff0c;包括但不限于屏幕捕捉、网络行为监控、应用程序使用记录…...

小程序名片怎么生成?AI名片生成器源码系统 为企业店铺创建自己的数字名片

在数字化时代&#xff0c;小程序名片已经成为企业店铺展示自身形象、推广产品和服务的重要工具。分享一个AI名片生成器源码系统春哥AI雷达智能名片小程序系统企业商业运营版&#xff0c;含完整代码包和详细的图文安装部署搭建教程&#xff0c;新手也能轻松使用&#xff0c;源码…...

浅谈PMP:项目管理的专业化认证

引言&#xff1a; 项目管理作为现代企业运营的核心环节&#xff0c;其重要性不言而喻。随着全球化的加速和市场竞争的加剧&#xff0c;企业对项目管理的需求日益增长&#xff0c;项目管理专业人员的需求也水涨船高。在这样的背景下&#xff0c;PMP&#xff08;Project Managem…...

获取闲鱼商品详情api

要使用闲鱼商品详情API&#xff0c;你需要先申请一个开发者账号&#xff0c;并且在开发者中心创建一个应用&#xff0c;目前很难申请到&#xff0c;还有一个方式是获取第三方应用的AppKey和AppSecret直接使用。 API的请求地址为&#xff1a; https://api.m.taobao.com/h5/mto…...

java1.8运行arthas-boot.jar运行报错解决

报错内容 输入java -jar arthas-boot.jar&#xff0c;后报错。 [INFO] JAVA_HOME: D:\developing\jdk\jre1.8 [INFO] arthas-boot version: 3.7.2 [INFO] Can not find java process. Try to run jps command lists the instrumented Java HotSpot VMs on the target system.…...

每日一练 - IGMP协议与查询器选举机制

01 真题题目 在共享网络中存在多台路由器的情况下&#xff0c;是否是IGMP协议本身负责选举出查询器的角色&#xff1f; A. 正确 B. 错误 02 真题答案 B 03 答案解析 IGMP&#xff08;Internet Group Management Protocol&#xff09;互联网组管理协议&#xff0c;主要用于IP多…...

深入浅出:面向对象软件设计原则(OOD)

目录 前言 1.单一责任原则&#xff08;SRP&#xff09; 2.开发封闭原则&#xff08;OCP&#xff09; 3.里氏替换原则&#xff08;LSP&#xff09; 4.依赖倒置原则&#xff08;DIP&#xff09; 5.接口分离原则&#xff08;ISP) 6.共同封闭原则&#xff08;CCP&#xff09…...

缓存与数据一致性问题

1、更新了数据库&#xff0c;再更新缓存 假设数据库更新成功&#xff0c;缓存更新失败&#xff0c;在缓存失效和过期的时候&#xff0c;读取到的都是老数据缓存。 2、更新缓存&#xff0c;更新数据库 缓存更新成功了&#xff0c;数据库更新失败&#xff0c;是不是读取的缓存的都…...

2024年上海高考作文题目(ChatGPT版)

一、2024年6月7日上海高考作文题目 生活中&#xff0c;人们常用认可度判别事物&#xff0c;区分高下。请写一篇文章&#xff0c;谈谈你对“认可度”的认识和思考。 要求&#xff1a;&#xff08;1&#xff09;自拟题目&#xff1b;&#xff08;2&#xff09;不少于800字。 二、…...

.net 调用海康SDK以及常见的坑解释

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !序言 在工控领域,很多时候需要…...

KVM+GFS高可用

资源列表 操作系统 IP 主机名 Centos7 192.168.10.51 gfs1 Centos7 192.168.10.52 gfs2 Centos7 192.168.10.53 kvm 在gfs节点部署GlusterFS #添加hosts解析 cat >> /etc/hosts << EOF 192.168.10.51 gfs1 192.168.10.52 gfs2 192.168.10.53 kvm EOF …...

C++迈向精通:当我尝试修改虚函数表

尝试修改虚函数表 本期纯整活儿好吧&#xff01;&#xff01;&#xff01;&#xff01; 初衷 有一天我突然开始好奇虚函数表是否真的存在&#xff0c;于是我开始想是否能够从C中查看或者调用虚函数表中的内容。&#xff0c;于是有了下面的操作。 操作过程 起初我并没有思路…...

IDEA 高效插件工具

文章目录 LombokMaven Helper 依赖冲突any-rule(正则表达式插件)快速生成javadocGsonFormat (Aits) 将json解析成类Diagrams使用 类图SequenceDiagram时序图GenerateAllSetter&#xff08;AltEnter&#xff09;大小写转写String ManipulationGitToolBox 代码提交人activate-pow…...

SQL入门大全

SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理关系型数据库的标准编程语言。它具有数据操纵和数据定义等多种功能&#xff0c;为数据库管理系统提供了强大的交互性特点&#xff0c;能够极大地提高计算机应用系统的工作质量与…...

【深度优先搜索 广度优先搜索】297. 二叉树的序列化与反序列化

本文涉及知识点 深度优先搜索 广度优先搜索 深度优先搜索汇总 图论知识汇总 LeetCode297. 二叉树的序列化与反序列化 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传…...

App UI 风格,引领设计风向

App UI 风格&#xff0c;引领设计风向...

突破3大技术瓶颈:抖音音乐批量下载工具的创新解决方案

突破3大技术瓶颈&#xff1a;抖音音乐批量下载工具的创新解决方案 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域&#xff0c;音频素材的获取与管理已成为制约生产力的关键因素。特别是当…...

OpenClaw+Qwen3-32B低成本方案:RTX4090D镜像长任务稳定性实测

OpenClawQwen3-32B低成本方案&#xff1a;RTX4090D镜像长任务稳定性实测 1. 为什么需要测试长任务稳定性&#xff1f; 上周我遇到一个头疼的问题&#xff1a;用OpenClaw整理3年积累的摄影素材时&#xff0c;任务执行到2小时突然中断。检查日志发现是显存溢出导致模型服务崩溃…...

LyricsX:macOS平台的多源歌词同步与显示技术方案

LyricsX&#xff1a;macOS平台的多源歌词同步与显示技术方案 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX LyricsX是一款专为macOS设计的开源歌词应用&#xff0c;通过集成多个歌词源和…...

每日一题 力扣 3548. 等和矩阵分割 II 前缀和 哈希表 C++ 题解

文章目录题目描述思路简述代码实现复杂度分析踩坑记录题目描述 力扣 3548. 等和矩阵分割 II 示例 1&#xff1a; 输入&#xff1a; grid [[1,4],[2,3]] 输出&#xff1a; true 解释&#xff1a; 在第 0 行和第 1 行之间进行水平分割&#xff0c;结果两部分的元素和为 1 4 5…...

三步突破抖音音乐批量下载难题:douyin-downloader全功能技术指南

三步突破抖音音乐批量下载难题&#xff1a;douyin-downloader全功能技术指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域&#xff0c;背景音乐是提升作品感染力的关键元素。然而&…...

一只菜鸟学深度学习的日记:填充 步幅 下采样

陕访惹玫在前两篇文章《最小二乘问题详解10&#xff1a;PnP问题求解》和《最小二乘问题详解11&#xff1a;基于李代数的PnP优化》中&#xff0c;我们分别通过常规思想与李代数思想&#xff0c;深入探讨了计算机视觉中 SFM&#xff08;Structure from Motion&#xff09;系统的核…...

FlowState Lab少样本学习效果:仅用10条数据生成特定波动模式

FlowState Lab少样本学习效果&#xff1a;仅用10条数据生成特定波动模式 1. 引言&#xff1a;当数据稀缺遇上智能生成 想象一下这样的场景&#xff1a;你手里只有10条设备振动波形数据&#xff0c;却需要分析上千种可能的故障模式。传统方法可能需要收集数月甚至数年的运行数…...

5步快速解锁付费内容:bypass-paywalls-chrome-clean终极指南 [特殊字符]

5步快速解锁付费内容&#xff1a;bypass-paywalls-chrome-clean终极指南 &#x1f680; 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的时代&#xff0c;你是否经常遇到优…...

Label Studio实战:如何为NLP项目自定义标注模板(含模板代码分享)

Label Studio实战&#xff1a;如何为NLP项目自定义标注模板&#xff08;含模板代码分享&#xff09; 在自然语言处理项目中&#xff0c;数据标注的质量往往直接决定模型性能的上限。Label Studio作为当前最主流的开源标注工具之一&#xff0c;其灵活的自定义模板功能让NLP工程师…...

Python边缘部署不是“复制粘贴”!12个生产环境真实报错日志溯源分析(附可复用诊断矩阵表)

第一章&#xff1a;Python边缘部署的本质认知与误区破除Python边缘部署不是将桌面或服务器环境简单“搬移”到嵌入式设备&#xff0c;而是面向资源受限、实时性敏感、网络不可靠、运维通道受限等物理约束下的系统性重构。其本质是**在算力、内存、存储、功耗与可靠性之间达成动…...