<template>
	<view>
		<dHeader :title="$lang.lang.editPsd.psd"></dHeader>
		<view class="start-bar"></view>
		<view class="login-item">
			<view class="login-vp login-v">
				<input class="vp-input" v-model="oldPassword" type="password" maxlength="32"   :placeholder="$lang.lang.notices.oldPsd">
			</view>
			<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="agree" >
			<checkbox :checked="agree"  @click="agree = !agree" style="transform:scale(0.7)"></checkbox>
			<view>{{$lang.lang.notices.read}}<text @click="showUser">《{{$lang.lang.notices.service}}》</text></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>
		<user-agreement />
	</view>
</template>

<script>
	import dHeader from '../../components/dHeader/index.vue'
	import userAgreement from '../../components/userAgreement/index.vue'
	export default {
		components: {
			dHeader,userAgreement
		},
		data() {
			return {
				areaIndex: 0,
				areaIndexs:0,
				newIndex:0,
				mobile: '',
				code: '',
				agree: false,
				password:'',
				password2:'',
				areaData: [],
				areaName: [],
				leftTime: 60,
				oldMobile:'',
				userInfo:{},
				oldPassword:''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			showUser(){
				this.$refs.userment.open()
			},
			getUserInfo() {
				this.$request.get('/app-api/member/user/get').then(res => {
					if(res.code==0&&res.data){
						this.userInfo = res.data
					}
				})
			},
			register () {
				let params = {
					oldPassword:this.oldPassword,
					password: this.password,
				}
				if(this.oldPassword == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.oldPsd,
						icon: 'none',
					})
				}
				if(this.password == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'none',
					})
				}else{
					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: 'none',
						})
					}
				}
				if(this.password2 == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.newPsd,
						icon: 'none',
					})
				}
				if(this.password!=this.password2){
					return uni.showToast({
						title: this.$lang.lang.notices.different,
						icon: 'none',
					})
				}
				if(!this.agree){
					return uni.showToast({
						title: this.$lang.lang.notices.chooseService,
						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;
}
.agree{
	margin: 4% auto 0;
	width: 96%;
	display: flex;
	align-items: center;
	font-size: var(--f26);
	margin-left: 4%;
	color: #9d9d9d;
	/* color: var(--c0); */
}
.agree image{
	width: 40upx;
	height: 40upx;
	margin-right: 10upx;
	margin-top: 6upx;
}
.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>
