cbz-sj/pages/login/forgot/forgot.vue

<template>
	<view class="content">
		<view class="form vflex">
			<u-input v-model="userInfo.name" placeholder="用户名/手机号"></u-input>
			<u-input v-model="code" placeholder="请输入验证码">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<view class="code" @tap="getCode" >{{tips}}</view>
				</template>
			</u-input>
			<u-input :type="pwd_type" v-model="userInfo.password" placeholder="请输入密码">
				<template slot="suffix">
					<view @click="show_pwd" v-if="pwd_type == 'password'">
						<image src="/static/images/login/biyanjing.png" class="pwd_icon"></image>
					</view>
					<view @click="show_pwd" v-if="pwd_type == 'text'">
						<image src="/static/images/login/yanjing.png" class="pwd_icon"></image>
					</view>
				</template>
			</u-input>
		</view>
		<view class="button hflex acenter jcenter" @click="submit">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					password: ''
				},
				code: '',
				tips: '获取验证码',
				pwd_type: 'password',
			}
		},
		onLoad() {
			that = this
		},
		watch: {
			value(newValue,oldValue) {
				
			}
		},
		methods: {
			// 验证码文字
			codeChange(text) {
				that.tips = text
			},
			// 获取验证码
			getCode() {
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					$api.req({
						url: '/data/api.Login/sendsms',
						data: {
							phone: that.userInfo.phone,
							type: 3
						}
					}, function(res) {
						uni.hideLoading();
						if(res.code == 1) {
							uni.$u.toast('验证码已发送')
							that.$refs.uCode.start()
						} else {
							uni.$u.toast('验证码发送失败')
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送')
				}
			},
			// 提交
			submit() {
				if ($api.formCheck(that.userInfo.name,"require") && $api.formCheck(that.userInfo.password, "require") && $api.formCheck(that.code, "code4")) {
					$api.req({
						url: '/data/api.Login/findpwd',
						method: 'POST',
						data: {
							phone: that.userInfo.name,
							verify: that.code,
							password: that.userInfo.password,
						}
					}, function(res) {
						console.log(res)
						if(res.code == 1) {
							$api.info('修改成功'),
							$api.jump(1,-1)
						} else {
							
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		padding: 0 60rpx;
		.form {
			width: 100%;
			padding-top: 64rpx;
			.u-input {
				width: 630rpx !important;
				height: 104rpx !important;
				background-color: #f4f4f4;
				border-radius: 52rpx;
				font-size: 30rpx !important;
				box-sizing: border-box;
				padding: 30rpx 48rpx !important;
				margin: 26rpx 0;
			}
			.pwd_icon {
				width: 40rpx;
				height: 40rpx;
			}
			.code {
				font-size: 30rpx;
				color: #506dff;
			}
		}
		.button {
			width: 100%;
			height: 96rpx;
			background-color: #506dff;
			border-radius: 50rpx;
			box-shadow: 0 4rpx 28rpx 0 rgba(132,123,255,0.4);
			font-size: 40rpx;
			color: #fff;
			margin: 40rpx 0 36rpx;
		}
	}
</style>