<template>
|
<div class="app-container">
|
<div v-if="!validated" class="loading-container">
|
<el-alert
|
:title="errorMessage || '正在加载支付数据...'"
|
:type="errorMessage ? 'error' : 'info'"
|
:closable="false"
|
show-icon>
|
</el-alert>
|
</div>
|
<div v-else>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>支付信息详情</span>
|
</div>
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="支付金额">
|
{{ payAmount }} 元
|
</el-descriptions-item>
|
<el-descriptions-item label="订单号">
|
{{ orderNo }}
|
</el-descriptions-item>
|
<el-descriptions-item label="交易流水号">
|
{{ transactionNo }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'PayInfoTest',
|
data() {
|
return {
|
validated: false,
|
errorMessage: '',
|
payAmount: '',
|
orderNo: '',
|
transactionNo: ''
|
}
|
},
|
created() {
|
this.initData();
|
},
|
methods: {
|
initData() {
|
// 从URL参数中获取数据
|
const query = this.$route.query;
|
if (!query.payAmount || !query.orderNo || !query.transactionNo) {
|
this.errorMessage = '缺少必要的参数信息';
|
return;
|
}
|
|
// 设置数据
|
this.payAmount = query.payAmount;
|
this.orderNo = query.orderNo;
|
this.transactionNo = query.transactionNo;
|
|
// 模拟加载延迟
|
setTimeout(() => {
|
this.validated = true;
|
}, 500);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.loading-container {
|
margin: 20px;
|
text-align: center;
|
}
|
.box-card {
|
margin: 20px;
|
}
|
</style>
|
