1

 <script setup>
 import { setToken, getToken } from "./utils/local-store.js";
-import { getOrderList, immediatePay, cancelPay } from "./api/index.js";
+import useUserStore from "@/store/modules/user";
+import {
+  getOrderList,
+  immediatePay,
+  cancelPay,
+  loginFree,
+} from "./api/index.js";
 import qrCodeDialog from "./components/qrCodeDialog.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import qrcode from "qrcode";
+import { md5 } from "md5js";
+
+const userStore = useUserStore();
+
 const status = reactive({
   0: {
     txt: "待支付",
@@ -149,7 +159,22 @@ onUnmounted(() => {
   clearInterval(order.timer);
 });
 
-order.fetchData();
+// 用户免登录
+const login = async () => {
+  const userId = userStore.user?.userId
+  const sign = md5(`uid=${userId}lgo1acfkw51jfo`, 32);
+  return loginFree({
+    userId: userId,
+    sign,
+  }).then((res) => {
+    setToken(res.data.token);
+    order.fetchData();
+  });
+};
+onMounted(() => {
+  login()
+});
+
 </script>
 
 <template>

 <script setup>
 import { ElMessage } from "element-plus";
 import { getPriceLevelInfo, getSiteConfig, confirmOrder } from "./api/index.js";
+import { onBeforeUnmount } from "vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -40,6 +41,60 @@ const price = reactive({
 const disabledIconUrl =
   "https://radv4.gitliuyi.top/images/20240511/unselect_default.png";
 
+function onWindowMessage(e) {
+  const data = e.data;
+
+  if (data.type == "picker-ready") {
+    // apiPromise.then(() => {})
+
+    siteConfig.fetchData().then((res) => {
+      const seat_arr = res.map((it) => {
+        let result = {
+          ...it,
+          active: 0,
+        };
+        Object.assign(result, getSeatRenderState(result));
+        return result;
+      });
+      // 子页面加载完毕，这里iframeRef一定ok
+      sendMsg("load-seats", seat_arr);
+      setTimeout(() => {
+        moveToPriceArea(route.query.ticket_block);
+      }, 500);
+    });
+  } else if (data.type == "seat-click") {
+    // 子页面点击了座位
+    const seatData = data.data;
+    console.log("座位点击", seatData);
+
+    // 如果座位处于不可点击状态，就return
+    if (seatData.state != 1) return;
+
+    // 如果当前筛选了某种座位，点击的不是这种座位，也返回
+    if (price.curPriceId && seatData.priceId != price.curPriceId) return;
+
+    if (
+      selectedSeats.value &&
+      selectedSeats.value?.length >= 5 &&
+      seatData.active == 0
+    )
+      return ElMessage({ type: "warning", message: "最多选择5个座位" });
+
+    const newActive = seatData.active == 0 ? 1 : 0;
+    const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
+    if (siteConfigItem) {
+      siteConfigItem.active = newActive;
+    }
+    sendMsg("update-seat", {
+      id: seatData.id,
+      data: {
+        active: newActive,
+        ...getSeatRenderState(siteConfigItem),
+      },
+    });
+  }
+}
+
 const siteConfig = reactive({
   loading: false,
   data: [],
@@ -82,9 +137,9 @@ watch(
         },
       });
     });
-    moveToPriceArea(priceId)
+    moveToPriceArea(priceId);
     console.log("update完成");
-  },
+  }
   // { immediate: true }
 );
 
@@ -116,65 +171,6 @@ const moveToPriceArea = (priceId) => {
   }, 500);
 };
 
-/**
- * 1. 加載iframe    3. 请求API的数据
- * 2. 等待iframe里面资源加载完毕并触发picker-ready事件
- * 4. 传递数据给iframe，等待渲染
- */
-
-window.addEventListener("message", (e) => {
-  const data = e.data;
-
-  if (data.type == "picker-ready") {
-    // apiPromise.then(() => {})
-
-    siteConfig.fetchData().then((res) => {
-      const seat_arr = res.map((it) => {
-        let result = {
-          ...it,
-          active: 0,
-        };
-        Object.assign(result, getSeatRenderState(result));
-        return result;
-      });
-      // 子页面加载完毕，这里iframeRef一定ok
-      sendMsg("load-seats", seat_arr);
-      setTimeout(() => {
-        moveToPriceArea(route.query.ticket_block);
-      }, 500);
-    });
-  } else if (data.type == "seat-click") {
-    // 子页面点击了座位
-    const seatData = data.data;
-    console.log("座位点击", seatData);
-
-    // 如果座位处于不可点击状态，就return
-    if (seatData.state != 1) return;
-
-    // 如果当前筛选了某种座位，点击的不是这种座位，也返回
-    if (price.curPriceId && seatData.priceId != price.curPriceId) return;
-
-    if (
-      selectedSeats.value &&
-      selectedSeats.value?.length >= 5 &&
-      seatData.active == 0
-    )
-      return ElMessage({ type: "warning", message: "最多选择5个座位" });
-
-    const newActive = seatData.active == 0 ? 1 : 0;
-    const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
-    if (siteConfigItem) {
-      siteConfigItem.active = newActive;
-    }
-    sendMsg("update-seat", {
-      id: seatData.id,
-      data: {
-        active: newActive,
-        ...getSeatRenderState(siteConfigItem),
-      },
-    });
-  }
-});
 const deleteSiteConfigItem = (seatData) => {
   const newActive = seatData.active == 0 ? 1 : 0;
   const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
@@ -231,7 +227,7 @@ const toConfirmOrder = () => {
       });
     })
     .catch((e) => {
-      if (e.code == 'B001') {
+      if (e.code == "B001") {
         router.push({
           path: "/seat/order",
           query: {
@@ -242,6 +238,18 @@ const toConfirmOrder = () => {
     });
 };
 
+/**
+ * 1. 加載iframe    3. 请求API的数据
+ * 2. 等待iframe里面资源加载完毕并触发picker-ready事件
+ * 4. 传递数据给iframe，等待渲染
+ */
+
+window.addEventListener("message", onWindowMessage);
+
+onBeforeUnmount(() => {
+  window.removeEventListener("message", onWindowMessage);
+});
+
 price.fetchData();
 </script>