wxapp_shuibei/components/login_mobile/index.vue

<template>
  <view v-if="isUp">
    <view class="mobile-bg" v-if="isShow" @click="close"></view>
    <view
      class="mobile-mask animated"
      :class="{ slideInUp: isUp }"
      :style="{ position: isPos ? 'fixed' : 'static' }"
    >
      <view class="input-item">
        <input type="text" v-model="account" placeholder="输入手机号" />
      </view>
      <view class="input-item">
        <input type="text" v-model="codeNum" placeholder="输入验证码" />
        <button class="code" :disabled="disabled" @click="code">
          {{ text }}
        </button>
      </view>
      <view class="sub_btn" @click="loginBtn">{{
        (!appStore.userInfo.phone && isLogin) ||
        (appStore.userInfo.phone && isLogin)
          ? "立即绑定"
          : "立即登录"
      }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useAppStore } from "@/stores/app.js";
import { onMounted } from "vue";
import { useSendCode } from "@/hooks/useSendCode";
import { useToast } from "@/hooks/useToast";
import { registerVerify, getCodeApi, getUserInfo } from "@/api/user";
import { getUserPhone, iosBinding } from "@/api/public";

const app = getApp();
const appStore = useAppStore();
const { Toast } = useToast();
const emit = defineEmits(["close", "wechatPhone"]);

const props = defineProps({
  isUp: { type: Boolean, default: false },
  authKey: { type: String, default: "" },
  isShow: { type: Boolean, default: true },
  isPos: { type: Boolean, default: true },
  appleShow: { type: String, default: "" },
  platform: { type: String, default: "" },
});

// 状态
const keyCode = ref("");
const account = ref("");
const codeNum = ref("");
const isApp = ref(0);

// 验证码倒计时等逻辑
const { disabled, text, sendCode } = useSendCode();

// 获取验证码
async function code() {
  if (!account.value) return Toast({ title: "请填写手机号码" });
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
    return Toast({ title: "请输入正确的手机号码" });
  try {
    const res = await registerVerify(account.value);
    Toast({ title: res.msg });
    sendCode();
  } catch (err) {
    Toast({ title: err });
  }
}

// 获取验证码api
function getCode() {
  getCodeApi()
    .then((res) => {
      keyCode.value = res.data.key;
    })
    .catch((res) => {
      Toast({ title: res });
    });
}

// 关闭弹窗
function close() {
  emit("close", false);
}

// 登录/绑定
function loginBtn() {
  if (!account.value) return Toast({ title: "请填写手机号码" });
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
    return Toast({ title: "请输入正确的手机号码" });
  if (!codeNum.value) return Toast({ title: "请填写验证码" });
  if (!/^[\w\d]+$/i.test(codeNum.value))
    return Toast({ title: "请输入正确的验证码" });
  uni.showLoading({
    title:
      !appStore.userInfo.phone && appStore.isLogin
        ? "正在绑定中"
        : "正在登录中",
  });
  if (!appStore.userInfo.phone && appStore.isLogin) {
    iosBinding({
      captcha: codeNum.value,
      phone: account.value,
    })
      .then((res) => {
        Toast({ title: "绑定手机号成功" });
        isApp.value = 1;
        getUserInfoFn();
      })
      .catch((error) => {
        uni.hideLoading();
        Toast({ title: error });
      });
  } else {
    getUserPhone({
      captcha: codeNum.value,
      phone: account.value,
      // #ifdef H5
      type: "public",
      // #endif
      key: props.authKey,
    })
      .then((res) => {
        appStore.LOGIN({ token: res.data.token });
        appStore.SETUID(res.data.uid);
        getUserInfoFn();
      })
      .catch((error) => {
        uni.hideLoading();
        Toast({ title: error });
      });
  }
}

// 获取用户信息
function getUserInfoFn() {
  getUserInfo().then((res) => {
    console.log("getUserInfoFn", res.data);

    uni.hideLoading();
    appStore.UPDATE_USERINFO(res.data);
    // #ifdef MP
    Toast({ title: "登录成功" });
    close();
    // #endif
    // #ifdef H5
    emit("wechatPhone", true);
    // #endif
  });
}

onMounted(() => {
  // getCode() // 如需自动获取验证码可打开
});
</script>

<style lang="scss" scoped>
.mobile-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.isPos {
  position: static;
}

.mobile-mask {
  z-index: 20;
  // position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 67rpx 30rpx;
  background: #fff;

  .input-item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 86rpx;
    margin-bottom: 38rpx;

    input {
      flex: 1;
      display: block;
      height: 100%;
      padding-left: 40rpx;
      border-radius: 43rpx;
      border: 1px solid #dcdcdc;
    }

    .code {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220rpx;
      height: 86rpx;
      margin-left: 30rpx;
      background: rgba(233, 51, 35, 0.05);
      font-size: 28rpx;
      color: $theme-color;
      border-radius: 43rpx;

      &[disabled] {
        background: rgba(0, 0, 0, 0.05);
        color: #999;
      }
    }
  }

  .sub_btn {
    width: 690rpx;
    height: 86rpx;
    line-height: 86rpx;
    margin-top: 60rpx;
    background: #e93323;
    border-radius: 43rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
  }
}

.animated {
  animation-duration: 0.4s;
}
</style>