Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
134cad71 by 张猛
Options

会员认证

1 parent d71abcc3
Expand all
Inline Side-by-side
Showing 3 changed files with 242 additions and 242 deletions
myCenter/sucPay.vue
1 <template> 1 <template>
2 <view class="success-container"> 2 <view class="success-container">
3 <!-- 成功图标（渐变圆形+动效） --> 3 <!-- 成功图标（渐变圆形+动效） -->
4 <view class="success-icon"> 4 <view class="success-icon">
5 <view class="icon-circle"> 5 <view class="icon-circle">
6 <text class="check-icon">✓</text> 6 <text class="check-icon">✓</text>
7 </view> 7 </view>
8 </view> 8 </view>
9 9
10 <!-- 支付成功标题（动画） --> 10 <!-- 支付成功标题（动画） -->
11 <view class="success-title">支付成功</view> 11 <view class="success-title">支付成功</view>
12 <view class="success-subtitle">支付成功，请等待审核</view> 12 <view class="success-subtitle">支付成功，请等待审核</view>
13 13
14 <!-- 订单信息卡片（带阴影） --> 14 <!-- 订单信息卡片（带阴影） -->
15 <!-- <view class="info-card"> 15 <!-- <view class="info-card">
16 <view class="info-item"> 16 <view class="info-item">
17 <text class="label">交易流水号</text> 17 <text class="label">交易流水号</text>
18 <text class="value">{{ orderInfo.tradeNo || '--' }}</text> 18 <text class="value">{{ orderInfo.tradeNo || '--' }}</text>
19 </view> 19 </view>
20 <view class="info-item"> 20 <view class="info-item">
21 <text class="label">商户名称</text> 21 <text class="label">商户名称</text>
22 <text class="value">{{ orderInfo.merchantName|| '中国跆拳道协会' }}</text> 22 <text class="value">{{ orderInfo.merchantName|| '中国跆拳道协会' }}</text>
23 </view> 23 </view>
24 <view class="info-item"> 24 <view class="info-item">
25 <text class="label">订单金额</text> 25 <text class="label">订单金额</text>
26 <text class="value amount">{{ orderInfo.price ? orderInfo.price + '元' : '--' }}</text> 26 <text class="value amount">{{ orderInfo.price ? orderInfo.price + '元' : '--' }}</text>
27 </view> 27 </view>
28 </view> --> 28 </view> -->
29 29
30 <!-- 确定按钮（渐变+动效） --> 30 <!-- 确定按钮（渐变+动效） -->
31 <view class="confirm-btn-area"> 31 <view class="confirm-btn-area">
32 <button class="confirm-btn" @click="goBack">确定</button> 32 <button class="confirm-btn" @click="goBack">确定</button>
33 </view> 33 </view>
34 </view> 34 </view>
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) {
64 // orderInfo.value = res.data 64 // orderInfo.value = res.data
65 // } else { 65 // } else {
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 /* 全局容器 */
74 .success-container {
75 display: flex;
76 flex-direction: column;
77 align-items: center;
78 padding: 100rpx 40rpx 60rpx;
79 min-height: 100vh;
80 background-color: #f8f9fa;
81 box-sizing: border-box;
82 }
83
84 /* 成功图标容器 */
85 .success-icon {
86 margin-bottom: 40rpx;
87 animation: fadeIn 0.6s ease-out;
88 }
89
90 /* 渐变圆形背景 */
91 .icon-circle {
92 width: 180rpx;
93 height: 180rpx;
94 border-radius: 50%;
95 /* 青绿色渐变 */
96 background: linear-gradient(135deg, #06c1ae, #04a896);
97 display: flex;
98 align-items: center;
99 justify-content: center;
100 box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
101 /* 轻微上浮动效 */
102 animation: scaleIn 0.8s ease-out;
103 }
104
105 /* 对勾图标 */
106 .check-icon {
107 font-size: 90rpx;
108 color: #ffffff;
109 font-weight: bold;
110 }
111
112 /* 支付成功标题 */
113 .success-title {
114 font-size: 48rpx;
115 font-weight: 700;
116 color: #333333;
117 margin-bottom: 12rpx;
118 animation: slideUp 0.6s ease-out;
119 }
120
121 /* 副标题 */
122 .success-subtitle {
123 font-size: 28rpx;
124 color: #666666;
125 margin-bottom: 60rpx;
126 animation: slideUp 0.8s ease-out;
127 }
128
129 /* 订单信息卡片 */
130 .info-card {
131 width: 100%;
132 background: #ffffff;
133 border-radius: 20rpx;
134 padding: 40rpx 30rpx;
135 box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
136 margin-bottom: 80rpx;
137 animation: fadeIn 1s ease-out;
138 }
139
140 /* 单个信息项 */
141 .info-item {
142 display: flex;
143 justify-content: space-between;
144 align-items: center;
145 padding: 24rpx 0;
146 border-bottom: 1rpx solid #f5f5f5;
147 }
148
149 /* 最后一项去掉下划线 */
150 .info-item:last-child {
151 border-bottom: none;
152 }
153
154 /* 标签样式 */
155 .label {
156 font-size: 32rpx;
157 color: #666666;
158 white-space: nowrap;
159 margin-right: 20rpx;
160 flex-shrink: 0;
161 }
162
163 /* 值样式 */
164 .value {
165 font-size: 32rpx;
166 color: #333333;
167 text-align: right;
168 word-break: break-all;
169 word-wrap: break-word;
170 }
171
172 /* 金额特殊样式 */
173 .amount {
174 color: #cd1e27;
175 font-weight: 600;
176 }
177
178 /* 确定按钮区域 */
179 .confirm-btn-area {
180 width: 100%;
181 padding: 0 20rpx;
182 box-sizing: border-box;
183 }
184
185 /* 确定按钮（渐变+动效） */
186 .confirm-btn {
187 width: 100%;
188 height: 90rpx;
189 line-height: 90rpx;
190 /* 按钮渐变背景 */
191 background: #fff;
192 color: #C4121B;
193 font-size: 36rpx;
194 font-weight: 600;
195 border-radius: 45rpx;
196 border: 1px solid #C4121B;
197 animation: slideUp 1s ease-out;
198 /* 禁止默认样式 */
199 position: relative;
200 overflow: hidden;
201 }
202
203 /* 按钮点击反馈 */
204 .confirm-btn::after {
205 border: none;
206 }
207
208 .confirm-btn:active {
209 transform: scale(0.98);
210 box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
211 }
212
213 /* 动画定义 */
214 @keyframes fadeIn {
215 0% {
216 opacity: 0;
217 }
218
219 100% {
220 opacity: 1;
221 }
222 }
223
224 @keyframes scaleIn {
225 0% {
226 transform: scale(0);
227 }
228
229 70% {
230 transform: scale(1.1);
231 }
232
233 100% {
234 transform: scale(1);
235 }
236 }
237
238 @keyframes slideUp {
239 0% {
240 opacity: 0;
241 transform: translateY(30rpx);
242 }
243
244 100% {
245 opacity: 1;
246 transform: translateY(0);
247 }
248 }
249 </style>
...\ No newline at end of file ...\ No newline at end of file
73 /* 全局容器 */
74 .success-container {
75 display: flex;
76 flex-direction: column;
77 align-items: center;
78 padding: 100rpx 40rpx 60rpx;
79 min-height: 100vh;
80 background-color: #f8f9fa;
81 box-sizing: border-box;
82 }
83
84 /* 成功图标容器 */
85 .success-icon {
86 margin-bottom: 40rpx;
87 animation: fadeIn 0.6s ease-out;
88 }
89
90 /* 渐变圆形背景 */
91 .icon-circle {
92 width: 180rpx;
93 height: 180rpx;
94 border-radius: 50%;
95 /* 青绿色渐变 */
96 background: linear-gradient(135deg, #06c1ae, #04a896);
97 display: flex;
98 align-items: center;
99 justify-content: center;
100 box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
101 /* 轻微上浮动效 */
102 animation: scaleIn 0.8s ease-out;
103 }
104
105 /* 对勾图标 */
106 .check-icon {
107 font-size: 90rpx;
108 color: #ffffff;
109 font-weight: bold;
110 }
111
112 /* 支付成功标题 */
113 .success-title {
114 font-size: 48rpx;
115 font-weight: 700;
116 color: #333333;
117 margin-bottom: 12rpx;
118 animation: slideUp 0.6s ease-out;
119 }
120
121 /* 副标题 */
122 .success-subtitle {
123 font-size: 28rpx;
124 color: #666666;
125 margin-bottom: 60rpx;
126 animation: slideUp 0.8s ease-out;
127 }
128
129 /* 订单信息卡片 */
130 .info-card {
131 width: 100%;
132 background: #ffffff;
133 border-radius: 20rpx;
134 padding: 40rpx 30rpx;
135 box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
136 margin-bottom: 80rpx;
137 animation: fadeIn 1s ease-out;
138 }
139
140 /* 单个信息项 */
141 .info-item {
142 display: flex;
143 justify-content: space-between;
144 align-items: center;
145 padding: 24rpx 0;
146 border-bottom: 1rpx solid #f5f5f5;
147 }
148
149 /* 最后一项去掉下划线 */
150 .info-item:last-child {
151 border-bottom: none;
152 }
153
154 /* 标签样式 */
155 .label {
156 font-size: 32rpx;
157 color: #666666;
158 white-space: nowrap;
159 margin-right: 20rpx;
160 flex-shrink: 0;
161 }
162
163 /* 值样式 */
164 .value {
165 font-size: 32rpx;
166 color: #333333;
167 text-align: right;
168 word-break: break-all;
169 word-wrap: break-word;
170 }
171
172 /* 金额特殊样式 */
173 .amount {
174 color: #cd1e27;
175 font-weight: 600;
176 }
177
178 /* 确定按钮区域 */
179 .confirm-btn-area {
180 width: 100%;
181 padding: 0 20rpx;
182 box-sizing: border-box;
183 }
184
185 /* 确定按钮（渐变+动效） */
186 .confirm-btn {
187 width: 100%;
188 height: 90rpx;
189 line-height: 90rpx;
190 /* 按钮渐变背景 */
191 background: #fff;
192 color: #C4121B;
193 font-size: 36rpx;
194 font-weight: 600;
195 border-radius: 45rpx;
196 border: 1px solid #C4121B;
197 animation: slideUp 1s ease-out;
198 /* 禁止默认样式 */
199 position: relative;
200 overflow: hidden;
201 }
202
203 /* 按钮点击反馈 */
204 .confirm-btn::after {
205 border: none;
206 }
207
208 .confirm-btn:active {
209 transform: scale(0.98);
210 box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
211 }
212
213 /* 动画定义 */
214 @keyframes fadeIn {
215 0% {
216 opacity: 0;
217 }
218
219 100% {
220 opacity: 1;
221 }
222 }
223
224 @keyframes scaleIn {
225 0% {
226 transform: scale(0);
227 }
228
229 70% {
230 transform: scale(1.1);
231 }
232
233 100% {
234 transform: scale(1);
235 }
236 }
237
238 @keyframes slideUp {
239 0% {
240 opacity: 0;
241 transform: translateY(30rpx);
242 }
243
244 100% {
245 opacity: 1;
246 transform: translateY(0);
247 }
248 }
249 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!