Portal/pages/login.vue

<template>
  <view class="login">
    <div class="langview">
      <div class="select" @click="showLangselect(true)">
        {{ langList[language] }}
      </div>
      <div class="select-box" v-show="langselect">
        <div
          class="option"
          v-for="item in Object.keys(langList)"
          :key="item"
          :class="{ active: item == language }"
          @click="choseLang(item)"
        >
          {{ langList[item] }}
        </div>
      </div>
    </div>
    <view class="content">
      <view class="logo">
        <u--image
          :showLoading="false"
          :src="loginLogo"
          width="125px"
          height="119px"
          mode="scaleToFill"
        ></u--image>
      </view>
      <u-input
        class="input"
        v-model="phone"
        type="number"
        clearable
        :placeholder="$lang.enterAccount"
        ><!--
        <view class="phone-code" slot="prefix" @click="countryShow = true">{{
          countryData.country_code
        }}</view>-->
      </u-input>
      <u-input
        class="input"
        v-model="password"
        :password="true"
        :placeholder="$lang.enterPassword"
      >
      </u-input>
      <view class="btn-box">
        <view class="btn" @tap="login('login')">{{ $lang.login }}</view>
        <view class="btn" @tap="login('dome')">{{ $lang.dome }}</view>
      </view>
      <view class="tip" @tap="goRegister">{{ $lang.goRegister }}</view>
    </view>
    <!-- 提示 -->
    <u-toast ref="uToast" />
    <!-- 区号 -->
    <country-code
      class="country"
      :show="countryShow"
      :anchor="countryData.anchor_index"
      :country="countryData.country_en"
      @select="selectCountryTap"
      @close="countryShow = false"
    ></country-code>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      phone: "",
      password: "",
      countryShow: false,
      countryData: {
        anchor_index: 2,
        country_en: "Philippines",
        country_cn: "菲律賓",
        country_code: "+63",
      },
      langList: {
        en: "English",
        tw: "繁體中文",
		cn: "简体中文",
        yn: "Việt nam",
        kr: "한국어",
        tl: "แบบไทย",
        in: "Indonesia",
      },
      langselect: false,
    };
  },
  computed: {
    ...mapState({
      language: (state) => (state.app.language ? state.app.language : "en"),
      $lang: (state) => state.app.lang[state.app.language],
      loginLogo: (state) => state.app.loginLogo,
    }),
  },
  onLoad() {
    let userData = {};
    try {
      userData = localStorage.getItem("userInfo");
      userData = userData ? JSON.parse(userData) : {};
      if (userData && userData.id) {
        uni.switchTab({
          url: "/pages/index",
        });
      }
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    showLangselect(state) {
      this.langselect = state;
    },
    choseLang(lang) {
      this.$store.commit("app/updateLanguage", lang);
      this.langselect = false;
    },
    selectCountryTap(data) {
      this.countryData = data;
      this.countryShow = false;
    },
    goRegister() {
      this.$router.replace({
        path: "/pages/register",
      });
    },
    login(type) {
      if (!this.phone && type == "login") {
        this.$toast({
          message: this.$lang.enterAccount,
          duration: 2000,
        });
      } else if (!this.password & (type == "login")) {
        this.$toast({
          message: this.$lang.enterPassword,
          duration: 2000,
        });
      } else {
        const o = navigator.userAgent;
        const isAndroid = o.indexOf("Android") > -1 || o.indexOf("Adr") > -1; //android终端
        const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        const client = isAndroid ? 3 : isiOS ? 2 : 1;
        const params = {
          username: this.phone,
          password: this.password,
          code: this.countryData.country_code,
          client,
        };
        let api = "login";
        if (type == "dome") {
          api = "dome";
          params.token = "shiwanlogin";
          // console.log(params)
        }
        this.$toast({
          type: "loading",
          message: this.$lang.logining,
          duration: 200000,
        });
        this.$api[api](params)
          .then((res) => {
            if (res.Success) {
              this.$store.commit("app/updateUserInfo", {
                ...res.Data,
              });
              this.$store.commit("app/updateLoginType", type);
              uni.switchTab({
                url: "/pages/index",
              });
              this.$toastHide();
            } else {
              this.$toast({
                message: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$toastHide();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: url("~@/static/images/login_bg.png") no-repeat;
  background-size: 100% auto;
  background-position: bottom left;
  overflow-y: auto;
  .langview {
    position: absolute;
    top: 15px;
    right: 15px;
    .select {
      border-radius: 4px;
      width: 90px;
      display: inline-block;
      font-size: 14px;
      color: #cfc189;
      line-height: 35px;
      background: #212121;
      text-align: center;
      &:active {
        opacity: 0.6;
      }
    }
    .select-box {
      position: absolute;
      right: 0;
      top: 45px;
      width: 90px;
      line-height: 30px;
      background: #212121;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      z-index: 9;
      .option:active {
        opacity: 0.6;
      }
      .active {
        color: #cfc189;
        font-weight: bold;
      }
    }
  }
  .content {
    width: 280px;
    padding-bottom: 50px;
    margin: 0 auto;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      margin-top: 20%;
    }
    .input {
      height: 30px;
      line-height: 30px;
      margin-bottom: 15px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
    }
    .phone-code {
      min-width: 50px;
      text-align: center;
      border-right: 1px solid #ddd;
    }
    .btn-box {
      margin-top: 20px;
      .btn {
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 16px;
        background: url("~@/static/images/btn_bg.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
        margin-top: 15px;
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  .country {
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .tip {
    font-size: 12px;
    color: #b38f3c;
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
    &:active {
      opacity: 0.6;
    }
  }
}
</style>