|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <view class="success-container">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="nav-bar">
|
|
|
+ <view class="nav-title">支付成功</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 成功内容区域 -->
|
|
|
+ <view class="success-content">
|
|
|
+ <!-- 成功图标 -->
|
|
|
+ <view class="success-icon">
|
|
|
+ <text class="iconfont icon-dagou"></text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 成功标题 -->
|
|
|
+ <view class="success-title">支付成功</view>
|
|
|
+
|
|
|
+ <!-- 支付金额 -->
|
|
|
+ <view class="amount-section">
|
|
|
+ <view class="amount-label">支付金额</view>
|
|
|
+ <view class="amount-display">
|
|
|
+ <text class="currency">¥</text>
|
|
|
+ <text class="amount">{{ amount }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">订单号</text>
|
|
|
+ <text class="info-value">{{ orderId }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">支付时间</text>
|
|
|
+ <text class="info-value">{{ payTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">支付方式</text>
|
|
|
+ <text class="info-value">支付宝</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="action-buttons">
|
|
|
+ <button class="btn-primary" @click="goHome">返回首页</button>
|
|
|
+ <button class="btn-secondary" @click="viewOrder">查看订单</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'PaySuccessPage',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ amount: '0.00',
|
|
|
+ orderId: '',
|
|
|
+ payTime: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ // 获取传递的参数
|
|
|
+ if (options.amount) {
|
|
|
+ this.amount = options.amount;
|
|
|
+ }
|
|
|
+ if (options.orderId) {
|
|
|
+ this.orderId = options.orderId;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置支付时间
|
|
|
+ this.payTime = this.formatTime(new Date());
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 格式化时间
|
|
|
+ formatTime(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
+
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 返回首页
|
|
|
+ goHome() {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看订单
|
|
|
+ viewOrder() {
|
|
|
+ // 这里可以跳转到订单详情页面
|
|
|
+ uni.showToast({
|
|
|
+ title: '订单功能开发中',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.success-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.success-content {
|
|
|
+ padding: 80rpx 40rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.success-icon {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto 40rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 80rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.success-title {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-section {
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+
|
|
|
+ .amount-label {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-display {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .currency {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 80rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: 'Arial', sans-serif;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.order-info {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 30rpx;
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ box-shadow: 0 8rpx 30rpx rgba(22, 119, 255, 0.3);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ color: #fff;
|
|
|
+ border: 2rpx solid rgba(255, 255, 255, 0.3);
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
