@uxda/appkit 4.3.39 → 4.3.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/.cursor/skills/appkit-build-update-component-rules/SKILL.md +54 -54
  2. package/.cursor/skills/appkit-sync-component-rules/SKILL.md +60 -60
  3. package/.eslintrc.mjs +7 -7
  4. package/Appkit/347/273/204/344/273/266/344/275/277/347/224/250/350/247/204/345/210/231.md +2002 -2002
  5. package/PROJECT_DOCS.md +150 -142
  6. package/README.md +194 -194
  7. package/babel.config.js +12 -12
  8. package/dist/appkit.css +11 -6
  9. package/dist/index.js +30 -16
  10. package/package.json +82 -82
  11. package/project.config.json +15 -15
  12. package/project.tt.json +13 -13
  13. package/rollup.config.mjs +81 -81
  14. package/src/Appkit.ts +72 -72
  15. package/src/balance/api/endpoints.ts +134 -134
  16. package/src/balance/api/index.ts +118 -118
  17. package/src/balance/components/AccountView.vue +850 -834
  18. package/src/balance/components/BalanceCard.vue +210 -210
  19. package/src/balance/components/BalanceReminder.vue +84 -84
  20. package/src/balance/components/ConsumptionFilter.vue +218 -218
  21. package/src/balance/components/ConsumptionRules.vue +68 -68
  22. package/src/balance/components/DateFilter.vue +259 -259
  23. package/src/balance/components/DateRange.vue +111 -111
  24. package/src/balance/components/ListFilter.vue +62 -62
  25. package/src/balance/components/ListFilterPicker.vue +191 -191
  26. package/src/balance/components/PromoterCard.vue +308 -308
  27. package/src/balance/components/SecondBalance.vue +77 -77
  28. package/src/balance/components/Tip.vue +45 -45
  29. package/src/balance/components/index.ts +8 -8
  30. package/src/balance/types.ts +99 -99
  31. package/src/components/bt-cropper/index.vue +730 -730
  32. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  33. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  34. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  35. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  36. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  37. package/src/components/bt-cropper/utils/ratio.js +3 -3
  38. package/src/components/bt-cropper/utils/tools.js +25 -25
  39. package/src/components/dd-area/index.vue +225 -225
  40. package/src/components/dd-icon/doc.md +21 -21
  41. package/src/components/dd-icon/index.vue +23 -23
  42. package/src/components/dd-notice-bar/index.vue +78 -78
  43. package/src/components/dd-search/doc.md +34 -34
  44. package/src/components/dd-search/index.vue +168 -168
  45. package/src/components/dd-selector/index.vue +124 -124
  46. package/src/components/dd-skeleton/doc.md +19 -19
  47. package/src/components/dd-skeleton/index.vue +36 -36
  48. package/src/global.ts +6 -6
  49. package/src/index.ts +101 -101
  50. package/src/main.scss +1 -1
  51. package/src/notice/api/endpoints.ts +54 -54
  52. package/src/notice/api/index.ts +121 -121
  53. package/src/notice/components/NoticeBanner.vue +247 -247
  54. package/src/notice/components/NoticeEntry.vue +99 -99
  55. package/src/notice/components/NoticeList.vue +311 -311
  56. package/src/notice/components/NoticeList2.vue +401 -401
  57. package/src/notice/components/NoticePopup.vue +163 -163
  58. package/src/notice/components/index.ts +6 -6
  59. package/src/notice/components/useCommonList.ts +87 -87
  60. package/src/notice/components/useNotice.ts +35 -35
  61. package/src/notice/index.ts +1 -1
  62. package/src/notice/types.ts +25 -25
  63. package/src/payment/api/config.ts +7 -7
  64. package/src/payment/api/endpoints.ts +112 -112
  65. package/src/payment/api/index.ts +108 -108
  66. package/src/payment/components/AmountPicker.vue +56 -56
  67. package/src/payment/components/RechargeResult.vue +68 -68
  68. package/src/payment/components/RechargeView.vue +420 -420
  69. package/src/payment/components/RightsPicker.vue +105 -105
  70. package/src/payment/components/TradeView.vue +627 -627
  71. package/src/payment/components/UserAgreement.vue +234 -234
  72. package/src/payment/components/index.ts +22 -22
  73. package/src/payment/components/recharge-amount.spec.ts +54 -54
  74. package/src/payment/components/recharge-amount.ts +67 -67
  75. package/src/payment/index.ts +5 -5
  76. package/src/payment/services/index.ts +16 -16
  77. package/src/payment/services/invoke-recharge.ts +25 -25
  78. package/src/payment/services/request-payment.ts +136 -136
  79. package/src/payment/types.ts +34 -34
  80. package/src/register/components/SelfRegistration.vue +233 -233
  81. package/src/register/components/index.ts +2 -2
  82. package/src/scenarios/components/SharePoster.vue +364 -364
  83. package/src/scenarios/components/index.ts +2 -2
  84. package/src/scenarios/components/poster-paste.vue +93 -93
  85. package/src/scenarios/components/share-poster.md +273 -273
  86. package/src/shared/components/AppDrawer.vue +53 -53
  87. package/src/shared/components/AppVerify.vue +137 -137
  88. package/src/shared/components/DeviceVersion.vue +78 -78
  89. package/src/shared/components/EmptyView.vue +33 -33
  90. package/src/shared/components/OcrBank.vue +202 -202
  91. package/src/shared/components/OcrBusinessLicense.vue +120 -120
  92. package/src/shared/components/OcrIcon.vue +267 -267
  93. package/src/shared/components/OcrInvoice.vue +323 -323
  94. package/src/shared/components/OfficeDocx.vue +33 -33
  95. package/src/shared/components/OfficePdf.vue +35 -35
  96. package/src/shared/components/PageHeader.vue +84 -84
  97. package/src/shared/components/index.ts +12 -12
  98. package/src/shared/composables/index.ts +10 -10
  99. package/src/shared/composables/useAmount.ts +46 -46
  100. package/src/shared/composables/useCompress.ts +64 -64
  101. package/src/shared/composables/useCountdown.ts +46 -46
  102. package/src/shared/composables/useCrypto.ts +76 -76
  103. package/src/shared/composables/useDeviceEnv.ts +61 -61
  104. package/src/shared/composables/useDragBox.ts +97 -97
  105. package/src/shared/composables/useEncode.ts +43 -43
  106. package/src/shared/composables/useLogger.ts +149 -149
  107. package/src/shared/composables/useSafeArea.ts +46 -46
  108. package/src/shared/composables/useTabbar.ts +24 -24
  109. package/src/shared/composables/useUpload.ts +106 -106
  110. package/src/shared/composables/useValidator.ts +32 -32
  111. package/src/shared/composables/useWxAuth.ts +49 -49
  112. package/src/shared/http/Http.ts +149 -149
  113. package/src/shared/http/index.ts +1 -1
  114. package/src/shared/http/types.ts +163 -163
  115. package/src/shared/index.ts +9 -9
  116. package/src/shared/tracking/directives/index.ts +40 -40
  117. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  118. package/src/shared/weixin/index.ts +9 -9
  119. package/src/shared/weixin/jssdk.ts +104 -104
  120. package/src/shared/weixin/payment.ts +38 -38
  121. package/src/styles/vars.scss +3 -3
  122. package/src/user/api/endpoints.ts +17 -17
  123. package/src/user/api/index.ts +123 -123
  124. package/src/user/components/LoginSetting.vue +114 -114
  125. package/src/user/components/UserAuth.vue +218 -218
  126. package/src/user/components/UserBinding.vue +277 -277
  127. package/src/user/components/UserBindingSuccess.vue +80 -80
  128. package/src/user/components/UserEntry.vue +139 -139
  129. package/src/user/components/UserFeedback.vue +428 -428
  130. package/src/user/components/UserFeedbackEntry.vue +175 -175
  131. package/src/user/components/UserHeadCrop.vue +65 -65
  132. package/src/user/components/UserInfo.vue +711 -711
  133. package/src/user/components/UserResourceEmpty.vue +75 -75
  134. package/src/user/components/index.ts +23 -23
  135. package/src/user/index.ts +1 -1
  136. package/src/utils/utils.ts +33 -33
  137. package/tsconfig.json +30 -30
  138. package/types/global.d.ts +23 -23
  139. package/types/vue.d.ts +10 -10
  140. package/dist/assets/asset-3B_CoPto +0 -1
  141. package/dist/assets/asset-DcH8Kg-2 +0 -1
@@ -1,210 +1,210 @@
1
- <template>
2
- <div class="account-card">
3
- <div class="card">
4
- <div class="card-row">
5
- <div class="card-row-left">
6
- <div class="bean-box">
7
- <div class="bean-icon-box">
8
- <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
9
- </div>
10
- <span class="baan-name">云豆</span>
11
- </div>
12
- <div class="bean-nums number">{{ formatAmount(balance.total || 0) }}</div>
13
- </div>
14
- <div class="card-row-right">
15
- <div class="account-info-entry" v-track-click @click="gotoDetail">
16
- <div class="account-info-name">账户明细</div>
17
- <div class="account-info-icon">
18
- <img class="icon"
19
- src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjgwODA2IDIuMDU4MDZDNi4wNTIxNCAxLjgxMzk4IDYuNDQ3ODYgMS44MTM5OCA2LjY5MTk0IDIuMDU4MDZMMTQuMTkxOSA5LjU1ODA2QzE0LjQzNiA5LjgwMjE0IDE0LjQzNiAxMC4xOTc5IDE0LjE5MTkgMTAuNDQxOUw2LjY5MTk0IDE3Ljk0MTlDNi40NDc4NiAxOC4xODYgNi4wNTIxNCAxOC4xODYgNS44MDgwNiAxNy45NDE5QzUuNTYzOTggMTcuNjk3OSA1LjU2Mzk4IDE3LjMwMjEgNS44MDgwNiAxNy4wNTgxTDEyLjg2NjEgMTBMNS44MDgwNiAyLjk0MTk0QzUuNTYzOTggMi42OTc4NiA1LjU2Mzk4IDIuMzAyMTQgNS44MDgwNiAyLjA1ODA2WiIgZmlsbD0iIzM1MzUzNSIvPgo8L3N2Zz4K" />
20
- </div>
21
- </div>
22
- </div>
23
- </div>
24
- <!-- <div class="line"></div>
25
- <div class="card-row">
26
- <div class="card-row-left desc">权益使用时自动扣减云豆</div>
27
- <div class="card-row-right">
28
- <div class="pay" v-track-click @click="gotoRecharge">
29
- <div>充值</div>
30
- <img
31
- class="pay-icon"
32
- src="https://cdn.ddjf.com/static/images/bpms-workBench/bean-right.png"
33
- />
34
- </div>
35
- </div>
36
- </div> -->
37
- </div>
38
- </div>
39
- </template>
40
-
41
- <script setup lang="ts">
42
- import { ref } from 'vue'
43
- import { endpoints, useHttp } from '../api'
44
- import { Balance } from '../types'
45
- import { useDidShow } from '@tarojs/taro'
46
- import { useAmount } from '../../shared/composables/useAmount'
47
-
48
- type BalanceCardProps = {
49
- app: string
50
- }
51
- const props = withDefaults(defineProps<BalanceCardProps>(), {
52
- app: '',
53
- })
54
-
55
- const { formatAmount } = useAmount()
56
- const balance = ref<Balance>({
57
- total: 0,
58
- privileges: [],
59
- })
60
-
61
- const gotoRecharge = () => {
62
- emit('recharge')
63
- }
64
-
65
- async function loadBalance() {
66
- const $http = useHttp()
67
- $http
68
- .get<Balance>(endpoints.获取余额明细, {
69
- app: props.app,
70
- })
71
- .then((data) => {
72
- // balance.value = data
73
- balance.value.total = data.total || (data.commonAccount as number)
74
- })
75
- }
76
-
77
- const emit = defineEmits([
78
- /**
79
- * 跳账户详情
80
- */
81
- 'drill',
82
- /**
83
- * 跳充值页
84
- */
85
- 'recharge',
86
- ])
87
-
88
- function gotoDetail() {
89
- emit('drill')
90
- }
91
-
92
- useDidShow(() => {
93
- loadBalance()
94
- })
95
-
96
- defineExpose({
97
- reload: loadBalance,
98
- })
99
- </script>
100
-
101
- <style lang="scss">
102
- .account-card {
103
- .card {
104
- background: linear-gradient(90deg, #EEF1FA 0%, #E4E6F3 100%);
105
- border-radius: 10px;
106
- padding: 14px 10px 20px;
107
- margin: 0;
108
-
109
- .card-row {
110
- display: flex;
111
- justify-content: space-between;
112
- align-items: start;
113
-
114
- .card-row-left {
115
- display: flex;
116
- flex-direction: column;
117
-
118
- .bean-box {
119
- display: flex;
120
- align-items: center;
121
-
122
- .bean-icon-box {
123
- width: 20px;
124
- height: 20px;
125
- margin-right: 8px;
126
-
127
- .bean-icon {
128
- display: block;
129
- font-size: 0;
130
- width: 100%;
131
- height: 100%;
132
- }
133
- }
134
-
135
- .baan-name {
136
- color: #375264;
137
- font-size: 16px;
138
- }
139
- }
140
-
141
- .bean-nums {
142
- color: #353535;
143
- line-height: 25px;
144
- font-weight: bold;
145
- font-size: 20px;
146
- margin-top: 3px;
147
- }
148
- }
149
-
150
- .desc {
151
- font-size: 10px;
152
- color: #ccc;
153
- line-height: 14px;
154
- }
155
- }
156
-
157
- .line {
158
- margin: 6px 0px 8px 0px;
159
- height: 0.5px;
160
- background: rgb(195, 195, 195);
161
- opacity: 0.2;
162
- }
163
-
164
- .card-row-right {
165
- .pay {
166
- padding: 0 8px;
167
- line-height: 18px;
168
- color: #ffd6a5;
169
- border: 1px solid #ffd6a5;
170
- border-radius: 9px;
171
- font-size: 12px;
172
- display: flex;
173
- align-items: center;
174
-
175
- .pay-icon {
176
- display: block;
177
- font-size: 0;
178
- width: 3.5px;
179
- height: 6px;
180
- margin-left: 6px;
181
- }
182
- }
183
-
184
- .account-info-entry {
185
- display: flex;
186
- align-items: center;
187
-
188
- .account-info-name {
189
- color: #353535;
190
- font-size: 13px;
191
- font-weight: 500;
192
- margin-right: 5px;
193
- }
194
-
195
- .account-info-icon {
196
- width: 10px;
197
- height: 10px;
198
-
199
- .icon {
200
- display: block;
201
- font-size: 0;
202
- width: 100%;
203
- height: 100%;
204
- }
205
- }
206
- }
207
- }
208
- }
209
- }
210
- </style>
1
+ <template>
2
+ <div class="account-card">
3
+ <div class="card">
4
+ <div class="card-row">
5
+ <div class="card-row-left">
6
+ <div class="bean-box">
7
+ <div class="bean-icon-box">
8
+ <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
9
+ </div>
10
+ <span class="baan-name">云豆</span>
11
+ </div>
12
+ <div class="bean-nums number">{{ formatAmount(balance.total || 0) }}</div>
13
+ </div>
14
+ <div class="card-row-right">
15
+ <div class="account-info-entry" v-track-click @click="gotoDetail">
16
+ <div class="account-info-name">账户明细</div>
17
+ <div class="account-info-icon">
18
+ <img class="icon"
19
+ src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjgwODA2IDIuMDU4MDZDNi4wNTIxNCAxLjgxMzk4IDYuNDQ3ODYgMS44MTM5OCA2LjY5MTk0IDIuMDU4MDZMMTQuMTkxOSA5LjU1ODA2QzE0LjQzNiA5LjgwMjE0IDE0LjQzNiAxMC4xOTc5IDE0LjE5MTkgMTAuNDQxOUw2LjY5MTk0IDE3Ljk0MTlDNi40NDc4NiAxOC4xODYgNi4wNTIxNCAxOC4xODYgNS44MDgwNiAxNy45NDE5QzUuNTYzOTggMTcuNjk3OSA1LjU2Mzk4IDE3LjMwMjEgNS44MDgwNiAxNy4wNTgxTDEyLjg2NjEgMTBMNS44MDgwNiAyLjk0MTk0QzUuNTYzOTggMi42OTc4NiA1LjU2Mzk4IDIuMzAyMTQgNS44MDgwNiAyLjA1ODA2WiIgZmlsbD0iIzM1MzUzNSIvPgo8L3N2Zz4K" />
20
+ </div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ <!-- <div class="line"></div>
25
+ <div class="card-row">
26
+ <div class="card-row-left desc">权益使用时自动扣减云豆</div>
27
+ <div class="card-row-right">
28
+ <div class="pay" v-track-click @click="gotoRecharge">
29
+ <div>充值</div>
30
+ <img
31
+ class="pay-icon"
32
+ src="https://cdn.ddjf.com/static/images/bpms-workBench/bean-right.png"
33
+ />
34
+ </div>
35
+ </div>
36
+ </div> -->
37
+ </div>
38
+ </div>
39
+ </template>
40
+
41
+ <script setup lang="ts">
42
+ import { ref } from 'vue'
43
+ import { endpoints, useHttp } from '../api'
44
+ import { Balance } from '../types'
45
+ import { useDidShow } from '@tarojs/taro'
46
+ import { useAmount } from '../../shared/composables/useAmount'
47
+
48
+ type BalanceCardProps = {
49
+ app: string
50
+ }
51
+ const props = withDefaults(defineProps<BalanceCardProps>(), {
52
+ app: '',
53
+ })
54
+
55
+ const { formatAmount } = useAmount()
56
+ const balance = ref<Balance>({
57
+ total: 0,
58
+ privileges: [],
59
+ })
60
+
61
+ const gotoRecharge = () => {
62
+ emit('recharge')
63
+ }
64
+
65
+ async function loadBalance() {
66
+ const $http = useHttp()
67
+ $http
68
+ .get<Balance>(endpoints.获取余额明细, {
69
+ app: props.app,
70
+ })
71
+ .then((data) => {
72
+ // balance.value = data
73
+ balance.value.total = data.total || (data.commonAccount as number)
74
+ })
75
+ }
76
+
77
+ const emit = defineEmits([
78
+ /**
79
+ * 跳账户详情
80
+ */
81
+ 'drill',
82
+ /**
83
+ * 跳充值页
84
+ */
85
+ 'recharge',
86
+ ])
87
+
88
+ function gotoDetail() {
89
+ emit('drill')
90
+ }
91
+
92
+ useDidShow(() => {
93
+ loadBalance()
94
+ })
95
+
96
+ defineExpose({
97
+ reload: loadBalance,
98
+ })
99
+ </script>
100
+
101
+ <style lang="scss">
102
+ .account-card {
103
+ .card {
104
+ background: linear-gradient(90deg, #EEF1FA 0%, #E4E6F3 100%);
105
+ border-radius: 10px;
106
+ padding: 14px 10px 20px;
107
+ margin: 0;
108
+
109
+ .card-row {
110
+ display: flex;
111
+ justify-content: space-between;
112
+ align-items: start;
113
+
114
+ .card-row-left {
115
+ display: flex;
116
+ flex-direction: column;
117
+
118
+ .bean-box {
119
+ display: flex;
120
+ align-items: center;
121
+
122
+ .bean-icon-box {
123
+ width: 20px;
124
+ height: 20px;
125
+ margin-right: 8px;
126
+
127
+ .bean-icon {
128
+ display: block;
129
+ font-size: 0;
130
+ width: 100%;
131
+ height: 100%;
132
+ }
133
+ }
134
+
135
+ .baan-name {
136
+ color: #375264;
137
+ font-size: 16px;
138
+ }
139
+ }
140
+
141
+ .bean-nums {
142
+ color: #353535;
143
+ line-height: 25px;
144
+ font-weight: bold;
145
+ font-size: 20px;
146
+ margin-top: 3px;
147
+ }
148
+ }
149
+
150
+ .desc {
151
+ font-size: 10px;
152
+ color: #ccc;
153
+ line-height: 14px;
154
+ }
155
+ }
156
+
157
+ .line {
158
+ margin: 6px 0px 8px 0px;
159
+ height: 0.5px;
160
+ background: rgb(195, 195, 195);
161
+ opacity: 0.2;
162
+ }
163
+
164
+ .card-row-right {
165
+ .pay {
166
+ padding: 0 8px;
167
+ line-height: 18px;
168
+ color: #ffd6a5;
169
+ border: 1px solid #ffd6a5;
170
+ border-radius: 9px;
171
+ font-size: 12px;
172
+ display: flex;
173
+ align-items: center;
174
+
175
+ .pay-icon {
176
+ display: block;
177
+ font-size: 0;
178
+ width: 3.5px;
179
+ height: 6px;
180
+ margin-left: 6px;
181
+ }
182
+ }
183
+
184
+ .account-info-entry {
185
+ display: flex;
186
+ align-items: center;
187
+
188
+ .account-info-name {
189
+ color: #353535;
190
+ font-size: 13px;
191
+ font-weight: 500;
192
+ margin-right: 5px;
193
+ }
194
+
195
+ .account-info-icon {
196
+ width: 10px;
197
+ height: 10px;
198
+
199
+ .icon {
200
+ display: block;
201
+ font-size: 0;
202
+ width: 100%;
203
+ height: 100%;
204
+ }
205
+ }
206
+ }
207
+ }
208
+ }
209
+ }
210
+ </style>
@@ -1,84 +1,84 @@
1
- <template>
2
- <nut-popup pop-class="balance-reminder-popup" round teleport="#app" :visible="modelValue"
3
- :close-on-click-overlay="false">
4
- <div class="balance-reminder">
5
- <div class="body">
6
- <h2>温馨提示</h2>
7
- <p>{{ tip }}</p>
8
- </div>
9
- <div class="footer">
10
- <div class="col">
11
- <nut-button class="cancel-button" @click="emit('update:modelValue', false)" block>取消</nut-button>
12
- </div>
13
- <div class="col">
14
- <nut-button block class="recharge-button" v-track-click @click="emit('recharge')">{{ buttonText }}</nut-button>
15
- </div>
16
- </div>
17
- </div>
18
- </nut-popup>
19
- </template>
20
-
21
- <script setup lang="ts">
22
- interface BalanceReminderProps {
23
- modelValue: boolean
24
- buttonText?: string
25
- tip?: string
26
- }
27
-
28
- const emit = defineEmits(['recharge', 'update:modelValue'])
29
-
30
- withDefaults(
31
- defineProps<BalanceReminderProps>(), {
32
- modelValue: () => false,
33
- buttonText: '去充值',
34
- tip: '您的账户可用余额不足,请充值后再进行查询'
35
- }
36
- )
37
- </script>
38
-
39
- <style lang="scss">
40
- .balance-reminder-popup {
41
- width: 90%;
42
- }
43
-
44
- .balance-reminder {
45
- --primary-button-background: linear-gradient(135deg, #098C9D 0%, #66BF97 100%);
46
-
47
- h2 {
48
- font-size: 16px;
49
- font-weight: bold;
50
- margin-bottom: 14px;
51
- }
52
-
53
- .body {
54
- height: 120px;
55
- box-sizing: border-box;
56
- display: flex;
57
- flex-direction: column;
58
- align-items: center;
59
- justify-content: center;
60
- padding: 20px 10px 10px 10px;
61
- font-size: 14px;
62
- text-align: center;
63
- color: #666;
64
- }
65
-
66
- .footer {
67
- display: flex;
68
- flex-direction: row;
69
- justify-content: stretch;
70
- align-items: center;
71
- padding: 10px 20px 20px 20px;
72
-
73
- .col {
74
- flex-grow: 1;
75
- padding: 6px;
76
- }
77
-
78
- .recharge-button {
79
- color: #fff;
80
- background: var(--primary-button-background);
81
- }
82
- }
83
- }
84
- </style>
1
+ <template>
2
+ <nut-popup pop-class="balance-reminder-popup" round teleport="#app" :visible="modelValue"
3
+ :close-on-click-overlay="false">
4
+ <div class="balance-reminder">
5
+ <div class="body">
6
+ <h2>温馨提示</h2>
7
+ <p>{{ tip }}</p>
8
+ </div>
9
+ <div class="footer">
10
+ <div class="col">
11
+ <nut-button class="cancel-button" @click="emit('update:modelValue', false)" block>取消</nut-button>
12
+ </div>
13
+ <div class="col">
14
+ <nut-button block class="recharge-button" v-track-click @click="emit('recharge')">{{ buttonText }}</nut-button>
15
+ </div>
16
+ </div>
17
+ </div>
18
+ </nut-popup>
19
+ </template>
20
+
21
+ <script setup lang="ts">
22
+ interface BalanceReminderProps {
23
+ modelValue: boolean
24
+ buttonText?: string
25
+ tip?: string
26
+ }
27
+
28
+ const emit = defineEmits(['recharge', 'update:modelValue'])
29
+
30
+ withDefaults(
31
+ defineProps<BalanceReminderProps>(), {
32
+ modelValue: () => false,
33
+ buttonText: '去充值',
34
+ tip: '您的账户可用余额不足,请充值后再进行查询'
35
+ }
36
+ )
37
+ </script>
38
+
39
+ <style lang="scss">
40
+ .balance-reminder-popup {
41
+ width: 90%;
42
+ }
43
+
44
+ .balance-reminder {
45
+ --primary-button-background: linear-gradient(135deg, #098C9D 0%, #66BF97 100%);
46
+
47
+ h2 {
48
+ font-size: 16px;
49
+ font-weight: bold;
50
+ margin-bottom: 14px;
51
+ }
52
+
53
+ .body {
54
+ height: 120px;
55
+ box-sizing: border-box;
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ justify-content: center;
60
+ padding: 20px 10px 10px 10px;
61
+ font-size: 14px;
62
+ text-align: center;
63
+ color: #666;
64
+ }
65
+
66
+ .footer {
67
+ display: flex;
68
+ flex-direction: row;
69
+ justify-content: stretch;
70
+ align-items: center;
71
+ padding: 10px 20px 20px 20px;
72
+
73
+ .col {
74
+ flex-grow: 1;
75
+ padding: 6px;
76
+ }
77
+
78
+ .recharge-button {
79
+ color: #fff;
80
+ background: var(--primary-button-background);
81
+ }
82
+ }
83
+ }
84
+ </style>