vite项目生成一个支付成功页面-Go服务器开发

以下是一个使用 Vite + Vue 3 生成的支付成功页面的示例代码，包含基础布局和交互逻辑：

1. 创建项目（如已有项目可跳过）

npm create vite@latest payment-success-page --template vue
cd payment-success-page
npm install

2. 支付成功页面组件 (`src/views/SuccessPage.vue`)

<template>
  <div class="success-container">
    <!-- 顶部成功图标 -->
    <div class="success-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="#4CAF50">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 
        14.17l7.59-7.59L19 
        8l-9 
        9z"/>
      </svg>
    </div>

    <!-- 主要内容 -->
    <h1>支付成功！</h1>
    <p class="amount">￥{{ amount.toFixed(2) }}</p>
    
    <div class="order-info">
      <p>订单号: {{ orderId }}</p>
      <p>支付时间: {{ paymentTime }}</p>
    </div>

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

    <!--额外提示-->
    <p class="tips">我们已发送订单确认邮件至您的注册邮箱</p>
    
    <!--客服信息-->
    <div v-if="showCustomerService" class="customer-service">
      <p>如有疑问请联系客服:</p>
      <a href="tel:400-123-4567">400-123-4567</a>
    </div>
    
     <!--倒计时自动跳转-->
     <p v-if="countdown >0" class=countdown-text>{{ countdown }}秒后自动返回首页...</p>  
   </div>  
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const amount = ref(168.00)
const orderId = ref('TX' + Date.now().toString().slice(-8))
const paymentTime = ref(new Date().toLocaleString())
const countdown = ref(5)
const showCustomerService = ref(true)

//查看订单详情  
const viewOrder=()=>{
   alert(`跳转到订单 ${orderId.value}`)
}

//返回首页  
const backToHome=()=>{
   router.push('/')
}

//倒计时逻辑  
onMounted(()=>{
   const timer=setInterval(()=>{
       if(countdown.value >0){
           countdown.value--
       }else{
           clearInterval(timer)
           backToHome()
       }
   },1000)
})
</script>

<style scoped>
.success-container {
   max-width:600px;
   margin:40px auto;
   padding:20px;
   text-align:center;
   background:#fff;
   border-radius:8px;
}
.success-icon {
   margin-bottom:20px;
}
h1 {
   color:#4CAF50;
}
.order-info {
   background:#f5f5f5;padding:15px;border-radius:8px;margin:25px 
}
.action-buttons {
 display :flex ;
 justify-content :center ;
 gap :15px ;
 margin-top :30px ;   
}
button {padding :12px 
}   
.countdown-text{color:#999;font-size:.9em;}
.customer-service{margin-top :40px ;font-size:.9em;}
.tips{color:#666;margin-top :20px ;}     
@media (max-width :768px ){.action-buttons{flex-direction :column }}
</style>

###3 .配置路由(src/router/index.js)

import { createRouter,createWebHistory } from 'vue-router'
import SuccessPage from '../views/SuccessPage.vue'

const routes=[
 { path:'/success',component:SuccessPage }
]

export default createRouter({
 history :createWebHistory(),
 routes })

###4 .运行项目