web-base-h5/pages/mine/balance/transfer.vue

<template>
	<view class="content">
		<view class="theform">
			<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
				<u-form-item borderBottom label-width="200rpx" :label="'转出账户'" prop="pkAccountName"
					@click="showAmount = true; " ref="item1">
					<u--input v-model="dataForm.pkAccountName" disabled disabledColor="#ffffff"
						:placeholder="'请选择'" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'转出编号'" prop="memberCode" ref="item1">
					<u--input v-model="dataForm.memberCode" disabled disabledColor="#F5F5F5;" border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" label="" borderBottom ref="item1">
					<view class="contentye">
						<text style="color: rgba(153, 153, 153, 1);">{{'当前余额'}}：</text>
						<text style="color: rgba(251, 48, 36, 1);">{{kzye}}</text>
					</view>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'转出姓名'" prop="memberName" borderBottom ref="item1">
					<u--input v-model="dataForm.memberName" disabled disabledColor="#F5F5F5;" border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'接收编号'" prop="toMemberCode" borderBottom ref="item1">
					<u--input @blur='checkName' :placeholder="'请输入'" v-model="dataForm.toMemberCode"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'接收姓名'" prop="toMemberName" borderBottom ref="item1">
					<u--input v-model="dataForm.toMemberName" disabled disabledColor="#F5F5F5;"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="`${'转账金额'}(￥)`" prop="transferMoney" borderBottom
					ref="item1">
					<u--input v-model="dataForm.transferMoney" :placeholder="'请输入'" border="none"></u--input>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'二级密码'" prop="payPwd" borderBottom ref="item1">
					<template v-if="!ifeye">
						<u--input type='password' v-model="dataForm.payPwd" :placeholder="'请输入'"
							border="none"></u--input>
						<image @click="ifeye=!ifeye" slot="right" style="width: 38rpx;
								height: 25rpx;" src="../../../static/images/my_eye.png" mode=""></image>
					</template>
					<template v-if="ifeye">
						<u--input v-model="dataForm.payPwd" :placeholder="'请输入'" border="none"></u--input>
						<image @click="ifeye=!ifeye" slot="right" style="width: 38rpx;
								height: 30rpx;" src="../../../static/images/my_eye2.png" mode=""></image>
					</template>
				</u-form-item>
				<u-form-item label-width="200rpx" :label="'备注'" prop="remarks" ref="item1">
					<u--input v-model="dataForm.remarks" :placeholder="'请输入'" border="none"></u--input>
				</u-form-item>

				<u-picker @cancel='showAmount=false' :show="showAmount" ref="uPicker" :columns="accountList"
					@confirm="confirm" keyName='pkTransactionKeyVal'></u-picker>
			</u--form>





		</view>
		<view class="btnbox">
			<u-button class="subbtn" @click="submit">{{'确定'}}</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import * as bal from "@/config/balance.js"
	export default {
		data() {
			return {
				showAmount: false,
				dataForm: {
					transferMoney: "",
					payPwd: "",
					remarks: "",
					pkAccountName: "",
					pkAccount: "",
				},
				accountList: [],
				rules: {
					toMemberCode: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					transferMoney: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					payPwd: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					pkAccountName: [{
						required: true,
						message: '请选择',
						trigger: ['change']
					}],
				},
				widthDrwaData: {},
				ifeye: false,
				userInfo: {},
				kzye: "0.00",

			}
		},
		onLoad() {
			this.getList()
			this.userInfo = uni.getStorageSync('User')
			this.zzMethods()

		},
		methods: {
			zzMethods() {
				if (this.userInfo.serviceCode) {
					this.dataForm.memberCode = this.userInfo.serviceCode
				} else {
					this.dataForm.memberCode = this.userInfo.memberCode
				}
				bal.getTransferChineseName({
					memberCode: this.dataForm.memberCode
				}).then(
					(res) => {
						if (res.code == 200) {
							this.$set(this.dataForm, "memberName", res.memberName)
						}
					}
				);
			},
			getList() {
				bal.getTransferAccount().then(res => {
					this.accountList = [res.data]
				})

			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					bal.addTransfer(this.dataForm).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			confirm(e) {

				this.dataForm.pkAccountName = e.value[0].pkTransactionKeyVal
				this.dataForm.pkAccount = e.value[0].pkId
				this.showAmount = false
				bal.getTransferMember({
					pkAccount: this.dataForm.pkAccount
				}).then(res => {
					this.kzye = res.data
				})

			},
			checkName() {

				bal.getTransferChineseName({
					memberCode: this.dataForm.toMemberCode
				}).then(
					(res) => {
						if (res.code == 200) {
							this.$set(this.dataForm, "toMemberName", res.memberName)
						}
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F2F2F2;

		.theform {
			margin-top: 6rpx;
			background: #FFFFFF;
			padding: 20rpx 23rpx 48rpx 23rpx;

			.contentye {
				font-size: 28rpx;
				margin-left: 200rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}

		}

		.btnbox {
			margin-top: 38rpx;
			padding: 0 20rpx;

			.subbtn {
				background: #005BAC;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}


	}
</style>