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 { navTo, uploadFile } 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) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.url = data;
				})
			},
		});
	};
</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>