xiongmao/pages/my/change-password/change-password.vue

<!-- 修改密码 -->
<template>
	<view class="wrap">
		<view class="module">
			<view class="row-between">
				<input type="text" v-model="params.phone" class="input" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<view class="row-between">
				<input type="text" v-model="params.code" class="input" placeholder="请输入验证码" placeholder-class="placeholder" />
				<button v-if="countDown <= 0" @tap="sendSms()" type="default" class="send-code">发送验证码</button>
				<button v-else type="default" class="send-code">{{countDown}}秒后重发</button>
				<!-- 60s后重新发送 -->
			</view>
			<view class="row-between">
				<input type="password" v-model="params.password" class="input" placeholder="新密码" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="btn-box">
			<button type="default" class="active" @tap="modifyPassword">修改</button>
		</view>
	</view>
</template>

<script>
	import { generalSendSms, userCenterModifyPassword } from '../../../common/service.js';
	import { validatorFun } from '../../../common/utils/util.js';
	export default {
		data() {
			return {
				params: {
					phone: '',
					code: '',
					password: '',
				},
				countDown: 0,
			}
		},
		methods: {

			modifyPassword() {
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
					['code', ['notNull', '请输入验证码']],
					['password', ['notNull', '请输入新密码']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userCenterModifyPassword({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.info.phone = params.phone;
							uni.setStorageSync('USER_INFO', info);
							this.params = {
								phone: '',
								code: '',
								password: '',
							};
							uni.showModal({
								title: '提示',
								content: '修改成功，请重新登录',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.removeStorageSync('session_key');
										uni.removeStorageSync('USER_INFO');
										uni.reLaunch({
											url: '/pages/index/index',
										});
									}
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					},
				});
			},
			sendSms() {
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				generalSendSms({
					data: {
						phone: params.phone,
					},
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.countDownFn();
						}
						uni.showToast({
							icon: 'none',
							title: msg,
						});
					},
				});
			},
			countDownFn() {
				let num = 60;
				const fn = () => {
					if (num == 0) return;
					this.countDown = --num;
					setTimeout(() => fn(), 1000);
				};
				fn();
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./change-password.css";
</style>