Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
07d82489 by 张猛
Options

个人支付跳转

1 parent 4377830a
Inline Side-by-side
Showing 3 changed files with 272 additions and 271 deletions
level/ztx/cert.vue
...@@ -94,11 +94,11 @@ onLoad((option) => { ...@@ -94,11 +94,11 @@ onLoad((option) => {
94 }) 94 })
95 } 95 }
96 }) 96 })
97
97 onShow(() => { 98 onShow(() => {
98 if (app.globalData.isLogin) { 99 if (app.globalData.isLogin) {
99 init() 100 init()
100 } else { 101 } else {
101
102 app.firstLoadCallback = () => { 102 app.firstLoadCallback = () => {
103 init() 103 init()
104 }; 104 };
......
personal/order.vue
...@@ -20,9 +20,9 @@ ...@@ -20,9 +20,9 @@
20 <view class="card-header"> 20 <view class="card-header">
21 <view class="date"> 21 <view class="date">
22 <!-- <image v-if="item.payTime" :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" --> 22 <!-- <image v-if="item.payTime" :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" -->
23 <!-- style="width:30rpx;height:30rpx;"/> --> 23 <!-- style="width:30rpx;height:30rpx;"/> -->
24 <!-- <text v-if="item.payTime" class="date-text">{{ item.payTime }}</text> --> 24 <!-- <text v-if="item.payTime" class="date-text">{{ item.payTime }}</text> -->
25 <text class="value text-primary" >{{ item.wfCode || '——' }}</text> 25 <text class="value text-primary">{{ item.wfCode || '——' }}</text>
26 </view> 26 </view>
27 <view 27 <view
28 :class="{ 28 :class="{
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
124 <script setup> 124 <script setup>
125 import {ref, reactive, onMounted, computed} from 'vue'; 125 import {ref, reactive, onMounted, computed} from 'vue';
126 import {onReachBottom} from '@dcloudio/uni-app' 126 import {onReachBottom} from '@dcloudio/uni-app'
127 import {useUserStore} from "../store/modules/user"; 127 import {useUserStore} from "@/store/modules/user";
128 import * as api from '@/common/api.js' 128 import * as api from '@/common/api.js'
129 import config from '@/config.js' 129 import config from '@/config.js'
130 130
...@@ -242,7 +242,7 @@ const confirmDel = async () => { ...@@ -242,7 +242,7 @@ const confirmDel = async () => {
242 uni.showToast({title: '删除成功', icon: 'success'}); 242 uni.showToast({title: '删除成功', icon: 'success'});
243 pageNum.value = 1; 243 pageNum.value = 1;
244 list.value = []; 244 list.value = [];
245 initData(); 245 await initData();
246 closeDelPopup(); 246 closeDelPopup();
247 } catch (e) { 247 } catch (e) {
248 uni.showToast({title: '删除失败', icon: 'error'}); 248 uni.showToast({title: '删除失败', icon: 'error'});
...@@ -288,7 +288,7 @@ const confirmCancel = async () => { ...@@ -288,7 +288,7 @@ const confirmCancel = async () => {
288 uni.showToast({title: '取消成功', icon: 'success'}); 288 uni.showToast({title: '取消成功', icon: 'success'});
289 pageNum.value = 1; 289 pageNum.value = 1;
290 list.value = []; 290 list.value = [];
291 initData(); 291 await initData();
292 closeCancelPopup(); 292 closeCancelPopup();
293 } catch (e) { 293 } catch (e) {
294 uni.showToast({title: '取消失败', icon: 'error'}); 294 uni.showToast({title: '取消失败', icon: 'error'});
...@@ -309,7 +309,7 @@ const closeCancelPopup = () => { ...@@ -309,7 +309,7 @@ const closeCancelPopup = () => {
309 height: 100vh; 309 height: 100vh;
310 display: flex; 310 display: flex;
311 flex-direction: column; 311 flex-direction: column;
312 312
313 &.no-scroll { 313 &.no-scroll {
314 overflow: hidden; 314 overflow: hidden;
315 height: 100vh; 315 height: 100vh;
...@@ -326,7 +326,7 @@ const closeCancelPopup = () => { ...@@ -326,7 +326,7 @@ const closeCancelPopup = () => {
326 // 订单列表 326 // 订单列表
327 .order-list { 327 .order-list {
328 padding: 20rpx; 328 padding: 20rpx;
329 329
330 .order-card { 330 .order-card {
331 background: #fff; 331 background: #fff;
332 margin-bottom: 20rpx; 332 margin-bottom: 20rpx;
...@@ -342,35 +342,35 @@ const closeCancelPopup = () => { ...@@ -342,35 +342,35 @@ const closeCancelPopup = () => {
342 justify-content: space-between; 342 justify-content: space-between;
343 align-items: center; 343 align-items: center;
344 padding-bottom: 20rpx; 344 padding-bottom: 20rpx;
345 345
346 .date { 346 .date {
347 display: flex; 347 display: flex;
348 align-items: center; 348 align-items: center;
349 gap: 8rpx; 349 gap: 8rpx;
350 font-size: 26rpx; 350 font-size: 26rpx;
351 351
352 .date-text { 352 .date-text {
353 color: #666; 353 color: #666;
354 } 354 }
355 } 355 }
356 356
357 .status-tag { 357 .status-tag {
358 font-size: 22rpx; 358 font-size: 22rpx;
359 padding: 6rpx 16rpx; 359 padding: 6rpx 16rpx;
360 border-radius: 20rpx; 360 border-radius: 20rpx;
361 361
362 &.success { 362 &.success {
363 background: #e6f7ef; 363 background: #e6f7ef;
364 color: #52c41a; 364 color: #52c41a;
365 border: 1rpx solid rgba(82, 196, 26, 0.3); 365 border: 1rpx solid rgba(82, 196, 26, 0.3);
366 } 366 }
367 367
368 &.danger { 368 &.danger {
369 background: #fff1f0; 369 background: #fff1f0;
370 color: #ff4d4f; 370 color: #ff4d4f;
371 border: 1rpx solid rgba(232, 52, 29, 0.3); 371 border: 1rpx solid rgba(232, 52, 29, 0.3);
372 } 372 }
373 373
374 &.pending { 374 &.pending {
375 background: #fff7e6; 375 background: #fff7e6;
376 color: #faad14; 376 color: #faad14;
...@@ -385,13 +385,13 @@ const closeCancelPopup = () => { ...@@ -385,13 +385,13 @@ const closeCancelPopup = () => {
385 align-items: center; 385 align-items: center;
386 margin-bottom: 20rpx; 386 margin-bottom: 20rpx;
387 font-size: 26rpx; 387 font-size: 26rpx;
388 388
389 .label { 389 .label {
390 color: #999; 390 color: #999;
391 flex-shrink: 0; 391 flex-shrink: 0;
392 width: 140rpx; 392 width: 140rpx;
393 } 393 }
394 394
395 .value { 395 .value {
396 color: #333; 396 color: #333;
397 word-break: break-all; 397 word-break: break-all;
...@@ -417,12 +417,12 @@ const closeCancelPopup = () => { ...@@ -417,12 +417,12 @@ const closeCancelPopup = () => {
417 padding: 16rpx 20rpx; 417 padding: 16rpx 20rpx;
418 border-radius: 8rpx; 418 border-radius: 8rpx;
419 font-size: 26rpx; 419 font-size: 26rpx;
420 420
421 .label { 421 .label {
422 color: #999; 422 color: #999;
423 text-align: center; 423 text-align: center;
424 } 424 }
425 425
426 .value { 426 .value {
427 color: #333; 427 color: #333;
428 font-weight: 500; 428 font-weight: 500;
...@@ -439,11 +439,11 @@ const closeCancelPopup = () => { ...@@ -439,11 +439,11 @@ const closeCancelPopup = () => {
439 margin: 0 0 16rpx; 439 margin: 0 0 16rpx;
440 padding: 8rpx 0; 440 padding: 8rpx 0;
441 font-size: 26rpx; 441 font-size: 26rpx;
442 442
443 .label { 443 .label {
444 color: #333; 444 color: #333;
445 } 445 }
446 446
447 .amount { 447 .amount {
448 color: #EB6100; 448 color: #EB6100;
449 font-weight: 600; 449 font-weight: 600;
...@@ -458,7 +458,7 @@ const closeCancelPopup = () => { ...@@ -458,7 +458,7 @@ const closeCancelPopup = () => {
458 align-items: center; 458 align-items: center;
459 gap: 16rpx; 459 gap: 16rpx;
460 width: 100%; 460 width: 100%;
461 461
462 .btn { 462 .btn {
463 padding: 12rpx 32rpx; 463 padding: 12rpx 32rpx;
464 border-radius: 40rpx; 464 border-radius: 40rpx;
...@@ -470,35 +470,35 @@ const closeCancelPopup = () => { ...@@ -470,35 +470,35 @@ const closeCancelPopup = () => {
470 border: none; 470 border: none;
471 width: 80px; 471 width: 80px;
472 background: transparent; 472 background: transparent;
473 473
474 &::after { 474 &::after {
475 border: none; 475 border: none;
476 } 476 }
477 477
478 &.btn-delete { 478 &.btn-delete {
479 background: #fff; 479 background: #fff;
480 color: #e4393c; 480 color: #e4393c;
481 border: 1rpx solid #e4393c; 481 border: 1rpx solid #e4393c;
482 } 482 }
483 483
484 &.btn-invoice { 484 &.btn-invoice {
485 background: #fff; 485 background: #fff;
486 color: #e4393c; 486 color: #e4393c;
487 border: 1rpx solid #e4393c; 487 border: 1rpx solid #e4393c;
488 } 488 }
489 489
490 &.btn-cancel { 490 &.btn-cancel {
491 background: #fff; 491 background: #fff;
492 color: #666; 492 color: #666;
493 border: 1rpx solid #ccc; 493 border: 1rpx solid #ccc;
494 } 494 }
495 495
496 &.btn-pay { 496 &.btn-pay {
497 background: linear-gradient(90deg, #FF755A, #F51722); 497 background: linear-gradient(90deg, #FF755A, #F51722);
498 color: #fff; 498 color: #fff;
499 border: none; 499 border: none;
500 } 500 }
501 501
502 &:disabled { 502 &:disabled {
503 opacity: 0.6; 503 opacity: 0.6;
504 pointer-events: none; 504 pointer-events: none;
...@@ -571,7 +571,7 @@ const closeCancelPopup = () => { ...@@ -571,7 +571,7 @@ const closeCancelPopup = () => {
571 border: none; 571 border: none;
572 margin: 0; 572 margin: 0;
573 padding: 0; 573 padding: 0;
574 574
575 &::after { 575 &::after {
576 border: none; 576 border: none;
577 } 577 }
...@@ -588,7 +588,7 @@ const closeCancelPopup = () => { ...@@ -588,7 +588,7 @@ const closeCancelPopup = () => {
588 border: none; 588 border: none;
589 margin: 0; 589 margin: 0;
590 padding: 0; 590 padding: 0;
591 591
592 &::after { 592 &::after {
593 border: none; 593 border: none;
594 } 594 }
......
personal/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 id: '', 48 id: '',
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.redirectTo({
56 url: '/login/login' 56 // url: '/login/login'
57 }) 57 url: '/personal/order'
58 } 58 })
59 59 }
60 onLoad(async (option) => { 60
61 if (option.orderId) { 61 onLoad(async (option) => {
62 const [err, res] = await to(api.getOrderInfo(option.orderId)) 62 if (option.orderId) {
63 if (!err && res.data) { 63 const [err, res] = await to(api.getOrderInfo(option.orderId))
64 orderInfo.value = res.data 64 if (!err && res.data) {
65 } else { 65 orderInfo.value = res.data
66 orderInfo.value.id = option.orderId 66 } else {
67 } 67 orderInfo.value.id = option.orderId
68 } 68 }
69 }) 69 }
70 })
70 </script> 71 </script>
71 72
72 <style scoped> 73 <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
74 /* 全局容器 */
75 .success-container {
76 display: flex;
77 flex-direction: column;
78 align-items: center;
79 padding: 100rpx 40rpx 60rpx;
80 min-height: 100vh;
81 background-color: #f8f9fa;
82 box-sizing: border-box;
83 }
84
85 /* 成功图标容器 */
86 .success-icon {
87 margin-bottom: 40rpx;
88 animation: fadeIn 0.6s ease-out;
89 }
90
91 /* 渐变圆形背景 */
92 .icon-circle {
93 width: 180rpx;
94 height: 180rpx;
95 border-radius: 50%;
96 /* 青绿色渐变 */
97 background: linear-gradient(135deg, #06c1ae, #04a896);
98 display: flex;
99 align-items: center;
100 justify-content: center;
101 box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
102 /* 轻微上浮动效 */
103 animation: scaleIn 0.8s ease-out;
104 }
105
106 /* 对勾图标 */
107 .check-icon {
108 font-size: 90rpx;
109 color: #ffffff;
110 font-weight: bold;
111 }
112
113 /* 支付成功标题 */
114 .success-title {
115 font-size: 48rpx;
116 font-weight: 700;
117 color: #333333;
118 margin-bottom: 12rpx;
119 animation: slideUp 0.6s ease-out;
120 }
121
122 /* 副标题 */
123 .success-subtitle {
124 font-size: 28rpx;
125 color: #666666;
126 margin-bottom: 60rpx;
127 animation: slideUp 0.8s ease-out;
128 }
129
130 /* 订单信息卡片 */
131 .info-card {
132 width: 100%;
133 background: #ffffff;
134 border-radius: 20rpx;
135 padding: 40rpx 30rpx;
136 box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
137 margin-bottom: 80rpx;
138 animation: fadeIn 1s ease-out;
139 }
140
141 /* 单个信息项 */
142 .info-item {
143 display: flex;
144 justify-content: space-between;
145 align-items: center;
146 padding: 24rpx 0;
147 border-bottom: 1rpx solid #f5f5f5;
148 }
149
150 /* 最后一项去掉下划线 */
151 .info-item:last-child {
152 border-bottom: none;
153 }
154
155 /* 标签样式 */
156 .label {
157 font-size: 32rpx;
158 color: #666666;
159 white-space: nowrap;
160 margin-right: 20rpx;
161 flex-shrink: 0;
162 }
163
164 /* 值样式 */
165 .value {
166 font-size: 32rpx;
167 color: #333333;
168 text-align: right;
169 word-break: break-all;
170 word-wrap: break-word;
171 }
172
173 /* 金额特殊样式 */
174 .amount {
175 color: #cd1e27;
176 font-weight: 600;
177 }
178
179 /* 确定按钮区域 */
180 .confirm-btn-area {
181 width: 100%;
182 padding: 0 20rpx;
183 box-sizing: border-box;
184 }
185
186 /* 确定按钮（渐变+动效） */
187 .confirm-btn {
188 width: 100%;
189 height: 90rpx;
190 line-height: 90rpx;
191 /* 按钮渐变背景 */
192 background: #fff;
193 color: #C4121B;
194 font-size: 36rpx;
195 font-weight: 600;
196 border-radius: 45rpx;
197 border: 1px solid #C4121B;
198 animation: slideUp 1s ease-out;
199 /* 禁止默认样式 */
200 position: relative;
201 overflow: hidden;
202 }
203
204 /* 按钮点击反馈 */
205 .confirm-btn::after {
206 border: none;
207 }
208
209 .confirm-btn:active {
210 transform: scale(0.98);
211 box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
212 }
213
214 /* 动画定义 */
215 @keyframes fadeIn {
216 0% {
217 opacity: 0;
218 }
219
220 100% {
221 opacity: 1;
222 }
223 }
224
225 @keyframes scaleIn {
226 0% {
227 transform: scale(0);
228 }
229
230 70% {
231 transform: scale(1.1);
232 }
233
234 100% {
235 transform: scale(1);
236 }
237 }
238
239 @keyframes slideUp {
240 0% {
241 opacity: 0;
242 transform: translateY(30rpx);
243 }
244
245 100% {
246 opacity: 1;
247 transform: translateY(0);
248 }
249 }
250 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!