h5-uniapp/pages/login/forget.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" class="forgetPage">
		<view class="forgetClose" @click="onClose">×</view>
		<image class="forgetLang" :src="i18n.login.langImg" mode="aspectFit" @click="router.push('/pages/lang/lang')"></image>

		<view class="forgetBrand">
			<image class="forgetLogo" src="../../static/logo/logo.jpg" mode="widthFix"></image>
			<view class="forgetBrandText">C1 fund</view>
		</view>

		<view class="forgetWrap">
			<view class="forgetTitle">{{i18n.forget.title}}</view>

			<view class="forgetField">
				<view class="forgetLabel">{{i18n.forget.phone}}</view>
				<view class="forgetInputBox">
					<input class="forgetInput" type="text" v-model="email" :placeholder="i18n.forget.phoneTag" />
				</view>
			</view>

			<view class="forgetField">
				<view class="forgetLabel">{{i18n.forget.code}}</view>
				<view class="forgetInputBox forgetInputBoxCode">
					<input class="forgetInput" type="text" v-model="captcha" :placeholder="i18n.forget.codeTag" />
					<text class="forgetCodeBtn" @click="cutTime()">{{codeText}}</text>
				</view>
			</view>

			<view class="forgetField">
				<view class="forgetLabel">{{i18n.forget.newPassword}}</view>
				<view class="forgetInputBox">
					<input class="forgetInput" type="text" v-model="pwd1" password :placeholder="i18n.forget.newTag" />
				</view>
			</view>

			<view class="forgetField">
				<view class="forgetLabel">{{i18n.forget.confirm}}</view>
				<view class="forgetInputBox">
					<input class="forgetInput" type="text" v-model="pwd2" password :placeholder="i18n.forget.confirminput" />
				</view>
			</view>

			<button @click="forgot" class="cu-btn forgetBtn">{{i18n.forget.sure}}</button>
			<view class="height-40"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email: '',
				pwd1: '',
				pwd2: '',
				captcha: '',
				flag: true,
				time: 0,
				timeFlag: true,
				
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			codeText() {
				if (this.time > 0) {
					return this.time + " s"
				} else {
					return this.i18n.forget.get
				}
			}
		},
		onLoad() {
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			onClose() {
				uni.navigateBack({
					delta: 1
				})
			},
			forgot() {
				if (!this.flag) return
				if (this.email == '') {
					this.tos(this.i18n.forget.phoneTag)
					return
				}
				if (this.captcha == '') {
					this.tos(this.i18n.forget.codeTag)
					return
				}
				if (this.pwd1 == '') {
					this.tos(this.i18n.forget.newTag)
					return
				}
				if (this.pwd2 == '') {
					this.tos(this.i18n.forget.confirminput)
					return
				}
				if (this.pwd2 !== this.pwd1) {
					this.tos(this.i18n.forget.pwdInconsistent)
					return
				}
				uni.showLoading({
					title: this.i18n.forget.loading,
					mask: true
				})
				var obj = {
					email: this.email,
					newpassword: this.pwd2,
					captcha: this.captcha,
					types: 'pwd',
				}
				this.flag = false
				this.post('/user/resetpwd', obj).then(res => {
					console.log(res)
					uni.hideLoading()
					this.flag = true
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index?email=' + this.email
							})
						}, 500)
					}
				})
			},
			cutTime() {
				if (!this.timeFlag) return
				if (this.email == "") {
					this.tos(this.i18n.regist.phoneTag)
					return
				}
				uni.showLoading({
					title: this.i18n.regist.loading,
					mask: true
				})
				this.timeFlag = false
				this.post('/ems/send', {
					email: this.email,
					event: "resetpwd",
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.tos(res.msg)
						this.time = 120
						var that = this
						let timeName = setInterval(() => {
							if (that.time > 0) {
								that.time--
							} else {
								that.time = 0
								that.timeFlag = true
								clearInterval(timeName)
							}
						}, 1000)
					} else {
						this.timeFlag = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.forgetPage {
		min-height: 100vh;
		position: relative;
		padding-bottom: 60rpx;
	}

	.forgetClose {
		position: absolute;
		left: 30rpx;
		top: 24rpx;
		font-size: 44rpx;
		line-height: 44rpx;
		color: #111111;
		z-index: 5;
	}

	.forgetLang {
		position: absolute;
		right: 30rpx;
		top: 26rpx;
		width: 44rpx;
		height: 44rpx;
		z-index: 5;
	}

	.forgetBrand {
		padding-top: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.forgetLogo {
		width: 150rpx;
	}

	.forgetBrandText {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #111111;
	}

	.forgetWrap {
		padding: 50rpx 60rpx 0;
	}

	.forgetTitle {
		font-size: 44rpx;
		font-weight: 700;
		color: #111111;
		margin-bottom: 28rpx;
	}

	.forgetField {
		margin-bottom: 30rpx;
	}

	.forgetLabel {
		font-size: 28rpx;
		font-weight: 700;
		color: #111111;
		margin-bottom: 14rpx;
	}

	.forgetInputBox {
		height: 88rpx;
		background: #EAF3FF;
		border-radius: 10rpx;
		padding: 0 22rpx;
		display: flex;
		align-items: center;
	}

	.forgetInputBoxCode {
		justify-content: space-between;
	}

	.forgetInput {
		flex: 1;
		height: 88rpx;
		font-size: 28rpx;
		color: #111111;
	}

	.forgetCodeBtn {
		font-size: 26rpx;
		font-weight: 700;
		color: #1A74FF;
		margin-left: 18rpx;
		flex: 0 0 auto;
	}

	.forgetBtn {
		width: 100%;
		height: 90rpx;
		background: #1A74FF !important;
		border-radius: 10rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
	}
</style>