充值界面修改

src/pages/BankModule/Recharge/Recharge.vue

@@ -35,7 +35,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="contentBox" v-if="!depotMoneyother">
+		<view class="contentBox" style="display: none;" v-if="!depotMoneyother">
 			<!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
 			<view class="contentDiv">
 				<view class="headview">
@@ -116,8 +116,20 @@
 			</view>
 
 			<!-- 充值其它金额 -->
+			<view class="moneyWrapper">
+				<view class="moneyItem" @click="depotMoney(item.value, index)"
+					v-bind:class="MoneyIndex == index ? 'active' : ''" :data-money="item.value || 0"
+					v-for="(item, index) in MoneyList" :key="index">
+					<view> {{ item.value }}</view>
+					<view> {{ item.lable }}</view>
+				</view>
+				<view class="other">
+					<input v-model="inputOtherM" @input="inputControl" @blur="ReturnToTop" placeholder="其他金额，最低3元"
+						placeholder-class="placeholderinputOtherM" type="text" maxlength="6" />
+				</view>
+			</view>
 			<!-- <view class="OtherMoney" v-if="isOtherMoney"> -->
-			<view class="OtherMoney">
+			<view class="OtherMoney" style="display: none;">
 				<span>￥</span>
 				<input v-model="inputOtherM" @input="inputControl" @blur="ReturnToTop" placeholder="请输入其他金额，最低3元"
 					placeholder-class="placeholderinputOtherM" type="text" maxlength="6" />
@@ -293,6 +305,15 @@
 		name: "Recharge",
 		data() {
 			return {
+				showPopover: false,
+				// 通过 actions 属性来定义菜单选项
+				actions: [{
+					text: "复制卡号"
+				}, {
+					text: "账户明细"
+				}, {
+					text: "常见问题"
+				}],
 				popshow: false,
 				// 输入其它金额
 				isOtherMoney: false,
@@ -380,6 +401,17 @@
 			}
 		},
 		methods: {
+			onSelect(action) {
+				if (action.text == "复制卡号") {
+					this.CopyCardNumber();
+				} else if (action.text == "账户明细") {
+					this.BackToMini('purchaseDetail');
+				} else if (action.text == "常见问题") {
+					uni.navigateTo({
+						url: `../../commonProblem/commonProblem`
+					})
+				}
+			},
 			async beforeQuerySignStatus() {
 				await this.QueryUserInfo();
 				// 渤海银行要判断是否有代扣签约
@@ -1484,6 +1516,74 @@
 		text-align: center;
 	}
 
+	.moneyWrapper {
+		margin-top: 10rpx;
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+
+		.moneyItem {
+			width: 210rpx;
+			height: 120rpx;
+			background: #f8f8f8;
+			border-radius: 12rpx;
+			display: flex;
+			justify-content: center;
+			margin-right: 18rpx;
+			font-family: PingFangSC-Medium, PingFang SC;
+			margin-bottom: 24rpx;
+
+			view {
+				align-self: center;
+				color: #333333;
+			}
+
+			view:first-child {
+				font-size: 40rpx;
+				font-weight: 500;
+			}
+
+			view:last-child {
+				font-size: 30rpx;
+			}
+		}
+
+		.moneyItem:nth-child(3n) {
+			margin-right: 0;
+		}
+
+		.active {
+			border: 3rpx solid #04b871;
+
+			view {
+				color: #04b871;
+			}
+		}
+
+		.other {
+			width: 444rpx;
+			height: 120rpx;
+			line-height: 120rpx;
+			text-align: center;
+			background: #f8f8f8;
+			border-radius: 12rpx;
+
+			/deep/.uni-input-wrapper {
+				position: absolute;
+				width: 444rpx;
+				height: 120rpx;
+				font-size: 40rpx;
+				font-weight: 500;
+				color: #333333;
+			}
+
+			/deep/.uni-input-input {
+				height: 120rpx;
+				line-height: 120rpx;
+			}
+		}
+	}
+
 	.MoneyBox {
 		flex-wrap: wrap;
 		height: auto;
@@ -1665,6 +1765,7 @@
 		color: #ffffff;
 		line-height: 92rpx;
 	}
+
 	.service {
 		margin-top: 118rpx;
 		width: 100%;

src/pages/IcbcModule/Recharge/Recharge.vue

@@ -89,7 +89,7 @@
 			}}</span>
 				</view>
 			</view>
-			<view class="moneyWrapper" style="display: none;">
+			<view class="moneyWrapper">
 				<view class="moneyItem" @click="depotMoney(item.value, index)"
 					v-bind:class="MoneyIndex == index ? 'active' : ''" :data-money="item.value || 0"
 					v-for="(item, index) in MoneyList" :key="index">