zhywpt-sp/subpackage/after-sale/account-recharge/recharge.vue

<template>
	<view class='wrap'>
		<u-form :model="form" ref="form1" label-width=160 border-bottom=false>
			<u-form-item label="用户名" border-bottom=true>
				<u-input placeholder='请输入用户名' type="text" v-model="state.form.name" />
			</u-form-item>
			<u-form-item label="充值金额">
				<u-input placeholder='请输入充值金额' type="text" v-model="state.form.fee" @input="checkNum" />
			</u-form-item>
			<u-form-item label="银行卡">
				<view class='card' @click='goBank()'>
					<u-input placeholder='请输入银行卡号' v-model="state.form.cardNumber" type="text" disabled />
					<u-icon name="arrow-right" color='#ccc'></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="充值凭证">
				<view class='item' @click="cardDbImageOcr(1)">
					<image v-if="!state.form.url" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
					</image>
					<image v-else class="icon" :src="state.form.url"></image>
				</view>
			</u-form-item>
			<button @click='goRecharge()'>充值</button>
		</u-form>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { etcOcrCard, queryRecharge } from "@/utils/network/api.js";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption.js";
	import { navTo, uploadFile, msg } from "@/utils/utils";
	import { onLoad } from "@dcloudio/uni-app";
	const state = reactive({
		form: {
			name: '',//对公用户登录名
			fee: '',
			cardNumber: '',
			url: '',
		}
	})
	onLoad((option : any) => {
		console.log("option", option.cardNumber)
		if (option.value) {
			state.form = JSON.parse(decodeURIComponent(option.value))
		}
		if (option.cardNumber) {
			state.form.cardNumber = option.cardNumber;
		}
		if (option.name) {
			state.form.name = option.name
		}
	});
	const goRecharge = () => {
		for (var i in state.form) {
			if (!state.form[i]) {
				msg('请把信息填写完整！')
				return;
			}
		}
		const options = {
			type: 2,
			data: {
				'accountId': state.form.name, //账户编号
				'fee': state.form.fee * 100, //公司营业执照统一社会信用代码
				'bankCardId': state.form.cardNumber, //对公名称
				'imageUrl': state.form.url,  //密码
			},
			method: "POST",
			showLoading: true,
		};
		request(queryRecharge, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				msg("充值成功")
				setTimeout(() => {
					if (data.status == 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				}, 1500)

				console.log("充值成功", data)
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const goBank = () => {
		const params = encodeURIComponent(JSON.stringify(state.form));
		uni.redirectTo({
			//关闭当前页面，跳转到应用内的某个页面。
			url: `/subpackage/personal-center/setting/bank-card/bank-card?choiceCard=1&value=${params}`
		});
	}
	const cardDbImageOcr = (val : any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.url = data;
				})
			},
		});
	};
	// 校验金额输入框
	const checkNum = (event) => {
		let sNum = event.target.value.toString(); //先转换成字符串类
		if (sNum.indexOf('.') == 0) {//第一位就是 .
			console.log('first str is .')
			sNum = '0' + sNum
		}
		sNum = sNum.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
		sNum = sNum.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
		sNum = sNum.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
		sNum = sNum.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
		//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		if (sNum.indexOf(".") < 0 && sNum != "") {
			sNum = parseFloat(sNum);
		}
		console.log('输入的值1', sNum)
		setTimeout(() => {
			state.form.fee = sNum
		}, 20)

	}
</script>

<style scoped>
	.wrap {
		padding: 0 30rpx;
	}

	/deep/.u-form-item--right__content__slot {
		display: flex;
		justify-content: space-between;
	}

	image {
		width: 200rpx;
		height: 200rpx;
	}

	button {
		width: 75%;
		height: 80rpx;
		margin-top: 450rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
	}

	.card {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
</style>