1

@@ -60,7 +60,7 @@ const siteConfig = reactive({
           y: gridSize * it.y,
           w: gridSize,
           h: gridSize,
-          icon: it.state == 1 ? it.selectIcon : disabledIconUrl, // 图片的url
+          icon: it.state == 1 ? it.unSelectIcon : disabledIconUrl, // 图片的url
           active: 0, // 是否选中
           priceId: route.query.openType == 0 ? it.dayPriceId : it.nightPriceId,
         };
@@ -95,6 +95,31 @@ watch(
 const sendMsg = (type, data) =>
   iframeRef.value?.contentWindow.postMessage({ type: type, data: data }, "*");
 
+const getSeatRenderState = (seat) => {
+  const { state, selectIcon, unSelectIcon } = seat;
+  const opacity = state == 0 || price.curPriceId == seat.priceId ? 1 : 0.3;
+  if (state != 1) return { icon: disabledIconUrl, opacity };
+  return { icon: seat?.active ? selectIcon : unSelectIcon, opacity };
+};
+
+/** 平移到某个价格区域 */
+const moveToPriceArea = (priceId) => {
+  const priceSeats = siteConfig.data.filter((it) => it.priceId == priceId);
+  // 计算出x和y最小的值
+  const minX = Math.min(...priceSeats.map((it) => it.x));
+  const minY = Math.min(...priceSeats.map((it) => it.y));
+
+  const offset = {
+    x: 40,
+    y: 200,
+  };
+
+  sendMsg("stage-scale-to", { scale: 1 });
+  setTimeout(() => {
+    sendMsg("stage-move-to", { x: offset.x - minX, y: offset.y - minY });
+  }, 500);
+};
+
 /**
  * 1. 加載iframe    3. 请求API的数据
  * 2. 等待iframe里面资源加载完毕并触发picker-ready事件
@@ -103,30 +128,24 @@ const sendMsg = (type, data) =>
 
 window.addEventListener("message", (e) => {
   const data = e.data;
-  console.log("[parent]", data);
 
   if (data.type == "picker-ready") {
     // apiPromise.then(() => {})
 
     siteConfig.fetchData().then((res) => {
       const seat_arr = res.map((it) => {
-        return {
+        let result = {
           ...it,
           active: 0,
-          icon:
-            it.state == 1 && price.curPriceId == it.priceId
-              ? it.selectIcon
-              : disabledIconUrl,
         };
+        Object.assign(result, getSeatRenderState(result));
+        return result;
       });
       // 子页面加载完毕，这里iframeRef一定ok
-      iframeRef.value.contentWindow.postMessage(
-        {
-          type: "load-seats",
-          data: seat_arr,
-        },
-        "*"
-      );
+      sendMsg("load-seats", seat_arr);
+      setTimeout(() => {
+        moveToPriceArea(route.query.ticket_block);
+      }, 500);
     });
   } else if (data.type == "seat-click") {
     // 子页面点击了座位
@@ -155,7 +174,7 @@ window.addEventListener("message", (e) => {
       id: seatData.id,
       data: {
         active: newActive,
-        icon: newActive ? seatData.unSelectIcon : seatData.selectIcon,
+        ...getSeatRenderState(siteConfigItem),
       },
     });
   }
@@ -168,7 +187,10 @@ const deleteSiteConfigItem = (seatData) => {
   }
   sendMsg("update-seat", {
     id: seatData.id,
-    data: { icon: newActive ? seatData.unSelectIcon : seatData.selectIcon },
+    data: {
+      active: newActive,
+      ...getSeatRenderState(siteConfigItem),
+    },
   });
 };
 
@@ -272,7 +294,7 @@ price.fetchData();
         ref="iframeRef"
         class="iframe"
         id="iframe"
-        src="http://seat-choose.parent4relax.com/#/seat-picker"
+        src="https://seat-choose.parent4relax.com/#/seat-picker"
       ></iframe>
     </div>
   </div>

@@ -22,7 +22,8 @@ const props = defineProps({
 
 // 用户免登录
 const login = async (userId) => {
-  const sign = md5(`uid=${userId}lgo1acfkw51jfo`);
+  // const sign = md5(`uid=${userId}lgo1acfkw51jfo`);
+  const sign = "e00363b5016dbb6ee6cf78626a149f9c";
   return loginFree({
     userId: userId,
     sign,
@@ -78,7 +79,18 @@ const select_form = reactive({
     select_form.ticket_block = e.priceId;
   },
   // 去选座
-  toSelectSeat() {
+  async toSelectSeat() {
+    // 检查登录
+    const ticketUserToken = getToken();
+    if (!ticketUserToken) {
+      const userId = userStore.user?.userId; // [TODO] 从原项目中取已登录的用户ID
+      if (!userId) {
+        // 未登录，打开登录弹窗
+        return userStore.setVisitor();
+      }
+      await login(userId);
+    }
+
     if (!select_form.venueItem?.id)
       return ElMessage({ type: "warning", message: "请选择时间" });
     if (select_form.session == -1)
@@ -200,25 +212,6 @@ watch(
       return;
     }
 
-    // 检查登录
-    const ticketUserToken = getToken();
-    if (!ticketUserToken) {
-      const userId = 1; // [TODO] 从原项目中取已登录的用户ID
-      if (!userId) {
-        // 未登录，跳转登录 [TODO]
-        ElMessageBox.confirm("登录后操作", "提示", {
-          confirmButtonText: "确认",
-          type: "warning",
-          draggable: true,
-          showCancelButton: false
-        }).then((res) => {
-          router.push("/");
-        });
-        return;
-      }
-      await login(userId);
-    }
-
     detail.fetchData();
     timeVenue.fetchData();
   },

@@ -20,7 +20,7 @@ http.interceptors.request.use(
   (config) => {
     // 在发送请求之前做些什么
     const TOKEN = getToken();
-    config.headers.Authorization = TOKEN;
+    if(TOKEN) config.headers.Authorization = TOKEN;
     if (config.method == "get") config.params = config.data;
     return config;
   },