hezhiying/pages/shoukuan/shoukuan.vue

<template>
	<view class="page">
		<view class="tabs">
			<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
				{{item.name}}
			</view>
			<view class="">
				
			</view>
		</view>
		<view >
			<view class="yhk" v-show="activeIndex==1">
				<view class="list-input">
					<view class="title">
						<text>姓名</text>
					</view>
					<view class="content">
						<input type="text" v-model="yhk.bank_realname" placeholder="请输入真实姓名">
					</view>
				</view>
				<view class="list-input">
					<view class="title">
						<text>预留手机号</text>
					</view>
					<view class="content">
						<input type="tel" v-model="yhk.bank_mobile" placeholder="请输入银行预留手机号">
					</view>
				</view>
				<view class="list-input">
					<view class="title">
						<text>卡号</text>
					</view>
					<view class="content">
						<input type="tel" v-model="yhk.bank_no" placeholder="请输入银行卡号">
					</view>
				</view>
				<view class="list-input">
					<view class="title">
						<text>开户行</text>
					</view>
					<view class="content">
						<input type="tel" v-model="yhk.bank_address" placeholder="请输入开户行信息">
					</view>
				</view>
				
			</view>
			<view class="zfb" v-show="activeIndex==2">
				<u-upload
					:fileList="zfbPic"
					:previewFullImage="true" 
					@afterRead=""
					:maxCount="1" width="176" height="176"
					
					name="1"
					multiple
				></u-upload>
			</view>
			<view class="zfb" v-show="activeIndex==3">
				<u-upload
					:fileList="zfbPic"
					:previewFullImage="true" 
					@afterRead=""
					:maxCount="1" width="176" height="176"
					name="1"
					multiple
				></u-upload>
			</view>
			<view class="yhk">
				<view class="list-input">
					<view class="title">
						<text>手机号</text>
					</view>
					<view class="content">
						<input type="text" v-model="mobileForm.phone" placeholder="请输入手机号">
					</view>
				</view>
				<view class="list-input">
					<view class="title">
						<text>验证码</text>
					</view>
					<view class="content">
						<input type="text" v-model="mobileForm.code" placeholder="请输入验证码">
					</view>
					<view class="yzmBtn" v-show="!codeSend">
						获取验证码
					</view>
					<view class="yzmBtn" v-show="codeSend">
						{{timeNum}}s后重试
					</view>
				</view>
			</view>
			<view class="saveBtn">
				
				{{activeIndex==1?'保存银行卡':activeIndex==2?'保存支付宝二维码':activeIndex==3?'保存微信二维码':''}}
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {updateUserInfo,smsSend} from '@/common/api.js'
	export default {
		data() {
			return {
				activeIndex:1,
				list4: [{
					name: '银行卡',
					id:1
				}, {
					name: '支付宝',
					id:2
				}, {
					name: '微信',
					id:3
				}],
				yhk:{
					bank_realname:null,
					bank_mobile:null,
					bank_no:null,
					bank_address:null,
				},
				codeSend:false,
				timeNum:59,
				timer:null,
				zfbPic:[],
				mobileForm:{
					phone: '',
					code: '',
				}
			};
		},
		onLoad(option) {
			
		},
		methods:{
			getPay(item){
				this.activeIndex = item.id
			},
			getCode(){
				if(!this.mobileForm.phone){
					this.$refs.uToast.show({
						message:'请输入手机号码'
					})
					return;
				}
				smsSend({mobile:this.mobileForm.phone}).then(res=>{
					if(res.code==1){
						this.codeSend = true;
						this.timer = setInterval(()=>{
							if(this.timeNum>0){
								this.timeNum--;
							}else{
								this.codeSend = false;
								clearInterval(this.timer)
								this.timer = null;
							}
						},1000)
					}
				})
			},
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null;
		},
	}
</script>

<style scoped lang="scss">
	@import 'shoukuan.scss';
</style>