会员认证
Showing
3 changed files
with
67 additions
and
67 deletions
| ... | @@ -35,29 +35,29 @@ | ... | @@ -35,29 +35,29 @@ |
| 35 | </template> | 35 | </template> |
| 36 | 36 | ||
| 37 | <script setup> | 37 | <script setup> |
| 38 | import { | 38 | import { |
| 39 | ref | 39 | ref |
| 40 | } from 'vue' | 40 | } from 'vue' |
| 41 | import { | 41 | import { |
| 42 | onLoad | 42 | onLoad |
| 43 | } from '@dcloudio/uni-app' | 43 | } from '@dcloudio/uni-app' |
| 44 | import to from 'await-to-js' | 44 | import to from 'await-to-js' |
| 45 | import * as api from '@/common/api.js' | 45 | import * as api from '@/common/api.js' |
| 46 | 46 | ||
| 47 | const orderInfo = ref({ | 47 | const orderInfo = ref({ |
| 48 | orderId: '', | 48 | orderId: '', |
| 49 | tradeNo: '', | 49 | tradeNo: '', |
| 50 | merchantName: '中国跆拳道协会', | 50 | merchantName: '中国跆拳道协会', |
| 51 | price: '' | 51 | price: '' |
| 52 | }) | 52 | }) |
| 53 | 53 | ||
| 54 | const goBack = () => { | 54 | const goBack = () => { |
| 55 | uni.reLaunch({ | 55 | uni.reLaunch({ |
| 56 | url: '/myCenter/auth' | 56 | url: '/pages/index/home' |
| 57 | }) | 57 | }) |
| 58 | } | 58 | } |
| 59 | 59 | ||
| 60 | onLoad(async (option) => { | 60 | onLoad(async (option) => { |
| 61 | // if (option.orderId) { | 61 | // if (option.orderId) { |
| 62 | // const [err, res] = await to(api.getOrderInfo(option.orderId)) | 62 | // const [err, res] = await to(api.getOrderInfo(option.orderId)) |
| 63 | // if (!err && res.data) { | 63 | // if (!err && res.data) { |
| ... | @@ -66,12 +66,12 @@ | ... | @@ -66,12 +66,12 @@ |
| 66 | // orderInfo.value.orderId = option.orderId | 66 | // orderInfo.value.orderId = option.orderId |
| 67 | // } | 67 | // } |
| 68 | // } | 68 | // } |
| 69 | }) | 69 | }) |
| 70 | </script> | 70 | </script> |
| 71 | 71 | ||
| 72 | <style scoped> | 72 | <style scoped> |
| 73 | /* 全局容器 */ | 73 | /* 全局容器 */ |
| 74 | .success-container { | 74 | .success-container { |
| 75 | display: flex; | 75 | display: flex; |
| 76 | flex-direction: column; | 76 | flex-direction: column; |
| 77 | align-items: center; | 77 | align-items: center; |
| ... | @@ -79,16 +79,16 @@ | ... | @@ -79,16 +79,16 @@ |
| 79 | min-height: 100vh; | 79 | min-height: 100vh; |
| 80 | background-color: #f8f9fa; | 80 | background-color: #f8f9fa; |
| 81 | box-sizing: border-box; | 81 | box-sizing: border-box; |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | /* 成功图标容器 */ | 84 | /* 成功图标容器 */ |
| 85 | .success-icon { | 85 | .success-icon { |
| 86 | margin-bottom: 40rpx; | 86 | margin-bottom: 40rpx; |
| 87 | animation: fadeIn 0.6s ease-out; | 87 | animation: fadeIn 0.6s ease-out; |
| 88 | } | 88 | } |
| 89 | 89 | ||
| 90 | /* 渐变圆形背景 */ | 90 | /* 渐变圆形背景 */ |
| 91 | .icon-circle { | 91 | .icon-circle { |
| 92 | width: 180rpx; | 92 | width: 180rpx; |
| 93 | height: 180rpx; | 93 | height: 180rpx; |
| 94 | border-radius: 50%; | 94 | border-radius: 50%; |
| ... | @@ -100,34 +100,34 @@ | ... | @@ -100,34 +100,34 @@ |
| 100 | box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3); | 100 | box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3); |
| 101 | /* 轻微上浮动效 */ | 101 | /* 轻微上浮动效 */ |
| 102 | animation: scaleIn 0.8s ease-out; | 102 | animation: scaleIn 0.8s ease-out; |
| 103 | } | 103 | } |
| 104 | 104 | ||
| 105 | /* 对勾图标 */ | 105 | /* 对勾图标 */ |
| 106 | .check-icon { | 106 | .check-icon { |
| 107 | font-size: 90rpx; | 107 | font-size: 90rpx; |
| 108 | color: #ffffff; | 108 | color: #ffffff; |
| 109 | font-weight: bold; | 109 | font-weight: bold; |
| 110 | } | 110 | } |
| 111 | 111 | ||
| 112 | /* 支付成功标题 */ | 112 | /* 支付成功标题 */ |
| 113 | .success-title { | 113 | .success-title { |
| 114 | font-size: 48rpx; | 114 | font-size: 48rpx; |
| 115 | font-weight: 700; | 115 | font-weight: 700; |
| 116 | color: #333333; | 116 | color: #333333; |
| 117 | margin-bottom: 12rpx; | 117 | margin-bottom: 12rpx; |
| 118 | animation: slideUp 0.6s ease-out; | 118 | animation: slideUp 0.6s ease-out; |
| 119 | } | 119 | } |
| 120 | 120 | ||
| 121 | /* 副标题 */ | 121 | /* 副标题 */ |
| 122 | .success-subtitle { | 122 | .success-subtitle { |
| 123 | font-size: 28rpx; | 123 | font-size: 28rpx; |
| 124 | color: #666666; | 124 | color: #666666; |
| 125 | margin-bottom: 60rpx; | 125 | margin-bottom: 60rpx; |
| 126 | animation: slideUp 0.8s ease-out; | 126 | animation: slideUp 0.8s ease-out; |
| 127 | } | 127 | } |
| 128 | 128 | ||
| 129 | /* 订单信息卡片 */ | 129 | /* 订单信息卡片 */ |
| 130 | .info-card { | 130 | .info-card { |
| 131 | width: 100%; | 131 | width: 100%; |
| 132 | background: #ffffff; | 132 | background: #ffffff; |
| 133 | border-radius: 20rpx; | 133 | border-radius: 20rpx; |
| ... | @@ -135,55 +135,55 @@ | ... | @@ -135,55 +135,55 @@ |
| 135 | box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05); | 135 | box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05); |
| 136 | margin-bottom: 80rpx; | 136 | margin-bottom: 80rpx; |
| 137 | animation: fadeIn 1s ease-out; | 137 | animation: fadeIn 1s ease-out; |
| 138 | } | 138 | } |
| 139 | 139 | ||
| 140 | /* 单个信息项 */ | 140 | /* 单个信息项 */ |
| 141 | .info-item { | 141 | .info-item { |
| 142 | display: flex; | 142 | display: flex; |
| 143 | justify-content: space-between; | 143 | justify-content: space-between; |
| 144 | align-items: center; | 144 | align-items: center; |
| 145 | padding: 24rpx 0; | 145 | padding: 24rpx 0; |
| 146 | border-bottom: 1rpx solid #f5f5f5; | 146 | border-bottom: 1rpx solid #f5f5f5; |
| 147 | } | 147 | } |
| 148 | 148 | ||
| 149 | /* 最后一项去掉下划线 */ | 149 | /* 最后一项去掉下划线 */ |
| 150 | .info-item:last-child { | 150 | .info-item:last-child { |
| 151 | border-bottom: none; | 151 | border-bottom: none; |
| 152 | } | 152 | } |
| 153 | 153 | ||
| 154 | /* 标签样式 */ | 154 | /* 标签样式 */ |
| 155 | .label { | 155 | .label { |
| 156 | font-size: 32rpx; | 156 | font-size: 32rpx; |
| 157 | color: #666666; | 157 | color: #666666; |
| 158 | white-space: nowrap; | 158 | white-space: nowrap; |
| 159 | margin-right: 20rpx; | 159 | margin-right: 20rpx; |
| 160 | flex-shrink: 0; | 160 | flex-shrink: 0; |
| 161 | } | 161 | } |
| 162 | 162 | ||
| 163 | /* 值样式 */ | 163 | /* 值样式 */ |
| 164 | .value { | 164 | .value { |
| 165 | font-size: 32rpx; | 165 | font-size: 32rpx; |
| 166 | color: #333333; | 166 | color: #333333; |
| 167 | text-align: right; | 167 | text-align: right; |
| 168 | word-break: break-all; | 168 | word-break: break-all; |
| 169 | word-wrap: break-word; | 169 | word-wrap: break-word; |
| 170 | } | 170 | } |
| 171 | 171 | ||
| 172 | /* 金额特殊样式 */ | 172 | /* 金额特殊样式 */ |
| 173 | .amount { | 173 | .amount { |
| 174 | color: #cd1e27; | 174 | color: #cd1e27; |
| 175 | font-weight: 600; | 175 | font-weight: 600; |
| 176 | } | 176 | } |
| 177 | 177 | ||
| 178 | /* 确定按钮区域 */ | 178 | /* 确定按钮区域 */ |
| 179 | .confirm-btn-area { | 179 | .confirm-btn-area { |
| 180 | width: 100%; | 180 | width: 100%; |
| 181 | padding: 0 20rpx; | 181 | padding: 0 20rpx; |
| 182 | box-sizing: border-box; | 182 | box-sizing: border-box; |
| 183 | } | 183 | } |
| 184 | 184 | ||
| 185 | /* 确定按钮(渐变+动效) */ | 185 | /* 确定按钮(渐变+动效) */ |
| 186 | .confirm-btn { | 186 | .confirm-btn { |
| 187 | width: 100%; | 187 | width: 100%; |
| 188 | height: 90rpx; | 188 | height: 90rpx; |
| 189 | line-height: 90rpx; | 189 | line-height: 90rpx; |
| ... | @@ -198,20 +198,20 @@ | ... | @@ -198,20 +198,20 @@ |
| 198 | /* 禁止默认样式 */ | 198 | /* 禁止默认样式 */ |
| 199 | position: relative; | 199 | position: relative; |
| 200 | overflow: hidden; | 200 | overflow: hidden; |
| 201 | } | 201 | } |
| 202 | 202 | ||
| 203 | /* 按钮点击反馈 */ | 203 | /* 按钮点击反馈 */ |
| 204 | .confirm-btn::after { | 204 | .confirm-btn::after { |
| 205 | border: none; | 205 | border: none; |
| 206 | } | 206 | } |
| 207 | 207 | ||
| 208 | .confirm-btn:active { | 208 | .confirm-btn:active { |
| 209 | transform: scale(0.98); | 209 | transform: scale(0.98); |
| 210 | box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2); | 210 | box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2); |
| 211 | } | 211 | } |
| 212 | 212 | ||
| 213 | /* 动画定义 */ | 213 | /* 动画定义 */ |
| 214 | @keyframes fadeIn { | 214 | @keyframes fadeIn { |
| 215 | 0% { | 215 | 0% { |
| 216 | opacity: 0; | 216 | opacity: 0; |
| 217 | } | 217 | } |
| ... | @@ -219,9 +219,9 @@ | ... | @@ -219,9 +219,9 @@ |
| 219 | 100% { | 219 | 100% { |
| 220 | opacity: 1; | 220 | opacity: 1; |
| 221 | } | 221 | } |
| 222 | } | 222 | } |
| 223 | 223 | ||
| 224 | @keyframes scaleIn { | 224 | @keyframes scaleIn { |
| 225 | 0% { | 225 | 0% { |
| 226 | transform: scale(0); | 226 | transform: scale(0); |
| 227 | } | 227 | } |
| ... | @@ -233,9 +233,9 @@ | ... | @@ -233,9 +233,9 @@ |
| 233 | 100% { | 233 | 100% { |
| 234 | transform: scale(1); | 234 | transform: scale(1); |
| 235 | } | 235 | } |
| 236 | } | 236 | } |
| 237 | 237 | ||
| 238 | @keyframes slideUp { | 238 | @keyframes slideUp { |
| 239 | 0% { | 239 | 0% { |
| 240 | opacity: 0; | 240 | opacity: 0; |
| 241 | transform: translateY(30rpx); | 241 | transform: translateY(30rpx); |
| ... | @@ -245,5 +245,5 @@ | ... | @@ -245,5 +245,5 @@ |
| 245 | opacity: 1; | 245 | opacity: 1; |
| 246 | transform: translateY(0); | 246 | transform: translateY(0); |
| 247 | } | 247 | } |
| 248 | } | 248 | } |
| 249 | </style> | 249 | </style> | ... | ... |
This diff is collapsed.
Click to expand it.
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment