<template>
	<view class='container'>
		<view style="background-color: #FFF;padding: 40rpx 0;">
			<view class="center">
				<text class="fs-28" style="color:#999999;">我们将会对已绑定手机号</text>
			</view>
			<view class="mt-50 center">
				<text class="fs-48">{{ user.userInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</text>
			</view>
			<view class="mt-50 center">
				<text class="fs-28" style="color:#999999;">进行验证</text>
			</view>
		</view>
		
		<view class="mt-20" style="background-color: #FFF;">
			<u-input v-model="captcha" placeholderStyle="color:#999;" border="none" :customStyle="{'height': '85rpx', 'padding-left': '20rpx', 'padding-right': '10rpx'}"
				placeholder="请输入短信验证码">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button shape="square" color="#EB7318" style="height: 70rpx;color: #FFF;"
						@click="getCode" :text="tips"></u-button>
				</template>
			</u-input>
		</view>
		
		<view @click="onNext" class="btn">
			<text>下一步</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				captcha: '',
				tips: '获取验证码',
			};
		},
		onLoad() {
			
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			codeChange(text) {
				// console.log(text)
				this.tips = text
			},
			// 点击获取验证码
			getCode() {
				if (this.user.userInfo.mobile !== '' && uni.$u.test.mobile(this.user.userInfo.mobile)) {
					// 判断是否已经获取了一次
					if (this.$refs.uCode.canGetCode) {
						const params = {
							url: '/api/sms/send',
							data: {
								mobile: this.user.userInfo.mobile,
								event: 'pds'
							}
						}
						// 发送获取验证码请求
						this.$request(params).then(res => {
							// console.log(res)
							// 通知验证码组件内部开始倒计时
							if (res.code === 1) {
								this.$refs.uCode.start();
								this.$u.toast(res.msg);
							}
						}).catch(err => {
							// console.log(err)
							this.$u.toast(err.msg || '发生错误');
							// 通知验证码组件内部重置
							this.$refs.uCode.reset();
						})
					} else {
						this.$u.toast('请倒计时结束后再发送');
					}
				} else {
					this.$u.toast('请填写正确的手机号');
				}
			},
			onNext() {
				if (!this.captcha) {
					return this.$u.toast('请输入验证码');
				}
				const params = {
					url: '/api/user/yzcode',
					data: {
						mobile: this.user.userInfo.mobile,
						captcha: this.captcha
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.$wskj.to('/pages/my/setting/modifypaypassword')
				}).catch(err => {
					// console.log(err)
					this.$u.toast(err.msg || '发生错误');
				})
			}
		},
	};
</script>

<style scoped>
	.container {
		height: 100%;
		background-color: #F5F5F5;
		padding: 20rpx;
	}

	.btn {
		width: 100%;
		height: 88rpx;
		margin: 400rpx auto 0;
		text-align: center;
		line-height: 88rpx;
		color: #FFF;
		background-color: #EB7318;
		border-radius: 8rpx;
	}
</style>