b376073c by yyx

1

1 parent 1457e7cf
1 <script setup> 1 <script setup>
2 import { setToken, getToken } from "./utils/local-store.js"; 2 import { setToken, getToken } from "./utils/local-store.js";
3 import { getOrderList, immediatePay, cancelPay } from "./api/index.js"; 3 import useUserStore from "@/store/modules/user";
4 import {
5 getOrderList,
6 immediatePay,
7 cancelPay,
8 loginFree,
9 } from "./api/index.js";
4 import qrCodeDialog from "./components/qrCodeDialog.vue"; 10 import qrCodeDialog from "./components/qrCodeDialog.vue";
5 import { ElMessageBox, ElMessage } from "element-plus"; 11 import { ElMessageBox, ElMessage } from "element-plus";
6 import qrcode from "qrcode"; 12 import qrcode from "qrcode";
13 import { md5 } from "md5js";
14
15 const userStore = useUserStore();
16
7 const status = reactive({ 17 const status = reactive({
8 0: { 18 0: {
9 txt: "待支付", 19 txt: "待支付",
...@@ -149,7 +159,22 @@ onUnmounted(() => { ...@@ -149,7 +159,22 @@ onUnmounted(() => {
149 clearInterval(order.timer); 159 clearInterval(order.timer);
150 }); 160 });
151 161
152 order.fetchData(); 162 // 用户免登录
163 const login = async () => {
164 const userId = userStore.user?.userId
165 const sign = md5(`uid=${userId}lgo1acfkw51jfo`, 32);
166 return loginFree({
167 userId: userId,
168 sign,
169 }).then((res) => {
170 setToken(res.data.token);
171 order.fetchData();
172 });
173 };
174 onMounted(() => {
175 login()
176 });
177
153 </script> 178 </script>
154 179
155 <template> 180 <template>
......
1 <script setup> 1 <script setup>
2 import { ElMessage } from "element-plus"; 2 import { ElMessage } from "element-plus";
3 import { getPriceLevelInfo, getSiteConfig, confirmOrder } from "./api/index.js"; 3 import { getPriceLevelInfo, getSiteConfig, confirmOrder } from "./api/index.js";
4 import { onBeforeUnmount } from "vue";
4 5
5 const route = useRoute(); 6 const route = useRoute();
6 const router = useRouter(); 7 const router = useRouter();
...@@ -40,6 +41,60 @@ const price = reactive({ ...@@ -40,6 +41,60 @@ const price = reactive({
40 const disabledIconUrl = 41 const disabledIconUrl =
41 "https://radv4.gitliuyi.top/images/20240511/unselect_default.png"; 42 "https://radv4.gitliuyi.top/images/20240511/unselect_default.png";
42 43
44 function onWindowMessage(e) {
45 const data = e.data;
46
47 if (data.type == "picker-ready") {
48 // apiPromise.then(() => {})
49
50 siteConfig.fetchData().then((res) => {
51 const seat_arr = res.map((it) => {
52 let result = {
53 ...it,
54 active: 0,
55 };
56 Object.assign(result, getSeatRenderState(result));
57 return result;
58 });
59 // 子页面加载完毕,这里iframeRef一定ok
60 sendMsg("load-seats", seat_arr);
61 setTimeout(() => {
62 moveToPriceArea(route.query.ticket_block);
63 }, 500);
64 });
65 } else if (data.type == "seat-click") {
66 // 子页面点击了座位
67 const seatData = data.data;
68 console.log("座位点击", seatData);
69
70 // 如果座位处于不可点击状态,就return
71 if (seatData.state != 1) return;
72
73 // 如果当前筛选了某种座位,点击的不是这种座位,也返回
74 if (price.curPriceId && seatData.priceId != price.curPriceId) return;
75
76 if (
77 selectedSeats.value &&
78 selectedSeats.value?.length >= 5 &&
79 seatData.active == 0
80 )
81 return ElMessage({ type: "warning", message: "最多选择5个座位" });
82
83 const newActive = seatData.active == 0 ? 1 : 0;
84 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
85 if (siteConfigItem) {
86 siteConfigItem.active = newActive;
87 }
88 sendMsg("update-seat", {
89 id: seatData.id,
90 data: {
91 active: newActive,
92 ...getSeatRenderState(siteConfigItem),
93 },
94 });
95 }
96 }
97
43 const siteConfig = reactive({ 98 const siteConfig = reactive({
44 loading: false, 99 loading: false,
45 data: [], 100 data: [],
...@@ -82,9 +137,9 @@ watch( ...@@ -82,9 +137,9 @@ watch(
82 }, 137 },
83 }); 138 });
84 }); 139 });
85 moveToPriceArea(priceId) 140 moveToPriceArea(priceId);
86 console.log("update完成"); 141 console.log("update完成");
87 }, 142 }
88 // { immediate: true } 143 // { immediate: true }
89 ); 144 );
90 145
...@@ -116,65 +171,6 @@ const moveToPriceArea = (priceId) => { ...@@ -116,65 +171,6 @@ const moveToPriceArea = (priceId) => {
116 }, 500); 171 }, 500);
117 }; 172 };
118 173
119 /**
120 * 1. 加載iframe 3. 请求API的数据
121 * 2. 等待iframe里面资源加载完毕并触发picker-ready事件
122 * 4. 传递数据给iframe,等待渲染
123 */
124
125 window.addEventListener("message", (e) => {
126 const data = e.data;
127
128 if (data.type == "picker-ready") {
129 // apiPromise.then(() => {})
130
131 siteConfig.fetchData().then((res) => {
132 const seat_arr = res.map((it) => {
133 let result = {
134 ...it,
135 active: 0,
136 };
137 Object.assign(result, getSeatRenderState(result));
138 return result;
139 });
140 // 子页面加载完毕,这里iframeRef一定ok
141 sendMsg("load-seats", seat_arr);
142 setTimeout(() => {
143 moveToPriceArea(route.query.ticket_block);
144 }, 500);
145 });
146 } else if (data.type == "seat-click") {
147 // 子页面点击了座位
148 const seatData = data.data;
149 console.log("座位点击", seatData);
150
151 // 如果座位处于不可点击状态,就return
152 if (seatData.state != 1) return;
153
154 // 如果当前筛选了某种座位,点击的不是这种座位,也返回
155 if (price.curPriceId && seatData.priceId != price.curPriceId) return;
156
157 if (
158 selectedSeats.value &&
159 selectedSeats.value?.length >= 5 &&
160 seatData.active == 0
161 )
162 return ElMessage({ type: "warning", message: "最多选择5个座位" });
163
164 const newActive = seatData.active == 0 ? 1 : 0;
165 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
166 if (siteConfigItem) {
167 siteConfigItem.active = newActive;
168 }
169 sendMsg("update-seat", {
170 id: seatData.id,
171 data: {
172 active: newActive,
173 ...getSeatRenderState(siteConfigItem),
174 },
175 });
176 }
177 });
178 const deleteSiteConfigItem = (seatData) => { 174 const deleteSiteConfigItem = (seatData) => {
179 const newActive = seatData.active == 0 ? 1 : 0; 175 const newActive = seatData.active == 0 ? 1 : 0;
180 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id); 176 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
...@@ -231,7 +227,7 @@ const toConfirmOrder = () => { ...@@ -231,7 +227,7 @@ const toConfirmOrder = () => {
231 }); 227 });
232 }) 228 })
233 .catch((e) => { 229 .catch((e) => {
234 if (e.code == 'B001') { 230 if (e.code == "B001") {
235 router.push({ 231 router.push({
236 path: "/seat/order", 232 path: "/seat/order",
237 query: { 233 query: {
...@@ -242,6 +238,18 @@ const toConfirmOrder = () => { ...@@ -242,6 +238,18 @@ const toConfirmOrder = () => {
242 }); 238 });
243 }; 239 };
244 240
241 /**
242 * 1. 加載iframe 3. 请求API的数据
243 * 2. 等待iframe里面资源加载完毕并触发picker-ready事件
244 * 4. 传递数据给iframe,等待渲染
245 */
246
247 window.addEventListener("message", onWindowMessage);
248
249 onBeforeUnmount(() => {
250 window.removeEventListener("message", onWindowMessage);
251 });
252
245 price.fetchData(); 253 price.fetchData();
246 </script> 254 </script>
247 255
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!