forget.vue

<template>
	<view>
		<dHeader :title="$lang.lang.forget.forget"></dHeader>
		<view class="start-bar"></view>
		<view class="forget">
			<view class="item">
				<image class="icons" src="../../static/img/phone-2.png" mode=""></image>
				<view class="items-vw">
					<view class="area">
						<picker :value="areaIndex" :range="areaName" @change="areaChange">
							<view class="uni-input">{{$request.checkAddIcon(areaData[areaIndex])}}</view>
						</picker>
						<image src="../../static/img/down.png" mode=""></image>
					</view>
					<input type="number" v-model="FormData.mobile" :placeholder="$lang.lang.notices.phone">
				</view>
			</view>
			<view class="item">
				<image class="icons" src="../../static/img/code-2.png" mode=""></image>
				<view class="items-vw">
					<input type="number" v-model="FormData.code" :placeholder="$lang.lang.notices.code">
					<text class="code" v-if="leftTime < 60">{{leftTime}}S</text>
					<picker class="code" :range="smsName" @change="sendCode" v-else>
					  <view class="uni-input">{{ $lang.lang.forget.code }}</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<image class="icons" src="../../static/img/pass-2.png" mode=""></image>
				<view class="items-vw">
					<input type="password" v-model="FormData.password" maxlength="32" :placeholder="$lang.lang.notices.numPsd">
				</view>
			</view>
			<view class="item">
				<image class="icons" src="../../static/img/safe-2.png" mode=""></image>
				<view class="items-vw">
					<input type="password" v-model="FormData.passworded" maxlength="32" :placeholder="$lang.lang.notices.nextPsd">
				</view>
			</view>
		</view>
		<view class="forBtn" @click="forgetForm">{{$lang.lang.order.edit}}</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,
				areaData: [],
				areaName: [],
				leftTime: 60,
				FormData: {
					mobile: '',
					code: '',
					password: '',
					passworded: '',
				},
				rules: {
					mobile: this.$lang.lang.notices.phone,
					code: this.$lang.lang.notices.code,
					password: this.$lang.lang.notices.newPsd,
					passworded: this.$lang.lang.notices.nextPsd,
				},
				smsName: ['SMS','WhatsApp'],
				smsData: [1,2],
				smsIndex: 0
			}
		},
		onLoad() {
			this.Country()
		},
		methods: {
			Country () {
				let that = this
				that.$request.get('/app-api/ecw/country/list-all').then(res => {
					if(res.code == 0&&res.data&&res.data.length > 0){
						for(let i in res.data){
							that.areaData.push(res.data[i].tel)
              that.areaName.push(res.data[i].tel + ' ' + res.data[i][that.$lang.name])
						}
					}
				})
			},
			areaChange (e) {
				this.areaIndex = e.detail.value
			},
			forgetForm () {
				if(!this.$request.checkFormData(this.FormData, this.rules)){
					return false
				}
				if(this.FormData.passworded != this.FormData.password){
					return uni.showToast({
						title: this.$lang.lang.notices.different,
						icon: 'none'
					})
				}
				this.$request.post('/app-api/member/reset-password', this.FormData).then(res => {
					console.log(res)
					if(res.code == 0){
						uni.showToast({
							title: this.$lang.lang.notices.edited,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../login/login',
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg ,
							icon: 'none',
						})
					}
				})
			},
			sendCode (e) {
				if(this.FormData.mobile == ''){
					return uni.showToast({
						title: this.$lang.lang.notices.phone,
						icon: 'none',
					})
				}
				if (this.leftTime < 60) {
					return false
				}
				var data = {
				  mobile: this.FormData.mobile,
				  nodeValue: 'user-sms-reset-password',
				  areaCode: this.areaData[this.areaIndex],
				  isTransport: 0,
				  transportId: 0,
				  isOrders: 0,
				  messageType: this.smsData[e.detail.value]
				}
				this.$request.post('/app-api/member/send-sms-code', data).then(res => {
					if(res.code == 0){
						this.countDown()
					} else {
						uni.showToast({
							title: res.msg || 'error',
							icon: 'none',
						})
					}
				})
			},
			countDown() {
				this.leftTime--
				if (this.leftTime > 0) {
					setTimeout(this.countDown, 1000)
				} else {
					this.leftTime = 60
				}
			},
		}
	}
</script>

<style>
	@import url("../../static/css/forget.css");
	.area picker{
		width: 110upx;
	}
</style>