@uxda/appkit 4.3.30 → 4.3.33

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 +142 -142
  6. package/README.md +194 -194
  7. package/babel.config.js +12 -12
  8. package/dist/appkit.css +3 -3
  9. package/dist/assets/asset-3B_CoPto +1 -0
  10. package/dist/assets/asset-DcH8Kg-2 +1 -0
  11. package/dist/index.js +320 -83
  12. package/package.json +82 -82
  13. package/project.config.json +15 -15
  14. package/project.tt.json +13 -13
  15. package/rollup.config.mjs +81 -81
  16. package/src/Appkit.ts +72 -72
  17. package/src/balance/api/endpoints.ts +134 -133
  18. package/src/balance/api/index.ts +118 -118
  19. package/src/balance/components/AccountView.vue +834 -770
  20. package/src/balance/components/BalanceCard.vue +210 -210
  21. package/src/balance/components/BalanceReminder.vue +84 -84
  22. package/src/balance/components/ConsumptionFilter.vue +218 -218
  23. package/src/balance/components/ConsumptionRules.vue +68 -68
  24. package/src/balance/components/DateFilter.vue +259 -259
  25. package/src/balance/components/DateRange.vue +111 -111
  26. package/src/balance/components/ListFilter.vue +62 -62
  27. package/src/balance/components/ListFilterPicker.vue +191 -191
  28. package/src/balance/components/PromoterCard.vue +308 -308
  29. package/src/balance/components/SecondBalance.vue +77 -77
  30. package/src/balance/components/Tip.vue +45 -45
  31. package/src/balance/components/index.ts +8 -8
  32. package/src/balance/types.ts +99 -99
  33. package/src/components/bt-cropper/index.vue +730 -730
  34. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  35. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  36. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  37. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  38. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  39. package/src/components/bt-cropper/utils/ratio.js +3 -3
  40. package/src/components/bt-cropper/utils/tools.js +25 -25
  41. package/src/components/dd-area/index.vue +225 -225
  42. package/src/components/dd-icon/doc.md +21 -21
  43. package/src/components/dd-icon/index.vue +23 -23
  44. package/src/components/dd-notice-bar/index.vue +78 -78
  45. package/src/components/dd-search/doc.md +34 -34
  46. package/src/components/dd-search/index.vue +168 -168
  47. package/src/components/dd-selector/index.vue +124 -124
  48. package/src/components/dd-skeleton/doc.md +19 -19
  49. package/src/components/dd-skeleton/index.vue +36 -36
  50. package/src/global.ts +6 -6
  51. package/src/index.ts +101 -101
  52. package/src/main.scss +1 -1
  53. package/src/notice/api/endpoints.ts +54 -54
  54. package/src/notice/api/index.ts +121 -121
  55. package/src/notice/components/NoticeBanner.vue +247 -247
  56. package/src/notice/components/NoticeEntry.vue +99 -99
  57. package/src/notice/components/NoticeList.vue +311 -311
  58. package/src/notice/components/NoticeList2.vue +401 -401
  59. package/src/notice/components/NoticePopup.vue +163 -163
  60. package/src/notice/components/index.ts +6 -6
  61. package/src/notice/components/useCommonList.ts +87 -87
  62. package/src/notice/components/useNotice.ts +35 -35
  63. package/src/notice/index.ts +1 -1
  64. package/src/notice/types.ts +25 -25
  65. package/src/payment/api/config.ts +7 -7
  66. package/src/payment/api/endpoints.ts +112 -112
  67. package/src/payment/api/index.ts +108 -108
  68. package/src/payment/components/AmountPicker.vue +56 -56
  69. package/src/payment/components/RechargeResult.vue +68 -68
  70. package/src/payment/components/RechargeView.vue +389 -389
  71. package/src/payment/components/RightsPicker.vue +105 -105
  72. package/src/payment/components/TradeView.vue +627 -616
  73. package/src/payment/components/UserAgreement.vue +234 -234
  74. package/src/payment/components/index.ts +22 -22
  75. package/src/payment/components/recharge-amount.spec.ts +3 -0
  76. package/src/payment/components/recharge-amount.ts +5 -1
  77. package/src/payment/index.ts +5 -5
  78. package/src/payment/services/index.ts +16 -16
  79. package/src/payment/services/invoke-recharge.ts +25 -25
  80. package/src/payment/services/request-payment.ts +136 -136
  81. package/src/payment/types.ts +34 -34
  82. package/src/register/components/SelfRegistration.vue +233 -233
  83. package/src/register/components/index.ts +2 -2
  84. package/src/scenarios/components/SharePoster.vue +364 -364
  85. package/src/scenarios/components/index.ts +2 -2
  86. package/src/scenarios/components/poster-paste.vue +93 -93
  87. package/src/scenarios/components/share-poster.md +273 -273
  88. package/src/shared/components/AppDrawer.vue +53 -53
  89. package/src/shared/components/AppVerify.vue +137 -137
  90. package/src/shared/components/DeviceVersion.vue +78 -78
  91. package/src/shared/components/EmptyView.vue +33 -33
  92. package/src/shared/components/OcrBank.vue +202 -202
  93. package/src/shared/components/OcrBusinessLicense.vue +120 -120
  94. package/src/shared/components/OcrIcon.vue +267 -267
  95. package/src/shared/components/OcrInvoice.vue +323 -323
  96. package/src/shared/components/OfficeDocx.vue +33 -33
  97. package/src/shared/components/OfficePdf.vue +35 -35
  98. package/src/shared/components/PageHeader.vue +84 -84
  99. package/src/shared/components/index.ts +12 -12
  100. package/src/shared/composables/index.ts +10 -10
  101. package/src/shared/composables/useAmount.ts +46 -46
  102. package/src/shared/composables/useCompress.ts +64 -64
  103. package/src/shared/composables/useCountdown.ts +46 -46
  104. package/src/shared/composables/useCrypto.ts +76 -76
  105. package/src/shared/composables/useDeviceEnv.ts +61 -61
  106. package/src/shared/composables/useDragBox.ts +97 -97
  107. package/src/shared/composables/useEncode.ts +43 -43
  108. package/src/shared/composables/useLogger.ts +149 -149
  109. package/src/shared/composables/useSafeArea.ts +46 -46
  110. package/src/shared/composables/useTabbar.ts +24 -24
  111. package/src/shared/composables/useUpload.ts +106 -106
  112. package/src/shared/composables/useValidator.ts +32 -32
  113. package/src/shared/composables/useWxAuth.ts +49 -49
  114. package/src/shared/http/Http.ts +149 -149
  115. package/src/shared/http/index.ts +1 -1
  116. package/src/shared/http/types.ts +163 -163
  117. package/src/shared/index.ts +9 -9
  118. package/src/shared/tracking/directives/index.ts +40 -40
  119. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  120. package/src/shared/weixin/index.ts +9 -9
  121. package/src/shared/weixin/jssdk.ts +104 -104
  122. package/src/shared/weixin/payment.ts +38 -38
  123. package/src/styles/vars.scss +3 -3
  124. package/src/user/api/endpoints.ts +17 -17
  125. package/src/user/api/index.ts +123 -123
  126. package/src/user/components/LoginSetting.vue +114 -114
  127. package/src/user/components/UserAuth.vue +218 -218
  128. package/src/user/components/UserBinding.vue +277 -277
  129. package/src/user/components/UserBindingSuccess.vue +80 -80
  130. package/src/user/components/UserEntry.vue +139 -139
  131. package/src/user/components/UserFeedback.vue +428 -428
  132. package/src/user/components/UserFeedbackEntry.vue +175 -175
  133. package/src/user/components/UserHeadCrop.vue +65 -65
  134. package/src/user/components/UserInfo.vue +711 -711
  135. package/src/user/components/UserResourceEmpty.vue +75 -75
  136. package/src/user/components/index.ts +23 -23
  137. package/src/user/index.ts +1 -1
  138. package/src/utils/utils.ts +33 -33
  139. package/tsconfig.json +30 -30
  140. package/types/global.d.ts +23 -23
  141. package/types/vue.d.ts +10 -10
@@ -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>