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

一、首先看最终效果 

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

二、代码 

	<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;
		}
	}

搞定收工

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

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

相关文章

力扣日记3.14-【贪心算法篇】376. 摆动序列

力扣日记&#xff1a;【贪心算法篇】376. 摆动序列 日期&#xff1a;2024.3.14 参考&#xff1a;代码随想录、力扣 376. 摆动序列 题目描述 难度&#xff1a;中等 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;…

【总结】服务器无法连接外网,设置http代理解决

问题 某天想要在服务器上下载编译github上某开源项目&#xff0c;结果发现访问不了外网。 于是找运维&#xff0c;运维给了个http代理服务器地址。简单操作后&#xff0c;就可以访问外网了。 解决 在需要访问外网的机器上&#xff0c;执行以下命令&#xff1a;http_proxyhtt…

rust学习(简单链表)

编写一个简单链表&#xff0c;主要遇到的问题就是next指针&#xff08;按照C的写法&#xff09;的数据如何定义。按照网上的建议&#xff0c;一般定义如下&#xff1a; struct Node {pub value:u32,pub next:Option<Rc<RefCell<Node>>>, //1 }1.用Option主要…

GoLang:云原生时代致力于构建高性能服务器的后端语言

Go语言的介绍 概念 Golang&#xff08;也被称为Go&#xff09;是一种编程语言&#xff0c;由Google于2007年开始设计和开发&#xff0c;并于2009年首次公开发布。Golang是一种静态类型、编译型的语言&#xff0c;旨在提供高效和可靠的软件开发体验。它具有简洁的语法、高效的编…

外卖小程序-购物车模块表结构设计和后端代码

表结构设计 添加购物车代码 Service public class ShoppingCartServiceImpl implements ShoppingCartService {Autowiredprivate ShoppingCartMapper shoppingCartMapper;Autowiredprivate DishMapper dishMapper;Autowiredprivate SetmealMapper setmealMapper;/*** 添加购物…

在浏览器的控制台定义变量,清除后还是报错变量已声明

报错&#xff1a;Uncaught SyntaxError: Identifier words has already been declared 在浏览器的控制台&#xff08;Console&#xff09;中定义的变量是全局变量&#xff0c;它们会保留在当前的浏览器窗口或标签页的生命周期中。即使你清除了控制台的内容&#xff08;例如通过…

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…

基于Java的海南旅游景点推荐系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…

使用stream流合并多个List(根据实体类特定属性合并)

开发情景 现有多个List集合,其中都是一样的实体类,这里我想根据实体类的特定属性将它们合并在一起,形成一个最终的List集合。 这里主要用到了Stream流的flatMap方法与reduce方法。 flatMap:可以将多个Stream流合并在一起,形成一个Stream流。 reduce:可以将Stram流中的元…

Oracle登录错误ERROR: ORA-01031: insufficient privileges解决办法

这个问题困扰了我三个星期&#xff0c;我在网上找的解决办法&#xff1a; 1.控制面板->管理工具->计算机管理->系统工具->本地用户和组->ORA_DBA组。 但我电脑上根本找不到。 2.在oracle安装目录下找到oradba.exe运行。 最开始我都不到这个oradba.exe文件在哪…

Java基于微信小程序的校园订餐小程序的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Linux本地部署开源AI的PDF工具—Stirling PDF并实现公网随时访问

文章目录 1. 安装Docker2. 本地安装部署StirlingPDF3. Stirling-PDF功能介绍4. 安装cpolar内网穿透5. 固定Stirling-PDF公网地址 本篇文章我们将在Linux上使用Docker在本地部署一个开源的PDF工具——Stirling PDF&#xff0c;并且结合cpolar的内网穿透实现公网随时随地访问。 S…

PBKDF2算法:保障密码安全的利器

title: PBKDF2算法&#xff1a;保障密码安全的利器 date: 2024/3/14 16:40:05 updated: 2024/3/14 16:40:05 tags: PBKDF2算法密码安全性迭代盐值密钥 PBKDF2算法起源&#xff1a; PBKDF2&#xff08;Password-Based Key Derivation Function 2&#xff09;算法是一种基于密码…

Pycharm / idea上传项目到 Github 报错

报错内容: gitgithub.com: Permission denied (publickey).翻译–>gitgithub.com:权限被拒绝(公钥). 出现上述报错的原因:   客户端与服务端的ssh key不匹配   客户端与服务端未生成 ssh key 登录上Github查看ssh key是否存在&#xff0c;如果存在&#xff0c;那么可以对…

机器学习-0X-神经网络

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中神经网络算法。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化接口实现 参考 机器学习定义 关于机…

手写简易操作系统(八)--特权级以及TSS

前情提要 我们在这里梳理一下上面几节讲的内容 首先是计算机开机&#xff0c;BIOS接过第一棒&#xff0c;将第一个扇区MBR的内容导入到内存 0x7c00 的位置。 然后就是MBR中我们自己写的内容&#xff0c;将Loader导入到 0x600 的地址&#xff0c;Loader设置了GDT&#xff0c;…

智能工厂核心功能系统-MES生产管理系统

MES在未来智能制造中扮演着至关重要的角色&#xff0c;通过其在生产管理中的应用&#xff0c;将帮助企业实现智能化转型&#xff0c;提升生产效率和产品质量&#xff0c;推动整个制造业向着更加智能、高效、可持续的方向发展。 通过对MES在未来智能制造发展趋势中的地位进行深…

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播

ip广播智慧工地广播喊话号角 IP网络号角在塔吊中应用 通过寻呼话筒预案广播 SV-704XT是深圳锐科达电子有限公司的一款壁挂式网络有源号角&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和号角喇叭输出播放&#xff0c;可达到功率50W。SV-704XT内置有…

如何配置Apache的反向代理

目录 前言 一、反向代理的工作原理 二、Apache反向代理的配置 1. 安装Apache和相关模块 2. 配置反向代理规则 3. 重启Apache服务器 三、常见的使用案例 1. 负载均衡 2. 缓存 3. SSL加密 总结 前言 随着Web应用程序的不断发展和扩展&#xff0c;需要处理大量的请求和…

企业架构设计方法与实践中的架构治理演进、架构评估方法、架构成熟度模型

企业架构设计方法与实践中的架构治理演进、架构评估方法、架构成熟度模型。 架构治理演进: 架构治理是指通过设立和执行一套政策和程序,来管理和控制一个组织的架构活动。架构治理演进是一个持续的过程,需要根据组织的实际情况进行定期审查和调整。 在演进过程中,重点需要…