调整自定义插件、代码风格化

yudao-ui-app/pages/login/login.vue

@@ -1,6 +1,5 @@
 <template>
-	<view class="container">
-
+  <view class="container">
     <view class="unp-header">
       <view class="unp-logo">
         <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
@@ -23,12 +22,12 @@
         <u-gap height="20"></u-gap>
 
         <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-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>
-              </template>
-            </u-input>
+            </template>
+          </u-input>
         </u-form-item>
 
         <u-form-item v-else label="验证码" prop="code" labelWidth="60" borderBottom>
@@ -41,170 +40,160 @@
 
         <u-gap height="20"></u-gap>
         <u-button type="info" text="返回" @click="navigateBack()"></u-button>
-
       </u--form>
-
     </view>
-
-	</view>
+  </view>
 </template>
 
 <script>
-import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
+import { passwordLogin, sendSmsCode, smsLogin } from '../../common/api'
 
-  export default {
-		data() {
-			return {
-        //租户ID
-        agent: 1,
-        currentModeIndex: 0,
-        loginModeList: ['密码登录', '验证码登录'],
-        inputType: 'password',
-        codeDisabled: false,
-        codeTips: '',
-        formData: {
-          mobile: '15601691234',
-          password: '',
-          code: ''
-        },
-        rules: {
-          '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',
-            min: 4,
-            max: 16,
+export default {
+  data() {
+    return {
+      //租户ID
+      agent: 1,
+      currentModeIndex: 0,
+      loginModeList: ['密码登录', '验证码登录'],
+      inputType: 'password',
+      codeDisabled: false,
+      codeTips: '',
+      formData: {
+        mobile: '15601691234',
+        password: '',
+        code: ''
+      },
+      rules: {
+        mobile: [
+          {
+            type: 'integer',
             required: true,
-            message: '密码长度4-16位密码',
+            message: '请填写手机号',
             trigger: ['blur', 'change']
           },
-          'code': {
-            type: 'integer',
-            len: 4,
-            required: true,
-            message: '请填写4位验证码',
-            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',
+          min: 4,
+          max: 16,
+          required: true,
+          message: '密码长度4-16位密码',
+          trigger: ['blur', 'change']
+        },
+        code: {
+          type: 'integer',
+          len: 4,
+          required: true,
+          message: '请填写4位验证码',
+          trigger: ['blur', 'change']
         }
-			}
-		},
-		onLoad() {
-
-		},onReady(){
-      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
-      this.$refs.form.setRules(this.rules)
+      }
+    }
+  },
+  onLoad() {},
+  onReady() {
+    // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
+    this.$refs.form.setRules(this.rules)
+  },
+  methods: {
+    handleModeChange(index) {
+      if (index !== this.currentModeIndex) {
+        this.currentModeIndex = index
+        this.$refs.form.clearValidate()
+      }
     },
-		methods: {
-      handleModeChange(index) {
-        if (index !== this.currentModeIndex){
-          this.currentModeIndex = index;
-          this.$refs.form.clearValidate();
-        }
-      },
-      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: '正在获取验证码'
-          });
+    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 => {
+        //scene:1登陆获取验证码场景
+        sendSmsCode({ agent: 1, mobile: mobile, scene: 1 })
+          .then(res => {
             //console.log(res)
-            uni.hideLoading();
-            if (res.data.code === 0){
+            uni.hideLoading()
+            if (res.data.code === 0) {
               // 这里此提示会被this.start()方法中的提示覆盖
-              uni.$u.toast('验证码已发送');
+              uni.$u.toast('验证码已发送')
               // 通知验证码组件内部开始倒计时
-              this.$refs.uCode.start();
+              this.$refs.uCode.start()
             } else {
-              uni.$u.toast(res.data.msg);
+              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('登录');
-          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('登录成功');
+          .catch(err => {
+            uni.$u.toast('服务器接口请求异常')
+          })
+      } else {
+        uni.$u.toast('倒计时结束后再发送')
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(res => {
+        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);
+                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() {
-        uni.navigateBack()
-      }
-		}
-	}
+            .catch(err => {
+              uni.$u.toast('服务器接口请求异常')
+            })
+        } else if (this.currentModeIndex === 1) {
+          smsLogin({ agent: 1, mobile: this.formData.mobile, code: this.formData.code })
+        }
+      })
+    },
+    navigateBack() {
+      uni.navigateBack()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-
 .unp-header {
   height: 400rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   .unp-logo {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    @include flex-center(column);
   }
 }
 
-
 .unp-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  @include flex-center(column);
 
-  .mode-section{
+  .mode-section {
     width: 560rpx;
   }
-  .unp-form{
+  .unp-form {
     width: 560rpx;
   }
 }
@@ -212,14 +201,10 @@ import {passwordLogin,sendSmsCode,smsLogin} from "../../common/api";
 .lk-group {
   height: 40rpx;
   margin-top: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  @include flex-space-between;
   font-size: 12rpx;
 
   color: $u-primary;
   text-decoration: $u-primary;
 }
-
-
 </style>