<template>
	<view class="bindcard-page">
	  <view class="form">
	    <view class="form-item">
	      <view class="label">持卡人</view>
	      <input type="text" v-model="form.name" placeholder="请输入持卡人姓名" />
	    </view>
	    <view class="form-item">
	      <view class="label">银行卡号</view>
	      <input type="text" v-model="form.card"  placeholder="请输入银行卡号" />
	    </view>
	    <view class="form-item">
	      <view class="label">开户行</view>
	      <input type="text" v-model="form.bank" placeholder="请输入开户行" />
	    </view>
	  </view>
	  <view class="submit" @click="submit">确定</view>
	</view>
</template>

<script>
	import { bingCard } from '@/api/user.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					card: '',
					bank: ''
				}
			}
		},
		methods: {
			submit(){
				if(this.form.name == '' ){
					return this.alertMessage('请输入持卡人姓名')
				} else if(this.form.card == ''){
					return this.alertMessage('请输入银行卡号')
				} else if(this.form.bank == ''){
					return this.alertMessage('请输入开户行')
				}
				bingCard({
					bankName: this.form.bank,
					cardNumber: this.form.card,
					cardholderName: this.form.name
				}).then((res)=>{
					uni.showToast({
						title: '绑定成功！',
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1,
						})
					},1500)
				})
			},
			alertMessage(msg){
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
page{
  width: 100%;
  height: 100%;
  background: #F8F8F8;
}
.bindcard-page{
  width: 100%;
  padding: 32rpx 38rpx;
}
.form{
  width: 100%;
  background: #fff;
  border-radius: 18rpx;
}
.form-item{
  width: 100%;
  height: 100rpx;
  padding: 0 36rpx;
  font-size: 34rpx;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2rpx solid #F5F5F5;
}
.form-item input{
  text-align: right;
  font-size: 32rpx;
}
.submit{
  width: 440rpx;
  height: 88rpx;
  background: #F7C37A;
  border-radius: 44rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 46rpx;
  color: #fff;
  margin: 60rpx auto;
}
</style>
