JP-ChargeTeam51/pages/user/finance/refundInfo.vue

<template>
	<view>
		<ujp-navbar title="收款人账户信息"></ujp-navbar>
		<view class="withdraw">
			<view class="withdraw-head ">
				<b class="asterisk"><text>*</text>收款户名</b>
				<u-input class="textarea" type="textarea" 
				v-model="info.accountName"
				placeholder="请填写收款户名" height="96" cursor-spacing="8" />
		
			</view>
			<view class="withdraw-head ">
				<b class="asterisk"><text>*</text>开户银行</b>
				<u-input class="textarea" type="textarea"
				v-model="info.bankName"
				 placeholder="请填写收款银行全称" height="96" cursor-spacing="8" />
		
			</view>
			<view class="withdraw-head border-n">
				<b class="asterisk"><text>*</text>收款账号</b>
				<u-input class="textarea" v-model="info.accountNo"
				type="textarea" placeholder="请填写收款账号" height="96" cursor-spacing="8" />
		
			</view>
			<view style="bottom:0;position:absolute;width: 100%;padding: 40rpx;" >
				<u-button shape="circle" @click="submit()"   style="background-color:#00b962;color:white">申请退款</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from "@/apis/refund.js"
	
	export default {
		data() {
			return {
					account:{},
				info: {
					accountName: '',
					bankName: '',
					accountNo: ""
				},
			}
		},
		onLoad(){
			this.personAccount()
		},
		methods: {
			submit(){
				if(!this.info.accountName){
						uni.showToast({
							title: "请填写收款户名",
							icon: "none"
						})
						return false
				}
				if(!this.info.bankName){
						uni.showToast({
							title: "请填写收款银行全称",
							icon: "none"
						})
						return false
				}
				if(!this.info.accountNo){
						uni.showToast({
							title: "请填写收款账号",
							icon: "none"
						})
						return false
				}
				
				api.personAccountRefundApplication({
					amount:this.info.availableAmount,
					refundChannel:'wechat',
					applicationChannel:"E",
					bankName:this.info.bankName,
					accountName:this.info.accountName,
					accountNo:this.info.accountNo,
				}).then((res) => {
					uni.hideLoading()
					if(res.result){
						
						//('personAccountRefundApplication'+JSON.stringify(res));
						uni.redirectTo({
							url:'refundApp'
						})
						
					}
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			personAccount(){
				api.personAccount({
					
				}).then((res) => {
					this.info = res.data;				
					
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			}
		}
	}
</script>

<style  lang="scss" scoped >
	.asterisk {
		position: relative;
	
		text {
			position: absolute;
			top: 0px;
			left: -14rpx;
			color: #EE3138;
		}
	}
.textarea {
		background-color:#f2f2f2;
		margin-top: 12px;
		line-height: 20px;
		border-radius: 4px;
		color: rgba(136, 136, 136, 100);

		.uni-textarea-placeholder {
			padding: 0 16rpx;

		}

		::v-deep .uni-textarea-textarea {
			width: 90%;
			padding: 0 16rpx;

		}
	}
	.withdraw {
		margin-bottom: 8px;
		background-color: #fff;
		padding: 0px 16px 0 16px;

		.withdraw-head {
			padding: 16px 0;
			border-bottom: 1px solid #E5E7EA;

			align-items: center;
			position: relative;

			.unit {
				position: absolute;
				top: 34rpx;
				right: 0;

			}

			.whthdraw-price {
				font-size: 18px;
				color: #101010;
				font-weight: 600;
			}

			b {
				color: rgba(119, 119, 119, 100);
				font-size: 16px;
			}

			span {
				width: 60%;
				float: right;
				text-align: left;
				font-size: 16px;
				color: #333333;
			}

			@media screen and (max-width:320px) {
				span {
					width: 55%;
				}
			}

		}

		.withdraw-main {
			border-top: 1px solid #f7f7f7;
			border-bottom: 1px solid #f7f7f7;

			margin: 16px 0;
			padding: 16px 0;

			.withdraw-input {
				margin-top: 32px;
				display: flex;
				align-items: center;
				font-size: 28px;

				::v-deep .uni-input-input {
					font-size: 28rpx;
				}
			}
		}

		.withdraw-foot {
			display: flex;
			align-items: center;

			p {
				color: #999
			}

			span {
				color: #2979FF;
				margin-left: 16px;

			}
		}
	}
</style>