<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">修改密码</view>
			</view>
		</u-navbar>

		<view class="loginView">

			<view class="title">安全验证</view>
			<view class="phoneTitle">手机号验证码进行验证</view>
			<view class="u-demo-block__content">
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="请输入手机号" maxlength="11" border="none" font-size="24rpx" v-model="phoneNumber">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<!-- #endif -->
					<u--text text="+86 |" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="u-demo-block__content" style="margin-top: 15px;" v-if="fcode==true">
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="手机验证码" border="none" font-size="24rpx" v-model="code">
				<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<!-- #endif -->
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></u-code>
						<view style="color: #FF4502; font-weight: 800; font-size: 28rpx;" @click="getCode">
							{{tips}}
						</view>
						<!-- 	<u-button
							@tap="getCode"
							:text="tips"
							type="success"
						></u-button> -->
					</template>
				<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
			</view>
			<view class="setPasswodrdTitle">设置您的新密码 </view>
			<view class="setPasswrord"><u--input v-model="password" border="none" font-size="24rpx" placeholder="请输入密码" prefixIcon=""
					></u--input></view>
					
					<view class="setPasswodrdTitle">请再次输入您的密码 </view>
					<view class="setPasswrord"><u--input v-model="password2" border="none" font-size="24rpx" placeholder="请输入密码" prefixIcon=""
							></u--input></view>

			<view class="submmint" @click="submmint">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fcode: true,
				flag: true,
				tips: '',
				password:'',
				phoneNumber:'',
				code:'',
				password2:''
			}
		},
		methods: {
			
			submmint(){
				let data = {
					password:this.password,
					phoneNumber:this.phoneNumber,
					code:this.code
				}
				
				if(this.password != this.password2){
					uni.showToast({
						icon:'none',
						title:'新密码不一致'
					})
					return
				}
				
				this.$http.post('/api/store/personalCenter/retrievePassword',data).then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					
					this.password = ''
					this.phoneNumber = ''
					this.code = ''
				})
				console.log(data);
			},
			
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				if(!uni.$u.test.mobile(this.phoneNumber)){
					uni.$u.toast('请输如正确的手机号');
				return
				}

				this.$http.post("/api/store/personalCenter/retrieveSendSmsCode", {
					phoneNumber: this.phoneNumber,
				}).then(res => {
					if (res.code == 200)
						uni.hideLoading();
					console.log(res)
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					// uni.redirectTo({
					// 	url: '/pages/home/home'
					// })
				})

				// /api/store/sendSmsCode
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码

					setTimeout(() => {

						// 这里此提示会被this.start()方法中的提示覆盖

						// 通知验证码组件内部开始倒计时

					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				console.log(text);
				this.tips = text;
			},
		}
	}
</script>

<style lang="scss">
	.submmint {
		text-align: center;
		color: white;
		padding-top: 29rpx;
		margin-top: 423rpx;
		padding-bottom: 29rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);

		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
.setPasswrord{
	margin-top: 20rpx;
	background: #F6F6F6;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	padding: 20rpx
}
	.loginView {
		padding: 61rpx;
		background: #FFFFFF;
		margin-top: -30rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.setPasswodrdTitle {
			padding-top: 36rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.phoneTitle {
			padding-top: 36rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.title {
			padding-top: 36rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 800;
		}

	}

	.u-demo-block__content {
		margin-top: 20rpx;
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 31rpx
	}
</style>