Merge commit '98f128c8' into order
Showing
3 changed files
with
54 additions
and
39 deletions
| ... | @@ -60,7 +60,7 @@ const siteConfig = reactive({ | ... | @@ -60,7 +60,7 @@ const siteConfig = reactive({ |
| 60 | y: gridSize * it.y, | 60 | y: gridSize * it.y, |
| 61 | w: gridSize, | 61 | w: gridSize, |
| 62 | h: gridSize, | 62 | h: gridSize, |
| 63 | icon: it.state == 1 ? it.selectIcon : disabledIconUrl, // 图片的url | 63 | icon: it.state == 1 ? it.unSelectIcon : disabledIconUrl, // 图片的url |
| 64 | active: 0, // 是否选中 | 64 | active: 0, // 是否选中 |
| 65 | priceId: route.query.openType == 0 ? it.dayPriceId : it.nightPriceId, | 65 | priceId: route.query.openType == 0 ? it.dayPriceId : it.nightPriceId, |
| 66 | }; | 66 | }; |
| ... | @@ -95,6 +95,31 @@ watch( | ... | @@ -95,6 +95,31 @@ watch( |
| 95 | const sendMsg = (type, data) => | 95 | const sendMsg = (type, data) => |
| 96 | iframeRef.value?.contentWindow.postMessage({ type: type, data: data }, "*"); | 96 | iframeRef.value?.contentWindow.postMessage({ type: type, data: data }, "*"); |
| 97 | 97 | ||
| 98 | const getSeatRenderState = (seat) => { | ||
| 99 | const { state, selectIcon, unSelectIcon } = seat; | ||
| 100 | const opacity = state == 0 || price.curPriceId == seat.priceId ? 1 : 0.3; | ||
| 101 | if (state != 1) return { icon: disabledIconUrl, opacity }; | ||
| 102 | return { icon: seat?.active ? selectIcon : unSelectIcon, opacity }; | ||
| 103 | }; | ||
| 104 | |||
| 105 | /** 平移到某个价格区域 */ | ||
| 106 | const moveToPriceArea = (priceId) => { | ||
| 107 | const priceSeats = siteConfig.data.filter((it) => it.priceId == priceId); | ||
| 108 | // 计算出x和y最小的值 | ||
| 109 | const minX = Math.min(...priceSeats.map((it) => it.x)); | ||
| 110 | const minY = Math.min(...priceSeats.map((it) => it.y)); | ||
| 111 | |||
| 112 | const offset = { | ||
| 113 | x: 40, | ||
| 114 | y: 200, | ||
| 115 | }; | ||
| 116 | |||
| 117 | sendMsg("stage-scale-to", { scale: 1 }); | ||
| 118 | setTimeout(() => { | ||
| 119 | sendMsg("stage-move-to", { x: offset.x - minX, y: offset.y - minY }); | ||
| 120 | }, 500); | ||
| 121 | }; | ||
| 122 | |||
| 98 | /** | 123 | /** |
| 99 | * 1. 加載iframe 3. 请求API的数据 | 124 | * 1. 加載iframe 3. 请求API的数据 |
| 100 | * 2. 等待iframe里面资源加载完毕并触发picker-ready事件 | 125 | * 2. 等待iframe里面资源加载完毕并触发picker-ready事件 |
| ... | @@ -103,30 +128,24 @@ const sendMsg = (type, data) => | ... | @@ -103,30 +128,24 @@ const sendMsg = (type, data) => |
| 103 | 128 | ||
| 104 | window.addEventListener("message", (e) => { | 129 | window.addEventListener("message", (e) => { |
| 105 | const data = e.data; | 130 | const data = e.data; |
| 106 | console.log("[parent]", data); | ||
| 107 | 131 | ||
| 108 | if (data.type == "picker-ready") { | 132 | if (data.type == "picker-ready") { |
| 109 | // apiPromise.then(() => {}) | 133 | // apiPromise.then(() => {}) |
| 110 | 134 | ||
| 111 | siteConfig.fetchData().then((res) => { | 135 | siteConfig.fetchData().then((res) => { |
| 112 | const seat_arr = res.map((it) => { | 136 | const seat_arr = res.map((it) => { |
| 113 | return { | 137 | let result = { |
| 114 | ...it, | 138 | ...it, |
| 115 | active: 0, | 139 | active: 0, |
| 116 | icon: | ||
| 117 | it.state == 1 && price.curPriceId == it.priceId | ||
| 118 | ? it.selectIcon | ||
| 119 | : disabledIconUrl, | ||
| 120 | }; | 140 | }; |
| 141 | Object.assign(result, getSeatRenderState(result)); | ||
| 142 | return result; | ||
| 121 | }); | 143 | }); |
| 122 | // 子页面加载完毕,这里iframeRef一定ok | 144 | // 子页面加载完毕,这里iframeRef一定ok |
| 123 | iframeRef.value.contentWindow.postMessage( | 145 | sendMsg("load-seats", seat_arr); |
| 124 | { | 146 | setTimeout(() => { |
| 125 | type: "load-seats", | 147 | moveToPriceArea(route.query.ticket_block); |
| 126 | data: seat_arr, | 148 | }, 500); |
| 127 | }, | ||
| 128 | "*" | ||
| 129 | ); | ||
| 130 | }); | 149 | }); |
| 131 | } else if (data.type == "seat-click") { | 150 | } else if (data.type == "seat-click") { |
| 132 | // 子页面点击了座位 | 151 | // 子页面点击了座位 |
| ... | @@ -155,7 +174,7 @@ window.addEventListener("message", (e) => { | ... | @@ -155,7 +174,7 @@ window.addEventListener("message", (e) => { |
| 155 | id: seatData.id, | 174 | id: seatData.id, |
| 156 | data: { | 175 | data: { |
| 157 | active: newActive, | 176 | active: newActive, |
| 158 | icon: newActive ? seatData.unSelectIcon : seatData.selectIcon, | 177 | ...getSeatRenderState(siteConfigItem), |
| 159 | }, | 178 | }, |
| 160 | }); | 179 | }); |
| 161 | } | 180 | } |
| ... | @@ -168,7 +187,10 @@ const deleteSiteConfigItem = (seatData) => { | ... | @@ -168,7 +187,10 @@ const deleteSiteConfigItem = (seatData) => { |
| 168 | } | 187 | } |
| 169 | sendMsg("update-seat", { | 188 | sendMsg("update-seat", { |
| 170 | id: seatData.id, | 189 | id: seatData.id, |
| 171 | data: { icon: newActive ? seatData.unSelectIcon : seatData.selectIcon }, | 190 | data: { |
| 191 | active: newActive, | ||
| 192 | ...getSeatRenderState(siteConfigItem), | ||
| 193 | }, | ||
| 172 | }); | 194 | }); |
| 173 | }; | 195 | }; |
| 174 | 196 | ||
| ... | @@ -272,7 +294,7 @@ price.fetchData(); | ... | @@ -272,7 +294,7 @@ price.fetchData(); |
| 272 | ref="iframeRef" | 294 | ref="iframeRef" |
| 273 | class="iframe" | 295 | class="iframe" |
| 274 | id="iframe" | 296 | id="iframe" |
| 275 | src="http://seat-choose.parent4relax.com/#/seat-picker" | 297 | src="https://seat-choose.parent4relax.com/#/seat-picker" |
| 276 | ></iframe> | 298 | ></iframe> |
| 277 | </div> | 299 | </div> |
| 278 | </div> | 300 | </div> | ... | ... |
| ... | @@ -22,7 +22,8 @@ const props = defineProps({ | ... | @@ -22,7 +22,8 @@ const props = defineProps({ |
| 22 | 22 | ||
| 23 | // 用户免登录 | 23 | // 用户免登录 |
| 24 | const login = async (userId) => { | 24 | const login = async (userId) => { |
| 25 | const sign = md5(`uid=${userId}lgo1acfkw51jfo`); | 25 | // const sign = md5(`uid=${userId}lgo1acfkw51jfo`); |
| 26 | const sign = "e00363b5016dbb6ee6cf78626a149f9c"; | ||
| 26 | return loginFree({ | 27 | return loginFree({ |
| 27 | userId: userId, | 28 | userId: userId, |
| 28 | sign, | 29 | sign, |
| ... | @@ -78,7 +79,18 @@ const select_form = reactive({ | ... | @@ -78,7 +79,18 @@ const select_form = reactive({ |
| 78 | select_form.ticket_block = e.priceId; | 79 | select_form.ticket_block = e.priceId; |
| 79 | }, | 80 | }, |
| 80 | // 去选座 | 81 | // 去选座 |
| 81 | toSelectSeat() { | 82 | async toSelectSeat() { |
| 83 | // 检查登录 | ||
| 84 | // const ticketUserToken = getToken(); | ||
| 85 | // if (!ticketUserToken) { | ||
| 86 | const userId = userStore.user?.userId; // [TODO] 从原项目中取已登录的用户ID | ||
| 87 | if (!userId) { | ||
| 88 | // 未登录,打开登录弹窗 | ||
| 89 | return userStore.setVisitor(); | ||
| 90 | } | ||
| 91 | // } | ||
| 92 | await login(userId); | ||
| 93 | |||
| 82 | if (!select_form.venueItem?.id) | 94 | if (!select_form.venueItem?.id) |
| 83 | return ElMessage({ type: "warning", message: "请选择时间" }); | 95 | return ElMessage({ type: "warning", message: "请选择时间" }); |
| 84 | if (select_form.session == -1) | 96 | if (select_form.session == -1) |
| ... | @@ -200,25 +212,6 @@ watch( | ... | @@ -200,25 +212,6 @@ watch( |
| 200 | return; | 212 | return; |
| 201 | } | 213 | } |
| 202 | 214 | ||
| 203 | // 检查登录 | ||
| 204 | const ticketUserToken = getToken(); | ||
| 205 | if (!ticketUserToken) { | ||
| 206 | const userId = 1; // [TODO] 从原项目中取已登录的用户ID | ||
| 207 | if (!userId) { | ||
| 208 | // 未登录,跳转登录 [TODO] | ||
| 209 | ElMessageBox.confirm("登录后操作", "提示", { | ||
| 210 | confirmButtonText: "确认", | ||
| 211 | type: "warning", | ||
| 212 | draggable: true, | ||
| 213 | showCancelButton: false | ||
| 214 | }).then((res) => { | ||
| 215 | router.push("/"); | ||
| 216 | }); | ||
| 217 | return; | ||
| 218 | } | ||
| 219 | await login(userId); | ||
| 220 | } | ||
| 221 | |||
| 222 | detail.fetchData(); | 215 | detail.fetchData(); |
| 223 | timeVenue.fetchData(); | 216 | timeVenue.fetchData(); |
| 224 | }, | 217 | }, | ... | ... |
| ... | @@ -20,7 +20,7 @@ http.interceptors.request.use( | ... | @@ -20,7 +20,7 @@ http.interceptors.request.use( |
| 20 | (config) => { | 20 | (config) => { |
| 21 | // 在发送请求之前做些什么 | 21 | // 在发送请求之前做些什么 |
| 22 | const TOKEN = getToken(); | 22 | const TOKEN = getToken(); |
| 23 | config.headers.Authorization = TOKEN; | 23 | if(TOKEN) config.headers.Authorization = TOKEN; |
| 24 | if (config.method == "get") config.params = config.data; | 24 | if (config.method == "get") config.params = config.data; |
| 25 | return config; | 25 | return config; |
| 26 | }, | 26 | }, | ... | ... |
-
Please register or sign in to post a comment