zhywpt-sp/subpackage/after-sale/ETC-log-off/refund-information-add.vue

<template>
	<view class="oderPage">
		<view class="from">
			<view>
				<view class="from_item">
					<text>开户人姓名:</text>
					<input type="text" name="" id="" placeholder="请输入开户人姓名" v-model="state.cusName">
				</view>
				<view class="from_item">
					<text>开户行：</text>
					<picker @change="bindPickerChange" :value="state.index" :range="bankData">
						<view class="uni-input">{{state.index==-1?"请选择":bankData[state.index]}}</view>
					</picker>
				</view>
				<view class="from_item">
					<text>开户行支行：</text>
					<input placeholder="开户行支行" v-model="state.branchName">
				</view>
				<view class="from_item">
					<text>银行卡号：</text>
					<input type="number" placeholder="请输入银行卡号" v-model="state.bankCardId" maxlength="18">
				</view>
				<view class="from_item">
					<text>开户行地址：</text>
					<picker mode="region" @change="choiceAddress">
						<view>{{state.addressShow}}</view>
					</picker>
				</view>
			</view>

		</view>
		<button class="submit" @click="sure()">确认</button>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from "vue";
	import { checkStr, msg } from "@/utils/utils";
	import { navTo } from "@/utils/utils";
	import { CancellationRefundInforAdd } from "@/utils/network/api.js";
	import { bankData } from "@/datas/bank.js";
	import { onLoad } from "@dcloudio/uni-app";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption";
	import {
		getItem
	} from "@/utils/storage";
	const state = reactive({
		phone: "",
		bank: "",
		address: "", //地址
		addressShow: "请选择开户行地址",  //展示的地址
		branchName: "",  //开户行支行
		index: -1,
		bankCardId: "",  //银行卡号
		cusName: "",
		customerIdNum: "",
		cusTel: "",
		cusType: ""
	});

	/*视图进入后操作*/
	onLoad((option) => {
		console.log("option", option)
		state.cusTel = option.mobile
		state.customerIdNum = option.customerIdnum
		state.cusType = option.userType
	});

	const sure = () => {
		if (!state.cusName) {
			msg("请输入开户人姓名");
			return;
		}
		console.log("state.index ", state.index)
		if (state.index == -1) {
			msg("请选择开户行！");
			return;
		}
		if (!state.branchName) {
			msg("请输入开户行支行！");
			return;
		}
		if (!state.bankCardId) {
			msg("请输入银行卡号！");
			return;
		}
		if (state.addressShow == "请选择开户行地址") {
			msg("请选择开户行地址！");
			return;
		}
		var data = {
			customerIdNum: state.customerIdNum,  //身份证号
			bankType: Number(state.index) + 1,  //开户行
			province: state.address[0],  //开户行所在的省
			sell: state.address[1],      //开户行所在的市
			cusName: state.cusName,   //开户人名称
			bankCardId: state.bankCardId,   //银行卡号
			cusTel: state.cusTel, //联系方式
			operateType: 1,   //退款方式 1:银行卡 2现金
			branchName: state.branchName,   //开户行支行名称
			cusType: state.cusType,//用户类型
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		console.log("options", options)
		request(CancellationRefundInforAdd, options).then((res) => {

			const data = stringToJson(res.bizContent);
			console.log("data", data)
			uni.navigateBack({
				delta: 1
			})
		});

	}

	function choiceAddress(e) {
		console.log("e", e.detail.value)
		state.address = e.detail.value;
		state.addressShow = state.address[0] + "-" + state.address[1] + "-" + state.address[2]
	}

	function bindPickerChange(e) {
		state.index = e.detail.value
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #EEF7F7;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-icon__icon {
		top: -4px !important;
	}

	.oderPage {
		flex: 1;
		width: 100%;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 750rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			padding: 75rpx 0;

			.title {
				font-size: 28rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #717171;
				margin-bottom: 40rpx;
			}

			view {
				font-size: 40rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #2A2A2A;
				font-weight: bold;
			}
		}

		.from {
			background-color: #fff;
			padding: 0 30rpx;

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: #DCDCDC 1px solid;
				align-items: center;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;

				input {
					text-align: right;
				}
			}
		}
	}

	.submit {
		background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
		z-index: 999;
		// position: fixed;
		// bottom: 60rpx;
		// left: 50%;
		// transform: translate(-50%);
		margin: 30rpx auto;
	}

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

		.btn {
			flex: 1;
			background: transparent;
			font-size: 30rpx;
			color: #15E5C1;
			z-index: 999;

		}
	}

	.agreen {
		color: rgb(25, 190, 197);
	}

	::v-deep .code>view {
		text-align: right !important;
	}

	::v-deep .code {
		width: 100% !important;
	}
</style>