h5-tiyu/pages/login/forgetPassword.vue

<template>
	<view class="page">
		<view class="title">身份验证</view>
		<view class="input u-flex" style="margin-top: 28rpx;">
			<u-input placeholder-style='font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;opacity: 0.5;' placeholder='手机号' v-model="resultPhone" type="text" :border="false"
				:clearable='false' />
		</view>
		<view class="input u-flex">
			<u-input placeholder-style='font-size: 32rpx; 
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;opacity: 0.5;' placeholder='请输入验证码' v-model="code" type="text" :border="false" :clearable='false' />
			<view class="code" @click="getCode">
				{{tips}}
			</view>
		</view>
		<view class="button" @click="changePasswoed">
			确认
		</view>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				phone: '',
				resultPhone: '',
				tips: '',
				seconds: ''
			};
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.getUserinfo()
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			changePasswoed() {
				uni.navigateTo({
					url: '/pages/login/changePasswoed?mobile=' + this.phone
				})
			},
			getUserinfo() {
				this.$u.post('api/user/getUserinfo').then(res => {
					this.phone = res.mobile
					this.resultPhone = res.phone_r
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					this.$u.post('/api/sms/send', {
						mobile: this.phone,
						password: this.password
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 52rpx 36rpx 0;
		border-top: 2rpx solid rgba(235, 235, 235, 1);
	}

	.code {
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #06A971;
	}

	.button {
		width: 678rpx;
		height: 84rpx;
		background: #06A971;
		border-radius: 8rpx;
		// opacity: 0.5;
		text-align: center;
		margin-top: 46rpx;
		line-height: 84rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.title {
		height: 74rpx;
		font-size: 52rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 74rpx;
	}

	.input {
		height: 122rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.14);
	}
</style>