xingmingyi_applet/pages/user/funManage/addCash.vue

<template>
	<view class="home">
		<view class="putWarp dffd">
			<block v-if="type == 1">
				<view class="title">{{ edit ? '编辑支付宝' : '添加支付宝' }}</view>
				<view class="subtit fontmid textgrey">请绑定本人的支付宝账号</view>
				<view class="putin dffs bb">
					<text class="fontmid">实名姓名</text>
					<input @confirm="clickHandle" type="text" v-model="name" placeholder="" />
				</view>
				<view class="putin dffs bb">
					<text class="fontmid">支付宝账号</text>
					<input @confirm="clickHandle" type="text" v-model="num" placeholder="" />
				</view>
			</block>
			<block v-if="type == 2">
				<view class="title">添加银行卡</view>
				<view class="subtit fontmid textgrey">请绑定本人的银行卡账号</view>
				<view class="putin dffs bb">
					<text class="fontmid">持卡人</text>
					<input @confirm="clickHandle" type="text" v-model="idname" placeholder="" />
				</view>
				<view class="putin dffs bb">
					<text class="fontmid">卡号</text>
					<input @confirm="clickHandle" type="text" v-model="idcode" placeholder="" />
				</view>
				<view class="putin dffs bb">
					<text class="fontmid">所属银行</text>
					<input @confirm="clickHandle" type="text" v-model="bank" placeholder="" />
				</view>
			</block>
			<view class="putin dffs bb">
				<text class="fontmid">绑定手机号</text>
				<input @confirm="clickHandle" type="text" v-model="phone" placeholder="" />
			</view>
			<view class="putin dffs bb">
				<text class="fontmid">验证码</text>
				<view class="dfsb">
					<input type="text" v-model="code" placeholder="" />
					<verif class="yzBox" :flag="3" :phone="phone"></verif>
				</view>
			</view>
			<block v-if="type == 1">
				<view @tap="choose" class="putin spec dffd">
					<view class="fontmid">收款码</view>
					<view v-if="img" class="pre-item dffs"><image class="pre-item-image" :src="img_name" mode="widthFix"></image></view>
					<view v-if="!img" class="imgBox dffd"><u-icon name="camera-fill" size="84" color="#999"></u-icon></view>
				</view>
			</block>
			<view @tap="clickHandle" class="clickbtn">{{ edit ? '确认修改' : '确认添加' }}</view>
			<view class="fontsm textgrey dffs">
				点击确认即视为同意
				<navigator url="/pages/user/mine/service?type=2" class="fontsm prosecond">《用户隐私协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { pathToBase64 } from '@/common/tool/pathToBase64.js';
var _this;
import verif from '@/components/comPage/verif.vue';
export default {
	components: {
		verif
	},
	data() {
		return {
			edit: false, //支付宝已经存在 为true
			type: '', //1支付宝 2 银行卡
			name: '',
			num: '',
			phone: '',
			img: '',
			img_name: '',
			idname: '',
			idcode: '',
			bank: '',
			code: ''
		};
	},
	onLoad(opt) {
		this.type = opt.type || '1';
		if (this.type == 1) {
			this.getList();
		}
	},
	methods: {
		getList() {
			this.$api.request('bank/withdrawAccount', { identify: 1 }).then(data => {
				if (data.code == 200) {
					let arr = data.data;
					if (arr.length > 0) {
						arr.forEach(item => {
							if (item.type == 2&&item.account) {
								this.name = item.name;
								this.num = item.account;
								this.edit = true;
							}
						});
					}
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		choose() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					var imageSrc = res.tempFilePaths[0];
					pathToBase64(imageSrc).then(base64 => {
						that.$api
							.request('common/doupload', {
								imgdata: base64
							})
							.then(res => {
								that.img_name = res.data.imgurl;
								that.img = res.data.img_id;
							});
					});
				} 
			});
		},
		clickHandle() {
			if (this.type == 1) {
				if (!this.name) {
					return this.$api.toast('请输入用户名');
				}
				if (!this.num) {
					return this.$api.toast('请输入账号');
				}
				if (!this.img) {
					return this.$api.toast('请上传收款码');
				}
			} else {
				if (!this.idname) {
					return this.$api.toast('请输入持卡人');
				}
				if (!this.idcode) {
					return this.$api.toast('请输入卡号');
				}
				if (!this.bank) {
					return this.$api.toast('请输入银行名称');
				}
			}
			let phoneReg = /^(1[3-9])\d{9}$/;
			if (!phoneReg.test(this.phone)) {
				return this.$api.toast('手机号码不合法！');
			}
			if (!this.code) {
				return this.$api.toast('请输入验证码');
			}
			let url = this.type == 1 ? (this.edit ? 'bank/changeAccount' : 'bank/account') : 'bank/add';
			this.$api
				.request(url, {
					name: this.type == 1 ? this.name : this.idname,
					account: this.num,
					mobile: this.phone,
					code: this.code,
					img: this.img,
					bank_name: this.bank,
					bank_number: this.idcode,
					type: 1
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.$api.toast(data.msg);
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 800);
					} else {
						this.$api.toast(data.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss">
.home {
	min-height: 100vh;
	background-color: #fff;
	.pageImg {
		image {
			margin: 80rpx auto 80rpx;
			width: 160rpx;
			height: 160rpx;
		}
	}
	.putWarp {
		background-color: #fff;
		padding: 61rpx 0rpx 0;
		align-items: center;
		.title {
			margin-bottom: 21rpx;
			font-size: 42rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 59rpx;
			color: #333333;
		}
		.putin {
			width: 100%;
			font-size: 32rpx;
			padding: 7rpx 43rpx 0rpx;
			border-radius: 8rpx;
			border-bottom: 1rpx solid #f5f5f5;
			input {
				border-radius: 8rpx;
				flex: 1;
				height: 110rpx;
				font-size: $font-mid;
			}
			.fontmid {
				width: 210rpx;
			}
		}
		.spec {
			padding: 30rpx 43rpx;
			.fontmid {
				margin-bottom: 30rpx;
			}
			.imgBox {
				border: 1px solid #f3f3f3;
				justify-content: center;
				align-items: center;
				width: 400rpx;
				height: 240rpx;
				padding: 40rpx;
				margin: 0 auto;
			}
			.pre-item {
				margin: 0 auto;
				width: 420rpx;
				// height: 420rpx;
				position: relative;
			}
			.pre-item-image {
				width: 100%;
			}

			.u-delete-icon {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				z-index: 10;
				background-color: #333;
				border-radius: 100rpx;
				width: 40rpx;
				height: 40rpx; 
			}
		}
		.yzBox {
			margin-left: 30rpx;
			border-radius: 8rpx;
		}
		.xyTips {
			width: 100%;
			font-size: 28rpx;
			color: #999;
		}
	}
	.clickbtn {
		margin-top: 106rpx;
		border-radius: 45rpx;
	}
}
</style>