zcb_APP/pages/login/forget.vue

<template>
	<view class="content">
		<view class="top_bg">
			<image class="top_close" @click="$navBack()" src="/static/image/login/close_icon.png" mode="scaleToFill" />
			<view class="top_text">
				<view>忘记密码</view>
				<view class="top_icon"></view>
			</view>
		</view>

		<view class="w pdx-40 main">
			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
				clearable></u--input>
			<u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
				<template slot="suffix">
					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
						:keep-running="true" @change="codeChange"></u-code>
					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
				</template>
			</u--input>
			<u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
				border="bottom" clearable>
				<template slot="suffix">
					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
						color="#303030" size="24"></u-icon>
				</template>
			</u--input>
			<u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
				placeholder="请确认密码" border="bottom" clearable>
				<template slot="suffix">
					<u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
						:name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
				</template>
			</u--input>

			<u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
		</view>
		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
			@close="closeHandle"></zmm-slider-verify>
	</view>
</template>

<script>
import { isValidPhone, isValidPassword } from '@/utils/index'
export default {
	data() {
		return {
			isViewPassword: false,
			isViewConfirmPwd: false,
			isCode: false,//验证码按钮状态
			tips: '',// 验证码提示文字
			seconds: 60,//验证码秒数
			loginParam: {
				phone: undefined,
				code: undefined,
				password: undefined,
				confirmPwd: undefined,
			},
		}
	},
	computed: {
		isShowCode() {
			return this.loginParam.phone && !this.isCode
		},
		isSubmit() {
			return this.loginParam.phone && this.loginParam.code &&
				this.loginParam.password && this.loginParam.confirmPwd
		}

	},
	watch: {

	},
	onLoad() {

	},
	methods: {
		//显示验证组件
		sliderVerify() {
			if(isValidPhone(this.loginParam.phone)) {
				this.$refs['sliderVerify'].show()
			} else {
				uni.$u.toast('请输入正确手机号');
			}
		},
		//验证通过回调
		successHandle(e) {
			console.log(e)
			this.getCode()
		},
		//验证失败回调
		errorHandle(e) {
			console.log(e)
		},
		//组件关闭回调
		closeHandle(e) {
			console.log(e)
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			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('倒计时结束后再发送');
			}
		},
		end() {
			// uni.$u.toast('倒计时结束');
			this.isCode = false
		},
		start() {
			// uni.$u.toast('倒计时开始');
			this.isCode = true
		},
		submit() {
			console.log('提交参数 :===>>', this.loginParam);
		}
	}
}
</script>

<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.top_bg {
	position: relative;
	width: 100vw;
	height: 568rpx;
	flex-shrink: 0;
	background: linear-gradient(to bottom, #ffd8bf, #ffffff);

	.top_close {
		position: absolute;
		top: 128rpx;
		left: 40rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.top_text {
		position: absolute;
		top: 224rpx;
		left: 64rpx;
		display: flex;
		color: #070602;
		font-family: "MiSans VF";
		font-size: 52rpx;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		letter-spacing: 0.66rpx;
		text-transform: uppercase;
	}

	.top_icon {
		margin-top: -10rpx;
		margin-left: 8rpx;
		width: 20rpx;
		height: 20rpx;
		flex-shrink: 0;
		border-radius: 50%;
		border: 6rpx solid #4caf50;
		background-color: transparent;
	}
}

.main {
	margin-top: -72rpx;

	.login {
		margin-top: 240rpx;
		height: 96rpx;
		width: 100%;
		flex-shrink: 0;
		border-radius: 64rpx;
		background: #FE6505;
		color: #ffffff;
		text-align: center;
		font-family: "MiSans VF";
		font-size: 36rpx;
		font-style: normal;
		font-weight: 500;
	}

	.code_btn {
		padding: 0rpx 24rpx;
		height: 60rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: #fff;
		font-weight: 400;
		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
	}

	.code_btn_off {
		background: #fe65054d;
	}
}
</style>