<template>
	<view :class="[AppTheme]" class="content">
		<view class="box">
			<view class="row b-b">
				<text class="tit">手机号</text>
				<input id="yuan" type="text" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="row b-b">
				<text class="tit">新密码</text>
				<input class="input" type="number" placeholder="请输入新密码" v-model="password" />
			</view>
			<view class="row b-b">
				<text class="tit">验证码:</text>
				<input id="yuan" type="text" placeholder="请输入验证码" v-model="code" />
				<button class="codeBut" @click="getcode" v-model="ma">{{ ma }}</button>
			</view>

			<button class="add-btn bg-linear-gradient" @click="fasong">提交</button>
		</view>
	</view>

	<!-- <view class="changemima">
		 <view class="xiu">
				<view class="num1">
					<text>手机号:</text>
					<input id="yuan" type="text" placeholder="请输入手机号" v-model="mobile">
				</view>

				<view class="num1">
					<text>新密码:</text>
					<input id="yuan" type="password" placeholder="请输入新密码" v-model="password">
				</view>
				<view class="num2">
					<text>短信验证码:</text>
					<input id="yuan" type="text" placeholder="请输入验证码" v-model="code">
					<button class="codeBut" @click="getcode" v-model="ma">{{ma}}</button>
				</view>
		</view>
		<view class="but">
			<button @click="fasong">确定</button>
		</view>
	</view> -->
</template>

<script>
	import mineApi from '@/api/mine/index.js';
	export default {
		data() {
			return {
				primary:this.$theme.primary,
				mobile: '',
				password: '',
				code: '',
				ma: '获取验证码',
				time: 60,
				settingFile: getApp().globalData.siteinfo
			};
		},
		methods: {
			// 验证手机号
			isMobile(mobile) {
				if (mobile == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!/^0{0,1}(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9]|16[0-9]|14[0-9])[0-9]{8}$/.test(mobile)) {
						this.$u.toast('输入手机号有误');
						return;
					} else {}
				}
			},
			getcode: function() {
				this.isMobile(this.mobile);
				if (this.mobile == '') {
					this.$u.toast('请输入手机号');
					return;
				}

				mineApi.getPayPwdCode({
					mobile: this.mobile
				}).then(ret => {
					this.$u.toast(ret.msg);
					if (ret.status == 200) {
						this.ma = this.time + 's';
						var timeId = setInterval(() => {
							if (this.time > 0) {
								this.time--;
								this.ma = this.time + 's';
							} else {
								this.ma = '获取验证码';
								clearInterval(timeId);
							}
						}, 1000);
					} else if (ret.status == 0) {
						this.$u.toast(ret.msg);
					}
				});
			},
			fasong: function() {
				this.isMobile(this.mobile);
				if (this.password.length != 6) {
					this.$u.toast('支付密码必须是6位数字');
					return;
				}

				let data = {
					password: this.password,
					code: this.code
				};
				mineApi.pay_password_reset(data).then(ret => {
					this.$u.toast(ret.msg);
					if (ret.status == 200) {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 1000);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.codeBut {
		border: 1rpx solid #999999;
		background-color: white;
		border-radius: 8rrpx;
		width: 180rpx;
		height: 55rpx;
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		background: $page-color-base;
		// padding-top: 16upx;
	}

	.box {
		margin-top: 20rpx;
		.row {
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 30upx;
			height: 110upx;
			background: #fff;

			.tit {
				flex-shrink: 0;
				width: 120upx;
				font-size: 30upx;
				color: $font-color-dark;
			}

			.input {
				flex: 1;
				font-size: 30upx;
				color: $font-color-dark;
			}

			.icon-shouhuodizhi {
				font-size: 36upx;
				color: $font-color-light;
			}
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(0.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		border-radius: 10upx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
