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"/>
			</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 {pathToBase64} from "@/utils/image-tools/index.js";
	import { navTo } 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)
		state.form.cardNumber=option.cardNumber;
		if(option.value){
			state.form=JSON.parse(decodeURIComponent(option.value))
		}
	});
	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, //公司营业执照统一社会信用代码
				'bankCardId':state.form.cardNumber, //对公名称
				'imageUrl':state.form.url,  //密码
			},
			method: "POST",
			showLoading: true,
		};
		request(queryRecharge, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				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}`
		});
		// navTo(`/subpackage/personal-center/setting/bank-card/bank-card?choiceCard=1`)
	}
	const cardDbImageOcr = (val : any) => {
		var imageType = val;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				pathToBase64(res.tempFilePaths[0])
					.then((path) => {
						var data = {
							source: "1",
							agencyId: "52010106004",
							imageType: imageType,
							fileName: res.tempFilePaths[0],
							imageBase64: path,
						};
	
						const options = {
							type: 2,
							data: data,
							method: "POST",
							showLoading: true,
						};
						console.log("cdfdf")
						request(etcOcrCard, options).then((res) => {
							const data = stringToJson(res.bizContent);
							state.form.url = data.imageUrl;
						});
					})
					.catch((error) => { });
			},
		});
	};
</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>