first

zzzz

2024-04-16 273d548631148f99e17b6898d55a867a0ba93a25

 src/page/login/index.vue

@@ -1,206 +1,227 @@
<template>
    <div class="login">
        <div class="top" @click="$router.push('/home')"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)"
                alt="" /></div>
        <div class="title textColor">{{ $t('登录') }}</div>
        <div class="flex login-tab">
<!--            <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
  <div class="login">
    <div class="top" @click="$router.push('/home')">
      <img
        :src="require(`../../assets/theme/${theme}/image/Union.png`)"
        alt=""
      />
    </div>
    <div class="title textColor">{{ $t("登录") }}</div>
    <!-- <div class="flex login-tab">
            <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
             <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div>
        </div>
        <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
            :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon" />
        <ExInput style="padding-bottom:0!important;" :label="$t('密码')" :placeholderText="$t('请输入您的密码')" v-model="password"
            typeText="password" />
        <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('忘记密码?') }}</div>
        <div class="btn btnMain" @click="verifyLogin">{{ $t('登录') }}</div>
        <div class="noTips textColor">{{ $t('还没有账号') }}<span class="colorMain" @click="$router.push('/register')">
                {{ $t('去注册') }}</span>
        </div>
        <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
        </div> -->
    <ExInput
      :label="getRegType(0, true)"
      :placeholderText="getRegType(0, false)"
      v-model="username"
      :dialCode="dialCode"
      @selectArea="onSelectArea"
      :area="isArea"
      :icon="icon"
    />
    <ExInput
      style="padding-bottom: 0 !important"
      :label="$t('密码')"
      :placeholderText="$t('请输入您的密码')"
      v-model="password"
      typeText="password"
    />
    <div class="forget colorMain" @click="$router.push('/forget')">
      {{ $t("忘记密码?") }}
    </div>
    <div class="btn btnMain" @click="verifyLogin">{{ $t("登录") }}</div>
    <div class="noTips textColor">
      {{ $t("还没有账号")
      }}<span class="colorMain" @click="$router.push('/register')">
        {{ $t("去注册") }}</span
      >
    </div>
    <nationality-list
      ref="controlChild"
      :title="$t('选择区域码')"
      @getName="getName(arguments)"
    ></nationality-list>
  </div>
</template>

<script>
import ExInput from "@/components/ex-input";
import Axios from "@/API/login.js";
import { mapActions, mapGetters } from 'vuex';
import { GET_USERINFO, SET_CONFIG, SET_KEFU } from '@/store/const.store';
import nationalityList from '../authentication/components/nationalityList.vue'
import { mapActions, mapGetters } from "vuex";
import { GET_USERINFO, SET_CONFIG, SET_KEFU } from "@/store/const.store";
import nationalityList from "../authentication/components/nationalityList.vue";
export default {
    props: {

  props: {},
  components: {
    ExInput,
    nationalityList,
  },
  data() {
    return {
      username: "",
      password: "",
      activeIndex: 0,
      isArea: false,
      typeText: "password",
      dialCode: 0, //电话号前缀
      icon: "",
    };
  },
  computed: {
    ...mapGetters({
      theme: "home/theme",
    }),
  },
  methods: {
    ...mapActions("user", [GET_USERINFO, SET_CONFIG]),
    getRegType(activeIndex, bFlag) {
      switch (activeIndex) {
        case 0:
          return bFlag ? this.$t("账号") : this.$t("请输入账号");
        case 1:
          return bFlag ? this.$t("邮箱") : this.$t("请输入您的邮箱");
        case 2:
          return bFlag ? this.$t("手机号") : this.$t("请输入手机号");
      }
    },
    components: {
        ExInput,
        nationalityList
    onSelectArea() {
      this.openBtn();
    },
    data() {
        return {
            username: '',
            password: "",
            activeIndex: 1  ,
            isArea: false,
            typeText: "password",
            dialCode: 0, //电话号前缀
            icon: '',
    //打开国家列表底部弹窗
    openBtn() {
      this.$refs.controlChild.open();
    },
    //获取到当前选中国家的code值
    getName(params) {
      this.icon = params[1];
      this.dialCode = params[2];
    },
    changeIndex(index) {
      this.activeIndex = index;
      switch (index) {
        case 0:
        case 1: {
          this.isArea = false;
          break;
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        }),
    },
    methods: {
        ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
        getRegType(activeIndex, bFlag) {
            switch (activeIndex) {
                case 0:
                    return bFlag ? this.$t('账号') : this.$t('请输入账号');
                case 1:
                    return bFlag ? this.$t('邮箱') : this.$t('请输入您的邮箱');
                case 2:
                    return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
            }
        },
        onSelectArea() {
            this.openBtn();
        },
        //打开国家列表底部弹窗
        openBtn() {
            this.$refs.controlChild.open();
        },
        //获取到当前选中国家的code值
        getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
        },
        changeIndex(index) {
            this.activeIndex = index;
            switch (index) {
                case 0:
                case 1: {
                    this.isArea = false;
                    break;
                }
                case 2: {
                    this.isArea = true;
                    break;
                }
            }
        },
        verifyLogin() {
            if (this.username == '') {
                switch (this.activeIndex) {
                    case 0:
                        {
                            this.$toast(this.$t('请输入账号'));
                            break;
                        }
                    case 1:
                        {
                            this.$toast(this.$t('请输入邮箱'));
                            break;
                        }
                    case 2:
                        {
                            this.$toast(this.$t('请输入手机号'));
                            break;
                        }
                }
                return false
            }
            if (this.password == '') {
                this.$toast(this.$t('请输入密码'));
                return false
            }
            this.login()
        },
        async login() {
            Axios.loginUser({
                username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : `${this.username}`,
                password: this.password,
                re_password: this.repassword,
                type: this.type,
                usercode: this.invitCode,
            }).then((res) => {
                this.GET_USERINFO(res.data)
                this.SET_CONFIG() //获取判断是否乘以杠杆字段
                this.$router.push('/home')
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        case 2: {
          this.isArea = true;
          break;
        }
    }
}
      }
    },
    verifyLogin() {
      if (this.username == "") {
        switch (this.activeIndex) {
          case 0: {
            this.$toast(this.$t("请输入账号"));
            break;
          }
          case 1: {
            this.$toast(this.$t("请输入邮箱"));
            break;
          }
          case 2: {
            this.$toast(this.$t("请输入手机号"));
            break;
          }
        }
        return false;
      }
      if (this.password == "") {
        this.$toast(this.$t("请输入密码"));
        return false;
      }
      this.login();
    },
    async login() {
      Axios.loginUser({
        username: this.username,
        password: this.password,
      })
        .then((res) => {
          this.GET_USERINFO(res.data);
          this.SET_CONFIG(); //获取判断是否乘以杠杆字段
          this.$router.push("/home");
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    padding: 30px;
    font-size: 26px;
    box-sizing: border-box;
  width: 100%;
  padding: 30px;
  font-size: 26px;
  box-sizing: border-box;
}

.top {
    padding-left: 18px;
    padding-top: 18px;
  padding-left: 18px;
  padding-top: 18px;

    img {
        width: 37px;
        height: 37px;
    }
  img {
    width: 37px;
    height: 37px;
  }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 66px;
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 66px;
}

.login-tab {
    margin-bottom: 40px;
  margin-bottom: 40px;

    div {
        padding: 0 40px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        border-radius: 8px;
        margin-right: 20px;
  div {
    padding: 0 40px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    border-radius: 8px;
    margin-right: 20px;
  }

  .active {
    @include themify() {
      background: themed("tab_background");
    }

    .active {
        @include themify() {
            background: themed("tab_background");
        }

        @include themify() {
            color: themed("text_color");
        }
    @include themify() {
      color: themed("text_color");
    }
  }
}

.forget {
    font-size: 24px;
    line-height: 28px;
    margin-top: 18px;
  font-size: 24px;
  line-height: 28px;
  margin-top: 18px;
}

.btn {
    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 35px;
    margin-top: 36px;
    border-radius: 10px;
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 35px;
  margin-top: 36px;
  border-radius: 10px;
}

.noTips {
    margin-top: 44px;
  margin-top: 44px;
}
</style>