使用社交账号（微信小程序）登录

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

@@ -0,0 +1,182 @@
+<template>
+  <view class="container">
+    <view class="auth-header">
+      <view class="auth-logo">
+        <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
+      </view>
+    </view>
+
+    <view class="auth-box">
+      <!-- 登录方式选择 -->
+      <view class="mode-section">
+        <u-subsection class="subsection" mode="subsection" fontSize="15" :list="loginModeList" :current="currentModeIndex" @change="handleModeChange"></u-subsection>
+      </view>
+      <u-gap height="40"></u-gap>
+
+      <!-- 登录表单 -->
+      <u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
+        <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 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>
+            </template>
+          </u-input>
+        </u-form-item>
+
+        <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>
+
+        <view class="btn-group">
+          <u-button class="auth-btn" type="primary" customStyle="margin-top: 50px" @click="handleSubmit">登录/注册</u-button>
+        </view>
+      </u--form>
+    </view>
+  </view>
+</template>
+
+<script>
+import { sendSmsCode } from '../../api/auth'
+
+export default {
+  data() {
+    return {
+      currentModeIndex: 0,
+      loginModeList: ['密码登录', '验证码登录'],
+      inputType: 'password',
+      codeDisabled: false,
+      codeTips: '',
+      formData: {
+        mobile: '',
+        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,
+          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)
+  },
+  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: '正在获取验证码'
+        })
+
+        //scene:1登陆获取验证码场景
+        sendSmsCode({ mobile: mobile, scene: 1 }).then(res => {
+          //console.log(res)
+          uni.hideLoading()
+          uni.$u.toast('验证码已发送')
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start()
+        })
+      } else {
+        uni.$u.toast('倒计时结束后再发送')
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(res => {
+        this.$store.dispatch('Login', { type: this.currentModeIndex, data: this.formData }).then(res => {
+          uni.$u.toast('登录成功')
+          setTimeout(() => {
+            uni.switchTab({
+              url: '/pages/user/user'
+            })
+          }, 300)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.auth-header {
+  height: 400rpx;
+  @include flex-center;
+  .auth-logo {
+    @include flex-center(column);
+  }
+}
+
+.auth-box {
+  @include flex-center(column);
+
+  .mode-section {
+    width: 600rpx;
+    .subsection {
+      height: 60rpx;
+    }
+  }
+  .btn-group {
+    width: 600rpx;
+    .auth-btn {
+      height: 90rpx;
+      font-size: 32rpx;
+    }
+  }
+}
+</style>