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

    一、首先看最终效果 

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

    二、代码 

    1. 	class="addMoney">
    2. 				<view class="addMoneyTittle">
    3. 					充值金额
    4. 				view>
    5. 				<view class="selfaddmoney" :class="{'selfaddmoney1':isActive}">
    6. 					<text>自定义交费text> <input @focus="isActive = true" @blur="isActive = false" type="text"
    7. 						v-model="addmoney" class="selfinput"><text class="selfinputtext">元text>
    8. 				view>
    9. 				<view class="moneyLaut">
    10. 					<view class="money" v-for="(item,index) in money" @click="addmoneyValue(index)"
    11. 						:class="{'active':selectedIndex === index}">
    12. 						{{item.money}}<text class="selfinputtext">元text>
    13. 					view>
    14. 				view>
    15. 			view>
    16.  
    17.  
    18.  
    19. data() {
    20. 			return {
    21. 				show: false,
    22. 				show1: false,
    23. 				showOverlay: false, // 控制overlay显示与否的变量
    24. 				appointmentStatus: true, // 假设初始状态为预约失败  
    25. 				selectedOldMan: 0,
    26. 				selectedIndex: null, // 用于存储当前选中的元素索引 
    27. 				
    28. 				inforList: [{
    29. 					name: "吴海军",
    30. 					phon: "135 2589 3657",
    31. 					idNumber: "430525199401053654",
    32. 					identifier: "2358697454"
    33.  
    34. 				}],
    35. 				money: [{
    36. 					money: 500
    37. 				}, {
    38. 					money: 1000
    39. 				}, {
    40. 					money: 2000
    41. 				}, {
    42. 					money: 3000
    43. 				}, {
    44. 					money: 5000
    45. 				}, {
    46. 					money: 10000
    47. 				}, ],
    48. 				addmoney: 15000,
    49. 				isActive: false
    50. 			}
    51. 	addmoneyValue(index) {
    52. 				this.selectedIndex = index; // 设置当前选中的索引  
    53. 				this.addmoney = this.money[index].money;
    54. 			},
    55.  
    56. .addMoney {
    57. 		margin-top: 20rpx;
    58. 		height: 530rpx;
    59. 		padding: 30rpx 20rpx 54rpx 22rpx;
    60. 		background: #FFFFFF;
    61. 		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
    62. 		border-radius: 10rpx 10rpx 10rpx 10rpx;
    63.  
    64. 		.money {
    65. 			width: 202rpx;
    66. 			height: 124rpx;
    67. 			border-radius: 10rpx 10rpx 10rpx 10rpx;
    68. 			border: 1rpx solid #999999;
    69. 			text-align: center;
    70. 			line-height: 124rpx;
    71. 			margin-bottom: 20rpx;
    72. 		}
    73.  
    74. 		.selfaddmoney1 {
    75. 			display: flex;
    76. 			align-items: center;
    77. 			margin-top: 28rpx;
    78. 			margin-bottom: 36rpx;
    79. 			width: 650rpx;
    80. 			height: 76rpx;
    81. 			background: #F6F5FF;
    82. 			border-radius: 10rpx 10rpx 10rpx 10rpx;
    83. 			border: 2rpx solid #5448FF;
    84. 			text-align: center;
    85. 			line-height: 76rpx;
    86. 			padding-left: 32rpx;
    87. 			box-sizing: border-box;
    88. 		}
    89.  
    90. 		.selfaddmoney {
    91. 			display: flex;
    92. 			align-items: center;
    93. 			margin-top: 28rpx;
    94. 			margin-bottom: 36rpx;
    95. 			width: 650rpx;
    96. 			height: 76rpx;
    97. 			border-radius: 10rpx 10rpx 10rpx 10rpx;
    98. 			border: 2rpx solid #999999;
    99. 			text-align: center;
    100. 			line-height: 76rpx;
    101. 			padding-left: 32rpx;
    102. 			box-sizing: border-box;
    103. 		}
    104.  
    105. 		.selfinput {
    106. 			width: 400rpx;
    107. 			text-align: right;
    108.  
    109.  
    110.  
    111. 		}
    112.  
    113. 		.selfinputtext {
    114. 			font-size: 20rpx;
    115. 			margin-top: 8rpx;
    116. 		}
    117.  
    118. 		.addMoneyTittle {
    119. 			font-size: 32rpx;
    120. 			color: #5448FF;
    121. 		}
    122.  
    123. 		.moneyLaut {
    124. 			display: flex;
    125. 			justify-content: space-between;
    126. 			flex-wrap: wrap;
    127. 		}
    128. 	}

    搞定收工

  • 相关阅读:
    Application启动流程
    大模型之Bloom&LLAMA----RHLF(强化学习)
    基于深度学习YOLOv8\YOLOv5的骨科骨折诊断检测系统设计
    还没搞明白 Spring AOP 就去美团面试，结果被面试官 KO
    蓝桥杯 第 1 场算法双周赛 第三题 分组【算法赛】c++ 贪心+双指针
    MySQL高级_索引的数据结构
    python进阶（28）import导入机制原理
    【Rust学习】《Rust程序设计语言》第二章：编写猜数字游戏
    传统项目管理与敏捷项目管理
    Spring aop和事务源码连接口
  • 原文地址：https://blog.csdn.net/apple_70049717/article/details/136716782