@uxda/appkit 4.3.6 → 4.3.8

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 (135) hide show
  1. package/.eslintrc.mjs +7 -7
  2. package/COMPONENT_USAGE.md +1523 -1523
  3. package/PROJECT_DOCS.md +142 -142
  4. package/README.md +187 -187
  5. package/babel.config.js +12 -12
  6. package/dist/appkit.css +15 -63
  7. package/dist/assets/asset-DcH8Kg-2 +1 -0
  8. package/dist/index.js +259 -806
  9. package/package.json +79 -79
  10. package/project.config.json +15 -15
  11. package/project.tt.json +13 -13
  12. package/rollup.config.mjs +78 -78
  13. package/src/Appkit.ts +72 -72
  14. package/src/balance/api/endpoints.ts +133 -133
  15. package/src/balance/api/index.ts +118 -118
  16. package/src/balance/components/AccountView.vue +770 -770
  17. package/src/balance/components/BalanceCard.vue +210 -210
  18. package/src/balance/components/BalanceReminder.vue +84 -84
  19. package/src/balance/components/ConsumptionFilter.vue +218 -218
  20. package/src/balance/components/ConsumptionRules.vue +68 -68
  21. package/src/balance/components/DateFilter.vue +259 -259
  22. package/src/balance/components/DateRange.vue +111 -111
  23. package/src/balance/components/ListFilter.vue +62 -62
  24. package/src/balance/components/ListFilterPicker.vue +191 -191
  25. package/src/balance/components/PromoterCard.vue +307 -308
  26. package/src/balance/components/SecondBalance.vue +77 -77
  27. package/src/balance/components/Tip.vue +45 -45
  28. package/src/balance/components/index.ts +8 -8
  29. package/src/balance/types.ts +99 -99
  30. package/src/components/bt-cropper/index.vue +730 -730
  31. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  32. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  33. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  34. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  35. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  36. package/src/components/bt-cropper/utils/ratio.js +3 -3
  37. package/src/components/bt-cropper/utils/tools.js +25 -25
  38. package/src/components/dd-area/index.vue +225 -225
  39. package/src/components/dd-icon/doc.md +21 -21
  40. package/src/components/dd-icon/index.vue +23 -23
  41. package/src/components/dd-notice-bar/index.vue +78 -78
  42. package/src/components/dd-search/doc.md +34 -34
  43. package/src/components/dd-search/index.vue +168 -168
  44. package/src/components/dd-selector/index.vue +124 -124
  45. package/src/components/dd-skeleton/doc.md +19 -19
  46. package/src/components/dd-skeleton/index.vue +36 -36
  47. package/src/global.ts +6 -6
  48. package/src/index.ts +101 -101
  49. package/src/main.scss +1 -1
  50. package/src/notice/api/endpoints.ts +54 -54
  51. package/src/notice/api/index.ts +121 -121
  52. package/src/notice/components/NoticeBanner.vue +247 -247
  53. package/src/notice/components/NoticeEntry.vue +99 -99
  54. package/src/notice/components/NoticeList.vue +311 -311
  55. package/src/notice/components/NoticeList2.vue +400 -399
  56. package/src/notice/components/NoticePopup.vue +163 -163
  57. package/src/notice/components/index.ts +6 -6
  58. package/src/notice/components/useCommonList.ts +86 -87
  59. package/src/notice/components/useNotice.ts +35 -35
  60. package/src/notice/index.ts +1 -1
  61. package/src/notice/types.ts +25 -25
  62. package/src/payment/api/config.ts +7 -7
  63. package/src/payment/api/endpoints.ts +96 -98
  64. package/src/payment/api/index.ts +107 -108
  65. package/src/payment/components/AmountPicker.vue +90 -90
  66. package/src/payment/components/RechargeResult.vue +69 -68
  67. package/src/payment/components/RechargeView.vue +191 -191
  68. package/src/payment/components/RightsPicker.vue +105 -105
  69. package/src/payment/components/TradeView.vue +363 -571
  70. package/src/payment/components/UserAgreement.vue +234 -234
  71. package/src/payment/components/index.ts +22 -22
  72. package/src/payment/index.ts +5 -5
  73. package/src/payment/services/index.ts +16 -16
  74. package/src/payment/services/invoke-recharge.ts +25 -25
  75. package/src/payment/services/request-payment.ts +130 -132
  76. package/src/payment/types.ts +33 -34
  77. package/src/register/components/SelfRegistration.vue +233 -233
  78. package/src/register/components/index.ts +2 -2
  79. package/src/scenarios/components/SharePoster.vue +364 -364
  80. package/src/scenarios/components/index.ts +2 -2
  81. package/src/scenarios/components/poster-paste.vue +93 -93
  82. package/src/scenarios/components/share-poster.md +273 -273
  83. package/src/shared/components/AppDrawer.vue +53 -53
  84. package/src/shared/components/AppVerify.vue +128 -137
  85. package/src/shared/components/DeviceVersion.vue +78 -78
  86. package/src/shared/components/EmptyView.vue +33 -33
  87. package/src/shared/components/OcrBusinessLicense.vue +137 -120
  88. package/src/shared/components/OcrIcon.vue +229 -267
  89. package/src/shared/components/PageHeader.vue +84 -84
  90. package/src/shared/components/index.ts +8 -10
  91. package/src/shared/composables/index.ts +9 -10
  92. package/src/shared/composables/useAmount.ts +46 -46
  93. package/src/shared/composables/useCountdown.ts +46 -46
  94. package/src/shared/composables/useCrypto.ts +76 -76
  95. package/src/shared/composables/useDeviceEnv.ts +26 -26
  96. package/src/shared/composables/useDragBox.ts +97 -97
  97. package/src/shared/composables/useEncode.ts +43 -43
  98. package/src/shared/composables/useLogger.ts +144 -144
  99. package/src/shared/composables/useSafeArea.ts +46 -46
  100. package/src/shared/composables/useTabbar.ts +24 -24
  101. package/src/shared/composables/useUpload.ts +61 -106
  102. package/src/shared/composables/useValidator.ts +32 -32
  103. package/src/shared/composables/useWxAuth.ts +48 -48
  104. package/src/shared/http/Http.ts +148 -149
  105. package/src/shared/http/index.ts +1 -1
  106. package/src/shared/http/types.ts +163 -163
  107. package/src/shared/index.ts +9 -9
  108. package/src/shared/tracking/directives/index.ts +40 -40
  109. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  110. package/src/shared/tracking/tracking-sdk.ts +1 -0
  111. package/src/shared/weixin/index.ts +9 -9
  112. package/src/shared/weixin/jssdk.ts +103 -104
  113. package/src/shared/weixin/payment.ts +38 -38
  114. package/src/styles/vars.scss +3 -3
  115. package/src/user/api/endpoints.ts +17 -17
  116. package/src/user/api/index.ts +123 -123
  117. package/src/user/components/LoginSetting.vue +114 -114
  118. package/src/user/components/UserAuth.vue +218 -218
  119. package/src/user/components/UserBinding.vue +277 -277
  120. package/src/user/components/UserBindingSuccess.vue +80 -80
  121. package/src/user/components/UserEntry.vue +139 -139
  122. package/src/user/components/UserFeedback.vue +427 -428
  123. package/src/user/components/UserFeedbackEntry.vue +175 -175
  124. package/src/user/components/UserHeadCrop.vue +65 -65
  125. package/src/user/components/UserInfo.vue +709 -711
  126. package/src/user/components/UserResourceEmpty.vue +75 -75
  127. package/src/user/components/index.ts +23 -23
  128. package/src/user/index.ts +1 -1
  129. package/src/utils/utils.ts +33 -33
  130. package/tsconfig.json +30 -30
  131. package/types/global.d.ts +22 -24
  132. package/types/vue.d.ts +10 -10
  133. package/src/shared/components/OcrBank.vue +0 -202
  134. package/src/shared/components/OcrInvoice.vue +0 -218
  135. package/src/shared/composables/useCompress.ts +0 -64
@@ -1,98 +1,96 @@
1
- import { HttpEndpoints } from '../../shared/http'
2
- import { PaymentParams } from '../types'
3
-
4
- const endpointsList: HttpEndpoints = {
5
- /**
6
- * 获取充值套餐包列表
7
- * (查询某应用某场景可充值的金额列表)
8
- * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/getRechargeListUsingGET
9
- */
10
- 获取充值金额列表: {
11
- path: '/payment/outer/payment/getRechargeList',
12
- translate: (data: any) => ({
13
- appCode: data.app,
14
- // caseCode: 'recharge', // 这个参数可以不要
15
- tenantId: data.tenant,
16
- }),
17
- transform: (data: any) =>
18
- data.amountList.map((d: any) => ({
19
- token: d.desc,
20
- amount: d.amount,
21
- })),
22
- },
23
- /**
24
- * 查询支付参数包
25
- * (获取拉起微信支付用的JSON串)
26
- * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/rechargePayUsingPOST
27
- */
28
- 获取微信支付参数包: {
29
- path: '/payment/outer/payment/rechargePay',
30
- translate: (params: PaymentParams) => ({
31
- amount: params.amount,
32
- appCode: params.app,
33
- tenantId: params.tenant,
34
- certificateNo: params.user,
35
- accountAuthFlag: params.accountAuthFlag || false,
36
- channelCode: params.channelCode || null,
37
- payFinishJumpUrl: params.payFinishJumpUrl || null,
38
- clientInfo: params.clientInfo || null,
39
- }),
40
- transform: (data: any) => {
41
- let json = null
42
- try {
43
- json = JSON.parse(data.prePayStr)
44
- } catch (e) {}
45
- return {
46
- json, // 拉起微信支付用的JSON串
47
- paymentId: data.payId, // 查询用支付ID
48
- }
49
- },
50
- },
51
- 获取权益微信支付: {
52
- path: '/payment/outer/payment/valueExchangePay',
53
- translate: (params: PaymentParams) => ({
54
- caseConfigId: params.caseConfigId,
55
- appCode: params.app,
56
- tenantId: params.tenant,
57
- amount: params.amount,
58
- certificateNo: params.user,
59
- accountAuthFlag: params.accountAuthFlag || false,
60
- channelCode: params.channelCode || null,
61
- payFinishJumpUrl: params.payFinishJumpUrl || null,
62
- useCloudBean: params.useCloudBean || false,
63
- }),
64
- transform: (data: any) => {
65
- console.log(data, 'data-----')
66
- let json = null
67
- try {
68
- json = JSON.parse(data.prePayStr)
69
- } catch (e) {}
70
- return {
71
- json, // 拉起微信支付用的JSON串
72
- paymentId: data.payId, // 查询用支付ID
73
- }
74
- },
75
- },
76
- 获取增值权益类目: {
77
- path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
78
- transform: (data: any) => data,
79
- },
80
- } as const
81
-
82
- const keys = Object.keys(endpointsList as any)
83
-
84
- type Keys = (typeof keys)[number]
85
-
86
- const endpoints: Record<Keys, string> = Object.fromEntries(
87
- Object.entries(endpointsList).map(([name, def]) => [name, def.path])
88
- )
89
-
90
- const translates = Object.fromEntries(
91
- Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
92
- )
93
-
94
- const transforms = Object.fromEntries(
95
- Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
96
- )
97
-
98
- export { endpoints, translates, transforms }
1
+ import { HttpEndpoints } from '../../shared/http'
2
+ import { PaymentParams } from '../types'
3
+
4
+ const endpointsList: HttpEndpoints = {
5
+ /**
6
+ * 获取充值套餐包列表
7
+ * (查询某应用某场景可充值的金额列表)
8
+ * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/getRechargeListUsingGET
9
+ */
10
+ 获取充值金额列表: {
11
+ path: '/payment/outer/payment/getRechargeList',
12
+ translate: (data: any) => ({
13
+ appCode: data.app,
14
+ // caseCode: 'recharge', // 这个参数可以不要
15
+ tenantId: data.tenant,
16
+ }),
17
+ transform: (data: any) =>
18
+ data.amountList.map((d: any) => ({
19
+ token: d.desc,
20
+ amount: d.amount,
21
+ })),
22
+ },
23
+ /**
24
+ * 查询支付参数包
25
+ * (获取拉起微信支付用的JSON串)
26
+ * http://ytech.dev.ddjf.info/payment/doc.html#/%E5%AE%A2%E6%88%B7%E5%9F%9FAPI/%E6%94%AF%E4%BB%98%E4%B8%AD%E5%BF%83-%E5%AF%B9%E5%A4%96%E6%8E%A5%E5%8F%A3/rechargePayUsingPOST
27
+ */
28
+ 获取微信支付参数包: {
29
+ path: '/payment/outer/payment/rechargePay',
30
+ translate: (params: PaymentParams) => ({
31
+ amount: params.amount,
32
+ appCode: params.app,
33
+ tenantId: params.tenant,
34
+ certificateNo: params.user,
35
+ accountAuthFlag: params.accountAuthFlag || false,
36
+ channelCode: params.channelCode || null,
37
+ payFinishJumpUrl: params.payFinishJumpUrl || null,
38
+ clientInfo: params.clientInfo || null,
39
+ }),
40
+ transform: (data: any) => {
41
+ let json = null
42
+ try {
43
+ json = JSON.parse(data.prePayStr)
44
+ } catch (e) {}
45
+ return {
46
+ json, // 拉起微信支付用的JSON串
47
+ paymentId: data.payId, // 查询用支付ID
48
+ }
49
+ },
50
+ },
51
+ 获取权益微信支付: {
52
+ path: '/payment/outer/payment/valueExchangePay',
53
+ translate: (params: PaymentParams) => ({
54
+ caseConfigId: params.caseConfigId,
55
+ appCode: params.app,
56
+ tenantId: params.tenant,
57
+ amount: params.amount,
58
+ certificateNo: params.user,
59
+ accountAuthFlag: params.accountAuthFlag || false,
60
+ channelCode: params.channelCode || null,
61
+ payFinishJumpUrl: params.payFinishJumpUrl || null,
62
+ }),
63
+ transform: (data: any) => {
64
+ let json = null
65
+ try {
66
+ json = JSON.parse(data.prePayStr)
67
+ } catch (e) {}
68
+ return {
69
+ json, // 拉起微信支付用的JSON串
70
+ paymentId: data.payId, // 查询用支付ID
71
+ }
72
+ },
73
+ },
74
+ 获取增值权益类目: {
75
+ path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
76
+ transform: (data: any) => data,
77
+ },
78
+ } as const
79
+
80
+ const keys = Object.keys(endpointsList as any)
81
+
82
+ type Keys = (typeof keys)[number]
83
+
84
+ const endpoints: Record<Keys, string> = Object.fromEntries(
85
+ Object.entries(endpointsList).map(([name, def]) => [name, def.path])
86
+ )
87
+
88
+ const translates = Object.fromEntries(
89
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
90
+ )
91
+
92
+ const transforms = Object.fromEntries(
93
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
94
+ )
95
+
96
+ export { endpoints, translates, transforms }
@@ -1,108 +1,107 @@
1
- import Taro, { request as TaroRequest, showToast } from '@tarojs/taro'
2
- import { HttpRequestConfig, ResponseRaw, createHttp } from '../../shared'
3
- import { translates, transforms } from './endpoints'
4
- import { useAppKitOptions } from '../../Appkit'
5
- import { useLogger, generateUniqueId } from '../../shared/composables/useLogger'
6
-
7
- const logger = useLogger()
8
- /**
9
- * 小程序端 Http
10
- * 使用 Taro.request 实现
11
- */
12
- const vendor = {
13
- async request<T>(config: HttpRequestConfig) {
14
- return new Promise<ResponseRaw<T>>((resolve, reject) => {
15
- const header = {
16
- ...config.headers,
17
- traceId: generateUniqueId('appkit'),
18
- }
19
- const startTime = new Date().getTime()
20
-
21
- logger.info({
22
- send: JSON.stringify({ url: config.url, data: config.data }),
23
- receive: null,
24
- traceId: header.traceId,
25
- duration: 0,
26
- })
27
- TaroRequest({
28
- url: config.url,
29
- method: config.method,
30
- header,
31
- data: config.data,
32
- })
33
- .then(({ data }) => {
34
- // 记录阿里日志
35
- const endTime = new Date().getTime()
36
- logger.info({
37
- send: JSON.stringify({ url: config.url, data: config.data }),
38
- receive: JSON.stringify(data),
39
- traceId: header.traceId,
40
- duration: endTime - startTime,
41
- })
42
-
43
- if (data.success) {
44
- resolve({
45
- status: +data.code,
46
- message: data.msg,
47
- data: data.result as T,
48
- })
49
- } else if (data.code !== '401') {
50
- showToast({
51
- title: data.msg,
52
- icon: 'none',
53
- })
54
- reject(data.msg)
55
- }
56
- })
57
- .catch((e: any) => {
58
- reject(e)
59
- })
60
- })
61
- },
62
- }
63
-
64
- interface DefaultHeaderType {
65
- Token?: string
66
- Appcode?: string
67
- Tenant?: string
68
- }
69
- function useHttp(defaultHeader?: DefaultHeaderType) {
70
- const appkitOptions = useAppKitOptions()
71
- const headers = {
72
- Token: appkitOptions.tempToken() || appkitOptions.token(),
73
- Appcode: defaultHeader?.Appcode || appkitOptions.app(),
74
- cookie: `tid=${defaultHeader?.Tenant || appkitOptions.tenant()}`,
75
- gray: appkitOptions.gray ? appkitOptions.gray() : '0',
76
- }
77
-
78
- /**
79
- * 传入配置获取 Http instanse
80
- */
81
- const $http = createHttp({
82
- vendor,
83
- baseUrl: appkitOptions.baseUrl(),
84
- headers,
85
- interceptors: [
86
- (raw) => {
87
- if (raw.status == 401) {
88
- appkitOptions[401]()
89
- return true
90
- }
91
- return false
92
- },
93
- (raw) => {
94
- if (raw.status > 500 && raw.status != 1100028) {
95
- return true
96
- }
97
- return false
98
- },
99
- ],
100
- translates,
101
- transforms,
102
- })
103
- return $http
104
- }
105
-
106
- export { useHttp }
107
-
108
- export * from './endpoints'
1
+ import Taro, { request as TaroRequest, showToast } from '@tarojs/taro'
2
+ import { HttpRequestConfig, ResponseRaw, createHttp } from '../../shared'
3
+ import { translates, transforms } from './endpoints'
4
+ import { useAppKitOptions } from '../../Appkit'
5
+ import { useLogger, generateUniqueId } from '../../shared/composables/useLogger'
6
+
7
+ const logger = useLogger()
8
+ /**
9
+ * 小程序端 Http
10
+ * 使用 Taro.request 实现
11
+ */
12
+ const vendor = {
13
+ async request<T>(config: HttpRequestConfig) {
14
+ return new Promise<ResponseRaw<T>>((resolve, reject) => {
15
+ const header = {
16
+ ...config.headers,
17
+ traceId: generateUniqueId('appkit'),
18
+ }
19
+ const startTime = new Date().getTime()
20
+
21
+ logger.info({
22
+ send: JSON.stringify({ url: config.url, data: config.data }),
23
+ receive: null,
24
+ traceId: header.traceId,
25
+ duration: 0,
26
+ })
27
+ TaroRequest({
28
+ url: config.url,
29
+ method: config.method,
30
+ header,
31
+ data: config.data,
32
+ })
33
+ .then(({ data }) => {
34
+ // 记录阿里日志
35
+ const endTime = new Date().getTime()
36
+ logger.info({
37
+ send: JSON.stringify({ url: config.url, data: config.data }),
38
+ receive: JSON.stringify(data),
39
+ traceId: header.traceId,
40
+ duration: endTime - startTime,
41
+ })
42
+
43
+ if (data.success) {
44
+ resolve({
45
+ status: +data.code,
46
+ message: data.msg,
47
+ data: data.result as T,
48
+ })
49
+ } else if (data.code !== '401') {
50
+ showToast({
51
+ title: data.msg,
52
+ icon: 'none',
53
+ })
54
+ }
55
+ })
56
+ .catch((e: any) => {
57
+ reject(e)
58
+ })
59
+ })
60
+ },
61
+ }
62
+
63
+ interface DefaultHeaderType {
64
+ Token?: string
65
+ Appcode?: string
66
+ Tenant?: string
67
+ }
68
+ function useHttp(defaultHeader?: DefaultHeaderType) {
69
+ const appkitOptions = useAppKitOptions()
70
+ const headers = {
71
+ Token: appkitOptions.tempToken() || appkitOptions.token(),
72
+ Appcode: defaultHeader?.Appcode || appkitOptions.app(),
73
+ cookie: `tid=${defaultHeader?.Tenant || appkitOptions.tenant()}`,
74
+ gray: appkitOptions.gray ? appkitOptions.gray() : '0',
75
+ }
76
+
77
+ /**
78
+ * 传入配置获取 Http instanse
79
+ */
80
+ const $http = createHttp({
81
+ vendor,
82
+ baseUrl: appkitOptions.baseUrl(),
83
+ headers,
84
+ interceptors: [
85
+ (raw) => {
86
+ if (raw.status == 401) {
87
+ appkitOptions[401]()
88
+ return true
89
+ }
90
+ return false
91
+ },
92
+ (raw) => {
93
+ if (raw.status > 500 && raw.status != 1100028) {
94
+ return true
95
+ }
96
+ return false
97
+ },
98
+ ],
99
+ translates,
100
+ transforms,
101
+ })
102
+ return $http
103
+ }
104
+
105
+ export { useHttp }
106
+
107
+ export * from './endpoints'
@@ -1,91 +1,91 @@
1
- <template>
2
- <nut-grid class="amount-picker" :column-num="3" :gutter="10" :border="false">
3
- <nut-grid-item class="tile" v-for="(amount, index) in items" :class="{ selected: state.selected === index }"
4
- @click="() => onGridItemClick(index)" :key="index">
5
- <h4 class="token-line number">{{ amount.token }}</h4>
6
- <h5>¥<span class="number">{{ amount.amount }}</span></h5>
7
- </nut-grid-item>
8
- </nut-grid>
9
- </template>
10
-
11
- <script lang="ts" setup>
12
- import { reactive } from 'vue'
13
-
14
- // 充值金额选取
15
-
16
- type Amount = {
17
- token: number,
18
- amount: number
19
- }
20
-
21
- interface AmountPickerProps {
22
- items: Amount[],
23
- selected?: number
24
- }
25
-
26
- const emit = defineEmits<{
27
- (event: 'change', selected: number): void
28
- }>()
29
-
30
- withDefaults(
31
- defineProps<AmountPickerProps>(),
32
- {
33
- items: () => [],
34
- selected: () => 0
35
- }
36
- )
37
-
38
- const state = reactive({
39
- selected: 0
40
- })
41
-
42
- const onGridItemClick = (index: number) => {
43
- state.selected = index
44
- emit('change', state.selected)
45
- }
46
- </script>
47
-
48
- <style lang="scss">
49
- .amount-picker {
50
- padding: 14px 0 14px 14px;
51
-
52
- .nut-grid-item__content {
53
- border: solid 1px transparent;
54
- background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
55
- linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
56
- border-radius: 5px;
57
- }
58
-
59
- .tile {
60
- height: 80px;
61
-
62
- &.selected {
63
- .nut-grid-item__content {
64
- background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
65
- linear-gradient(to bottom, #efd082, #ffb877) border-box;
66
- }
67
- }
68
- }
69
-
70
- h4.token-line {
71
- background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
72
- background-size: 20px;
73
- background-repeat: no-repeat;
74
- background-position: left center;
75
- padding-left: 24px;
76
- color: #FD6701;
77
- font-weight: 600;
78
- line-height: 25px;
79
- font-size: 18px;
80
- }
81
-
82
- h5 {
83
- line-height: 18px;
84
- color: #353535;
85
- font-weight: 600;
86
- opacity: 0.6;
87
- margin-top: 4px;
88
- font-size: 12px;
89
- }
90
- }
1
+ <template>
2
+ <nut-grid class="amount-picker" :column-num="3" :gutter="10" :border="false">
3
+ <nut-grid-item class="tile" v-for="(amount, index) in items" :class="{ selected: state.selected === index }"
4
+ @click="() => onGridItemClick(index)" :key="index">
5
+ <h4 class="token-line number">{{ amount.token }}</h4>
6
+ <h5>¥<span class="number">{{ amount.amount }}</span></h5>
7
+ </nut-grid-item>
8
+ </nut-grid>
9
+ </template>
10
+
11
+ <script lang="ts" setup>
12
+ import { reactive } from 'vue'
13
+
14
+ // 充值金额选取
15
+
16
+ type Amount = {
17
+ token: number,
18
+ amount: number
19
+ }
20
+
21
+ interface AmountPickerProps {
22
+ items: Amount[],
23
+ selected?: number
24
+ }
25
+
26
+ const emit = defineEmits<{
27
+ (event: 'change', selected: number): void
28
+ }>()
29
+
30
+ withDefaults(
31
+ defineProps<AmountPickerProps>(),
32
+ {
33
+ items: () => [],
34
+ selected: () => 0
35
+ }
36
+ )
37
+
38
+ const state = reactive({
39
+ selected: 0
40
+ })
41
+
42
+ const onGridItemClick = (index: number) => {
43
+ state.selected = index
44
+ emit('change', state.selected)
45
+ }
46
+ </script>
47
+
48
+ <style lang="scss">
49
+ .amount-picker {
50
+ padding: 14px 0 14px 14px;
51
+
52
+ .nut-grid-item__content {
53
+ border: solid 1px transparent;
54
+ background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
55
+ linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
56
+ border-radius: 5px;
57
+ }
58
+
59
+ .tile {
60
+ height: 80px;
61
+
62
+ &.selected {
63
+ .nut-grid-item__content {
64
+ background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
65
+ linear-gradient(to bottom, #efd082, #ffb877) border-box;
66
+ }
67
+ }
68
+ }
69
+
70
+ h4.token-line {
71
+ background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
72
+ background-size: 20px;
73
+ background-repeat: no-repeat;
74
+ background-position: left center;
75
+ padding-left: 24px;
76
+ color: #FD6701;
77
+ font-weight: 600;
78
+ line-height: 25px;
79
+ font-size: 18px;
80
+ }
81
+
82
+ h5 {
83
+ line-height: 18px;
84
+ color: #353535;
85
+ font-weight: 600;
86
+ opacity: 0.6;
87
+ margin-top: 4px;
88
+ font-size: 12px;
89
+ }
90
+ }
91
91
  </style>