zhywpt-sp/subpackage/after-sale/account-recharge/forget-password.vue

<template>
	
	<!-- <u-form :model="form" ref="form1" label-width=140 v-if='state.isShow'>
	    <u-form-item label="对公账户" >
	    	<u-input placeholder='请输入你的账户' type="text" v-model="state.form.name" />
	    	<u-button  type="success" size="mini" @click="search" >查询</u-button>
	    </u-form-item>
	</u-form> -->
	<view >
		<u-form :model="form" ref="form1" label-width=180 >
			<u-form-item label="用户名">
				<u-input placeholder='用户名' type="text" v-model="state.form.name" />
				<!-- <u-button  type="success" size="mini" @click="search" >查询</u-button> -->
			</u-form-item>
			<!-- <u-form-item label="手机号"  >
				<u-input placeholder='手机号' type="number" v-model="state.form.tel" disabled/>
			</u-form-item>
			<u-form-item label="验证码">
				<u-input v-model="state.form.code" placeholder='请输入短信验证码'/>
				<u-button  type="success" size="mini" @click="getCode" v-if="waitTime==1">获取验证码</u-button>
				<text class="btn" v-else>{{waitTime}}后重试</text>
			</u-form-item> -->
			<u-form-item label="新密码"  >
				<u-input placeholder='请输入'  v-model="state.form.password" type='password'/>
			</u-form-item>
			<u-form-item label="确认密码"  >
				<u-input placeholder='请输入'  v-model="state.form.againPassword" type='password'/>
			</u-form-item>
		</u-form>
		<button @click='goLogin()'>确定</button>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref } from "vue";
	import { navTo } from "@/utils/utils";
	import {changePass} from "@/utils/network/api.js";
	let waitTime = ref(0);
	const state = reactive({
		form:{
			name: '',
			tel:'',
			code:'',
			password:'',
			againPassword:'',
		},
		isShow:true,
	});
	const search=()=>{
		console.log("查询")
		state.isShow=false;
	}
	const getCode = () => {
		console.log(123);
		if (state.form.tel) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}
	}
	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.tel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
	
		//调用方式
		request(sendCode, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log(data, "#################");
				if (data.info == "成功.") {
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	const goLogin=()=>{
		if(!state.form.name){
			msg("请输入用户名!");
			return;
		}
		if(!state.form.password){
			msg("请输入密码!");
			return;
		}
		if(!state.form.againPassword){
			msg("请确认密码!");
			return;
		}
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				accountId: state.form.name,
				oldPwd: '',
				newPwd: state.form.password
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
			
		//调用方式
		request(changePass, options).then((res) => {
				navTo(`/subpackage/after-sale/account-recharge/login`);
			})
			.catch((err) => {
				console.log(err);
			});
	}
</script>

<style scoped>
	::v-deep .u-form-item--right__content__slot{
		display:flex !important;
	}
	::v-deep .u-form-item__body{
		padding: 0 40rpx;
		font-size: 32rpx;
	}
	::v-deep .u-input__input{
		font-size: 32rpx !important;
	}
	::v-deep .u-size-mini{
		font-size: 28rpx !important;
		padding: 12px 32rpx !important;
		white-space: nowrap;
	}
	button{
		width: 75%;
		height: 80rpx;
		margin-top:60rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
	}
	.btn{
		background: #19BE6B;
		padding: 0rpx 32rpx;
		border-radius: 10rpx;
		color: white;
		font-size: 24rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
	}
	::v-deep .u-form-item--right__content__slot{
		display:flex !important;
		align-items: center;
	}
</style>