meishidaQS/pages/tixian/YHkamanager.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('tixian.yhkguanli')" tinColor="#40AE36" jiantou="0" titledetl=''></customNav>
		<view class="contentColumn contenV">
			<view class="contentColumn ItemContent">
				<text class="bangdingText">{{$t('tixian.bangdingyhk')}}</text>
				<text class="jiedanText">{{$t('tixian.qingbangdbryhk')}}</text>
			</view>
			<view class="contentInRowL ItemContent">
				<text class="tianjiaBT">{{$t('tixian.chikaren')}}：</text>
				<input class="jiedanText"  type="text" :placeholder="$t('tixian.qingshuckrxm')"  @input="chikareninput">
			</view>
			<view class="contentInRowL ItemContent">
				<text class="tianjiaBT">{{$t('tixian.kahao')}}：</text>
				<input class="jiedanText"  type="number" :placeholder="$t('tixian.qingshukh')"  @input="kahaoinput">
			</view>
			<view class="contentInRowL ItemContent">
				<text class="tianjiaBT">{{$t('tixian.yinghang')}}：</text>
				<input class="jiedanText"  type="text" :placeholder="$t('tixian.xuanzeyanhang')"  @input="yinhanginput">
			</view>
			<!-- <view class="contentInRowS ItemContent" @click="popgjm">
				<view class="contentInRowL">
					<text class="tianjiaBT">{{$t('tixian.yinghang')}}：</text>
					<text v-if="yinhang.length>0" class="jiedanText">{{yinhang}}</text>
					<text v-if="yinhang.length==0" class="jiedanText">{{$t('tixian.xuanzeyanhang')}}</text>
				</view>
				<image style="width: 32rpx;height: 32rpx;" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
			</view> -->
		</view>
		
		<view class="yzmctV">
			<label class="querenBt" @click="bangding">{{$t('tixian.bangdingyhk')}}</label>
		</view>
		
		<popViewGG :tips="$t('tixian.xuanzeyanhang')" :show="showpop" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<picker-view :indicator-style="indicatorStyle" :value="pvalue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
			    </picker-view-column>
			</picker-view>
		</popViewGG>
	</view>
</template>

<script>
	import {
		addbankcard,
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				meiyouyhk:true,
				chikaren:'',
				kahao:'',
				yinhang:'',
				showpop:false,
				range: [],
				pvalue: [0],
				indicatorStyle: `height: 50px;`
			}
		},
		onLoad() {
			this.range= [
				'工商银行',
				'交通银行',
				'农业银行',
				'民生银行',
				'广发银行',
				'浦发银行',
				'兴业银行'
			];
		},
		methods: {
			chikareninput(event){
				this.chikaren = event.target.value;
			},
			kahaoinput(event){
				this.kahao = event.target.value;
			},
			yinhanginput(event){
				this.yinhang = event.target.value;
			},
			bindChange (e) {
				var val = e.detail.value[0];
				this.yinhang=this.range[val];
			},
			popgjm(){
				this.showpop=true;
			},
			chooseCancel(i){
				this.showpop=false;
			},
			bangding(){
				this.addbankcard();
			},
			async addbankcard(){
				//console.log('getUserMsg')
				if(''==this.kahao||''==this.yinhang||''==this.chikaren){
					uni.showToast({
					    title: this.$t('tixian.qingtxwzyhkxx'),
					    icon: 'none',
					    duration: 2500
					})
					return;
				}
				await this.$http.post(`${addbankcard}`, {
					"number": this.kahao, //银行卡号
					"bankName": this.yinhang, //开户行
					"accountName": this.chikaren, //开户名
					"type": "0", //卡类型（0储蓄卡，1信用卡）
					"img": "" //银行图标
				},true)
				.then(async r => {
					console.log(r)
					uni.navigateBack();
				})
				.catch(err => {
					console.log(err)
				})
			},
		},
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	@font-face {
		font-family: zrht;
		src: url('/uni_modules/font/zrht.otf');
	}
	page{
		background-color: whitesmoke;
	}
	
	.contenV{
		margin-top: 30rpx;
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx darkgray;
		background-color: white;
	}
	
	.ItemContent{
		margin: 24rpx;
		border: solid whitesmoke;
		border-width: 0px 0px 2rpx 0px;
	}
	
	.jiedanText{
		font-size: 28rpx;
		color: darkgray;
		width: 80%;
	}
	
	.bangdingText{
		font-size: 28rpx;
		// font-family: zrht;
		padding-bottom: 10rpx;
	}
	
	.tianjiaBT{
		width: 180rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	
	.yzmctV{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:flex-start;
		margin-top: 30rpx;
		width: 94%;
		margin-left: 3%;
	}
	.querenBt{
		margin-top: 30rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		text-align: center;
		justify-content: center;
		background-color: #40AE36;
		color: white;
		box-shadow: 0px 0rpx 10rpx 0rpx #40AE36;
	}
	
	.picker-view {
		width: 750rpx;
		height: 270rpx;
	}
	.item {
		line-height: 90rpx;
		text-align: center;
	}

</style>