|
|
@@ -1,251 +0,0 @@
|
|
|
-<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>
|
