@uxda/appkit 4.2.82 → 4.2.84

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