|
@@ -1,33 +1,38 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="container_text">
|
|
|
- <image class="banner-img" src="/static/img/img01.png" mode=" scaleToFill"></image>
|
|
|
- </view>
|
|
|
- <view class="loginTitle"><text>手机号登录</text></view>
|
|
|
- <view class="login_text">
|
|
|
- <view class="login_input flex">
|
|
|
- <view class="login_img"><image src="/static/icon/img03.png"></image></view>
|
|
|
- <view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
|
|
|
- </view>
|
|
|
- <view class="login_input flex">
|
|
|
- <view class="login_img"><image src="/static/icon/img06.png"></image></view>
|
|
|
- <view class="login_name flex">
|
|
|
- <input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
|
|
|
- <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <button type="green" @click="register" class="uni-button uni-button-green">登录</button>
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="" style="text-align: left;padding-left: 30rpx;font-size: 52rpx;padding-top: 50rpx;">
|
|
|
+ 重置密碼
|
|
|
+ </view>
|
|
|
+ <view class="tit" >
|
|
|
+ 郵箱
|
|
|
+ </view>
|
|
|
+ <input type="text" class="shuru" placeholder="郵箱" v-model="email">
|
|
|
+ <view class="tit" >
|
|
|
+ 新密碼
|
|
|
+ </view>
|
|
|
+ <input type="text" class="shuru" placeholder="新密碼" v-model="lpwd">
|
|
|
+ <view class="tit">
|
|
|
+ 郵箱驗證碼
|
|
|
+ </view>
|
|
|
+ <view class="flex" style="width: 673rpx;justify-content: space-between;margin: auto;">
|
|
|
+ <input type="text" class=" yzm" placeholder="驗證碼" v-model="ecode">
|
|
|
+ <view class="code yzmbtn" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex" style="justify-content: space-between;padding: 50rpx 30rpx;align-items: flex-start;">
|
|
|
+ <view class="">
|
|
|
+ </view>
|
|
|
+ <image src="../../static/icon/goto.png" mode="" style="width: 97rpx;height: 97rpx;" @click="resetpwd()"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapMutations } from 'vuex';
|
|
|
-import { verify, loginMobile, getUserInfo } from '@/api/login.js';
|
|
|
+import { verify, loginMobile, getUserInfo,getForget ,resetpwd} from '@/api/login.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
+ return {
|
|
|
+ ecode: '',
|
|
|
+ email: '',
|
|
|
phone: '', //用户
|
|
|
code: '', //验证码
|
|
|
time: '', //保存倒计时对象
|
|
@@ -44,7 +49,32 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapMutations('user', ['setUserInfo', 'login']),
|
|
|
+ ...mapMutations('user', ['setUserInfo', 'login']),
|
|
|
+ resetpwd() {
|
|
|
+ let obj = this
|
|
|
+ if(obj.email == '') {
|
|
|
+ return obj.$api.msg('請輸入郵箱!')
|
|
|
+ }
|
|
|
+ if (!obj.isEmailAvailable(obj.email)) {
|
|
|
+ return obj.$api.msg('請輸入正確的郵箱!')
|
|
|
+ }
|
|
|
+ if(obj.ecode == '') {
|
|
|
+ return obj.$api.msg('請輸入驗證碼!')
|
|
|
+ }
|
|
|
+ if(obj.lpwd == '') {
|
|
|
+ return obj.$api.msg('請輸入新密碼!')
|
|
|
+ }
|
|
|
+ resetpwd({
|
|
|
+ email: obj.email,
|
|
|
+ ecode: obj.ecode,
|
|
|
+ lpwd: obj.lpwd
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ obj.login()
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
// 手机登录
|
|
|
register() {
|
|
|
let obj = this;
|
|
@@ -78,17 +108,22 @@ export default {
|
|
|
}).catch((e) => {
|
|
|
console.log(e);
|
|
|
});
|
|
|
+ },
|
|
|
+ isEmailAvailable(obj) {
|
|
|
+ let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
|
|
|
+ if (!email.test(obj)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
},
|
|
|
//发送验证码
|
|
|
verification() {
|
|
|
- let obj = this;
|
|
|
- if (this.phone == '') {
|
|
|
- this.$api.msg('请输入电话号码');
|
|
|
- return;
|
|
|
+ let obj = this;
|
|
|
+ if(obj.email == '') {
|
|
|
+ return obj.$api.msg('請輸入郵箱!')
|
|
|
}
|
|
|
- if (this.phone.length < 11) {
|
|
|
- this.$api.msg('请输入正确的手机号');
|
|
|
- return;
|
|
|
+ if (!obj.isEmailAvailable(obj.email)) {
|
|
|
+ return obj.$api.msg('請輸入正確的郵箱!')
|
|
|
}
|
|
|
// 判断是否在倒计时
|
|
|
if (obj.countDown > 0) {
|
|
@@ -99,9 +134,9 @@ export default {
|
|
|
obj.countDown--;
|
|
|
}, 1000);
|
|
|
//调用验证码接口
|
|
|
- verify({
|
|
|
- phone: obj.phone,
|
|
|
- type: 'login'
|
|
|
+ getForget({
|
|
|
+ email: obj.email,
|
|
|
+ // type: 'login'
|
|
|
})
|
|
|
.then(({ data }) => {})
|
|
|
.catch(err => {
|
|
@@ -120,81 +155,58 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-page {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-size: 100%;
|
|
|
-}
|
|
|
-.container_text {
|
|
|
- width: 100%;
|
|
|
- height: 500rpx;
|
|
|
- top: 0rpx;
|
|
|
- .banner-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shuru {
|
|
|
+ display: block;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ width: 673rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ margin: auto;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ text-align: 95rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ padding: 40rpx 48rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gologin {
|
|
|
+ width: 204rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ line-height: 98rpx;
|
|
|
+ background-color: #fcd535;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wjmm {
|
|
|
+ color: #fcd535;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yzm {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yzmbtn {
|
|
|
+ width: 234rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 95rpx;
|
|
|
+ color: #fcd535;
|
|
|
}
|
|
|
-}
|
|
|
-.login_text {
|
|
|
- margin: auto 30rpx;
|
|
|
- position: relative;
|
|
|
- padding: 100rpx 102rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- margin-top: -180rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- .login_input {
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- margin-bottom: 65rpx;
|
|
|
- .login_img image {
|
|
|
- height: 35rpx;
|
|
|
- width: 29rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .uni-input {
|
|
|
- text-align: left;
|
|
|
- width: 470rpx;
|
|
|
- font-size: 28rpx !important;
|
|
|
- }
|
|
|
- .login_name {
|
|
|
- color: #333333;
|
|
|
- .width {
|
|
|
- width: 325rpx !important;
|
|
|
- }
|
|
|
- .code {
|
|
|
- color: #5dbc7c;
|
|
|
- font-size: 23rpx;
|
|
|
- border-left: 1px solid #eeeeee;
|
|
|
- width: 150rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .uni-button-green {
|
|
|
- color: #ffffff;
|
|
|
- background-color: #5dbc7c;
|
|
|
- margin: 40rpx 10rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- }
|
|
|
- .uni-button {
|
|
|
- height: 85rpx;
|
|
|
- line-height: 85rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.loginTitle {
|
|
|
- position: absolute;
|
|
|
- top: 250rpx;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- font-size: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-uni-button {
|
|
|
- height: 80rpx !important;
|
|
|
- line-height: 80rpx !important;
|
|
|
-}
|
|
|
-
|
|
|
</style>
|