Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
1b65759b by yyx
Options

1

1 parent 547289a7
Inline Side-by-side
Showing 8 changed files with 213 additions and 55 deletions
src/routerPc/en.js
...@@ -520,25 +520,37 @@ export const constantRoutes = [ ...@@ -520,25 +520,37 @@ export const constantRoutes = [
520 path: 'seat_picker', 520 path: 'seat_picker',
521 name: 'seat_picker', 521 name: 'seat_picker',
522 component: () => import('@/viewsPc/seat/seat-picker'), 522 component: () => import('@/viewsPc/seat/seat-picker'),
523 meta: { title: '选座' } 523 meta: { title: '选座' },
524 props: route => ({
525 activityId:route.query.id,
526 })
524 }, 527 },
525 { 528 {
526 path: 'order', 529 path: 'order',
527 name: 'seat_order', 530 name: 'seat_order',
528 component: () => import('@/viewsPc/seat/order-list'), 531 component: () => import('@/viewsPc/seat/order-list'),
529 meta: { title: '我的订单' } 532 meta: { title: '我的订单' },
533 props: route => ({
534 activityId:route.query.id,
535 })
530 }, 536 },
531 { 537 {
532 path: 'order_detail', 538 path: 'order_detail',
533 name: 'order_detail', 539 name: 'order_detail',
534 component: () => import('@/viewsPc/seat/order-detail'), 540 component: () => import('@/viewsPc/seat/order-detail'),
535 meta: { title: '订单详情' } 541 meta: { title: '订单详情' },
542 props: route => ({
543 activityId: route.query.id,
544 })
536 }, 545 },
537 { 546 {
538 path: 'confirm_order', 547 path: 'confirm_order',
539 name: 'confirm_order', 548 name: 'confirm_order',
540 component: () => import('@/viewsPc/seat/confirm-order'), 549 component: () => import('@/viewsPc/seat/confirm-order'),
541 meta: { title: '确认订单' } 550 meta: { title: '确认订单' },
551 props: route => ({
552 activityId:route.query.id,
553 })
542 }, 554 },
543 { 555 {
544 path: 'add_watch_people', 556 path: 'add_watch_people',
......
src/viewsPc/seat/components/qrCodeDialog.vue
...@@ -6,14 +6,24 @@ const props = defineProps({ ...@@ -6,14 +6,24 @@ const props = defineProps({
6 }, 6 },
7 qrCode: { 7 qrCode: {
8 type: String, 8 type: String,
9 default: '' 9 default: "",
10 } 10 },
11 }); 11 });
12
13 const emit = defineEmits(["closeDialog"]);
14 const handleCloce = () => {
15 emit("closeDialog", false);
16 };
12 </script> 17 </script>
13 18
14 <template> 19 <template>
15 <div> 20 <div>
16 <el-dialog v-model="props.showCodeDialog" title="支付" width="300"> 21 <el-dialog
22 v-model="props.showCodeDialog"
23 title="支付"
24 width="300"
25 :before-close="handleCloce()"
26 >
17 <div> 27 <div>
18 <img class="qrcode" :src="props.qrCode" /> 28 <img class="qrcode" :src="props.qrCode" />
19 </div> 29 </div>
......
src/viewsPc/seat/confirm-order.vue
...@@ -8,6 +8,10 @@ import qrCodeDialog from "./components/qrCodeDialog.vue"; ...@@ -8,6 +8,10 @@ import qrCodeDialog from "./components/qrCodeDialog.vue";
8 const route = useRoute(); 8 const route = useRoute();
9 const router = useRouter(); 9 const router = useRouter();
10 10
11 const props = defineProps({
12 activityId: [String, Number],
13 });
14
11 const payment = reactive({ 15 const payment = reactive({
12 showCodeDialog: false, 16 showCodeDialog: false,
13 btn_loading: false, 17 btn_loading: false,
...@@ -31,8 +35,11 @@ const payment = reactive({ ...@@ -31,8 +35,11 @@ const payment = reactive({
31 // TODO: 这里有一个二维码 35 // TODO: 这里有一个二维码
32 payment.qrInfo = res.data; 36 payment.qrInfo = res.data;
33 payment.showCodeDialog = true; 37 payment.showCodeDialog = true;
34 router.push({ 38 router.replace({
35 path: "/seat/order", 39 path: "/seat/order",
40 query: {
41 id: props.activityId,
42 },
36 }); 43 });
37 }); 44 });
38 }, 45 },
...@@ -42,7 +49,7 @@ const order = reactive({ ...@@ -42,7 +49,7 @@ const order = reactive({
42 data: null, 49 data: null,
43 fetchData() { 50 fetchData() {
44 confirmOrder({ 51 confirmOrder({
45 actId: route.query.actId ?? 1, 52 actId: props.activityId,
46 openType: route.query.openType, 53 openType: route.query.openType,
47 sessionId: route.query.sessionId, 54 sessionId: route.query.sessionId,
48 sitePlace: route.query.sitePlace, 55 sitePlace: route.query.sitePlace,
...@@ -162,7 +169,8 @@ order.fetchData(); ...@@ -162,7 +169,8 @@ order.fetchData();
162 </div> 169 </div>
163 <div class="footer"> 170 <div class="footer">
164 <div> 171 <div>
165 <span class="label">共计金额：</span><span class="value">¥900.00</span> 172 <span class="label">共计金额：</span
173 ><span class="value">¥{{ order.data?.paymentAmount }}</span>
166 </div> 174 </div>
167 <div class="pay" @click="payment.paymentHandle()">立即支付</div> 175 <div class="pay" @click="payment.paymentHandle()">立即支付</div>
168 </div> 176 </div>
......
src/viewsPc/seat/order-detail.vue
...@@ -19,20 +19,33 @@ const status = reactive({ ...@@ -19,20 +19,33 @@ const status = reactive({
19 bgColor: "#FFE2F2", 19 bgColor: "#FFE2F2",
20 }, 20 },
21 1: { 21 1: {
22 txt: "已支付", 22 txt: "购票成功",
23 color: "#757575", 23 color: "#FFCC00",
24 bgColor: "#DDDDDD", 24 bgColor: "#FFF7D9",
25 }, 25 },
26 2: { 26 2: {
27 txt: "未支付", 27 txt: "交易关闭",
28 color: "#34C759", 28 color: "#757575",
29 bgColor: "#D2FFDD", 29 bgColor: "#DDDDDD",
30 }, 30 },
31 3: { 31 3: {
32 txt: "已退款", 32 txt: "已退款",
33 color: "#FFCC00", 33 color: "#757575",
34 bgColor: "#FFF7D9", 34 bgColor: "#DDDDDD",
35 },
36 4: {
37 color: "#F740A6",
38 bgColor: "#FFE2F2",
35 }, 39 },
40 5: {
41 txt: "完成",
42 color: "#34C759",
43 bgColor: "#D2FFDD",
44 },
45 });
46
47 const props = defineProps({
48 activityId: [String, Number],
36 }); 49 });
37 50
38 const detail = reactive({ 51 const detail = reactive({
...@@ -132,6 +145,12 @@ const detail = reactive({ ...@@ -132,6 +145,12 @@ const detail = reactive({
132 }) 145 })
133 .catch(() => {}); 146 .catch(() => {});
134 }, 147 },
148 comeBack() {
149 router.push({
150 path: "/seat/detail",
151 id: props.activityId,
152 });
153 },
135 }); 154 });
136 155
137 detail.fetchData(); 156 detail.fetchData();
...@@ -211,11 +230,21 @@ detail.fetchData(); ...@@ -211,11 +230,21 @@ detail.fetchData();
211 <div class="title">结算信息</div> 230 <div class="title">结算信息</div>
212 <div class="cell"> 231 <div class="cell">
213 <div class="label">订单状态</div> 232 <div class="label">订单状态</div>
214 <div class="value">{{ status[detail.data?.state]?.txt }}</div> 233 <div
234 class="value"
235 :style="{ color: status[detail.data?.state]?.color }"
236 >
237 {{ status[detail.data?.state]?.txt }}
238 </div>
215 </div> 239 </div>
216 <div class="cell"> 240 <div class="cell">
217 <div class="label">订单金额</div> 241 <div class="label">订单金额</div>
218 <div class="value">¥{{ detail.data?.payAmount }}</div> 242 <div
243 class="value"
244 :style="{ color: status[detail.data?.state]?.color }"
245 >
246 ¥{{ detail.data?.payAmount }}
247 </div>
219 </div> 248 </div>
220 <!-- button --> 249 <!-- button -->
221 <div v-if="detail.data?.state == 0" class="btn_box"> 250 <div v-if="detail.data?.state == 0" class="btn_box">
...@@ -223,17 +252,13 @@ detail.fetchData(); ...@@ -223,17 +252,13 @@ detail.fetchData();
223 <div class="pay" @click="detail.payment()">立即支付</div> 252 <div class="pay" @click="detail.payment()">立即支付</div>
224 </div> 253 </div>
225 <div v-else> 254 <div v-else>
255 <!-- v-if="detail.data?.state == 1 && detail.data?.isRefund" -->
226 <div 256 <div
227 v-if="detail.data?.state == 1 && detail.data?.isRefund" 257 v-if="detail.data?.state == 1 && detail.data?.isRefund"
228 class="btn_box" 258 class="btn_box"
229 > 259 >
230 <div class="can_pay" @click="detail.cancelOrder()">取消购票</div> 260 <div class="can_pay" @click="detail.cancelOrder()">取消购票</div>
231 <div 261 <div class="pay" @click="detail.comeBack()">再来一单</div>
232 class="pay"
233 @click="$router.push({ path: '/seat/seat-picker' })"
234 >
235 再来一单
236 </div>
237 </div> 262 </div>
238 263
239 <div v-else class="btn_box"> 264 <div v-else class="btn_box">
......
src/viewsPc/seat/order-list.vue
...@@ -10,21 +10,33 @@ const status = reactive({ ...@@ -10,21 +10,33 @@ const status = reactive({
10 bgColor: "#FFE2F2", 10 bgColor: "#FFE2F2",
11 }, 11 },
12 1: { 12 1: {
13 txt: "已支付", 13 txt: "购票成功",
14 color: "#757575", 14 color: "#FFCC00",
15 bgColor: "#DDDDDD", 15 bgColor: "#FFF7D9",
16 }, 16 },
17 2: { 17 2: {
18 txt: "未支付", 18 txt: "交易关闭",
19 color: "#34C759", 19 color: "#757575",
20 bgColor: "#D2FFDD", 20 bgColor: "#DDDDDD",
21 }, 21 },
22 3: { 22 3: {
23 txt: "已退款", 23 txt: "已退款",
24 color: "#FFCC00", 24 color: "#757575",
25 bgColor: "#FFF7D9", 25 bgColor: "#DDDDDD",
26 },
27 4: {
28 color: "#F740A6",
29 bgColor: "#FFE2F2",
30 },
31 5: {
32 txt: "完成",
33 color: "#34C759",
34 bgColor: "#D2FFDD",
26 }, 35 },
27 }); 36 });
37 const props = defineProps({
38 activityId: [String, Number],
39 });
28 40
29 const order = reactive({ 41 const order = reactive({
30 showCodeDialog: false, 42 showCodeDialog: false,
...@@ -33,10 +45,17 @@ const order = reactive({ ...@@ -33,10 +45,17 @@ const order = reactive({
33 pageNo: 1, 45 pageNo: 1,
34 pageSize: 10, 46 pageSize: 10,
35 total: 0, 47 total: 0,
48
49 noPay: {},
50 minutes: 0,
51 seconds: 0,
36 data: [], 52 data: [],
53 timer: null,
37 fetchData() { 54 fetchData() {
38 getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then( 55 getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then(
39 (res) => { 56 (res) => {
57 // TODO: 后期优化
58 order.noPay = res.data.lists.find((it) => it.state == 0);
40 order.data = res.data.lists; 59 order.data = res.data.lists;
41 order.total = res.data.count; 60 order.total = res.data.count;
42 } 61 }
...@@ -71,8 +90,49 @@ const order = reactive({ ...@@ -71,8 +90,49 @@ const order = reactive({
71 }) 90 })
72 .catch(() => {}); 91 .catch(() => {});
73 }, 92 },
93 countDown(time) {
94 // 当前时间
95 let nowTime = new Date();
96 let endTime = new Date(time);
97 // 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
98 let totalTime = endTime - nowTime;
99 // 结束时间大于现在的时间
100 if (totalTime > 0) {
101 order.timer = setInterval(() => {
102 if (totalTime >= 0) {
103 //获取分钟数
104 let minutes = Math.floor(
105 (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
106 );
107 //获取秒数
108 let seconds = Math.floor(
109 (((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
110 )
111 .toString()
112 .padStart(2, "0");
113
114 order.minutes = minutes;
115 order.seconds = seconds;
116
117 totalTime -= 1000;
118 // console.log(totalTime)
119 } else {
120 clearInterval(timer); // 停止调用函数
121 }
122 }, 1000);
123 }
124 },
74 }); 125 });
75 126
127 watch(
128 () => order.noPay,
129 (val) => {
130 if (val) {
131 order.countDown(val.payEndTime);
132 }
133 }
134 );
135
76 order.fetchData(); 136 order.fetchData();
77 </script> 137 </script>
78 138
...@@ -84,7 +144,7 @@ order.fetchData(); ...@@ -84,7 +144,7 @@ order.fetchData();
84 @click=" 144 @click="
85 $router.push({ 145 $router.push({
86 path: '/seat/order_detail', 146 path: '/seat/order_detail',
87 query: { orderSn: it.orderSn }, 147 query: { orderSn: it.orderSn, id: props.activityId },
88 }) 148 })
89 " 149 "
90 class="order-item" 150 class="order-item"
...@@ -112,7 +172,7 @@ order.fetchData(); ...@@ -112,7 +172,7 @@ order.fetchData();
112 {{ status[it.state].txt }} 172 {{ status[it.state].txt }}
113 </div> 173 </div>
114 <div v-if="it.state == 0" class="tip"> 174 <div v-if="it.state == 0" class="tip">
115 请尽快完成支付，还剩{{ it.min }}分{{ it.sec }}秒 175 请尽快完成支付，还剩{{ order.minutes }}分{{ order.seconds }}秒
116 </div> 176 </div>
117 </div> 177 </div>
118 </div> 178 </div>
...@@ -129,6 +189,7 @@ order.fetchData(); ...@@ -129,6 +189,7 @@ order.fetchData();
129 <qrCodeDialog 189 <qrCodeDialog
130 :showCodeDialog="order.showCodeDialog" 190 :showCodeDialog="order.showCodeDialog"
131 :qrCode="order.qrInfo?.scanCodeUrl" 191 :qrCode="order.qrInfo?.scanCodeUrl"
192 @closeDialog="order.showCodeDialog = false"
132 /> 193 />
133 194
134 <div class="pagination"> 195 <div class="pagination">
......
src/viewsPc/seat/seat-picker.vue
1 <script setup> 1 <script setup>
2 import { ElMessage } from "element-plus"; 2 import { ElMessage } from "element-plus";
3 import { getPriceLevelInfo, getSiteConfig } from "./api/index.js"; 3 import { getPriceLevelInfo, getSiteConfig, confirmOrder } from "./api/index.js";
4
4 const route = useRoute(); 5 const route = useRoute();
5 const router = useRouter(); 6 const router = useRouter();
6 7
7 const iframeRef = ref(); 8 const iframeRef = ref();
8 9
10 const props = defineProps({
11 activityId: [String, Number],
12 });
13
9 // 获取票档 14 // 获取票档
10 const price = reactive({ 15 const price = reactive({
11 curPriceId: route.query.ticket_block, 16 curPriceId: route.query.ticket_block,
...@@ -13,7 +18,7 @@ const price = reactive({ ...@@ -13,7 +18,7 @@ const price = reactive({
13 18
14 fetchData() { 19 fetchData() {
15 getPriceLevelInfo({ 20 getPriceLevelInfo({
16 actId: route.query?.actId ?? 1, 21 actId: props.activityId ?? 1,
17 sessionId: route.query.sessionId, 22 sessionId: route.query.sessionId,
18 openType: route.query.openType, 23 openType: route.query.openType,
19 sitePlace: route.query.sitePlace, 24 sitePlace: route.query.sitePlace,
...@@ -24,9 +29,9 @@ const price = reactive({ ...@@ -24,9 +29,9 @@ const price = reactive({
24 }); 29 });
25 }, 30 },
26 onClickPrice(e) { 31 onClickPrice(e) {
27 // if (selectedSeats.value?.length) { 32 if (selectedSeats.value?.length) {
28 // return ElMessage({ type: "warning", message: "请先取消已选座位" }); 33 return ElMessage({ type: "warning", message: "请先取消已选座位" });
29 // } 34 }
30 price.curPriceId = e.priceId; 35 price.curPriceId = e.priceId;
31 }, 36 },
32 }); 37 });
...@@ -40,7 +45,7 @@ const siteConfig = reactive({ ...@@ -40,7 +45,7 @@ const siteConfig = reactive({
40 data: [], 45 data: [],
41 fetchData() { 46 fetchData() {
42 return getSiteConfig({ 47 return getSiteConfig({
43 actId: route.query.actId ?? 1, 48 actId: props.activityId ?? 1,
44 openType: route.query.openType, 49 openType: route.query.openType,
45 sessionId: route.query.sessionId, 50 sessionId: route.query.sessionId,
46 sitePlace: route.query.sitePlace, 51 sitePlace: route.query.sitePlace,
...@@ -134,6 +139,13 @@ window.addEventListener("message", (e) => { ...@@ -134,6 +139,13 @@ window.addEventListener("message", (e) => {
134 // 如果当前筛选了某种座位，点击的不是这种座位，也返回 139 // 如果当前筛选了某种座位，点击的不是这种座位，也返回
135 if (price.curPriceId && seatData.priceId != price.curPriceId) return; 140 if (price.curPriceId && seatData.priceId != price.curPriceId) return;
136 141
142 if (
143 selectedSeats.value &&
144 selectedSeats.value?.length >= 5 &&
145 seatData.active == 0
146 )
147 return ElMessage({ type: "warning", message: "最多选择5个座位" });
148
137 const newActive = seatData.active == 0 ? 1 : 0; 149 const newActive = seatData.active == 0 ? 1 : 0;
138 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id); 150 const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
139 if (siteConfigItem) { 151 if (siteConfigItem) {
...@@ -179,17 +191,37 @@ const toConfirmOrder = () => { ...@@ -179,17 +191,37 @@ const toConfirmOrder = () => {
179 const seatIds = selectedSeats.value.map((it) => it.id); 191 const seatIds = selectedSeats.value.map((it) => it.id);
180 if (!seatIds.length) 192 if (!seatIds.length)
181 return ElMessage({ type: "warning", message: "请先选择座位" }); 193 return ElMessage({ type: "warning", message: "请先选择座位" });
182 194 confirmOrder({
183 router.push({ 195 actId: props.activityId,
184 path: "/seat/confirm_order", 196 openType: route.query.openType,
185 query: { 197 sessionId: route.query.sessionId,
186 openType: route.query.openType, 198 sitePlace: route.query.sitePlace,
187 sessionId: route.query.sessionId, 199 ticketType: route.query.ticketType,
188 sitePlace: route.query.sitePlace, 200 seatIds: seatIds,
189 ticketType: route.query.ticketType, 201 })
190 seatIds: seatIds.join(","), 202 .then((res) => {
191 }, 203 router.push({
192 }); 204 path: "/seat/confirm_order",
205 query: {
206 id: props.activityId,
207 openType: route.query.openType,
208 sessionId: route.query.sessionId,
209 sitePlace: route.query.sitePlace,
210 ticketType: route.query.ticketType,
211 seatIds: seatIds.join(","),
212 },
213 });
214 })
215 .catch((e) => {
216 if (e.code == 405) {
217 router.push({
218 path: "/seat/order",
219 query: {
220 id: props.activityId,
221 },
222 });
223 }
224 });
193 }; 225 };
194 226
195 price.fetchData(); 227 price.fetchData();
......
src/viewsPc/seat/ticket-detail.vue
...@@ -29,7 +29,6 @@ const login = async (userId) => { ...@@ -29,7 +29,6 @@ const login = async (userId) => {
29 }).then((res) => { 29 }).then((res) => {
30 setToken(res.data.token); 30 setToken(res.data.token);
31 resolve(res.data); 31 resolve(res.data);
32 console.log(33333, res);
33 }); 32 });
34 }; 33 };
35 34
...@@ -92,6 +91,7 @@ const select_form = reactive({ ...@@ -92,6 +91,7 @@ const select_form = reactive({
92 router.push({ 91 router.push({
93 path: "/seat/seat_picker", 92 path: "/seat/seat_picker",
94 query: { 93 query: {
94 id: props.activityId,
95 openType: select_form.session, 95 openType: select_form.session,
96 sessionId: select_form.venueItem?.id, 96 sessionId: select_form.venueItem?.id,
97 sitePlace: select_form.place, 97 sitePlace: select_form.place,
...@@ -192,6 +192,7 @@ watch( ...@@ -192,6 +192,7 @@ watch(
192 ElMessageBox.confirm("缺少活动id", "提示", { 192 ElMessageBox.confirm("缺少活动id", "提示", {
193 confirmButtonText: "确认", 193 confirmButtonText: "确认",
194 type: "warning", 194 type: "warning",
195 showCancelButton: false,
195 draggable: true, 196 draggable: true,
196 }).then((res) => { 197 }).then((res) => {
197 router.push("/"); 198 router.push("/");
...@@ -205,6 +206,14 @@ watch( ...@@ -205,6 +206,14 @@ watch(
205 const userId = 1; // [TODO] 从原项目中取已登录的用户ID 206 const userId = 1; // [TODO] 从原项目中取已登录的用户ID
206 if (!userId) { 207 if (!userId) {
207 // 未登录，跳转登录 [TODO] 208 // 未登录，跳转登录 [TODO]
209 ElMessageBox.confirm("登录后操作", "提示", {
210 confirmButtonText: "确认",
211 type: "warning",
212 draggable: true,
213 showCancelButton: false
214 }).then((res) => {
215 router.push("/");
216 });
208 return; 217 return;
209 } 218 }
210 await login(userId); 219 await login(userId);
......
src/viewsPc/seat/utils/request.js
...@@ -39,7 +39,8 @@ http.interceptors.response.use( ...@@ -39,7 +39,8 @@ http.interceptors.response.use(
39 } 39 }
40 40
41 if (response.data.code != 200) { 41 if (response.data.code != 200) {
42 return ElMessage({ type: "error", message: response.data.msg }); 42 ElMessage({ type: "error", message: response.data.msg });
43 return Promise.reject(response.data);
43 } 44 }
44 45
45 return response.data; 46 return response.data;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!