addCard.vue 7.7 KB
<template>
	<view class="page">
		<view class="tixianbox">
			<view class='tixiantype'>提现方式</view>
			<view class="tixianlist flexone">
				<view class="tixianlistitem flexone" :class="sel==1?'selactivek':''" @click="selitem" :data-id="1">
					<view class="tixianimg">
						<image src="../../static/icon_wechat.png"></image>
					</view>
					<view class="tixianname">微信</view>
				</view>
				<view class="tixianlistitem flexone" :class="sel==2?'selactivek':''" @click="selitem" :data-id="2">
					<view class="tixianimg">
						<image src="../../static/icon_zhifu.png"></image>
					</view>
					<view class="tixianname">支付宝</view>
				</view>
				<view class="tixianlistitem flexone" :class="sel==3?'selactivek':''" @click="selitem" :data-id="3">
					<view class="tixianimg">
						<image src="../../static/ticard.png"></image>
					</view>
					<view class="tixianname">银行卡</view>
				</view>

			</view>

		</view>
		<!-- 微信 -->
		<view class="cardboxk" v-if="sel==1">
			<view class="title">请输入绑定信息</view>
			<view class="box">
				<view class="item">
					<text class="name">姓名</text>
					<input type="text" value="" placeholder="请输入姓名" class="fill" @input="enternamew" />
				</view>
				<view class="item">
					<text class="name">账号</text>
					<input type="text" value="" placeholder="请输入微信账号" class="fill" @input="enteraccount" />
				</view>

			</view>

		</view>
		<!--支付宝 -->
		<view class="cardboxk" v-if="sel==2">
			<view class="title">请输入绑定信息</view>
			<view class="box">
				<view class="item">
					<text class="name">姓名</text>
					<input type="text" value="" placeholder="请输入姓名" class="fill" @input="enternamew" />
				</view>
				<view class="item">
					<text class="name">账号</text>
					<input type="text" value="" placeholder="请输入支付宝账号" class="fill" @input="enteraccount" />
				</view>

			</view>

		</view>
		<!-- 银行卡 -->
		<view class="cardboxk" v-if="sel==3">
			<view class="title">请绑定持卡人本人的银行卡</view>
			<view class="box">
				<view class="item">
					<text class="name">持卡人</text>
					<input type="text" value="" placeholder="请输入持卡人" class="fill" @input="enterpeople" />
				</view>
				<view class="item">
					<text class="name">卡号</text>
					<input type="text" value="" placeholder="请输入卡号" class="fill" @input="entercard" />
				</view>
				<picker @change="bindbankPickerChange" :value="index" :range="bankarray" range-key="name">
					<!-- <view class="uni-input">{{array[index]}}</view> -->
					<view class="item">
						<text class="name">开户行</text>
						<view class="fill">{{bankname}}</view>
						<!-- <input type="text" value="" placeholder="请输入开户行" class="fill" @input="enterbank" /> -->
					</view>
				</picker>

				<view class="item">
					<text class="name">手机号</text>
					<input type="number" value="" placeholder="请输入手机号" class="fill" @input="enterphone" />
				</view>
			</view>

		</view>


		<view class="add" @click='surecard'>
			<view class="addcount">确认</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				people: '',
				card: '',
				bank: '',
				phone: '',
				item: '',
				type: '',
				sel: 1,
				name2: '',
				account: '',
				index:0,
				bankid:'',
				bankname:'请选择开户行',
				bankarray:[]
			}
		},
		onLoad(options) {
			if (options.item) {
				this.item = JSON.parse(options.item);
				this.type = options.type;
			}
			
			this.getbanklist()



		},
		methods: {
			
			enterpeople(e) {
				this.people = e.detail.value
			},
			entercard(e) {
				this.card = e.detail.value
			},
			enterbank(e) {
				this.bank = e.detail.value
			},
			enterphone(e) {
				console.log(e.detail.value)
				this.phone = e.detail.value;
				console.log(this.phone)
			},
			selitem(e) {
				this.sel = e.currentTarget.dataset.id;
			},
			// 输入姓名
			enternamew(e) {
				this.name2 = e.detail.value
			},
			// 输入账号
			enteraccount(e) {
				this.account = e.detail.value
			},
			// 选择开户行
			bindbankPickerChange(e){
				this.bankname=this.bankarray[e.target.value].name;
				this.bankid=this.bankarray[e.target.value].id
			},
			
			// 获取开户行
			getbanklist(){
				let that=this;
				var url = 'bank/open_account';
				var params = {
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.bankarray=res.data.data;
				
				}).catch((err) => {
				
				})
			},

			surecard() {
				let that = this;
				if(that.sel==3){
					if (that.people == '') {
						uni.showToast({
							title: "请输入持卡人",
							icon: "none"
						})
						return false
					}
					if (that.card == '') {
						uni.showToast({
							title: "请输入卡号",
							icon: "none"
						})
						return false
					}
					
					if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
						wx.showToast({
							title: '请输入正确手机号',
							icon: 'none'
						})
						return false;
					}
				}else{
					if(that.name2==''){
						uni.showToast({
							title:'请输入姓名',
							icon:'none'
						})
						return false
					}
					if(that.sel==1){
						if(that.account==''){
							uni.showToast({
								title:'请输入微信账号',
								icon:'none'
							})
							return false
						}
					}else{
						if(that.account==''){
							uni.showToast({
								title:'请输入支付宝账号',
								icon:'none'
							})
							return false
						}	
					}
						
				}
				var url = 'bank/add_user_address';
				var params = {
					type: that.sel,
					name: that.people,
					card_number: that.card,
					open_account_id: that.bankid,
					mobile: that.phone,
					name2: that.name2,
					account: that.account

				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
						
					if(that.sel==1){
						uni.showToast({
							title: '添加银行卡成功',
							icon: 'none'
						})
					}else if(that.sel==2){
						uni.showToast({
							title: '添加微信账户成功',
							icon: 'none'
						})
					}else if(that.sel==3){
						uni.showToast({
							title: '添加支付宝账户成功',
							icon: 'none'
						})
					}
					
					setTimeout(function() {
						uni.navigateBack({
							checked: true
						})
					}, 1500)

				}).catch((err) => {

				})
			}

		}
	}
</script>

<style>
	.tixianlist {
		margin-top: 22rpx;
	}

	.tixianlistitem {
		width: 184rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		border: 1rpx solid transparent;
	}

	.selactivek {
		border: 1rpx solid #C29445;
		border-radius: 8rpx;
	}

	.tixianname {
		color: #3D454C;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	.tixianbox {
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.tixiantype {
		color: #3D454C;
		font-size: 28rpx;
	}

	.tixianimg {
		width: 48rpx;
		height: 48rpx;
		font-size: 0;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(61, 6 9, 76, 1);
		line-height: 104rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.box {
		background: #fff;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.item {
		height: 108rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EEEEEE;
	}

	.name {
		width: 84rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Medium, PingFangHK;
		font-weight: 600;
		color: rgba(8, 18, 31, 1);
		margin-right: 16rpx;
	}

	.fill {
		width: 232rpx;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(91, 94, 100, 1);
	}
</style>