1
Showing
2 changed files
with
97 additions
and
64 deletions
| 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 | ... | ... |
-
Please register or sign in to post a comment