<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-item label="支付方式">
|
{{ payType }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'PayInfoTest',
|
data() {
|
return {
|
validated: false,
|
errorMessage: '',
|
payAmount: '',
|
orderNo: '',
|
transactionNo: '',
|
payType: ''
|
}
|
},
|
created() {
|
this.initData();
|
},
|
methods: {
|
initData() {
|
// 从URL参数中获取数据
|
const query = this.$route.query;
|
|
// 设置数据，使用空字符串作为默认值
|
this.payAmount = query.PayMoney || '0';
|
this.orderNo = query.ServiceOrdID || '--';
|
this.transactionNo = query.DispatchOrdID || '--';
|
this.payType = query.payType === '微信' ? '微信' :
|
query.payType === '支付宝' ? '支付宝' : '--';
|
|
// 直接显示数据，不做必填校验
|
this.validated = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.loading-container {
|
margin: 20px;
|
text-align: center;
|
}
|
.box-card {
|
margin: 20px;
|
}
|
</style>
|
