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

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

搞定收工

相关文章:

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

一、首先看最终效果 先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额 二、代码 <view class"addMoney"><view class"addMoneyTittle">充值金额</view><view class"selfaddmoney" :class"{…...

论文阅读——RingMo

RingMo: A Remote Sensing Foundation Model With Masked Image Modeling 与自然场景相比&#xff0c;RS图像存在以下困难。 1&#xff09;分辨率和方位范围大&#xff1a;受遥感传感器的影响&#xff0c;图像具有多种空间分辨率。此外&#xff0c;与自然图像的实例通常由于重…...

Hadoop,Hive 数据预处理CR

记录一次大材小用,我在将.csv电影数据集 电影json数据 导入MySQL时,出现了报错: 很明显,意味着.csv中的数据有非utf8编码的, 尝试使用file查看了下.csv文件的编码格式: 如果不确定原始编码,可以先用file命令尝试检测一下: file -i input.csv该命令会显示文件的MIME类型…...

小程序开发——获取设备信息 API(三)

ty.device.getShareDeviceInfo 获取共享设备信息 需引入DeviceKit&#xff0c;且在>2.2.0版本才可使用 请求参数 Object object 属性类型默认值必填说明deviceIdstring是deviceId 设备 idcompletefunction否接口调用结束的回调函数&#xff08;调用成功、失败都会执行&am…...

Vue2 + node.js项目

1、Vue2 vue2主要功能包括登入、退出、用户权限、表格的增删改查、文件下载。 Vue2项目地址https://gitee.com/www6/finance1.git 2、node.js编写后端接口 2.1、项目初始化 后端地址https://gitee.com/www6/finance-backend.git 创建项目 npm install -g koa-generator …...

如何使用IDE端通义灵码

如何使用IDE端通义灵码 第一步&#xff1a;安装IDE插件&#xff08; VS Code 和 JetBrains 二选一&#xff09; 如何下载安装VS Code &#xff1a;https://code.visualstudio.com 如何下载安装JetBrains&#xff1a;https://www.jetbrains.com/idea/download 第二步&#x…...

微服务分布式springcloud的体育场地预约系统演kdm1z

体育场馆设施预约系统是在实际应用和软件工程的开发原理之上&#xff0c;运用java语言以及Springcloud框架进行开发。首先要进行需求分析&#xff0c;分析出体育场馆设施预约系统的主要功能&#xff0c;然后设计了系统结构。整体设计包括系统的功能、系统总体结构、系统数据结构…...

IDEA开启Run Dashboard

1、Run Dashboard是什么&#xff0c;为什么要使用 Run Dashboard 是 IntelliJ IDEA 中的一个工具窗口&#xff0c;用于管理和监视项目中正在运行的应用程序和配置。它提供了一种集中管理运行和调试过程的方式&#xff0c;可以让开发人员更方便地查看和控制正在运行的应用程序。…...

小程序学习3 goods-card

pages/home/home home.wxml <goods-listwr-class"goods-list-container"goodsList"{{goodsList}}"bind:click"goodListClickHandle"bind:addcart"goodListAddCartHandle"/> <goods-list>是一个自定义组件&#xff0c;它具…...

【投稿优惠-EI稳定检索】2024年图像处理与机械系统工程国际学术会议 (ICIPMSE 2024)

【投稿优惠-EI稳定检索】2024年图像处理与机械系统工程国际学术会议 (ICIPMSE 2024) 大会主题: (主题包括但不限于, 更多主题请咨询会务组苏老师) 图像处理 基于图像的渲染 计算机视觉 可视化分析 模式识别 3D打印 渲染和动画 渲染技术 电脑动画 基于草图的建模 机械…...

Linux系列

安装系列 1.MySQL安装 我们要通过rpm&#xff0c;进行MySQL数据库的安装&#xff0c;主要的步骤如下&#xff1a; rpm -qa 查询当前系统中安装的所有软件 rpm -qa | grep mysql 查询当前系统中安装的名称带mysql的软件 rpm -…...

SQL笔记 -- 黑马程序员

SQL目录 文章目录 SQL目录一、SQL分类1、DDL2、数据类型3、DML4、DQL1&#xff09;基本查询2&#xff09;条件查询3&#xff09;聚合函数查询4&#xff09;分组查询5&#xff09;排序查询6&#xff09;分页查询 5、DCL 一、SQL分类 分类说明DDL数据定义语言&#xff0c;用来定…...

C# MES通信从入门到精通(1)——串口传输文件

前言: 在上位机软件开发领域,有一些工厂的mes系统需要我们通过串口发送文件的方式把一些图片或者检测数据csv文件等发送给服务器,这种方式是一些比较旧的工厂采用的方式,但是这种方式也是存在的,本文就是讲解如何使用串口发送文件详情见下文。 1、串口发送文件思路 将需…...

论文阅读-federated unlearning via class-discriminative pruning

论文阅读-federated unlearning via class-discriminative pruning FUCP 通过类别区分性剪枝进行联邦遗忘 综述中描述&#xff1a;属于面向全局模型中的局部参数调整 利用卷积层的结构特定进行联邦忘却学习&#xff0c;wang等人提出了针对图像分类任务的联邦忘却学习算法FUCP&…...

研发效能DevOps: OpenEuler 部署 drone 持续集成平台

目录 一、实验 1.环境 2.OpenEuler 部署 drone 持续集成平台 二、问题 1.drone登录失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统架构版本IP备注LinuxopenEuler22.03 LTS SP2 192.168.204.145&#xff08;动态&#xff09; 192.168.204.141&…...

C#,图论与图算法,图着色问题(Graph Coloring)的威尔士-鲍威尔(Welch Powell Algorithm)算法与源代码

Welsh, D.J.A. and Powell, M.B. (1967) An Upper Bound for the Chromatic Number of a Graph and Its Application to Timetabling Problems. 《The Computer Journal》, 10, 85-86. 《The Computer Journal》 1 图着色算法概述 1967年&#xff0c;Welsh和Powell算法引入了…...

用python写一个脚本,实现加速3X并压缩mp4视频以降低文件大小。

为了实现您的需求&#xff0c;我们将使用Python的moviepy库来加速MP4视频3倍并使用ffmpeg选项来进行压缩&#xff0c;以降低文件大小。如果您还没有安装这些库&#xff0c;请先通过以下命令进行安装&#xff1a; pip install moviepy这是一个步骤概述&#xff1a; 读取视频文…...

Flink广播流 BroadcastStream

文章目录 前言BroadcastStream代码示例Broadcast 使用注意事项 前言 Flink中的广播流&#xff08;BroadcastStream&#xff09;是一种特殊的流处理方式&#xff0c;它允许将一个流&#xff08;通常是一个较小的流&#xff09;广播到所有的并行任务中&#xff0c;从而实现在不同…...

IP数据报格式

每一行都由32位比特&#xff0c;即4个字节组成&#xff0c;每个格子称为字段或者域。IP数据报由20字节的固定部分和最大40字节的可变部分组成。 总长度 总长度为16个比特&#xff0c;该字段的取值以字节为单位&#xff0c;用来表示IPv4数据报的长度(首部长度数据载荷长度)最大…...

GET https://registry.npm.taobao.org/xxxx error (CERT_HAS_EXPIRED)解决

PNPM用的阿里源&#xff0c;提示意思是证书过期了&#xff0c;参考网上的解决办法。执行 pnpm config set registry https://registry.npmmirror.com 再用pnpm config get registry查看&#xff0c;确实是 https://registry.npmmirror.com 但是仍旧报错&#xff0c;发现还…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...