Skip to content

Great Teamwork
Great Teamwork

_milo / Great Teamwork

通知 13
Star 0
Fork 0
Great Teamwork
Great Teamwork
提交 385455f0 编写于 作者: M m0_74163447
浏览文件
操作

修改密码改为短信验证

上级 60bc3998
隐藏空白更改
内联 并排
Showing with 325 addition and 120 deletion
teamwork/pages/login/find.vue
浏览文件 @ 385455f0
......@@ -14,7 +14,8 @@
<uni-easyinput type="number" :inputBorder="true" v-model="formData.captcha"
placeholder="请输入六位验证码"></uni-easyinput>
</uni-forms-item>
<button class="captchaButton" @click="sendCaptcha()">发送验证码</button>
<!-- <button class="captchaButton" @click="sendCaptcha()">发送验证码</button> -->
<button size="mini" class="captchaButton" :disabled="btnDis" @tap="sendCaptcha">{{btnText}}</button>
</view>
<uni-forms-item name="newPassword" required label="新密码">
<uni-easyinput type="password" :inputBorder="true" v-model="formData.newPassword"
......@@ -53,6 +54,8 @@
components: {},
data() {
return {
btnDis: false,// 发送验证码按钮不禁用
btnText: "发送验证码",// 提示
loading: false,
graphicVerifyCode: "",
formData: {
......@@ -134,6 +137,30 @@
await this.$refs['popupDialog'].open()
await this.fcaptcha.refresh()
},
countDown() {
// 初始化定时器
let t = null;
// 倒计时1分钟
let timer = 300;
// 按钮禁用
this.btnDis = true;
// 计时器清零
clearInterval(t);
// 按钮显示时间
this.btnText = `${timer}s`;
t = setInterval(() => {
// 当倒计时完时，显示重新发送,按钮开启
if (timer == 0) {
clearInterval(t);
this.btnText = "重新发送";
this.btnDis = false;
return;
}
// 实现倒计时效果
timer--;
this.btnText = `${timer}s`;
}, 1000)
},
confirm(validateForm) {
this.$refs[validateForm].validate(valid => {
if (!valid) {
......@@ -223,6 +250,7 @@
this.code = res.result.code
console.log(this.userId)
})
this.countDown();
}
}
},
......
teamwork/pages/my/my-resetpassword.vue
浏览文件 @ 385455f0
......@@ -6,25 +6,46 @@
<span class="empty"></span>
</view>
<view class="content">
<view class="password">
<span>原&ensp;密&ensp;码：</span>
<input placeholder="请输入原密码" @input="bindPassword" type="text" :password="showPassword"
name="input"></input>
<view class="text-area">
<uni-forms :modelValue="formData" label-position="left" :labelWidth='90' :rules="confirmRules"
ref="form" validate-trigger="bind" err-show-type="undertext">
<uni-forms-item name="phone" required label="手机号">
<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
placeholder="请输入注册使用的手机号"></uni-easyinput>
</uni-forms-item>
<view style="display: flex;flex-flow: row nowrap;">
<uni-forms-item name="captcha" required label="验证码">
<uni-easyinput type="number" :inputBorder="true" v-model="formData.captcha"
placeholder="请输入六位验证码"></uni-easyinput>
</uni-forms-item>
<button size="mini" class="captchaButton" :disabled="btnDis" @tap="sendCaptcha">{{btnText}}</button>
<!-- <button class="captchaButton" @click="sendCaptcha()">发送验证码</button> -->
</view>
<uni-forms-item name="newPassword" required label="新密码">
<uni-easyinput type="password" :inputBorder="true" v-model="formData.newPassword"
placeholder="请输入密码"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="confirmPassword" required label="确认密码">
<uni-easyinput type="password" :inputBorder="true" v-model="formData.confirmPassword"
placeholder="请确认新密码"></uni-easyinput>
</uni-forms-item>
<uni-forms-item>
<button class="confirmButton" @click="confirm('form')">确认</button>
</uni-forms-item>
</uni-forms>
</view>
<view class="password">
<span>新&ensp;密&ensp;码：</span>
<input placeholder="请输入新密码" type="text" @input="bindNewPassword" :password="showPassword"
name="input"></input>
</view>
<view class="password">
<span>确认密码：</span>
<input placeholder="请确认密码" type="text" @input="bindConfirmPassword" :password="showPassword"
name="input"></input>
</view>
</view>
<view class="confirm">
<button class="confirm-btn" @click="confirmModification()">确认修改</button>
</view>
<uni-popup ref="popupDialog" type="center">
<view class="mcaptcha">
<view style="padding: 30px 20px;text-align: center;">
<canvas canvas-id="canvas" @click="updateImageCode" class="canvas"></canvas>
<input class="ginput" v-model="graphicVerifyCode" placeholder="请输入验证码" />
<button style="margin-top: 10px;" :loading="loading" @tap="submitFcha" class="btn-big">验证</button>
<view class="text" @click="updateImageCode">获取验证码</view>
</view>
</view>
</uni-popup>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定修改你的密码吗？"
@confirm="dialogConfirm"></uni-popup-dialog>
......@@ -33,115 +54,252 @@
</template>
<script>
let code = 200;
import {
Fcaptcha
} from "@/common/fcaptcha.js"
export default {
name: 'login',
components: {},
data() {
return {
showPassword: true,
password: '',
newPassword: '',
confirmPassword: '',
btnDis: false,// 发送验证码按钮不禁用
btnText: "发送验证码",// 提示
loading: false,
graphicVerifyCode: "",
formData: {
phone: '',
password: '',
captcha: '',
newPassword: ''
},
confirmRules: {
phone: {
rules: [{
required: true,
errorMessage: '请输入手机号'
}, {
validateFunction: function(rule, value, data, callback) {
if (value === '') {
callback(new Error('手机号不能为空'))
} else {
const reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/
if (reg.test(value)) {
this.yzmshow = true
callback()
} else {
callback('请输入正确的手机号')
}
}
}
}]
},
captcha: {
rules: [{
required: true,
errorMessage: '请输入六位验证码'
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length != 6) {
callback('验证码为六位！')
} else {
callback();
}
}
}]
},
newPassword: {
rules: [{
required: true,
errorMessage: '请输入密码'
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length > 20 || value.length < 8) {
callback('密码长度在8-20位！')
} else {
callback();
}
}
}]
},
confirmPassword: {
rules: [{
required: true,
errorMessage: '请确认密码'
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length > 20 || value.length < 8) {
callback('密码长度在8-20位！')
} else if (value != data.newPassword) {
callback('密码不一致')
} else {
callback();
}
}
}]
}
}
}
},
methods: {
bindPassword(e) {
this.password = e.detail.value;
async sendCaptcha() {
await this.$refs['popupDialog'].open()
await this.fcaptcha.refresh()
},
bindNewPassword(e) {
this.newPassword = e.detail.value;
countDown() {
// 初始化定时器
let t = null;
// 倒计时1分钟
let timer = 300;
// 按钮禁用
this.btnDis = true;
// 计时器清零
clearInterval(t);
// 按钮显示时间
this.btnText = `${timer}s`;
t = setInterval(() => {
// 当倒计时完时，显示重新发送,按钮开启
if (timer == 0) {
clearInterval(t);
this.btnText = "重新发送";
this.btnDis = false;
return;
}
// 实现倒计时效果
timer--;
this.btnText = `${timer}s`;
}, 1000)
},
bindConfirmPassword(e) {
this.confirmPassword = e.detail.value;
confirm(validateForm) {
this.$refs.alertDialog.open();
},
dialogConfirm() {
let that = this;
let password = that.password;
let newPassword = that.newPassword;
let confirmPassword = that.confirmPassword;
let updata = {};
if (!that.isPasswordAvailable(newPassword)) {
this.$refs[validateForm].validate(valid => {
if (!valid) {
this.calluniCloud()
}
})
},
async calluniCloud() {
await uniCloud.callFunction({
name: 'fe-retrievePassword',
data: {
phone: this.formData.phone,
password: this.formData.newPassword,
code: this.formData.captcha
}
})
.then(res => {
this.code = res.result.code
console.log(res)
})
await this.showTorM()
},
showTorM() {
if (this.code == 200) {
console.log(this.code, 'this.code1')
uni.showToast({
title: '密码长度在8-20位！',
icon: 'none',
title: '修改成功',
duration: 2000
});
return;
} else if (!that.isConfirmPasswordAvailable(newPassword, confirmPassword)) {
} else if (this.code == 400) {
uni.showToast({
title: '两次密码不一致',
icon: 'none',
title: '验证码错误或超时',
icon: "error",
duration: 2000
});
return;
} else if (that.password == newPassword) {
} else {
uni.showToast({
title: '与原密码一致',
icon: 'none',
title: '错误',
icon: "error",
duration: 2000
});
} else {
updata.password = password;
updata.newPassword = newPassword;
this.Upload(updata);
}
this.$refs.alertDialog.close();
},
goBack() {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
})
},
dialogClose() {
this.$refsalertDialog.close();
},
confirmModification() {
this.$refs.alertDialog.open();
// 刷新验证码
updateImageCode() {
this.fcaptcha.refresh()
},
isPasswordAvailable(newPassword) {
if (newPassword.length > 20 || newPassword.length < 8) {
return false;
} else {
return true;
// 提交前校验图形验证码
submitFcha() {
if (!this.graphicVerifyCode) {
return uni.showToast({
title: '请输入图形验证码',
icon: 'error'
})
}
},
isConfirmPasswordAvailable(newPassword, confirmPassword) {
if (newPassword == confirmPassword) {
return true;
let validate = this.fcaptcha.validate(this.graphicVerifyCode)
if (!validate) {
this.updateImageCode();
this.graphicVerifyCode = ''
uni.showToast({
title: '图形验证码错误',
icon: 'error'
})
this.fcaptcha.refresh()
} else {
return false;
}
},
goBack() {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
})
},
Upload(updata) {
uniCloud.callFunction({
name: 'fe-my-resetpassword',
data: {
userId: getApp().globalData.userId,
password: updata.password,
newPassword: updata.newPassword
},
uni.showToast({
title: '图形验证码通过'
})
.then(res => {
uni.showToast({
title: res.result.message,
icon: 'none',
duration: 2000
});
console.log(res);
});
},
onload() {
plus.navigator.setStatusBarBackground('#EDEEF0');
this.$refs['popupDialog'].close();
uniCloud.callFunction({
name: 'fe-auth-code',
data: {
phone: this.formData.phone
}
})
.then(res => {
this.code = res.result.code
console.log(this.userId)
})
this.countDown();
}
}
}
},
onReady() {
this.fcaptcha = new Fcaptcha({
el: 'canvas',
width: 80,
height: 35,
createCodeImg: ""
});
},
}
</script>
<style>
.bg {
background-color: #edeef0;
}
.main {
position: absolute;
width: 100%;
height: 100%;
}
.content {
/* background-color: #edeef0; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.top {
width: 100%;
......@@ -149,7 +307,7 @@
background-color: #EDEEF0;
text-align: center;
}
.back {
width: 40px;
height: 30px;
......@@ -158,7 +316,7 @@
float: left;
margin-left: 10px;
}
.empty {
width: 40px;
height: 30px;
......@@ -167,7 +325,7 @@
float: right;
margin-right: 10px;
}
.title {
font-size: 20px;
margin-top: 15px;
......@@ -176,46 +334,65 @@
display: inline-block;
}
.content {
width: 80%;
margin-top: 50%;
margin-left: auto;
.returnBack {
height: 55rpx;
width: 55rpx;
margin-top: 60rpx;
margin-left: 20rpx;
margin-right: auto;
}
.password {
.confirmButton {
background-color: #f1992d;
color: #fff;
border: 0;
border-radius: 20px;
}
margin-top: 50rpx;
height: 20%;
display: flex;
align-items: center;
.confirmButton::after {
border: 0;
}
/* border-bottom: 1px solid #ccc; */
.captchaButton {
background-color: #f1992d;
color: #fff;
width: 90px;
height: 35px;
font-size: 0.7em;
border: 0;
border-radius: 18px;
}
.password span {
font-size: 35rpx;
.captchaButton::after {
border: 0;
}
.password input {
border-bottom: 1px solid #ccc;
.mcaptcha {
display: flex;
flex-direction: column;
background-color: #fff;
width: 270px;
height: 200px;
border-radius: 10px;
}
.confirm {
height: 20%;
margin-top: 20%;
.canvas {
margin: auto;
width: 200rpx;
height: 100rpx;
}
.confirm-btn {
background-color: #F1992D;
color: #FFFFFF;
width: 70%;
height: 85rpx;
line-height: 85rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
border-radius: 20rpx;
.btn-big {
background-color: #f1992d;
color: #fff;
border: 0;
border-radius: 20px;
}
.text{
margin-top: 12px;
font-size: 10px;
color: #f1992d;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或