ts-program/src/views/User/Login.vue

<template>
  <div class="login d-flex justify-center">
    <div class="d-flex flex-column box">
      <!-- 切换登录方式 -->
      <div class="d-flex justify-center my-4">
        <a-button
          :class="type === 1 ? 'baseColor ' : 'textColor'"
          @click="type = 1"
          class="d-flex flex-column"
          type="link"
        >
          <span>免密登录</span>
          <div class="head-top mt-1" v-if="type === 1"></div>
        </a-button>
        <a-button
          :class="type === 3 ? 'baseColor ' : 'textColor'"
          @click="type = 3"
          class="d-flex flex-column"
          type="link"
        >
          <span>账号登录</span>
          <div class="head-top mt-1" v-if="type === 3"></div>
        </a-button>
      </div>
      <!-- 免密登录 -->
      <a-row class="d-flex flex-nowrap mt-4" type="flex" v-if="type === 1">
        <a-col :span="8" class="explain" flex="auto">
          <!-- <a-form :form="form" v-model="valid"> -->
          <a-form :form="form" @submit="handleSignIn">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="手机号"
            >
              <a-input
                @change="changePhone"
                placeholder="请输入手机号"
                type="tel"
                v-decorator="['identifier', { rules: phoneRules }]"
              />
            </a-form-item>
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="图片验证码"
              required
            >
              <div class="d-flex flex-nowrap">
                <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
                <img
                  :src="picCode.imageBase64"
                  @click="changePicCode"
                  class="code_img ml-2"
                  v-if="picCode && picCode.imageBase64"
                />
                <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
                <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
              </div>
            </a-form-item>

            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="短信验证码"
            >
              <div class="d-flex flex-nowrap">
                <a-input
                  placeholder="请输入验证码"
                  type="number"
                  v-decorator="['credential', { rules: codeRules }]"
                />
                <a-button
                  class="ml-2"
                  disabled
                  type="primary"
                  v-if="showInterval"
                >重新发送 {{ interval }}</a-button>
                <a-button
                  :disabled="identifier && identifier.length !== 11"
                  @click="getCode"
                  class="ml-2"
                  type="primary"
                  v-else
                >获取验证码</a-button>
              </div>
            </a-form-item>
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="来源"
            >
              <a-select placeholder="请选择来源" v-decorator="['source']">
                <a-select-option value="1">绿谷</a-select-option>
              </a-select>
            </a-form-item>

            <div class="d-flex flex-row-reverse">
              <a-button block class="my-5" html-type="submit" style="width: 75%" type="primary">现在登录</a-button>
            </div>
          </a-form>
          <div class="d-flex flex-row-reverse mt-1">
            <div class="d-flex flex-wrap" style="width: 75%">
              <router-link tag="span" to="/register">
                <span class="baseColor">新用户注册</span>
              </router-link>
              <div class="flex-1"></div>
              <router-link tag="span" to="/forget-password">
                <span class="textColor">忘记密码</span>
              </router-link>
            </div>
          </div>
        </a-col>
        <a-col :span="4" flex="150px">
          <div class="d-flex flex-column">
            <div>说明</div>
            <div>1.登录账号XXX</div>
          </div>
        </a-col>
      </a-row>
      <!-- 账号登录 -->
      <a-row class="d-flex flex-nowrap mt-4" type="flex" v-if="type === 3">
        <a-col :span="8" class="explain" flex="auto">
          <a-form :form="form" @submit="handleSignIn">
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="账号"
            >
              <a-input
                placeholder="请输入用户名/手机号"
                v-decorator="['identifier', { rules: [{ required: true, message: '请输入用户名/手机号' }] }]"
              />
            </a-form-item>
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="密码"
            >
              <a-input-password
                placeholder="请输入密码"
                v-decorator="['credential', { rules: passwordRules }]"
              />
            </a-form-item>
            <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="来源"
            >
              <a-select placeholder="请选择来源" v-decorator="['source']">
                <a-select-option value="1">绿谷</a-select-option>
              </a-select>
            </a-form-item>
            <div class="d-flex flex-row-reverse">
              <a-button block class="my-5" html-type="submit" style="width: 75%" type="primary">现在登录</a-button>
            </div>
          </a-form>
          <div class="d-flex flex-row-reverse mt-1">
            <div class="d-flex flex-wrap" style="width: 75%">
              <router-link tag="span" to="/register">
                <span class="baseColor">新用户注册</span>
              </router-link>
              <div class="flex-1"></div>
              <router-link tag="span" to="/forget-password">
                <span class="textColor">忘记密码</span>
              </router-link>
            </div>
          </div>
        </a-col>
        <a-col :span="4" flex="150px">
          <div class="d-flex flex-column">
            <div>说明</div>
            <div>1.登录账号XXX</div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { SIGN_IN_CLIENTS } from '@/config/user';
import mixin from './mixin';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18, offset: 6 },
};

export default {
  name: 'Login',
  mixins: [mixin],
  data() {
    return {
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'login' }),
      type: 1,
      identifier: '',
      codeNum: '',
    };
  },

  computed: mapState('user', ['picCode']),

  created() {
    this.sendPicCode();
  },

  methods: {
    ...mapActions('user', ['signIn', 'sendCode', 'sendPicCode']),
    changePhone(e) {
      this.identifier = e.target.value;
    },

    // 刷新验证码
    changePicCode() {
      this.sendPicCode();
    },

    // 获取验证码
    async getCode() {
      try {
        const params = {
          phone: this.identifier,
          verificationCodeId: this.picCode.verificationCodeId,
          verificationCodeValue: this.codeNum,
        };
        await this.sendCode(params);
        this.getCodeInterval();
      } catch (error) {
        throw new Error(`SignIn.vue method getCode: ${error}`);
      }
    },

    // 登录
    async handleSignIn(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          try {
            const { identifier, credential, source } = values;
            const { type } = this;
            const params = { data: { identifier, credential, source }, type, client: SIGN_IN_CLIENTS.h5 };
            console.log('params: ', params);
            await this.signIn(params);
            // 没有特殊情况就跳转到首页
            const { query } = this.$route;
            this.$router.replace({ path: '/', query });
          } catch (error) {
            console.log(`Login.vue methods handleSignIn: ${error}`);
          }
        }
      });
      return;
    },
  },
};
</script>

<style lang="stylus" scoped>
.login {
  min-height: 500px;
  max-width: 1260px;
  margin: 24px auto 40px;
  background: white;
}

.head-top {
  width: 58px;
  height: 2px;
  background: #13acc4;
}

.box {
  max-width: 700px;
  width: 50%;
}

.explain {
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid #EEEEEE;
}

.code_img {
  width: 102px !important;
  height: 32px !important;
}
</style>