yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

接入密码找回功能

pull/1/MERGE
YunaiV 2023-08-19 23:12:19 +08:00
parent 592827bc3d
commit 475a681300
7 changed files with 152 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/member/auth.js
View File

@ -5,6 +5,8 @@ export function sendSmsCode(mobile, scene) {
return request.post('app-api/member/auth/send-sms-code', { return request.post('app-api/member/auth/send-sms-code', {
mobile, mobile,
scene scene
}, {
noAuth: true // TODO 芋艿：后续要做调整
}); });
} }

12
api/member/user.js
View File

@ -14,3 +14,15 @@ export function updateUser(data) {
export function updateUserMobile(data) { export function updateUserMobile(data) {
return request.put('app-api/member/user/update-mobile', data); return request.put('app-api/member/user/update-mobile', data);
} }
// 修改用户密码
export function updateUserPassword(data) {
return request.put('app-api/member/user/update-password', data);
}
// 重置密码
export function resetUserPassword(data) {
return request.put('app-api/member/user/reset-password', data, {
noAuth: true // TODO 芋艿：后续要做调整
});
}

6
pages.json
View File

@ -130,12 +130,6 @@
"style": { "style": {
} }
}, },
{
"path": "retrievePassword/index",
"style": {
"navigationBarTitleText": "忘记密码"
}
},
{ {
"path": "user_info/index", "path": "user_info/index",
"style": { "style": {

157
pages/retrieve_password/index.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<view class="register absolute"> <view class="register absolute">
<view class="shading"> <view class="shading">
<view class="pictrue acea-row row-center-wrapper"> <view class="pictrue acea-row row-center-wrapper">
<image src="../../static/images/logo2.png"></image> <image src="../../static/images/logo2.png" />
</view> </view>
</view> </view>
<view class="whiteBg"> <view class="whiteBg">
@ -10,13 +10,13 @@
<view class="list"> <view class="list">
<view class="item"> <view class="item">
<view class="acea-row row-middle"> <view class="acea-row row-middle">
<image src="/static/images/phone_1.png"></image> <image src="/static/images/phone_1.png" />
<input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="account" class="input"/> <input type="text" placeholder="输入手机号码" placeholder-class="placeholder" v-model="mobile" class="input"/>
</view> </view>
</view> </view>
<view class="item"> <view class="item">
<view class="align-left acea-row row-middle"> <view class="align-left acea-row row-middle">
<image src="/static/images/code_2.png"></image> <image src="/static/images/code_2.png" />
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" placeholder-class="placeholder"/> <input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" placeholder-class="placeholder"/>
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code"> <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
{{ text }} {{ text }}
@ -25,27 +25,28 @@
</view> </view>
<view class="item"> <view class="item">
<view class="acea-row row-middle"> <view class="acea-row row-middle">
<image src="/static/images/code_1.png"></image> <image src="/static/images/code_1.png" />
<input type="password" placeholder="填写您的登录密码" v-model="password" placeholder-class="placeholder" class="input"/> <input type="password" placeholder="填写您的登录密码" v-model="password" placeholder-class="placeholder" class="input"/>
</view> </view>
</view> </view>
</view> </view>
<view class="logon" @click="registerReset">确认</view> <view class="logon" @click="registerReset">确认</view>
<navigator url="/pages/users/login/index" class="tip"> <navigator url="/pages/users/login/index" class="tip">
<text class="font-color">立即登录</text> <text class="font-color">立即登录</text>
</navigator> </navigator>
</view> </view>
<view class="bottom"></view> <view class="bottom" />
</view> </view>
</template> </template>
<script> <script>
import sendVerifyCode from "@/mixins/SendVerifyCode"; import sendVerifyCode from "@/mixins/SendVerifyCode";
import { registerVerify, registerReset } from "@/api/user"; import * as AuthUtil from '@/api/member/auth.js';
export default { import * as UserApi from '@/api/member/user.js';
export default {
data() { data() {
return { return {
account: "", mobile: "",
password: "", password: "",
captcha: "" captcha: ""
}; };
@ -53,67 +54,77 @@
mixins: [sendVerifyCode], mixins: [sendVerifyCode],
methods: { methods: {
registerReset() { registerReset() {
let that = this; if (!this.mobile) {
if (!that.account) return that.$util.Tips({ return this.$util.Tips({
title: '请填写手机号码' title: '请填写手机号码'
}); });
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({ }
title: '请输入正确的手机号码' if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile)) {
}); return this.$util.Tips({
if (!that.captcha) return that.$util.Tips({ title: '请输入正确的手机号码'
title: '请填写验证码' });
}); }
if (!/^[\w\d]+$/i.test(that.captcha)) return that.$util.Tips({ if (!this.captcha) {
title: '请输入正确的验证码' return this.$util.Tips({
}); title: '请填写验证码'
if (!that.password) return that.$util.Tips({ });
title: '请填写密码' }
}); if (!/^[\w\d]+$/i.test(this.captcha)) {
if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({ return this.$util.Tips({
title: '您输入的密码过于简单' title: '请输入正确的验证码'
}); });
registerReset({ }
account: that.account, if (!this.password) {
captcha: that.captcha, return this.$util.Tips({
password: that.password title: '请填写密码'
}) });
.then(res => { }
that.$util.Tips({ if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(this.password)) {
title: res, return this.$util.Tips({
success: () => { title: '您输入的密码过于简单'
uni.navigateTo({ });
url: '/pages/login/index' }
}); UserApi.resetUserPassword({
} mobile: this.mobile,
}); code: this.captcha,
}) password: this.password
.catch(res => { }).then(res => {
that.$util.Tips({ return this.$util.Tips({
title: res title: '密码找回成功',
}); icon: 'success'
}); }, {
tab: 5,
url: '/pages/users/login/index'
});
}).catch(res => {
this.$util.Tips({
title: res
});
});
}, },
async code() {
let that = this; async code() {
if (!that.account) return that.$util.Tips({ if (!this.mobile) {
title: '请填写手机号码' return this.$util.Tips({
}); title: '请填写手机号码'
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({ });
title: '请输入正确的手机号码' }
}); if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.mobile)) {
registerVerify({ phone: that.account }) return this.$util.Tips({
.then(res => { title: '请输入正确的手机号码'
that.$util.Tips({ });
title: res }
}); AuthUtil.sendSmsCode(this.mobile, 4).then(res => {
that.sendCode(); this.$util.Tips({
}) title: res
.catch(res => { });
that.$util.Tips({ this.sendCode();
title: res }).catch(res => {
}); this.$util.Tips({
}); title: res
} });
});
}
} }
}; };
</script> </script>

161
pages/users/retrievePassword/index.vue
View File

@ -1,161 +0,0 @@
<template>
<div class="register absolute">
<div class="shading">
<div class="pictrue acea-row row-center-wrapper">
<image src="../../../static/images/logo2.png" />
</div>
</div>
<div class="whiteBg">
<div class="title">找回密码</div>
<div class="list">
<div class="item">
<div class="acea-row row-middle">
<image src="/static/images/phone_1.png"></image>
<input type="text" placeholder="输入手机号码" v-model="account" />
</div>
</div>
<div class="item">
<div class="acea-row row-middle">
<image src="/static/images/code_2.png"></image>
<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
{{ text }}
</button>
</div>
</div>
<div class="item">
<div class="acea-row row-middle">
<image src="/static/images/code_2.png"></image>
<input type="password" placeholder="填写您的新密码" v-model="password" />
</div>
</div>
<div class="item" v-if="isShowCode">
<div class="align-left">
<input type="text" placeholder="填写验证码" class="codeIput" v-model="codeVal" />
<div class="code" @click="again"><img :src="codeUrl" /></div>
</div>
</div>
</div>
<div class="logon" @click="registerReset">确认</div>
<div class="tip">
<span class="font-color-red" @click="back">立即登录</span>
</div>
</div>
<div class="bottom"></div>
</div>
</template>
<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import {
registerVerify,
registerReset,
getCodeApi
} from "@/api/user";
// import { validatorDefaultCatch } from "@/utils/dialog";
// import attrs, { required, alpha_num, chs_phone } from "@utils/validate";
// import { VUE_APP_API_URL } from "@utils";
export default {
name: "RetrievePassword",
data: function() {
return {
account: "",
password: "",
captcha: "",
keyCode: "",
codeUrl: "",
codeVal: "",
isShowCode: false
};
},
mixins: [sendVerifyCode],
mounted: function() {
this.getCode();
},
methods: {
back() {
uni.navigateBack();
},
again() {
this.codeUrl =
VUE_APP_API_URL + "/captcha?" + this.keyCode + Date.parse(new Date());
},
getCode() {
getCodeApi()
.then(res => {
this.keyCode = res.data.key;
})
.catch(res => {
this.$dialog.error(res.msg);
});
},
async registerReset() {
var that = this;
if (!that.account) return that.$util.Tips({
title: '请填写手机号码'
});
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
title: '请输入正确的手机号码'
});
if (!that.captcha) return that.$util.Tips({
title: '请填写验证码'
});
registerReset({
account: that.account,
captcha: that.captcha,
password: that.password,
code: that.codeVal
})
.then(res => {
that.$util.Tips({
title: res.message
}, {
tab: 3
})
})
.catch(res => {
that.$util.Tips({
title: res
})
});
},
async code() {
let that = this;
if (!that.account) return that.$util.Tips({
title: '请填写手机号码'
});
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
title: '请输入正确的手机号码'
});
if (that.formItem == 2) that.type = "register";
await registerVerify({
phone: that.account,
type: that.type,
key: that.keyCode,
code: that.codeVal
})
.then(res => {
that.$dialog.success(res.message);
that.sendCode();
})
.catch(res => {
// if (res.data.status === 402) {
// that.codeUrl = `${VUE_APP_API_URL}/sms_captcha?key=${that.keyCode}`;
// that.isShowCode = true;
// }
that.$util.Tips({
title: res
});
});
},
}
};
</script>
<style scoped>
.code img {
width: 100%;
height: 100%;
}
</style>

2
pages/users/user_phone/index.vue
View File

@ -122,7 +122,7 @@
oldCode: this.captcha oldCode: this.captcha
}).then(res => { }).then(res => {
return this.$util.Tips({ return this.$util.Tips({
title: res.message, title: '手机修改成功',
icon: 'success' icon: 'success'
}, { }, {
tab: 5, tab: 5,

164
pages/users/user_pwd_edit/index.vue
View File

@ -2,16 +2,18 @@
<view> <view>
<view class="ChangePassword"> <view class="ChangePassword">
<form @submit="editPwd" report-submit='true'> <form @submit="editPwd" report-submit='true'>
<view class="phone">当前手机号：{{phone}}</view> <view class="phone">当前手机号：{{ userInfo.mobile }}</view>
<view class="list"> <view class="list">
<view class="item"> <view class="item">
<input type='password' placeholder='以字母开头，长度在6~18之间，只能包含字符、数字和下划线' placeholder-class='placeholder' name="password" :value="password"></input> <input type='password' placeholder='以字母开头，长度在6~18之间，只能包含字符、数字和下划线'
placeholder-class='placeholder' name="password" :value="password" />
</view> </view>
<view class="item"> <view class="item">
<input type='password' placeholder='确认新密码' placeholder-class='placeholder' name="qr_password" :value="qr_password"></input> <input type='password' placeholder='确认新密码' placeholder-class='placeholder'
name="qr_password" :value="qr_password" />
</view> </view>
<view class="item acea-row row-between-wrapper"> <view class="item acea-row row-between-wrapper">
<input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" name="captcha" :value="captcha"></input> <input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput" name="captcha" :value="captcha" />
<button class="code font-color" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code"> <button class="code font-color" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
{{ text }} {{ text }}
</button> </button>
@ -20,105 +22,41 @@
<button form-type="submit" class="confirmBnt bg-color">确认修改</button> <button form-type="submit" class="confirmBnt bg-color">确认修改</button>
</form> </form>
</view> </view>
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
import sendVerifyCode from "@/mixins/SendVerifyCode"; import { mapGetters } from "vuex";
import { import sendVerifyCode from "@/mixins/SendVerifyCode";
phoneRegisterReset, import * as AuthUtil from '@/api/member/auth.js';
registerVerify import * as UserApi from '@/api/member/user.js';
} from '@/api/api.js'; export default {
import {
getUserInfo
} from '@/api/user.js';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
export default {
mixins: [sendVerifyCode],
components: {
// #ifdef MP
authorize
// #endif
},
data() { data() {
return { return {
userInfo: {},
phone: '',
password: '', password: '',
captcha: '', qr_password: '',
qr_password: '', captcha: '',
isAuto: false, //没有授权的不会自动授权
isShowAuth: false //是否隐藏授权
}; };
}, },
computed: mapGetters(['isLogin']), mixins: [sendVerifyCode],
watch:{ computed: mapGetters(['isLogin', 'userInfo']),
isLogin:{
handler:function(newV,oldV){
if(newV){
this.getUserInfo();
}
},
deep:true
}
},
onLoad() {
if (this.isLogin) {
this.getUserInfo();
} else {
toLogin();
}
},
methods: { methods: {
/**
* 授权回调
*/
onLoadFun: function(e) {
this.getUserInfo();
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
/**
* 获取个人用户信息
*/
getUserInfo: function() {
let that = this;
getUserInfo().then(res => {
let tel = res.data.phone;
let phone = tel.substr(0, 3) + "****" + tel.substr(7);
that.$set(that, 'userInfo', res.data);
that.phone = phone;
});
},
/** /**
* 发送验证码 * 发送验证码
*
*/ */
async code() { async code() {
let that = this; if (!this.userInfo.mobile) {
if (!that.userInfo.phone) return that.$util.Tips({ return this.$util.Tips({
title: '手机号码不存在,无法发送验证码！' title: '手机号码不存在，无法发送验证码！'
}); });
await registerVerify(that.userInfo.phone).then(res => { }
that.$util.Tips({ await AuthUtil.sendSmsCode(this.userInfo.mobile, 3).then(res => {
title: res.message this.$util.Tips({
title: '验证码已发送'
}); });
that.sendCode(); this.sendCode();
}).catch(err => { }).catch(err => {
return that.$util.Tips({ return this.$util.Tips({
title: err title: err
}); });
}); });
@ -126,38 +64,43 @@
/** /**
* H5登录 修改密码 * H5登录 修改密码
*
*/ */
editPwd: function(e) { editPwd: function(e) {
let that = this, const password = e.detail.value.password;
password = e.detail.value.password, const qr_password = e.detail.value.qr_password;
qr_password = e.detail.value.qr_password, const captcha = e.detail.value.captcha;
captcha = e.detail.value.captcha; if (!password) {
if (!password) return that.$util.Tips({ return this.$util.Tips({
title: '请输入新密码' title: '请输入新密码'
}); });
if (!/^[a-zA-Z]\w{5,17}$/i.test(password)) return that.$util.Tips({ }
title: '以字母开头，长度在6~18之间，只能包含字符、数字和下划线' if (!/^[a-zA-Z]\w{5,17}$/i.test(password)) {
}); return this.$util.Tips({
if (qr_password != password) return that.$util.Tips({ title: '以字母开头，长度在6~18之间，只能包含字符、数字和下划线'
title: '两次输入的密码不一致！' });
}); }
if (!captcha) return that.$util.Tips({ if (qr_password !== password) {
title: '请输入验证码' return this.$util.Tips({
}); title: '两次输入的密码不一致！'
phoneRegisterReset({ });
account: that.userInfo.phone, }
captcha: captcha, if (!captcha) {
return this.$util.Tips({
title: '请输入验证码'
});
}
UserApi.updateUserPassword({
code: captcha,
password: password password: password
}).then(res => { }).then(res => {
return that.$util.Tips({ return this.$util.Tips({
title: res.message title: '修改成功'
}, { }, {
tab: 3, tab: 3,
url: 1 url: 1
}); });
}).catch(err => { }).catch(err => {
return that.$util.Tips({ return this.$util.Tips({
title: err title: err
}); });
}); });
@ -165,7 +108,6 @@
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #fff !important; background-color: #fff !important;