58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
<template>
|
|
<main class="success-page">
|
|
<van-icon name="checked" color="#20bd58" size="68" />
|
|
<h2>支付成功</h2>
|
|
<b>¥ {{ amountText }}</b>
|
|
<section>
|
|
<p>订单编号 <span>{{ paymentInfo.orderNo || '-' }}</span></p>
|
|
<p>支付方式 <span>{{ payTypeText }}</span></p>
|
|
<p>支付时间 <span>{{ paidAt }}</span></p>
|
|
</section>
|
|
<div>
|
|
<van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
|
|
<van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { readPaymentInfo, formatYuan } from '../payment/payment-data'
|
|
|
|
export default {
|
|
name: 'JoyfulSelectionPaymentSuccess',
|
|
data: () => ({
|
|
paymentInfo: {},
|
|
paidAt: ''
|
|
}),
|
|
computed: {
|
|
amountText() {
|
|
return formatYuan(this.paymentInfo.amount)
|
|
},
|
|
payTypeText() {
|
|
const map = {
|
|
points: '积分支付',
|
|
wechat: '微信支付',
|
|
alipay: '支付宝支付'
|
|
}
|
|
|
|
return map[this.$route.query.payType] || '积分支付'
|
|
}
|
|
},
|
|
created() {
|
|
this.paymentInfo = readPaymentInfo()
|
|
this.paidAt = this.formatTime(new Date())
|
|
},
|
|
methods: {
|
|
formatTime(date) {
|
|
const pad = value => String(value).padStart(2, '0')
|
|
|
|
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}.success-page .van-button--danger{background:#ff5b20;border-color:#ff5b20}
|
|
</style>
|