feat:部分项目中心
This commit is contained in:
李伊帆
136
src/pages/project-center/payment-success/index.scss
Normal file
136
src/pages/project-center/payment-success/index.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.payment-success {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: $color-bg-section;
|
||||
}
|
||||
|
||||
.payment-success__scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.payment-success__content {
|
||||
padding: calc(var(--status-bar-height, 44px) + 48rpx) 24rpx calc(140rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.payment-success__hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.payment-success__icon {
|
||||
width: 209.92rpx;
|
||||
height: 209.92rpx;
|
||||
}
|
||||
|
||||
.payment-success__title {
|
||||
margin-top: 28rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.payment-success__subtitle {
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.payment-success__card {
|
||||
padding: 28rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-success__card-title {
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.payment-success__info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-success__info-label {
|
||||
flex-shrink: 0;
|
||||
font-size: 26rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.payment-success__info-value {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: $color-text-primary;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.payment-success__order-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.payment-success__order-title {
|
||||
flex: 1;
|
||||
padding-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.payment-success__order-amount {
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.payment-success__order-meta {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.payment-success__footer {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.payment-success__btn {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
background: $color-primary;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
147
src/pages/project-center/payment-success/index.vue
Normal file
147
src/pages/project-center/payment-success/index.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getPaymentPlan } from '@/constants/project-detail'
|
||||
import successIcon from '@/static/icons/icon-register-success.png'
|
||||
import type { PaymentPlanItem } from '@/types/project-detail'
|
||||
|
||||
type PaymentMethod = 'wechat' | 'alipay'
|
||||
|
||||
const plan = ref<PaymentPlanItem | null>(null)
|
||||
const projectId = ref('1')
|
||||
const planId = ref('2')
|
||||
const paymentMethod = ref<PaymentMethod>('wechat')
|
||||
const paymentTime = ref('2026-01-21 15:00:00')
|
||||
const transactionNo = ref('T20260819153035678K2M001')
|
||||
|
||||
const paymentMethodLabel = computed(() =>
|
||||
paymentMethod.value === 'wechat' ? '微信支付' : '支付宝',
|
||||
)
|
||||
|
||||
onLoad((options) => {
|
||||
projectId.value = options?.projectId ? decodeURIComponent(String(options.projectId)) : '1'
|
||||
planId.value = options?.planId ? decodeURIComponent(String(options.planId)) : '2'
|
||||
const method = options?.method ? decodeURIComponent(String(options.method)) : 'wechat'
|
||||
paymentMethod.value = method === 'alipay' ? 'alipay' : 'wechat'
|
||||
plan.value = getPaymentPlan(projectId.value, planId.value)
|
||||
|
||||
if (!plan.value) {
|
||||
uni.showToast({ title: '订单不存在', icon: 'none' })
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/project-center/index' })
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
|
||||
function formatAmount(amount: number) {
|
||||
return `¥ ${amount}`
|
||||
}
|
||||
|
||||
function handleBackToList() {
|
||||
uni.redirectTo({ url: '/pages/project-center/bill-list/index' })
|
||||
}
|
||||
|
||||
function handleViewDetail() {
|
||||
uni.redirectTo({
|
||||
url: `/pages/project-center/bill-detail/index?projectId=${encodeURIComponent(projectId.value)}&planId=${encodeURIComponent(planId.value)}&method=${encodeURIComponent(paymentMethod.value)}`,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
v-if="plan"
|
||||
class="payment-success"
|
||||
>
|
||||
<scroll-view
|
||||
class="payment-success__scroll"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="payment-success__content">
|
||||
<view class="payment-success__hero">
|
||||
<image
|
||||
class="payment-success__icon"
|
||||
:src="successIcon"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="payment-success__title">
|
||||
支付成功
|
||||
</text>
|
||||
<text class="payment-success__subtitle">
|
||||
共1个订单，付款金额：{{ formatAmount(plan.amount) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="payment-success__card">
|
||||
<text class="payment-success__card-title">
|
||||
支付信息
|
||||
</text>
|
||||
<view class="payment-success__info-row">
|
||||
<text class="payment-success__info-label">
|
||||
支付方式
|
||||
</text>
|
||||
<text class="payment-success__info-value">
|
||||
{{ paymentMethodLabel }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="payment-success__info-row">
|
||||
<text class="payment-success__info-label">
|
||||
支付时间
|
||||
</text>
|
||||
<text class="payment-success__info-value">
|
||||
{{ paymentTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="payment-success__info-row">
|
||||
<text class="payment-success__info-label">
|
||||
交易流水号
|
||||
</text>
|
||||
<text class="payment-success__info-value">
|
||||
{{ transactionNo }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="payment-success__card">
|
||||
<text class="payment-success__card-title">
|
||||
已支付订单
|
||||
</text>
|
||||
<view class="payment-success__order-row">
|
||||
<text class="payment-success__order-title">
|
||||
{{ plan.title }} {{ plan.ratio }}
|
||||
</text>
|
||||
<text class="payment-success__order-amount">
|
||||
{{ formatAmount(plan.amount) }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="payment-success__order-meta">
|
||||
账单号：{{ plan.billNo }}
|
||||
</text>
|
||||
<text class="payment-success__order-meta">
|
||||
关联项目：{{ plan.relatedProject }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="payment-success__footer">
|
||||
<view
|
||||
class="payment-success__btn"
|
||||
@tap="handleBackToList"
|
||||
>
|
||||
返回订单列表
|
||||
</view>
|
||||
<view
|
||||
class="payment-success__btn"
|
||||
@tap="handleViewDetail"
|
||||
>
|
||||
查看订单详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user