uniapp微信小程序_自定义交费逻辑编写

news/2024/5/25 9:41:26/文章来源:https://blog.csdn.net/apple_70049717/article/details/136716782

一、首先看最终效果 

先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额 

二、代码 

	<view class="addMoney"><view class="addMoneyTittle">充值金额</view><view class="selfaddmoney" :class="{'selfaddmoney1':isActive}"><text>自定义交费</text> <input @focus="isActive = true" @blur="isActive = false" type="text"v-model="addmoney" class="selfinput"><text class="selfinputtext">元</text></view><view class="moneyLaut"><view class="money" v-for="(item,index) in money" @click="addmoneyValue(index)":class="{'active':selectedIndex === index}">{{item.money}}<text class="selfinputtext">元</text></view></view></view>data() {return {show: false,show1: false,showOverlay: false, // 控制overlay显示与否的变量appointmentStatus: true, // 假设初始状态为预约失败  selectedOldMan: 0,selectedIndex: null, // 用于存储当前选中的元素索引 inforList: [{name: "吴海军",phon: "135 2589 3657",idNumber: "430525199401053654",identifier: "2358697454"}],money: [{money: 500}, {money: 1000}, {money: 2000}, {money: 3000}, {money: 5000}, {money: 10000}, ],addmoney: 15000,isActive: false}addmoneyValue(index) {this.selectedIndex = index; // 设置当前选中的索引  this.addmoney = this.money[index].money;},.addMoney {margin-top: 20rpx;height: 530rpx;padding: 30rpx 20rpx 54rpx 22rpx;background: #FFFFFF;box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);border-radius: 10rpx 10rpx 10rpx 10rpx;.money {width: 202rpx;height: 124rpx;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 1rpx solid #999999;text-align: center;line-height: 124rpx;margin-bottom: 20rpx;}.selfaddmoney1 {display: flex;align-items: center;margin-top: 28rpx;margin-bottom: 36rpx;width: 650rpx;height: 76rpx;background: #F6F5FF;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 2rpx solid #5448FF;text-align: center;line-height: 76rpx;padding-left: 32rpx;box-sizing: border-box;}.selfaddmoney {display: flex;align-items: center;margin-top: 28rpx;margin-bottom: 36rpx;width: 650rpx;height: 76rpx;border-radius: 10rpx 10rpx 10rpx 10rpx;border: 2rpx solid #999999;text-align: center;line-height: 76rpx;padding-left: 32rpx;box-sizing: border-box;}.selfinput {width: 400rpx;text-align: right;}.selfinputtext {font-size: 20rpx;margin-top: 8rpx;}.addMoneyTittle {font-size: 32rpx;color: #5448FF;}.moneyLaut {display: flex;justify-content: space-between;flex-wrap: wrap;}}

搞定收工

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图论】计算图的n-hop邻居个数,并绘制频率分布直方图

计算图的n-hop邻居个数&#xff0c;并绘制频率分布直方图 在图论中&#xff0c;n-hop邻居&#xff08;或称为K-hop邻居&#xff09;是指从某个顶点出发&#xff0c;通过最短路径&#xff08;即最少的边数&#xff09;可以到达的所有顶点的集合&#xff0c;其中n&#xff08;或…

数据的存储底层详解 - 源码、反码、补码 浮点数的存储

数据的存储 1. 前言2. 数据类型2.1 整形家族2.2 浮点数家族2.3 构造类型&#xff08;自定义类型&#xff09;2.4 指针类型2.5 空类型&#xff08;无类型&#xff09; 3. 整数在内存中的存储4. 大小端5. 浮点数在内存中的存储 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼。…

【开源】SpringBoot框架实验室耗材管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…

3d场景重建图像渲染 | 神经辐射场NeRF(Neural Radiance Fields)

神经辐射场NeRF&#xff08;Neural Radiance Fields&#xff09; 概念 NeRF&#xff08;Neural Radiance Fields&#xff0c;神经辐射场&#xff09;是一种用于3D场景重建和图像渲染的深度学习方法。它由Ben Mildenhall等人在2020年的论文《NeRF: Representing Scenes as Neur…

如何从 Mac 电脑外部硬盘恢复删除的数据文件

本文向您介绍一些恢复 Mac 外置硬盘数据的快速简便的方法。 Mac 的内部存储空间通常不足以存储所有数据。因此&#xff0c;许多用户通过外部驱动器扩展存储或创建数据备份。然而&#xff0c;与几乎所有其他设备一样&#xff0c;从外部硬盘驱动器丢失有价值的数据并不罕见。由于…

pdf也可以制作成可翻页的电子书吗?

​当然可以&#xff01;PDF文件可以通过一些工具和软件转换成可翻页的电子书。这种转换通常需要将PDF文件中的页面重新排列和格式化&#xff0c;以便它们可以像书籍一样翻页。一些流行的工具包括Adobe Acrobat、PDF转换器等 如果需要将大量PDF文件转换为电子书&#xff0c;可以…

【django framework】ModelSerializer+GenericAPIView,如何获取HTTP请求头中的信息(远程IP、UA等)

【django framework】ModelSerializerGenericAPIView&#xff0c;如何获取HTTP请求头中的信息(远程IP、UA等) 某些时候&#xff0c;我们不得不获取调用当前接口的客户端IP、UA等信息&#xff0c;如果是第一次用Django Restframework&#xff0c;可能会有点懵逼&#xff0c;那么…

机械女生,双非本985硕,目前学了C 基础知识,转嵌入式还是java更好?

作为单片机项目开发的卖课佬&#xff0c;个人建议&#xff0c;先转嵌入式单片机开发方向&#xff0c;哈哈。 java我也学过&#xff0c;还学过oracle、mysql数据库&#xff0c;只是当时没做笔记&#xff0c;找不好充分的装逼证据了。 从实习通过业余时间&#xff0c;学到快正式毕…

微信小程序 uniapp奶茶点单系统r4112

系统功能有&#xff1a;信点单小程序分为小程序部分和后台管理两部分&#xff0c;小程序部分的主要功能包含&#xff1a;用户注册登录&#xff0c;查看商品信息&#xff0c;加入购物车&#xff0c;结算并生成订单&#xff0c;订单管理&#xff0c;资讯管理&#xff0c;个人中心…

前端框架vue的样式操作,以及vue提供的属性功能应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Element-Plus: Select组件实现滚动分页加载

Element-Plus的select组件并没有自带滚动分页加载的功能&#xff0c;其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换&#xff1a; 但如果不想通过点击分页按钮的方式&#xff0c;利用滚动触底进行下一页加载的话&#xff0c;…

【设计模式】二、UML 类图与面向对象设计原则 之 UML概述

二、UML 类图与面向对象设计原则 &#xff08;一&#xff09;UML 类图 UML 概述类与类的UML图示类之间的关系 &#xff08;二&#xff09;面向对象设计原则 单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09;开闭原则&#xff08;Open-Closed Princip…

搜维尔科技:OptiTrack新型动捕相机最大限度地提高远距离精度

新的Primex 120和Slimx 120相机采用了最高分辨率。 3D追踪系统的全球领导者OptiTrack宣布推出三款最先进的运动捕捉相机:Primex120、Primex120W和Slimx120。新的更高分辨率相机提供了OptiTrack所期望的精度&#xff0c;具有更高的分辨率和更大的视野。这些新功能使更大的跟踪区…

Notepad++从文件夹查找文本内容

目录 一、背景二、Notepad搜索2.1 测试用例2.2 操作说明 一、背景 在日常的办公、学习或编程中&#xff0c;我们时长会遇到需要在大量文件中搜索特定文本内容的情况&#xff1a; 无论是快速定位某个项目中的代码片段&#xff1b;还是检索文档资料库中的相关信息等。 掌握如何…

探索非监督学习:解决聚类问题

目录 1 非监督学习的概念1.1 非监督学习的定义1.2 非监督学习的重要性 2 聚类问题的定义和意义2.1 聚类问题的定义2.2 聚类问题的意义2.3 聚类问题在非监督学习中的地位 3 聚类算法介绍3.1 K均值聚类3.2 层次聚类3.3 密度聚类 4 聚类问题的评估4.1 内部评估指标4.2 外部评估指标…

网络编程套接字(4)——Java套接字(TCP协议)

目录 一、Java流套接字通信模型 二、TCP流套接字编程 1、ServerSocket ServerSocket构造方法&#xff1a; ServerSocket方法: 2、Socket Socket构造方法&#xff1a; Socket方法&#xff1a; 三、代码示例&#xff1a;回显服务器 1、服务器代码 代码解析 2、客户端…

和泓海棠府——与阳光大海约会 悦享惬意生活

海南三亚海棠湾 四季如春的梦想在这里即可实现和泓海棠府 与阳光大海约会 悦享惬意生活 如果在三亚有一套房 你就可以把父母接过来一起住 尽己所能让老人圆一个海居梦 带着孩子一起在园林里探索自然 陪孩子度过每一个有趣的海边假期 你也可以随时沿着会唱歌的沙滩迎风漫…

Php和h5等静态文件的服务容器化部署(下)

一、接着上文 上文介绍了php/h5程序的部署过程&#xff0c;最后是通过slb把不同的服务暴露给外部。 本文试着把外部的配置交待清楚&#xff0c;包括&#xff1a; kong配置ingress配置 部署逻辑图见下&#xff1a; 总结&#xff1a; 去掉slb&#xff0c;引入ingress组件。…

新火种AI|GPT-4诞生1年,OpenAI把它放到了机器人上

作者&#xff1a;一号 编辑&#xff1a;美美 ChatGPT拥有了身体&#xff0c;机器人也有了灵魂。 从OpenAI在去年3月14日拿出GPT-4后&#xff0c;已经过了整整一年。显然&#xff0c;在GPT-4诞生之后的这一年&#xff0c;一切都迭代得太快了&#xff0c;从GPT-4展现多模态能力&…

Nginx、LVS、HAProxy工作原理和负载均衡架构

当前大多数的互联网系统都使用了服务器集群技术&#xff0c;集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务&#xff0c;这些集群可以是 Web 应用服务器集群&#xff0c;也可以是数据库服务器集群&#xff0c;还可以是分布式缓存服务器集群等等。 在实际应用…