xinkeaboard/xinkeaboard-web/components/loginModal.vue

<!--登录弹框 @zjf-2021-01-08-->
<template>
  <div class="sld_login_modal">
    <el-dialog
      title=""
      :model-value="modalVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="sld_login_content">
        <span
          class="iconfont icon-shanchutupian close_icon"
          @click="closeModal"
        />
        <div class="login">
          <div class="login_box">
            <div class="top">
              <div class="item1">{{ L["账号登录"] }}</div>
            </div>
            <div class="center">
              <div class="item account">
                <span
                  style="color: #bbb; font-size: 19px; padding-top: 7px"
                  class="icon iconfont icon-wode"
                ></span>
                <input
                  type="text"
                  v-model="name"
                  :placeholder="L['请输入账号']"
                  class="input"
                />
                <div
                  data-type="userName"
                  class="cancel"
                  @click="clearInputVal('name')"
                >
                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
                </div>
              </div>
              <div class="item password">
                <span
                  style="color: #bbb; font-size: 21px; padding-top: 7px"
                  class="icon iconfont icon-mima1"
                ></span>
                <input
                  type="password"
                  v-model="password"
                  :placeholder="L['请输入密码']"
                  class="input"
                  autocomplete="new-password"
                />
                <div
                  data-type="password"
                  class="cancel"
                  @click="clearInputVal('password')"
                >
                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
                </div>
              </div>
              <div class="error">
                <span
                  v-if="errorMsg"
                  style="color: #e1251b; font-size: 14px"
                  class="iconfont icon-jubao"
                ></span>
                {{ errorMsg }}
              </div>
              <a href="javascript:void(0)" @click="login" class="login_btn">{{
                L["登录"]
              }}</a>
            </div>
            <div :class="{ bottom: true, flex_row_between_center: true }">
              <router-link tag="a" :to="`/register`">
                {{ L["立即注册"] }}
              </router-link>
              <router-link tag="a" :to="`/pwd/forget`">
                {{ L["忘记密码"] }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
// const L = lang_zn;
const L = getCurLanguage();
const props = defineProps(["visibleFlag"]);
const modalVisible = ref(props.visibleFlag);
const { proxy } = getCurrentInstance();
const route = useRoute();
const name = ref(""); //用户名
const errorMsg = ref(); //错误提示
const password = ref(""); //密码
const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆
const fromurl = ref("");

const login = () => {
  let param = {};
  param.username = name.value;
  param.password = password.value;
  param.loginType = loginType.value;

  //账号验证
  if (!param.username) {
    errorMsg.value = L["请输入账号"];
    return false;
  }

  //密码校验
  if (!param.password) {
    errorMsg.value = L["请输入密码"];
    return false;
  } else {
    let checkPwdVal = checkPwd(param.password);
    if (checkPwdVal !== true) {
      errorMsg.value = checkPwdVal;
      return false;
    }
  }

  //如果未登录vuex中有购物车数据，需同步到该用户
  let cartInfo = [];
  let cartListData = store.state.cartListData;
  if (JSON.stringify(cartListData) != "{}") {
    cartListData.storeCartGroupList.map((cartListItem) => {
      cartListItem.promotionCartGroupList.map((promotItem) => {
        promotItem.cartList.map((cartItem) => {
          cartInfo.push({
            productId: cartItem.productId,
            buyNum: cartItem.buyNum,
          });
        });
      });
    });
  }
  param.cartInfo = JSON.stringify(cartInfo);
  post("v3/frontLogin/oauth/token", param).then((res) => {
    if (res.state == 200) {
      //将用户信息存缓存，并跳转到首页
      localStorage.setItem("access_token", res.data.access_token);
      localStorage.setItem("refresh_token", res.data.refresh_token);
      localStorage.setItem("time", new Date().getTime().toString()); //存储refresh_token更新时间
      //获取用户信息，并同步信息到vuex
      get("v3/member/front/member/getInfo").then((res) => {
        if (res.state == 200) {
          emit("refreshInfo");
          store.commit("updateMemberInfo", res.data);
        //   proxy.$getLoginCartListData(); //更新购物车数据
          closeModal();
        }
      });
    } else {
      //提示错误
      errorMsg.value = res.msg;
    }
  });
};

//清空输入框内容
const clearInputVal = (type) => {
  if (type == "name") {
    name.value = "";
  } else if (type == "password") {
    password.value = "";
  }
};

watchEffect(() => {
  modalVisible.value = props.visibleFlag;
  if (modalVisible.value == false) {
    document.body.style.overflow = "";
  } else {
    fromurl.value = window.location.origin + route.fullPath;
  }
});

//关闭登录modal
const closeModal = () => {
  emit("closeLoingModal");
};
</script>

<style lang="scss">
@use "@/assets/style/loginModal.scss" as *;

.sld_login_modal {
  .el-dialog {
    width: 376px !important;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__headerbtn {
    z-index: 999;
  }
}

.sld_login_modal {
  .sld_login_content {
    .login {
      .login_box {
        .top {
          .item1 {
            flex: 1;
            text-align: center;
            font-size: 18px;
            color: #666;
            position: relative;
            cursor: default;
          }
        }
      }
    }
  }
}
</style>