forgotPassword.vue
3.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
<view class="container">
<Navbar title="修改密码" canBack></Navbar>
<view class="auth-header">
<view class="auth-logo">
<u-image width="80px" height="80px" src="@/static/lpg-logo.png"></u-image>
</view>
</view>
<view class="loginTitleCss flex flex-direction">
<view class="text-xxl text-bold">
<!-- 账号密码登录 -->
{{accountTile}}
</view>
<view class="margin-top-sm text-gray">
{{accountTip}}
<!-- 未注册手机号登录后自动生成账号 -->
</view>
</view>
<view class="auth-box">
<u-gap height="10"></u-gap>
<!-- 登录表单 -->
<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
<u-gap height="20"></u-gap>
<u-form-item prop="newPwd" labelWidth="60" borderBottom ref="item-password">
<u-input :type="inputType" maxlength="16" v-model="formData.newPwd" placeholder="请输入新密码"
border="none">
<template slot="suffix">
<u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill"
@click="inputType = 'text'"></u-icon>
<u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off"
@click="inputType = 'password'"></u-icon>
</template>
</u-input>
</u-form-item>
<view class="flex justify-end align-center">
<view class="btn-group">
<view class="w100">
<u-button class="auth-btn" shape="circle" :disabled="!formData.newPwd.length"
:style="{background:formData.newPwd.length?'#EA5504':'#D5D8DF'}"
@click="handleSubmit">{{btnText}}</u-button>
</view>
</view>
</view>
</u--form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputType: 'password',
formData: {
account:"",
sms: "",
newPwd: "",
},
btnText: "确定修改",
accountTile: "输入新密码",
accountTip: "最少6位字符，包含字母、数宇、符号中的任意两项",
rules: {
newPwd: {
type: 'string',
min: 6,
max: 16,
required: true,
message: '密码长度6-16位密码',
trigger: ['blur', 'change']
},
},
}
},
onLoad(data) {
if (data.sms) {
this.formData.sms = data.sms;
}
if (data.account) {
this.formData.account = data.account;
}
},
onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form.setRules(this.rules)
},
methods: {
handleSubmit() {
this.$refs.form.validate().then(async res => {
console.log("修改提交",this.formData);
const result = await this.$api.loginApi.forgotPassword(this.formData);
let {
code,
value
} = result;
if (code === 200) {
uni.$u.toast('修改成功');
setTimeout(() => {
uni.redirectTo({
url: '/pages/login?type=1'
})
}, 500)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
background: #fff;
height: 100vh;
}
.auth-header {
width: 100%;
height: 200rpx;
.auth-logo {
margin: 40px 0 0 40px;
}
}
.auth-box {
margin: 0 40px;
.btn-group {
height: 100px;
width: 140px;
display: flex;
justify-content: flex-end;
align-items: center;
.auth-btn {
color: #fff;
height: 90rpx;
font-size: 32rpx;
}
}
}
.radioCss {
margin-top: 2px;
}
.loginTitleCss {
margin: 0 40px;
}
/deep/.u-form-item__body__right__message {
margin-left: 0px !important;
}
</style>