一、首先看最终效果
先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额
二、代码
<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;}}搞定收工
