✨ 米游社 APP 登录 Web 搞了个组件

src/components/overlay/to-webLogin.vue

@@ -0,0 +1,137 @@
+<template>
+  <TOverlay v-model="visible" hide blur-val="20px">
+    <div class="tow-box">
+      <div class="tow-top">
+        <div class="tow-title">请使用米游社APP进行扫码操作</div>
+        <div class="tow-subtitle">所需米游社版本 >= 2.57.1</div>
+      </div>
+      <div class="tow-mid">
+        <qrcode-vue class="tow-qr" :value="qrCode" render-as="svg" />
+      </div>
+      <div class="tow-bottom">
+        <v-btn class="tow-btn" @click="onCancel">取消</v-btn>
+        <v-btn class="tow-btn" @click="freshQr">刷新</v-btn>
+        <v-btn class="tow-btn" @click="getData">已扫码</v-btn>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+// vue
+import { computed, onMounted, ref } from "vue";
+import showSnackbar from "../func/snackbar";
+import TOverlay from "../main/t-overlay.vue";
+import QrcodeVue from "qrcode.vue";
+// utils
+import { getLoginQr, getLoginStatus } from "../../plugins/Mys/utils/doWebLogin";
+
+interface ToWebLoginProps {
+  modelValue: boolean;
+}
+
+type ToWebLoginEmits = (e: "update:modelValue", value: boolean) => void;
+
+const props = withDefaults(defineProps<ToWebLoginProps>(), {
+  modelValue: false,
+});
+
+const emits = defineEmits<ToWebLoginEmits>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+const qrCode = ref<string>("");
+const ticket = ref<string>("");
+
+onMounted(async () => {
+  await freshQr();
+});
+
+async function freshQr(): Promise<void> {
+  const res = await getLoginQr();
+  if ("retcode" in res) {
+    showSnackbar({
+      text: `[${res.retcode}] ${res.message}`,
+      color: "error",
+    });
+    return;
+  }
+  ticket.value = res.ticket;
+  qrCode.value = res.url;
+}
+
+async function getData(): Promise<void> {
+  const res = await getLoginStatus(ticket.value);
+  if ("retcode" in res) {
+    showSnackbar({
+      text: `[${res.retcode}] ${res.message}`,
+      color: "error",
+    });
+    return;
+  }
+  // todo 后续处理
+  console.log(res);
+}
+
+function onCancel(): void {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.tow-box {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: var(--box-bg-1);
+  color: var(--app-page-content);
+  gap: 10px;
+}
+
+.tow-top {
+  border-bottom: 1px solid var(--common-shadow-4);
+  font-family: var(--font-title);
+  text-align: center;
+}
+
+.tow-title {
+  color: var(--common-text-title);
+  font-size: 20px;
+}
+
+.tow-subtitle {
+  font-size: 14px;
+  opacity: 0.6;
+}
+
+.tow-mid {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 5px;
+  aspect-ratio: 1;
+  background: var(--box-bg-2);
+}
+
+.tow-qr {
+  width: 256px;
+  height: 256px;
+}
+
+.tow-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.tow-btn {
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
+</style>

src/plugins/Mys/utils/doWebLogin.ts

@@ -20,15 +20,6 @@ const headers: Record<string, string> = {
   "User-Agent":
     "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
   "x-rpc-app_id": "bll8iq97cem8",
-  "x-rpc-client_type": "4",
-  "x-rpc-device_model": "Chrome 116.0.0.0",
-  "x-rpc-device_name": "Chrome",
-  "x-rpc-device_os": "Windows 10 64-bit",
-  "x-rpc-game_biz": "bbs_cn",
-  "x-rpc-mi_referrer":
-    "https://user.miyoushe.com/login-platform/index.html?app_id=bll8iq97cem8&app_version=2.58.0&theme=&token_type=4&game_biz=bbs_cn&message_origin=https%253A%252F%252Fwww.miyoushe.com&succ_back_type=message%253Alogin-platform%253Alogin-success&fail_back_type=message%253Alogin-platform%253Alogin-fail&sync_login_status=popup&ux_mode=popup&iframe_level=1&ap_mps=1#/login/qr",
-  "x-rpc-sdk_version": "2.17.0",
-  "X-Rpc-Device_fp": "",
   "X-Rpc-Device_id": uuid,
 };