<template>
	<view style="padding: 20rpx;font-size: 30rpx;">
		<view class="tit">类型</view>
		<view style="background: #fff;border-radius: 10rpx;height:60rpx;">
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input" style="color: #000;line-height: 60rpx;padding-left: 20rpx;">{{array[index]}}
				</view>
			</picker>
		</view>
		<view class="tit"  v-if="data.type=='银行卡支付'">开户行</view>
		<view style="background: #fff;border-radius: 10rpx;height:60rpx;"  v-if="data.type=='银行卡支付'">
			<picker @change="bindPickerChange1" :value="khhindex" :range="khh">
				<view class="uni-input" style="color: #000;line-height: 60rpx;padding-left: 20rpx;">{{khh[khhindex]}}
				</view>
			</picker>
		</view>
		<view class="tit">账户名称</view>
		<input class="srk" placeholder="姓名需要和实名信息一致" v-model="data.zhmc" />
		
		<view class="tit"  v-if="data.type=='USDT支付'">手机账号</view>
		<input class="srk" placeholder="请输入手机号,需要和实名信息一致" v-model="data.sjh"  v-if="data.type=='USDT支付'"/>
		
		<view class="tit"  v-if="data.type=='银行卡支付' || data.type=='支付宝支付' || data.type=='拍拍宝'">账号</view>
		<input class="srk" placeholder="请输入手机号,需要和实名信息一致" v-model="data.skzh"  v-if="data.type=='银行卡支付' || data.type=='支付宝支付'  || data.type=='拍拍宝'"/>
		
		<view class="tit" v-if="data.type=='银行卡支付'">开户行地址</view>
		<input class="srk" placeholder="请输入手机号,需要和实名信息一致" v-model="data.fhh"  v-if="data.type=='银行卡支付'"/>
		
		<view class="tit" v-if="data.type=='微信支付'">收款码</view>
		<view v-if="data.type=='微信支付'">
			<image
				v-if="data.skm"
				style="width: 150px;height: 150px;"
				class="image_4"
				referrerpolicy="no-referrer"
				:src="data.skm"
				@click="uploadimg('payaccountimg')"
			/>
			<image v-else style="width: 150px;height: 150px;" class="image_4" referrerpolicy="no-referrer" src="/static/xj.png" @click="uploadimg('payaccountimg')" />
		</view>		
		<button type="warn" style="margin-top: 40rpx;" @click="add">确认添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['拍拍宝','支付宝支付', '微信支付', 'USDT支付', '银行卡支付'],
				khh: ['中国银行', '徽商银行', '中信银行', '中国招商银行', '中国建设银行', '中国农业银行', '中国工商银行', '中国交通银行', '中国邮政储蓄银行', '农村信用合作社', '浦发银行', '华夏银行', '宁波银行', '广发银行', '湖州银行', '深圳农村商业银行', '杭州银行','其他银行'],
				data: {
					'zhmc': '',
					'sjh': '',
					'skzh':'',
					'khh':'',
					'type':'拍拍宝',
					'skm':'',
					'fhh':''
				},
				index: 0,
				khhindex: 0
			}
		},
		methods: {
			bindPickerChange: function(e) {				
				this.index = e.detail.value
				this.data.type=this.array[this.index]
				this.data.zhmc='';
				this.data.sjh='';
				this.data.skzh='';
				this.data.khh='';
				this.data.skm='';
				this.data.fhh='';
				if(this.index==3){
					this.data.khh='中国银行';
				}
			},
			bindPickerChange1: function(e) {
				this.khhindex = e.detail.value
				this.data.khh=this.khh[this.khhindex]
				this.khhindex = e.detail.value
			},
			sklist() {
				var data = new Object();
				data.uid = this.userinfo.id;
				this.$api
					.MhGetModel(data, 'user/sklist')
					.then(res => {
						this.goodlist = res.data.data;
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
			},
			add() {
				var data = this.data;
				data.uid = this.userinfo.id;
				this.$api
					.MhGetModel(data, 'user/skadd')
					.then(res => {
						if (res.data.code != 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							this.getCode();
							return;
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 1
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});							
						}
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
				// console.log(333)
			},
			uploadimg(id) {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: that.$api.getUploadurl2,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: function(res) {
								var img=JSON.parse(res.data);
								that.data.skm = img.data.url;
							}
						});
					}
				});
			}
		},
		onLoad() {
			var user = this.$api.getUserinfo();
			this.userinfo = user;
		}
	}
</script>

<style>
	page {
		padding: 15rpx;
		background:   #98a737;
		background-attachment: fixed !important;
		background-repeat: no-repeat !important;
	}

	.srk {
		color: #000;
		height: 60rpx;
		line-height: 60rpx;
		background: #fff;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
	}

	.tit {
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 10rpx;
	}
</style>
