wardrobe/pages/zhtijiao/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="" :shadow="0" :showback="true"></tm-menubars>
		<view class="tou C1b1b1b">
			<view>设置新密码</view>
			<view class="text-size-s mt-20">请输入您的新密码</view>
		</view>
		<view class="zhuti">
			<tm-form>
				<view class="tel text-size-m mt-50">请设置6~20位新的登录密码</view>
				<view class="mima">
					<tm-input name="title" placeholder="请输入" :password="kan==1?true:false" v-model="reqData.password"></tm-input>
					<view class="one">
						<image v-if="kan==1" src="/static/icon/mima4.png" class="mimaicon2" @click="kan=2"></image>
						<image v-if="kan==2" src="/static/icon/mima3.png" class="mimaicon1" @click="kan=1"></image>
					</view>
				</view>
				<view class="mima">
					<tm-input name="title" :password="kan1==3?true:false" placeholder="请再次输入新的登录密码" v-model="reqData.password1"></tm-input>
					<view class="one">
						<image v-if="kan1==3" src="/static/icon/mima4.png" class="mimaicon2" @click="kan1=4"></image>
						<image v-if="kan1==4" src="/static/icon/mima3.png" class="mimaicon1" @click="kan1=3"></image>
					</view>
				</view>
				<view class="px-24">
					<tm-button @click="tijiao()" theme="primary" :round="24" class="mt100" block>确认</tm-button>
				</view>
			</tm-form>
		</view>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			active:1,
			kan:1, //1没看2看
			kan1:3, //1没看2看
			reqData:{
				mobile:'',
				sms_code:'',
				password:'',
				password1:''
			},
			yzmvar:{
				text:'发送验证码'
			}
		};
	},
	onLoad(option) {
		console.log(option)
		this.reqData.mobile=option.mobile;
		this.reqData.sms_code=option.sms_code;
	},
	created() {
		this.sys = uni.getSystemInfoSync();
	},
	methods: {
		tijiao(){
			var that=this;
			if(that.reqData.password=="" || that.reqData.password.length<6 ||that.reqData.password.length>20){
				that.$refs.toast.show({model:'warn',label:'请设置6-20位登录密码'})
				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.text="已发送";
			setTimeout(function(){
				that.yzmvar.text="发送验证码";
			},15000)
		},
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{
		background-color: #1b1b1b !important;
	}
	/deep/ .grey-darken-5{
		background-color: #0d0d0d!important;
		padding: 0px !important;
	}
	.tou{
		font-size: 28px;
		padding: 15px 30px 40px 30px;
	}
	.zhuti{
		padding: 15px 30px 40px 30px;
	}
	.mima{
		position: relative;
	}
	.wangji{
		position: absolute;
		right: 0px;
		top: 3px;
	}
	/deep/ .wangji .primary{
		background-color: #303440 !important;
	}
	.tel{
		margin-left: 5px;
	}
	.one{
		position: absolute;
		right: 15px;
		top: 18px;
		width: 50px;
		text-align: center;
	}
	.mimaicon1{
		width: 25px;
		height: 25px;
		
	}
	.mimaicon2{
		width: 25px;
		height: 25px;
	}
</style>