<template>
|
<view class="result-container">
|
<!-- 结果展示 -->
|
<view class="result-card" :class="result.status">
|
<image :src="getResultImage()" mode="aspectFit" class="result-icon" />
|
<text class="status-text">{{ result.statusText }}</text>
|
<text class="desc">{{ result.desc }}</text>
|
|
<view class="amount-info">
|
<text class="label">支付金额</text>
|
<text class="amount">¥{{ result.amount }}</text>
|
</view>
|
</view>
|
|
<!-- 订单信息 -->
|
<view class="info-card">
|
<view class="info-item">
|
<text class="label">医院</text>
|
<text class="value">{{ result.hospitalName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">就诊人</text>
|
<text class="value">{{ result.patientName }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">订单编号</text>
|
<text class="value">{{ result.orderNo }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">支付方式</text>
|
<text class="value">{{ result.paymentMethod }}</text>
|
</view>
|
<view class="info-item">
|
<text class="label">支付时间</text>
|
<text class="value">{{ result.payTime }}</text>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-buttons">
|
<block v-if="result.status === 'success'">
|
<button class="action-btn outline" @tap="viewDetail">查看详情</button>
|
<button class="action-btn primary" @tap="viewInvoice">查看发票</button>
|
</block>
|
<block v-else-if="result.status === 'fail'">
|
<button class="action-btn outline" @tap="goBack">返回</button>
|
<button class="action-btn primary" @tap="retryPay">重新支付</button>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 支付结果数据
|
const result = ref({
|
status: 'success', // success-成功 fail-失败
|
statusText: '支付成功',
|
desc: '您的订单已支付成功',
|
amount: 360.00,
|
hospitalName: '青岛镜湖医院',
|
patientName: '张三',
|
orderNo: 'P202403250001',
|
paymentMethod: '微信支付',
|
payTime: '2024-03-25 09:30:00'
|
})
|
|
// 获取结果图片
|
const getResultImage = () => {
|
return `/static/payment/result-${result.value.status}.png`
|
}
|
|
// 查看详情
|
const viewDetail = () => {
|
uni.redirectTo({
|
url: `/pages/payment/detail?id=${result.value.orderNo}`
|
})
|
}
|
|
// 查看发票
|
const viewInvoice = () => {
|
uni.navigateTo({
|
url: `/pages/payment/invoice?id=${result.value.orderNo}`
|
})
|
}
|
|
// 返回
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
// 重新支付
|
const retryPay = () => {
|
uni.redirectTo({
|
url: `/pages/payment/index?id=${result.value.orderNo}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const { status, orderNo } = page.$page?.options || {}
|
|
// 加载支付结果
|
loadPaymentResult(status, orderNo)
|
})
|
|
// 加载支付结果
|
const loadPaymentResult = (status, orderNo) => {
|
// 这里调用API获取数据
|
console.log('加载支付结果:', status, orderNo)
|
}
|
</script>
|
|
<style lang="scss">
|
.result-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 40rpx 20rpx;
|
|
.result-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 60rpx 40rpx;
|
text-align: center;
|
margin-bottom: 30rpx;
|
box-shadow: $shadow-sm;
|
|
.result-icon {
|
width: 160rpx;
|
height: 160rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.status-text {
|
font-size: 40rpx;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 28rpx;
|
color: $text-regular;
|
margin-bottom: 40rpx;
|
display: block;
|
}
|
|
.amount-info {
|
.label {
|
font-size: 28rpx;
|
color: $text-regular;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.amount {
|
font-size: 48rpx;
|
font-weight: bold;
|
}
|
}
|
|
&.success {
|
.status-text {
|
color: $success;
|
}
|
.amount {
|
color: $success;
|
}
|
}
|
|
&.fail {
|
.status-text {
|
color: $danger;
|
}
|
.amount {
|
color: $danger;
|
}
|
}
|
}
|
|
.info-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 60rpx;
|
box-shadow: $shadow-sm;
|
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: $text-regular;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.bottom-buttons {
|
display: flex;
|
gap: 20rpx;
|
padding: 0 20rpx;
|
|
.action-btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
border-radius: $radius-xl;
|
|
&.outline {
|
color: $primary-color;
|
background: #fff;
|
border: 2rpx solid $primary-color;
|
}
|
|
&.primary {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
</style>
|
