pages/sub_mine/findPayPwd.vue

<template>
	<view class="findPayPwd">
		<view class="findPayPwd-list">
			<u-field v-model="tel" label="手机号" placeholder="请输入手机号" placeholder-style="color:#999999;font-family:PingFang-SC-Regular"
			 label-width="160" maxlength="11" type="number" clear-size="40"></u-field>
			<u-field v-model="code" label="验证码" placeholder="请输入验证码" clear-size="40" placeholder-style="color:#999999" label-width="160" maxlength="6" type="number">
				<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle" :custom-style="btn" :disabled="isChecked">{{codeText}}</u-button>
			</u-field>
			<u-field v-model="pwd" label="新密码" placeholder="请输入6位密码" clear-size="40" placeholder-style="color:#999999" label-width="160" maxlength="6" :password="true" type="number"></u-field>
			<u-field v-model="repwd" label="确认新密码" placeholder="请确认密码" clear-size="40" placeholder-style="color:#999999" label-width="160" maxlength="6" :password="true" type="number"></u-field>
		</view>
		<u-button class="findPayPwd-btn" @click="findPayPwd" :custom-style="findPayPwdBtn">确认</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeText: "获取验证码",
				tel: "",
				code: "",
				pwd: "",
				repwd: "",
				isChecked:false,
				btn:{
					color: '#2FA8E1',
					backgroundColor: '#FFFFFF',
					borderColor:'#2FA8E1',
					borderWidth: '1rpx',
					borderStyle: 'solid',
					fontFamily: "PingFang-SC-Regular"
				},
				findPayPwdBtn:{
					width: '600rpx',
					backgroundColor: '#2FA8E1',
					color: '#FFFFFF',
					fontFamily: "PingFang-SC-Medium",
					fontSize: '30rpx',
					marginTop: '100rpx',
					padding: '50rpx 0'
				}
			}
		},
		methods: {
			getCode() {
				let that = this
				let tel = that.tel
				if (tel == "") {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none",
						duration: 800
					})
					return false
				}
				that.$u.post('/v1/code', {}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 800
					})
					let i = 60
					that.isChecked = true
					that.timer = setInterval(() => {
						if (i != 0) {
							i--
							that.codeText = i + "s"
						} else {
							clearInterval(that.timer)
							that.codeText = "重新获取"
							that.isChecked = false
						}
					}, 1000)
				})
			},
			async findPayPwd() {
				let that = this
				let {
					tel,
					pwd,
					code,
					repwd
				} = that
				if (tel == "") {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (code == "") {
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (pwd == "") {
					uni.showToast({
						title: "请设置您的密码",
						icon: "none",
						duration: 800
					})
					return false
				}
				if (pwd != repwd) {
					uni.showToast({
						title: "二次输入密码不一致,请确认后重新输入",
						icon: "none",
						duration: 800
					})
					return false
				}
				let param = {
					code: code,
				}
				let ret = await that.$u.post("/v1/checkcode", param)
				if (ret.code === 200) {
					let {
						randcode
					} = ret
					let param = {
						"pwd": pwd,
						"repwd": repwd,
						"type": "find",
						"randcode": randcode
					}
					that.$u.post("/v1/paypwd", param).then((res) => {
						uni.showToast({
							title: "密码重置成功",
							icon: "none",
							duration: 800,
							complete(res){
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/sub_tabbar/index"
									})
								}, 1500)
							}
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.findPayPwd {
		width: 100vw;
		// height: 100vh;
		background-color: #F3F3F3;
		overflow: hidden;
		padding-bottom: 30rpx;

		&-list {
			margin-top: 30rpx;
			background-color: #FFFFFF;
		}

		&-btn {
			width: 600rpx;
			background-color: #2FA8E1;
			color: #FFFFFF;
			font-family: "PingFang-SC-Medium";
			font-size: 30rpx;
			margin-top: 100rpx;
			padding: 50rpx 0;
		}

	}

	.btn {
		color: #2FA8E1;
		background-color: #FFFFFF;
		border-color: #2FA8E1;
		border-width: 1rpx;
		border-style: solid;
		font-family: "PingFang-SC-Regular";
	}
</style>