其他扩展 ​

onMounted(() => {
  // 组件渲染完毕，使用QC生成QQ登录按钮，目的得到跳转链接
  QC.Login({
    btnId: "qq",
  });
});

server: {
    port: 80,
    host: true,
    open: true
  },

{
      path: '/login/callback',
      component: () => import('@/views/Login/LoginCallback.vue'),
      meta: { title: 'QQ登录-绑定手机' }
    }

// 不需要登录的页面，白名单
const wihteList = ["/login", "/login/callback"];

export const loginByQQAPI = (openId: string) => {
  return request({
    url: '/login/thirdparty',
    method: 'post',
    data: { openId, source: 'qq' }
  })
}

export const bindMobileAPI = (data: { mobile: string; code: string; openId: string }) => {
  return request({ url: '/login/binding', method: 'post', data })
}

import type { User } from "@/types/user";

// 登录成功
const store = useUserStore();
const router = useRouter();
const loginSuccess = (res: { data: User }) => {
  store.saveUser(res.data);
  router.replace("/");
  showSuccessToast("登录成功");
};

const onSubmit = async () => {
  const res = await bindMobileAPI({
    mobile: mobile.value,
    code: code.value,
    openId: openId.value,
  });
  loginSuccess(res);
};

import { type FormInstance } from "vant";
import { sendMobileCode } from "@/services/user";
import type { CodeType } from "@/types/user";

// 发送短信验证码吗逻辑
export const useSendMobileCode = (
  mobile: Ref<string>,
  type: CodeType = "login"
) => {
  
  const time = ref(0);
  let timeId: number;
  const send = async () => {
    if (time.value > 0) return;
    await sendMobileCode(mobile.value, type);
    showSuccessToast("发送成功");
    time.value = 60;
    // 倒计时
   
    timeId = window.setInterval(() => {
      time.value--;
      if (time.value <= 0) window.clearInterval(timeId);
    }, 1000);
  };
  onUnmounted(() => {
    window.clearInterval(timeId);
  });
  return {  time, send };
};

const {  time, send } = useSendMobileCode(mobile, "bindMobile");

const qqUrl = `https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=${encodeURIComponent(
  import.meta.env.VITE_APP_CALLBACK + "/login/callback"
)}`;

import { createHtmlPlugin } from "vite-plugin-html";

plugins: [createHtmlPlugin()];

import { viteMockServe } from "vite-plugin-mock";

plugins: [
  viteMockServe({
    mockPath: "./src/mock",
    localEnabled: true,
  }),
];

import type { MockMethod } from "vite-plugin-mock";
import Mock from "mockjs";

const rules: MockMethod[] = [
  {
    url: "/patient/message/list",
    method: "get",
    timeout: 1000,
    response: () => {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push(
          Mock.mock({
            id: "@id",
            avatar: '@image("100x100")',
            title: "@ctitle(3,10)",
            lastContent: "@ctitle(10,40)",
            sendTime: "@datetime()",
          })
        );
      }
      return {
        code: 10000,
        message: "获取数据成功",
        data,
      };
    },
  },
];

export default rules;