<template>
	<view>
		<dHeader :title="$lang.lang.editPsd.control"></dHeader>
		<view class="start-bar"></view>
		<view class="login-item">
			<view class="login-vp login-v">
				<input class="vp-input" v-model="password" type="password" maxlength="32"   :placeholder="$lang.lang.notices.numPsd">
			</view>
			<view class="login-vp login-v">
				<input class="vp-input" v-model="password2" type="password" maxlength="32"  :placeholder="$lang.lang.notices.nextPsd">
			</view>
		</view>
		<view class="login-btns">
			<view class="" @click="register">{{$lang.lang.editPsd.edit}}</view>
		</view>
		<view class="desc">
			<image src="../../static/img/helps.png" mode=""></image>
			<view class="">{{$lang.lang.notices.contact}}<text class="red">	400-900-9962</text></view>
		</view>
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	export default {
		components: {
			dHeader
		},
		data() {
			return {
				areaIndex: 0,
				areaIndexs:0,
				newIndex:0,
				mobile: '',
				code: '',
				password:'',
				password2:'',
				areaData: [],
				areaName: [],
				leftTime: 60,
				oldMobile:'',
			}
		},
		onLoad() {
			
		},
		methods: {
			register () {
				let params = {
					password: this.password,
				}
				if(this.password == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'error',
					})
				}else{
					console.log(this.password)
					console.log(!reg1.test(this.password))
					var reg1 = new RegExp('^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,32})$')
					if (!reg1.test(this.password)) {
						return uni.showToast({
							title: this.$lang.lang.notices.numPsd,
							icon: 'error',
						})
					}
				}
				return
				if(this.password2 == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'error',
					})
				}
				if(this.password!=this.password2){
					return uni.showToast({
						title: this.$lang.lang.notices.different,
						icon: 'none',
					})
				}
				
				this.$request.post('/app-api/member/update-password', params).then(res => {
					if(res.code == 0){
						uni.showToast({
							title:this.$lang.lang.notices.edited,
							icon: 'none',
							// success() {
							// 	this.$request.goPage('../login/login')
							// }
						})					
					}else{
						uni.showToast({
							title: res.msg ,
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

<style>
page{
	width: 100%;
	background: #f7f7f7;
	padding-top: 200upx;
}
.red{
	color: #E61B00;
}
.login-item{
    border-radius: 20upx;
    background-color: #fff;
    width: 86%;
    margin: 0 auto;
    padding: 3%;
}
.login-v{
	display: flex;
	height: 100upx;
}
.login-v image{
	width: 40upx;
	height: 40upx;
}
.login-v .vp-input{
	/* color: var(--c0); */
	/* caret-color: var(--c0); */
	font-size: var(--f26);
}
.login-vs{
	display: flex;
	align-items: center;
	font-size: var(--f30);
	/* color: var(--c0); */
	font-weight: 700;
	margin-right: 20upx;
}
.login-vs image{
	margin-right: 20upx;
	margin-top: 0upx;
}
.login-vp{
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
}
.login-phone{
	display: flex;
}
.login-phone .login-area{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--f30);
	/* background-color: #27417C; */
	border-radius: 60upx;
	height: 50upx;
	margin-top: 30upx;
	padding: 0 10upx;
	margin-right: 20upx;
	font-size: var(--f26);
}
.login-phone .login-area text{
	margin-right: 10upx;
}
/* .vp-input::input-placeholder{
	color:var(--c0);
} */
.vp-input{
	margin-top: 30upx;
	width: 86%;
	font-size: var(--f26);
}

.login-btns{
	margin-top: 100upx;
	padding: 0 50upx;
}
.login-btns view{
	width: 100%;
	height: 96upx;
	border-radius: 100upx;
	color: var(--c0);
	font-size: 36upx;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(0deg, #2878E0 0%, #016EF6 100%);
	margin-bottom: 60upx;
}
.login-code{
	position: absolute;
	right: 0;
	color:var(--c0);
	border: 1px solid #e0e0e0;
	top: 20upx;
	padding: 12upx 10px;
	border-radius: 50upx;
	font-size: var(--f24);
	background-color: #3f6bff;
}

.login-area uni-picker	{
	margin-left: 10upx;
	margin-bottom: 4upx;
}
.login-area image{
	width: 30upx;
	height: 30upx;
	margin: 0 10upx;
}
.desc{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--f24);
	color: var(--c6);
}
.desc image{
	width: 48upx;
	height: 48upx;
	margin-top: 4upx;
	margin-right: 10upx;
}
</style>
