DaXingTiJian/weihu/pages/user/recharge.vue

<template>
	<view class="recharge">
		<view class="top">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<view class="name">{{Info.name}}</view>
					<view class="tel">{{Info.tel}}</view>
				</view>
				<view>
					<uni-icons type="vip" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;" size="70"></uni-icons>
				</view>
			</view>
			<view
				style="display: flex;justify-content: space-around; margin-top: 20rpx; background-color: #fff;border-radius: 40rpx; padding: 10rpx;">

				<view>
					<view class="info_title">
						总充值金额(真实)
					</view>
					<view class="price">{{Info.all_true_money}}</view>
				</view>
				<view>
					<view class="info_title" style="color: #18bc37;">
						剩余额度
					</view>
					<view class="price" style="color: #55aa00;">{{Info.amount}}</view>
				</view>
			</view>
			<view style="padding: 40rpx; margin-top: 40rpx;">
				<view class="title">充值金额</view>

				<input class="input" placeholder-style="color:#ccc;" v-model="true_money" placeholder="输入真实金额" />
				<view class="title">赠送金额</view>
				<input class="input" placeholder-style="color:#ccc;" v-model="give_money" placeholder="输入赠送的额度" />
				<view v-if="money_count>0">
					<view class="title">入账总额</view>
					<view class="heji">
						￥{{money_count}}
					</view>
				</view>


				<view class="button" @click="save()">充 值</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"
	import {
		  
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	
	
	let member_id=ref(0)
	let true_money = ref(null);
	let give_money = ref(null);
	let money_count = ref(0);
	const save = () => {
		if(true_money.value==null){
			uni.showToast({
				title: '请输入金额',
				icon: 'none'
			});
			return false;
		}
		if (money_count.value >= 99999999) {
			uni.showToast({
				title: '金额过大',
				icon: 'none'
			});
			return false;
		}
		uni.showModal({
			title: '提示',
			content: '确定充值吗？',
			confirmText:'确认',
			cancelText:'取消',
			success: function (r) {
				if (r.confirm) {
					 
				} else if (r.cancel) {
					 
				}
			}
		});
		
	}
	watch(true_money, (new1, old1) => {
		if (give_money.value == null) {
			give_money.value = 0
		}
		true_money.value = removeLeadingZero(true_money.value)
		money_count.value = Number(new1) + Number(give_money.value)
	})
	watch(give_money, (new1, old1) => {
		if (true_money.value == null) {
			true_money.value = 0
		}
		give_money.value = removeLeadingZero(give_money.value)
		money_count.value = Number(new1) + Number(true_money.value)
	})
	
	let Info=ref({});
	const GetMemberInfo=()=>{
	 
	}
	
	onLoad((e)=>{
	   member_id.value=e.member_id
	   GetMemberInfo()
	})

	function removeLeadingZero(str) {
		// 如果字符串是 "0"，则直接返回
		str = str + ""
		if (str == "0") {
			return str;
		}

		// 使用正则表达式去掉前导零
		return str.replace(/^0+/, '');
	}
</script>

<style scoped>
	.recharge {
		height: calc(100vh);
		background-color: #fff;
	}

	.top {
		height: 240rpx;
		padding: 50rpx;
		background-color: #FF8A5B;
		color: #fff;
	}

	.name {
		font-size: 45rpx;
		font-weight: 700;
	}

	.tel {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.info_title {
		font-size: 30rpx;
		color: #733e29
	}

	.price {
		text-align: center;
		color: #FF8A5B;
		font-weight: 700;
		margin-top: 10rpx;


	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}

	.input {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border: 0rpx;
		border-bottom: 1rpx solid #b0e2f9;
		height: 80rpx;
		color: #333;
	}

	.heji {
		color: #FF8A5B;
		font-size: 60rpx;
		margin-top: 20rpx;
		font-weight: 700;
	}

	.button {
		width: 100%;
		background-color: #FF8A5B;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		border-radius: 50rpx;
		margin-top: 80rpx;
	}
</style>