174 lines
3.7 KiB
Plaintext
174 lines
3.7 KiB
Plaintext
<template>
|
||
<view class="payment-success-page">
|
||
<view class="success-content">
|
||
<view class="icon-wrapper">
|
||
<text class="success-icon">✓</text>
|
||
</view>
|
||
<text class="success-title">支付成功</text>
|
||
<text class="success-desc">您的订单已支付成功，我们将尽快为您发货</text>
|
||
|
||
<view class="order-info" v-if="orderId">
|
||
<text class="info-text">订单编号：{{ orderNo }}</text>
|
||
<text class="info-text">支付金额：¥{{ amount.toFixed(2) }}</text>
|
||
</view>
|
||
|
||
<view class="action-buttons">
|
||
<button class="btn primary-btn" @click="viewOrder">查看订单</button>
|
||
<button class="btn secondary-btn" @click="goHome">返回首页</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, onMounted } from 'vue'
|
||
// import supa from '@/components/supadb/aksupainstance.uts' // 暂时注释掉数据库连接
|
||
|
||
const orderId = ref('')
|
||
const orderNo = ref('')
|
||
const amount = ref(0)
|
||
|
||
onMounted(() => {
|
||
const pages = getCurrentPages()
|
||
const currentPage = pages[pages.length - 1]
|
||
const options = currentPage.options as any
|
||
|
||
if (options.orderId) {
|
||
orderId.value = options.orderId
|
||
orderNo.value = options.orderId // 使用订单ID作为订单号
|
||
amount.value = parseFloat(options.amount || 0)
|
||
// loadOrderInfo() // 暂时注释掉数据库查询
|
||
}
|
||
})
|
||
|
||
// const loadOrderInfo = async () => {
|
||
// try {
|
||
// const { data, error } = await supa
|
||
// .from('orders')
|
||
// .select('order_no, actual_amount')
|
||
// .eq('id', orderId.value)
|
||
// .single()
|
||
//
|
||
// if (error == null && data != null) {
|
||
// orderNo.value = data['order_no'] as string
|
||
// amount.value = data['actual_amount'] as number
|
||
// }
|
||
// } catch (err) {
|
||
// console.error('加载订单信息失败', err)
|
||
// }
|
||
// }
|
||
|
||
const viewOrder = () => {
|
||
// 跳转到订单列表或订单详情
|
||
// 这里跳转到订单列表页，并选中对应tab（如果有）
|
||
uni.redirectTo({
|
||
url: '/pages/mall/consumer/orders?status=shipping'
|
||
})
|
||
}
|
||
|
||
const goHome = () => {
|
||
uni.switchTab({
|
||
url: '/pages/mall/consumer/index'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.payment-success-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100vh;
|
||
background-color: #ffffff;
|
||
padding: 0 30px;
|
||
}
|
||
|
||
.success-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 40px;
|
||
background-color: #4cd964;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 4px 10px rgba(76, 217, 100, 0.3);
|
||
}
|
||
|
||
.success-icon {
|
||
font-size: 40px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.success-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.success-desc {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.order-info {
|
||
background-color: #f9f9f9;
|
||
padding: 15px 20px;
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.action-buttons {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
height: 45px;
|
||
border-radius: 22.5px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.primary-btn {
|
||
background-color: #007aff;
|
||
color: #ffffff;
|
||
border: none;
|
||
}
|
||
|
||
.secondary-btn {
|
||
background-color: #ffffff;
|
||
color: #666666;
|
||
border: 1px solid #cccccc;
|
||
}
|
||
</style>
|