vrone_client/src/pages/Order/OrderSuccess.vue

<template>
    <div class="order-success-page">
        <div class="success-container">
            <!-- 订单步骤 -->
            <div class="order-steps">
                <el-steps :active="3" finish-status="success">
                    <el-step title="确认订单" />
                    <el-step title="支付订单" />
                    <el-step title="完成" />
                </el-steps>
            </div>

            <!-- 成功提示 -->
            <div class="success-content">
                <div class="success-icon">
                    <el-icon>
                        <CircleCheck />
                    </el-icon>
                </div>
                <h2>订单支付成功！</h2>
                <p class="success-tip">您的订单已成功支付，我们将尽快为您处理</p>

                <!-- 订单信息 -->
                <div class="order-info">
                    <div class="info-item">
                        <span class="label">订单编号：</span>
                        <span class="value">{{ orderInfo.id }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">支付金额：</span>
                        <span class="value price">¥{{ orderInfo.totalAmount?.toFixed(2) || '0.00' }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">支付时间：</span>
                        <span class="value">{{ formatTime(orderInfo.payTime) }}</span>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <el-button @click="viewOrder">查看订单</el-button>
                    <el-button type="primary" @click="goHome">返回首页</el-button>
                </div>

                <!-- 温馨提示 -->
                <div class="tips-section">
                    <h3>温馨提示</h3>
                    <ul class="tips-list">
                        <li>您可以在"我的订单"中查看订单详情</li>
                        <li>如有任何问题，请联系客服</li>
                        <li>感谢您的支持，祝您使用愉快！</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { CircleCheck } from '@element-plus/icons-vue'
import { getOrderDetail } from '@/http/api/pages/Order/index'
import { usePersonalCenterStore } from "@/store/index";

const g_personalCenterStore = usePersonalCenterStore();

const route = useRoute()
const g_router = useRouter()
const orderInfo = ref({})

onMounted(async () => {
    const orderId = route.query.orderId
    if (orderId) {
        const response = await getOrderDetail(orderId)
        orderInfo.value = response.data
    }
})

const formatTime = (time) => {
    if (!time) return new Date().toLocaleString()
    return new Date(time).toLocaleString()
}

const viewOrder = () => {
    g_personalCenterStore.setActiveTabName('myOrder');
    g_router.push({ path: "/personalCenter", query: { tab: 'myOrder' } })
}

const goHome = () => {
    g_router.push({ name: '首页' });
}
</script>

<style scoped>
.order-success-page {
    min-height: calc(100vh - 60px);
    background-color: #f5f7fa;
    padding: 20px;
}

.success-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.order-steps {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.success-content {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    margin-bottom: 20px;
}

.success-icon .el-icon {
    font-size: 64px;
    color: #67c23a;
}

.success-content h2 {
    font-size: 24px;
    color: #303133;
    margin-bottom: 10px;
}

.success-tip {
    font-size: 16px;
    color: #606266;
    margin-bottom: 30px;
}

.order-info {
    background-color: #f5f7fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.info-item:last-child {
    margin-bottom: 0;
}

.label {
    width: 100px;
    color: #606266;
    font-size: 14px;
}

.value {
    flex: 1;
    color: #303133;
    font-size: 14px;
}

.value.price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.tips-section {
    text-align: left;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
}

.tips-section h3 {
    font-size: 16px;
    color: #303133;
    margin-bottom: 15px;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    color: #606266;
    font-size: 14px;
    line-height: 1.8;
    position: relative;
    padding-left: 20px;
}

.tips-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #67c23a;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
    .success-container {
        padding: 15px;
    }

    .success-content {
        padding: 20px;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .label {
        width: auto;
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-buttons .el-button {
        width: 100%;
    }
}
</style>