初步完善密码登录和验证码登录的逻辑

sfmind
1 parent 7fd8e0dd
Showing 3 changed files with 130 additions and 45 deletions
yudao-ui-app/common/api.js
yudao-ui-app/pages/login/login.vue
yudao-ui-app/pages/user/user.vue
 const { http } = uni.$u
  
+/* login */
+//使用手机 + 密码登录
+export const passwordLogin = params => http.post('/app-api/member/user/login', params)
+//发送手机验证码
+export const sendSmsCode = params => http.post('/app-api/member/send-sms-code', params)
+//使用手机 + 验证码登录
+export const smsLogin = params => http.post('/app-api/member/sms-login', params)
+
 /* index */
 // 获取滚动图数据
-export const getBannerData = params => http.get('/api/index', params)
+export const getBannerData = params => http.get('/app-api/index', params)
 // 获取滚动通知数据
-export const getNoticeData = params => http.get('/api/notice', params)
+export const getNoticeData = params => http.get('/app-api/notice', params)
@@ -8,15 +8,22 @@
     </view>
  
     <view class="unp-box">
+      <!-- 登录方式选择 -->
+      <view class="mode-section">
+        <u-subsection mode="subsection" fontSize="15" :list="loginModeList" :current="currentModeIndex" @change="handleModeChange"></u-subsection>
+      </view>
+      <u-gap height="40"></u-gap>
+
+      <!-- 登录表单 -->
       <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
-        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
-          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
+        <u-form-item label="手机号" prop="mobile" labelWidth="60" borderBottom ref="item-mobile">
+          <u-input type="number" maxlength="11" v-model="formData.mobile" clearable placeholder="请填写手机号" border="none"></u-input>
         </u-form-item>
  
         <u-gap height="20"></u-gap>
  
-        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
-            <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
+        <u-form-item v-if="currentModeIndex === 0" label="密码" prop="password" labelWidth="60" borderBottom ref="item-password">
+            <u-input :type="inputType" maxlength="16" v-model="formData.password" 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>
@@ -24,55 +31,75 @@
             </u-input>
         </u-form-item>
  
-        <view class="lk-group">
-          <navigator url="/pages/register/register" hover-class="none">
-            <text class="register">注册账号</text>
-          </navigator>
-          <navigator url="/pages/forgot/forgot" hover-class="none">
-            <text class="forgot">忘记密码</text>
-          </navigator>
-        </view>
-
-        <u-button
-            type="primary"
-            text="登录"
-            customStyle="margin-top: 50px"
-            @click="handleSubmit"
-        ></u-button>
+        <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
+          <u--input type="number" maxlength="4" v-model="formData.code" border="none" placeholder="请填写验证码"></u--input>
+          <u-button slot="right" @tap="getCode" :text="codeTips" type="success" size="mini" :disabled="codeDisabled"></u-button>
+          <u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true" @end="codeDisabled = false"></u-code>
+        </u-form-item>
+
+        <u-button type="primary" text="登录" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
  
         <u-gap height="20"></u-gap>
         <u-button type="info" text="返回" @click="navigateBack()"></u-button>
  
       </u--form>
  
-
     </view>
  
 	</view>
 </template>
  
 <script>
-	export default {
+import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
+
+  export default {
 		data() {
 			return {
+        //租户ID
+        agent: 1,
+        currentModeIndex: 0,
+        loginModeList: ['密码登录', '验证码登录'],
         inputType: 'password',
+        codeDisabled: false,
+        codeTips: '',
         formData: {
-          username: '',
+          mobile: '15601691234',
           password: '',
+          code: ''
         },
         rules: {
-          'username': {
+          'mobile': [
+            {
+              type: 'integer',
+              required: true,
+              message: '请填写手机号',
+              trigger: ['blur', 'change']
+            },
+            {
+              // 自定义验证函数，见上说明
+              validator: (rule, value, callback) => {
+                // 上面有说，返回true表示校验通过，返回false表示不通过
+                // uni.$u.test.mobile()就是返回true或者false的
+                return uni.$u.test.mobile(value);
+              },
+              message: '手机号码不正确',
+              // 触发器可以同时用blur和change
+              trigger: ['change','blur'],
+            }
+          ],
+          'password': {
             type: 'string',
-            max: 20,
+            min: 4,
+            max: 16,
             required: true,
-            message: '请输入您的账号',
+            message: '密码长度4-16位密码',
             trigger: ['blur', 'change']
           },
-          'password': {
-            type: 'string',
-            max: 20,
+          'code': {
+            type: 'integer',
+            len: 4,
             required: true,
-            message: '请输入您的密码',
+            message: '请填写4位验证码',
             trigger: ['blur', 'change']
           }
         }
@@ -80,25 +107,69 @@
 		},
 		onLoad() {
  
-		},
+		},onReady(){
+      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
+      this.$refs.form.setRules(this.rules)
+    },
 		methods: {
-      handleUsernameChange(e){
-        let str = uni.$u.trim(e, 'all');
-        this.$nextTick(() => {
-          this.formData.username = str
-        })
+      handleModeChange(index) {
+        if (index !== this.currentModeIndex){
+          this.currentModeIndex = index;
+          this.$refs.form.clearValidate();
+        }
       },
-      handlePasswordChange(e){
-        let str = uni.$u.trim(e, 'all');
-        this.$nextTick(() => {
-          this.formData.password = str
-        })
+      codeChange(text) {
+        this.codeTips = text;
+      },
+      getCode() {
+        const mobile = this.formData.mobile;
+        if (!mobile) {
+          uni.$u.toast('请填写手机号');
+        } else if (!uni.$u.test.mobile(mobile)){
+          uni.$u.toast('手机号格式不正确');
+        } else if (this.$refs.uCode.canGetCode) {
+          // 模拟向后端请求验证码
+          uni.showLoading({
+            title: '正在获取验证码'
+          });
+
+          //scene:1登陆获取验证码场景
+          sendSmsCode({agent: 1, mobile:mobile, scene:1 }).then(res => {
+            //console.log(res)
+            uni.hideLoading();
+            if (res.data.code === 0){
+              // 这里此提示会被this.start()方法中的提示覆盖
+              uni.$u.toast('验证码已发送');
+              // 通知验证码组件内部开始倒计时
+              this.$refs.uCode.start();
+            } else {
+              uni.$u.toast(res.data.msg);
+            }
+          }).catch(err => {
+            uni.$u.toast('服务器接口请求异常');
+          })
+        } else {
+          uni.$u.toast('倒计时结束后再发送');
+        }
       },
       handleSubmit() {
         this.$refs.form.validate().then(res => {
-          uni.$u.toast('点击了登录')
-        }).catch(err => {
-
+          uni.$u.toast('登录');
+          if (this.currentModeIndex === 0){
+            passwordLogin({agent: 1, mobile:this.formData.mobile, password:this.formData.password}).then(res => {
+              if (res.data.code === 0){
+                uni.$u.toast('登录成功');
+                // TODO 登录成功，保存toke
+              } else {
+                uni.$u.toast(res.data.msg);
+                // TODO 登录失败
+                }
+            }).catch(err => {
+              uni.$u.toast('服务器接口请求异常');
+            })
+          } else if (this.currentModeIndex === 1) {
+            smsLogin({agent: 1, mobile:this.formData.mobile, code:this.formData.code})
+          }
         })
       },
       navigateBack() {
@@ -123,11 +194,16 @@
   }
 }
  
+
 .unp-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
+  .mode-section{
+    width: 560rpx;
+  }
   .unp-form{
     width: 560rpx;
   }
@@ -65,6 +65,7 @@
 		},
 		methods: {
       handleUserInfoClick(){
+        // TODO 判断是否已经登录逻辑
         if (!uni.getStorageSync('token')) {
           uni.$u.route('/pages/login/login');
         } else {