a77/pages/login/forgetpassword.vue

<template>
	<view class="register container">

		<!-- 返回按钮 -->
		<view class="zindex999" @click="back">
			<image src="@/static/index/details/arrow_back.png" mode="widthFix"
				style="width: 48rpx;margin-left: 20rpx;margin-top: 50rpx;"></image>
		</view>
		<!-- 返回按钮 -->

		<view class="title">
			<!-- <view class="">
				登录
			</view> -->
			<view class="login_view">
				<view class="">
					重置密码
				</view>
				<view class="">
					<!-- 开启你的数字藏品之旅 -->
				</view>
				<!-- <image src="@/static/login/logo.png" mode=""></image> -->
			</view>
			<view class="text">
				<image src="@/static/logo.png" mode="widthFix" style="width: 120rpx;"></image>
			</view>
		</view>

		<view class="login_content">

			<view class="input_item">
				<view class="">
					<input type="number" v-model="tel" placeholder="输入手机号">
				</view>
			</view>
			<view class="input_item">
				<view class="">
					<input type="text" v-model="codeImgVal" placeholder="输入图形验证">
				</view>
				<view class="sendcode" @click="getVerify()" style="border: 0;">
					<image :src="codeImgData.image" mode="widthFix" style="width: 150rpx;"></image>
				</view>
			</view>
			<view class="input_item">
				<view class="">
					<input type="number" v-model="code" placeholder="输入验证码">
				</view>
				<view class="sendcode" @click="sendCode()" v-if="count<=0">
					发送验证码
				</view>
				<view class="sendcode" v-else>
					{{count}}秒后重新发送
				</view>
			</view>
			<view class="input_item">
				<!-- <view class="label">
					设置新密码
				</view> -->
				<view class="">
					<input type="password" v-model="pwd" placeholder="设置新密码">
				</view>
			</view>
			<view class="input_item">
				<!-- <view class="label">
					确认密码
				</view> -->
				<view class="">
					<input type="password" v-model="repwd" placeholder="确认新密码">
				</view>
			</view>

		</view>

		<view class="login_btn bcggreen colorBlack" @click="forget">
			确认
		</view>
		<view class="gologin">
			想起密码，<text style="color: #0C9D5B;" @click="rdt('/pages/login/login')">去登录</text>
		</view>
	</view>
</template>


<script>
	export default {
		components: {
		},
		data() {
			return {
				count: 0,
				tel: "",
				pwd: "",
				repwd: "",
				code: "",
				time: "",
				codeImgData: {},
				codeImgVal: '',
			}
		},
		onLoad() {
			this.getVerify()
		},
		onHide() {
			clearInterval(this.time)
		},
		methods: {
			getVerify() {
				this.api.graphVer().then(res => {
					this.codeImgData = res.data
				})
			},

			// 滑块验证



			// 发送验证码
			sendCode() {
				if (!this.codeImgVal) {
					this.$api.pop("请输入图形验证")
					return;
				}
				this.api.smsCode(this.tel, this.codeImgVal, this.codeImgData.uniqid).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.data.time < 115) {
							this.$api.pop(res.data.time + 's后重试')
						} else {
							this.$api.pop(res.info)
							this.count = 60
							setInterval(() => {
								if (this.count <= 0) {
									this.count = 0
									return
								}
								--this.count
							}, 1000)
						}
					}
				})
			},



			forget() {
				if (!this.tel) {
					this.$api.pop("请输入手机号")
					return
				}
				if (!this.code) {
					this.$api.pop("请输入验证码")
					return
				}
				if (!this.pwd) {
					this.$api.pop("请输入密码")
					return
				}
				if (!this.repwd) {
					this.$api.pop("请再次输入密码")
					return
				}
				if (this.pwd != this.repwd) {
					this.$api.pop("两次输入密码不一致")
					return
				}
				this.api.forget(this.tel, this.code, this.pwd, this.repwd).then(res => {
					if (res.code == 1) {
						this.$api.pop("修改成功")
						setTimeout(() => {
							this.$api.rdt("/pages/login/index")
						}, 1500)
					}
				})
			}
		}
	}
</script>


<style scoped>
	.register {
		box-sizing: border-box;
		/* padding-top: 72rpx; */
	}

	.title {
		width: 600rpx;
		font-size: 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 80rpx auto 0 auto;
	}

	/deep/ .uni-input-wrapper {
		color: #fff;
	}

	.login_view {
		font-size: 68rpx;
	}

	.login_content {
		margin-top: 70rpx;
		margin-left: 100rpx;
	}

	.text {
		width: 120rpx;
	}

	.input_item {
		display: flex;
		border-bottom: 1px solid #333333;
		width: 558rpx;
		height: 70rpx;
		font-size: 32rpx;
		margin-top: 60rpx;
		line-height: 70rpx;
		color: #999999;
		justify-content: space-between;
	}


	input {
		height: 70rpx;
		line-height: 70rpx;
	}

	
	.sendcode {
		font-size: 28rpx;
		color: #fff;
		border-bottom: 1px solid #fff;
		height: 55rpx;
	}
	.login_btn {
		width: 558rpx;
		height: 96rpx;
		color: #000;
		background: linear-gradient(to bottom, #69FF60, #0C9D5B);
		font-size: 32rpx;
		line-height: 100rpx;
		margin: 0 auto;
		margin-top: 88rpx;
		text-align: center;
		border-radius: 138rpx;
	}

	.gologin {
		font-size: 28rpx;
		margin: 22rpx auto;
		text-align: center;
	}


</style>