wardrobe/pages/zhaohui/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-message ref="toast"></tm-message>
		<tm-menubars title="找回密码" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<tm-steps model="number" color="bg-gradient-blue-accent" activeFontColor="blue" line-color="bg-gradient-blue-accent" v-model="active" :list="list"></tm-steps>
			<view v-if="active==1">
				<tm-form>
					<tm-input name="title" title="手机号" v-model="reqData.mobile"></tm-input>
					<view class="flex-between" :class="$tm.vx.state().tmVuetify.black ? 'bk' : ''">
						<tm-input name="title" title="验证码" v-model="reqData.sms_code"></tm-input>
						<view>
							<tm-button @click="sendyzm" :theme="yzmvar.colorvar" size="m">{{yzmvar.text}}</tm-button>
						</view>
					</view>
					<view class="px-24">
						<tm-button @click="xia()" theme="bg-gradient-blue-accent" block>下一步</tm-button>
					</view>
				</tm-form>
			</view>
			<view v-else>
				<tm-form>
					<tm-input name="title" password title="密码" v-model="reqData.password"></tm-input>
					<tm-input name="title" password title="确认密码" v-model="reqData.password1"></tm-input>
					<view class="px-24">
						<tm-button @click="tijiao()" theme="bg-gradient-blue-accent" block>提交</tm-button>
					</view>
				</tm-form>
			</view>
		</tm-sheet>
		
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			active:1,
			list:['1.验证手机号码','2.设置新密码'],
			reqData:{
				mobile:'',
				sms_code:'',
				password:'',
				password1:''
			},
			yzmvar:{
				colorvar:'primary',
				text:'发送验证码'
			}
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		tijiao(){
			var that=this;
			if(that.reqData.password==""){
				that.$refs.toast.show({model:'warn',label:'请输入密码'})
				return
			}else if(that.reqData.password1==""){
				that.$refs.toast.show({model:'warn',label:'请输入确认密码'})
				return
			}else if(that.reqData.password != that.reqData.password1){
				that.$refs.toast.show({model:'warn',label:'密码不一致'})
				return
			}
			myRequest({
				url: "/api/login/retrievePassword",
				method:'post',
				data:that.reqData
			}).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					that.$refs.toast.show({model:'success',label:res.data.msg})
					setTimeout(function(){
						uni.navigateTo({
							url: "/pages/login/index",
						})
					},2000)
				}else{
					that.$refs.toast.show({model:'error',label:res.data.msg})
				}
			})
			
		},
		xia(){
			var that=this;
			if(that.reqData.mobile==""){
				that.$refs.toast.show({model:'warn',label:'请输入手机号'})
				return
			}else if(that.reqData.sms_code==""){
				that.$refs.toast.show({model:'warn',label:'请输入验证码'})
				return
			}
			that.active=2
		},
		sendyzm(){
			var that=this;
			if(that.reqData.mobile==""){
				that.$refs.toast.show({model:'warn',label:'请输入手机号'})
				return
			}
			that.yzmvar.colorvar="gray";
			that.yzmvar.text="已发送";
			setTimeout(function(){
				that.yzmvar.colorvar="primary";
				that.yzmvar.text="发送验证码";
			},5000)
		},
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
</style>