Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
6eee9b44 by 杨炀
Options

Merge commit '8013fd1e' into order

2 parents 0d7292ad 8013fd1e
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 = [
path: 'seat_picker',
name: 'seat_picker',
component: () => import('@/viewsPc/seat/seat-picker'),
meta: { title: '选座' }
meta: { title: '选座' },
props: route => ({
activityId:route.query.id,
})
},
{
path: 'order',
name: 'seat_order',
component: () => import('@/viewsPc/seat/order-list'),
meta: { title: '我的订单' }
meta: { title: '我的订单' },
props: route => ({
activityId:route.query.id,
})
},
{
path: 'order_detail',
name: 'order_detail',
component: () => import('@/viewsPc/seat/order-detail'),
meta: { title: '订单详情' }
meta: { title: '订单详情' },
props: route => ({
activityId: route.query.id,
})
},
{
path: 'confirm_order',
name: 'confirm_order',
component: () => import('@/viewsPc/seat/confirm-order'),
meta: { title: '确认订单' }
meta: { title: '确认订单' },
props: route => ({
activityId:route.query.id,
})
},
{
path: 'add_watch_people',
......
src/viewsPc/seat/components/qrCodeDialog.vue
......@@ -6,14 +6,24 @@ const props = defineProps({
},
qrCode: {
type: String,
default: ''
}
default: "",
},
});
const emit = defineEmits(["closeDialog"]);
const handleCloce = () => {
emit("closeDialog", false);
};
</script>
<template>
<div>
<el-dialog v-model="props.showCodeDialog" title="支付" width="300">
<el-dialog
v-model="props.showCodeDialog"
title="支付"
width="300"
:before-close="handleCloce()"
>
<div>
<img class="qrcode" :src="props.qrCode" />
</div>
......
src/viewsPc/seat/confirm-order.vue
......@@ -8,6 +8,10 @@ import qrCodeDialog from "./components/qrCodeDialog.vue";
const route = useRoute();
const router = useRouter();
const props = defineProps({
activityId: [String, Number],
});
const payment = reactive({
showCodeDialog: false,
btn_loading: false,
......@@ -31,8 +35,11 @@ const payment = reactive({
// TODO: 这里有一个二维码
payment.qrInfo = res.data;
payment.showCodeDialog = true;
router.push({
router.replace({
path: "/seat/order",
query: {
id: props.activityId,
},
});
});
},
......@@ -42,7 +49,7 @@ const order = reactive({
data: null,
fetchData() {
confirmOrder({
actId: route.query.actId ?? 1,
actId: props.activityId,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
......@@ -162,7 +169,8 @@ order.fetchData();
</div>
<div class="footer">
<div>
<span class="label">共计金额：</span><span class="value">¥900.00</span>
<span class="label">共计金额：</span
><span class="value">¥{{ order.data?.paymentAmount }}</span>
</div>
<div class="pay" @click="payment.paymentHandle()">立即支付</div>
</div>
......
src/viewsPc/seat/order-detail.vue
......@@ -19,20 +19,33 @@ const status = reactive({
bgColor: "#FFE2F2",
},
1: {
txt: "已支付",
color: "#757575",
bgColor: "#DDDDDD",
txt: "购票成功",
color: "#FFCC00",
bgColor: "#FFF7D9",
},
2: {
txt: "未支付",
color: "#34C759",
bgColor: "#D2FFDD",
txt: "交易关闭",
color: "#757575",
bgColor: "#DDDDDD",
},
3: {
txt: "已退款",
color: "#FFCC00",
bgColor: "#FFF7D9",
color: "#757575",
bgColor: "#DDDDDD",
},
4: {
color: "#F740A6",
bgColor: "#FFE2F2",
},
5: {
txt: "完成",
color: "#34C759",
bgColor: "#D2FFDD",
},
});
const props = defineProps({
activityId: [String, Number],
});
const detail = reactive({
......@@ -132,6 +145,12 @@ const detail = reactive({
})
.catch(() => {});
},
comeBack() {
router.push({
path: "/seat/detail",
id: props.activityId,
});
},
});
detail.fetchData();
......@@ -211,11 +230,21 @@ detail.fetchData();
<div class="title">结算信息</div>
<div class="cell">
<div class="label">订单状态</div>
<div class="value">{{ status[detail.data?.state]?.txt }}</div>
<div
class="value"
:style="{ color: status[detail.data?.state]?.color }"
>
{{ status[detail.data?.state]?.txt }}
</div>
</div>
<div class="cell">
<div class="label">订单金额</div>
<div class="value">¥{{ detail.data?.payAmount }}</div>
<div
class="value"
:style="{ color: status[detail.data?.state]?.color }"
>
¥{{ detail.data?.payAmount }}
</div>
</div>
<!-- button -->
<div v-if="detail.data?.state == 0" class="btn_box">
......@@ -223,17 +252,13 @@ detail.fetchData();
<div class="pay" @click="detail.payment()">立即支付</div>
</div>
<div v-else>
<!-- v-if="detail.data?.state == 1 && detail.data?.isRefund" -->
<div
v-if="detail.data?.state == 1 && detail.data?.isRefund"
class="btn_box"
>
<div class="can_pay" @click="detail.cancelOrder()">取消购票</div>
<div
class="pay"
@click="$router.push({ path: '/seat/seat-picker' })"
>
再来一单
</div>
<div class="pay" @click="detail.comeBack()">再来一单</div>
</div>
<div v-else class="btn_box">
......
src/viewsPc/seat/order-list.vue
......@@ -10,21 +10,33 @@ const status = reactive({
bgColor: "#FFE2F2",
},
1: {
txt: "已支付",
color: "#757575",
bgColor: "#DDDDDD",
txt: "购票成功",
color: "#FFCC00",
bgColor: "#FFF7D9",
},
2: {
txt: "未支付",
color: "#34C759",
bgColor: "#D2FFDD",
txt: "交易关闭",
color: "#757575",
bgColor: "#DDDDDD",
},
3: {
txt: "已退款",
color: "#FFCC00",
bgColor: "#FFF7D9",
color: "#757575",
bgColor: "#DDDDDD",
},
4: {
color: "#F740A6",
bgColor: "#FFE2F2",
},
5: {
txt: "完成",
color: "#34C759",
bgColor: "#D2FFDD",
},
});
const props = defineProps({
activityId: [String, Number],
});
const order = reactive({
showCodeDialog: false,
......@@ -33,10 +45,17 @@ const order = reactive({
pageNo: 1,
pageSize: 10,
total: 0,
noPay: {},
minutes: 0,
seconds: 0,
data: [],
timer: null,
fetchData() {
getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then(
(res) => {
// TODO: 后期优化
order.noPay = res.data.lists.find((it) => it.state == 0);
order.data = res.data.lists;
order.total = res.data.count;
}
......@@ -71,8 +90,49 @@ const order = reactive({
})
.catch(() => {});
},
countDown(time) {
// 当前时间
let nowTime = new Date();
let endTime = new Date(time);
// 两个日期相差的时间戳，以毫秒为单位（1000ms = 1s）
let totalTime = endTime - nowTime;
// 结束时间大于现在的时间
if (totalTime > 0) {
order.timer = setInterval(() => {
if (totalTime >= 0) {
//获取分钟数
let minutes = Math.floor(
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60
);
//获取秒数
let seconds = Math.floor(
(((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60
)
.toString()
.padStart(2, "0");
order.minutes = minutes;
order.seconds = seconds;
totalTime -= 1000;
// console.log(totalTime)
} else {
clearInterval(timer); // 停止调用函数
}
}, 1000);
}
},
});
watch(
() => order.noPay,
(val) => {
if (val) {
order.countDown(val.payEndTime);
}
}
);
order.fetchData();
</script>
......@@ -84,7 +144,7 @@ order.fetchData();
@click="
$router.push({
path: '/seat/order_detail',
query: { orderSn: it.orderSn },
query: { orderSn: it.orderSn, id: props.activityId },
})
"
class="order-item"
......@@ -112,7 +172,7 @@ order.fetchData();
{{ status[it.state].txt }}
</div>
<div v-if="it.state == 0" class="tip">
请尽快完成支付，还剩{{ it.min }}分{{ it.sec }}秒
请尽快完成支付，还剩{{ order.minutes }}分{{ order.seconds }}秒
</div>
</div>
</div>
......@@ -129,6 +189,7 @@ order.fetchData();
<qrCodeDialog
:showCodeDialog="order.showCodeDialog"
:qrCode="order.qrInfo?.scanCodeUrl"
@closeDialog="order.showCodeDialog = false"
/>
<div class="pagination">
......
src/viewsPc/seat/seat-picker.vue
<script setup>
import { ElMessage } from "element-plus";
import { getPriceLevelInfo, getSiteConfig } from "./api/index.js";
import { getPriceLevelInfo, getSiteConfig, confirmOrder } from "./api/index.js";
const route = useRoute();
const router = useRouter();
const iframeRef = ref();
const props = defineProps({
activityId: [String, Number],
});
// 获取票档
const price = reactive({
curPriceId: route.query.ticket_block,
......@@ -13,7 +18,7 @@ const price = reactive({
fetchData() {
getPriceLevelInfo({
actId: route.query?.actId ?? 1,
actId: props.activityId ?? 1,
sessionId: route.query.sessionId,
openType: route.query.openType,
sitePlace: route.query.sitePlace,
......@@ -24,9 +29,9 @@ const price = reactive({
});
},
onClickPrice(e) {
// if (selectedSeats.value?.length) {
// return ElMessage({ type: "warning", message: "请先取消已选座位" });
// }
if (selectedSeats.value?.length) {
return ElMessage({ type: "warning", message: "请先取消已选座位" });
}
price.curPriceId = e.priceId;
},
});
......@@ -40,7 +45,7 @@ const siteConfig = reactive({
data: [],
fetchData() {
return getSiteConfig({
actId: route.query.actId ?? 1,
actId: props.activityId ?? 1,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
......@@ -134,6 +139,13 @@ window.addEventListener("message", (e) => {
// 如果当前筛选了某种座位，点击的不是这种座位，也返回
if (price.curPriceId && seatData.priceId != price.curPriceId) return;
if (
selectedSeats.value &&
selectedSeats.value?.length >= 5 &&
seatData.active == 0
)
return ElMessage({ type: "warning", message: "最多选择5个座位" });
const newActive = seatData.active == 0 ? 1 : 0;
const siteConfigItem = siteConfig.data.find((it) => it.id == seatData.id);
if (siteConfigItem) {
......@@ -179,17 +191,37 @@ const toConfirmOrder = () => {
const seatIds = selectedSeats.value.map((it) => it.id);
if (!seatIds.length)
return ElMessage({ type: "warning", message: "请先选择座位" });
router.push({
path: "/seat/confirm_order",
query: {
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
ticketType: route.query.ticketType,
seatIds: seatIds.join(","),
},
});
confirmOrder({
actId: props.activityId,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
ticketType: route.query.ticketType,
seatIds: seatIds,
})
.then((res) => {
router.push({
path: "/seat/confirm_order",
query: {
id: props.activityId,
openType: route.query.openType,
sessionId: route.query.sessionId,
sitePlace: route.query.sitePlace,
ticketType: route.query.ticketType,
seatIds: seatIds.join(","),
},
});
})
.catch((e) => {
if (e.code == 405) {
router.push({
path: "/seat/order",
query: {
id: props.activityId,
},
});
}
});
};
price.fetchData();
......
src/viewsPc/seat/ticket-detail.vue
......@@ -29,7 +29,6 @@ const login = async (userId) => {
}).then((res) => {
setToken(res.data.token);
resolve(res.data);
console.log(33333, res);
});
};
......@@ -92,6 +91,7 @@ const select_form = reactive({
router.push({
path: "/seat/seat_picker",
query: {
id: props.activityId,
openType: select_form.session,
sessionId: select_form.venueItem?.id,
sitePlace: select_form.place,
......@@ -192,6 +192,7 @@ watch(
ElMessageBox.confirm("缺少活动id", "提示", {
confirmButtonText: "确认",
type: "warning",
showCancelButton: false,
draggable: true,
}).then((res) => {
router.push("/");
......@@ -205,6 +206,14 @@ watch(
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);
......
src/viewsPc/seat/utils/request.js
......@@ -39,7 +39,8 @@ http.interceptors.response.use(
}
if (response.data.code != 200) {
return ElMessage({ type: "error", message: response.data.msg });
ElMessage({ type: "error", message: response.data.msg });
return Promise.reject(response.data);
}
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!