shuquAi/pages/user/accountSafe/updatePwd/index.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar :bottomShadow="false" backgroundColor="#26B3A0">{{from=='set'?'修改密码':'找回密码'}}</tn-nav-bar>
			<view :style="{height: tobheight+'px'}"></view>
		</view>
		<!-- #endif -->

		<view class="container">
			<view class="textl_ogin">{{from=='set'?'修改密码':'找回密码'}}</view>
			<!-- 账号密码登录 -->
			<view class="login">
				<view class="input u-flex align-center">
					<u-icon name="phone-fill" color="#26B3A0" size="24"></u-icon>
					<input class="vs-flex-item" v-model="accountLogin.mobile" :maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="input u-flex align-center">
					<i class="iconfont icon-yanzhengma" style="color:#26B3A0;font-size: 22px;"></i>
					<input class="vs-flex-item" v-model="accountLogin.code" :maxlength="11" placeholder="请输入验证码" />
					<view class="" style="width: 250rpx;">
						<u-button style="width: 250rpx;" color='#26B3A0' class="custom-style"
							@tap="getCode">{{tips}}</u-button>
					</view>
				</view>

				<view class="input u-flex align-center">
					<u-icon name="lock-fill" color="#26B3A0" size="24"></u-icon>
					<input class="vs-flex-item" type="text" :password="password" v-model="accountLogin.password"
						placeholder="请输入新密码" placeholder-class="input-placeholder" />
					<u-icon @click="password = !password" :name="password ? 'eye-off' : 'eye-fill'" color="#26B3A0"
						size="18"></u-icon>
				</view>
			</view>
			<view @click="changePwd()" hover-class="hoversubmit" class="signinnow">{{from=='set'?'修改':'找回'}}
			</view>
		</view>
		<view class="wrap">
			<u-toast ref="uToast"></u-toast>
			<u-code :seconds="seconds" @end="" @start="" ref="uCode" @change="codeChange"></u-code>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		sendCode,
		forgetPwd
	} from '@/api/my/index.js'
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				password: true,


				accountLogin: {
					mobile: '',
					password: '',
					code: ''
				},

				tobheight: 45,
				platform: this.$platform.get(),
				userList: [{
						title: '更换手机号',
						icon: 'account-fill',
						path: 'collect-list',
						url: '/pages/user/public/agreement?type=aboutus',
					},
					{
						title: '修改密码',
						icon: 'question-circle-fill',
						path: 'collect-list',
						url: '/pages/user/public/agreement?type=use'
					}
				],
				from: 'set'
			}
		},
		computed: {
			// ...mapGetters(['appInfo'])
		},
		onLoad(o) {
			this.from = o.from
			if (this.from == 'login') {
				uni.setNavigationBarTitle({
					title: '找回密码'
				})
			}
		},
		methods: {

			codeChange(text) {
				this.tips = text;
			},
			async changePwd() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.accountLogin.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.accountLogin.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'none'
					})
					return
				}
				if (!this.showlogon && !this.accountLogin.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!this.accountLogin.password) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.rangeLength(this.accountLogin.password, [6, 12])) {
					uni.showToast({
						title: '密码长度为6至12位',
						icon: 'none'
					})
					return;
				}

				if (/.*[\u4e00-\u9fa5]+.*$/.test(this.accountLogin.password)) {
					uni.showToast({
						title: '密码不能含有汉字',
						icon: 'none'
					})
					return;
				}
				if (!uni.$u.test.enOrNum(this.accountLogin.password)) {
					uni.showToast({
						title: '密码只能是字母和数字',
						icon: 'none'
					})
					return;
				}

				// if (this.from == 'set') {
				console.log('修改密码参数', {
					mobile: this.accountLogin.mobile,
					password: this.accountLogin.password,
					code: this.accountLogin.code
				});

				let res = await forgetPwd({
					mobile: this.accountLogin.mobile,
					password: this.accountLogin.password,
					code: this.accountLogin.code
				})
				console.log('修改密码返回值', res);
				if (res.code == 0) {
					uni.showToast({
						title: '修改密码成功',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1000);
				}
				// } else {

				// }
			},


			async getCode() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.accountLogin.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return;
				}
				if (!phoneReg.test(this.accountLogin.mobile)) {
					uni.showToast({
						title: '手机号不合法',
						icon: 'none'
					})
					return
				}
				let res = await sendCode({
					mobile: this.accountLogin.mobile
				})
				console.log('验证码返回值', res);
				if (res.code == 0) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.hideLoading();
					uni.$u.toast(res.msg);
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>