@uxda/appkit 4.1.28 → 4.1.29

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 (116) 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 +4 -7
  5. package/dist/index.js +1110 -1025
  6. package/package.json +77 -77
  7. package/project.config.json +15 -15
  8. package/project.tt.json +13 -13
  9. package/rollup.config.mjs +56 -56
  10. package/src/Appkit.ts +66 -66
  11. package/src/balance/api/endpoints.ts +126 -126
  12. package/src/balance/api/index.ts +106 -106
  13. package/src/balance/components/AccountView.vue +748 -748
  14. package/src/balance/components/BalanceCard.vue +205 -205
  15. package/src/balance/components/BalanceReminder.vue +85 -85
  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 +251 -251
  19. package/src/balance/components/DateRange.vue +80 -80
  20. package/src/balance/components/ListFilter.vue +63 -63
  21. package/src/balance/components/ListFilterPicker.vue +186 -186
  22. package/src/balance/components/SecondBalance.vue +71 -71
  23. package/src/balance/components/Tip.vue +45 -45
  24. package/src/balance/components/index.ts +13 -13
  25. package/src/balance/types.ts +91 -91
  26. package/src/components/bt-cropper/index.vue +774 -774
  27. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  28. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  29. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  30. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  31. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  32. package/src/components/bt-cropper/utils/ratio.js +3 -3
  33. package/src/components/bt-cropper/utils/tools.js +25 -25
  34. package/src/components/dd-area/index.vue +225 -225
  35. package/src/components/dd-icon/doc.md +21 -21
  36. package/src/components/dd-icon/index.vue +23 -23
  37. package/src/components/dd-notice-bar/index.vue +78 -78
  38. package/src/components/dd-search/doc.md +34 -34
  39. package/src/components/dd-search/index.vue +168 -168
  40. package/src/components/dd-selector/index.vue +124 -124
  41. package/src/components/dd-skeleton/doc.md +19 -19
  42. package/src/components/dd-skeleton/index.vue +36 -36
  43. package/src/components/ocr-id/index.vue +114 -114
  44. package/src/components/ocr-id/types.d.ts +12 -12
  45. package/src/global.ts +6 -6
  46. package/src/index.ts +90 -89
  47. package/src/main.scss +1 -1
  48. package/src/notice/api/endpoints.ts +17 -17
  49. package/src/notice/api/index.ts +106 -106
  50. package/src/notice/components/NoticeBanner.vue +243 -243
  51. package/src/notice/components/NoticeEntry.vue +99 -99
  52. package/src/notice/components/NoticeList.vue +315 -315
  53. package/src/notice/components/NoticePopup.vue +162 -162
  54. package/src/notice/components/index.ts +5 -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 +103 -103
  61. package/src/payment/api/index.ts +101 -100
  62. package/src/payment/components/AmountPicker.vue +93 -93
  63. package/src/payment/components/RechargeResult.vue +69 -69
  64. package/src/payment/components/RechargeView.vue +154 -154
  65. package/src/payment/components/RightsPicker.vue +105 -105
  66. package/src/payment/components/TradeView.vue +294 -294
  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 +58 -58
  73. package/src/payment/types.ts +28 -28
  74. package/src/register/components/SelfRegistration.vue +254 -254
  75. package/src/register/components/index.ts +2 -2
  76. package/src/shared/components/AppDrawer.vue +58 -58
  77. package/src/shared/components/AppVerify.vue +126 -129
  78. package/src/shared/components/DeviceVersion.vue +68 -68
  79. package/src/shared/components/EmptyView.vue +33 -33
  80. package/src/shared/components/OcrBusinessLicense.vue +133 -133
  81. package/src/shared/components/OcrIcon.vue +133 -133
  82. package/src/shared/components/PageHeader.vue +79 -79
  83. package/src/shared/components/index.ts +8 -8
  84. package/src/shared/composables/index.ts +8 -8
  85. package/src/shared/composables/useCountdown.ts +46 -46
  86. package/src/shared/composables/useCrypto.ts +76 -76
  87. package/src/shared/composables/useDragBox.ts +97 -97
  88. package/src/shared/composables/useEncode.ts +43 -43
  89. package/src/shared/composables/useLogger.ts +123 -123
  90. package/src/shared/composables/useSafeArea.ts +46 -46
  91. package/src/shared/composables/useTabbar.ts +24 -24
  92. package/src/shared/composables/useUpload.ts +54 -54
  93. package/src/shared/composables/useValidator.ts +31 -31
  94. package/src/shared/http/Http.ts +136 -136
  95. package/src/shared/http/index.ts +1 -1
  96. package/src/shared/http/types.ts +157 -157
  97. package/src/shared/index.ts +3 -3
  98. package/src/shared/weixin/payment.ts +38 -38
  99. package/src/styles/fonts.scss +0 -3
  100. package/src/styles/vars.scss +3 -3
  101. package/src/user/api/endpoints.ts +17 -17
  102. package/src/user/api/index.ts +111 -111
  103. package/src/user/components/LoginSetting.vue +114 -114
  104. package/src/user/components/UserBinding.vue +307 -307
  105. package/src/user/components/UserBindingSuccess.vue +80 -80
  106. package/src/user/components/UserEntry.vue +137 -137
  107. package/src/user/components/UserFeedback.vue +431 -431
  108. package/src/user/components/UserFeedbackEntry.vue +192 -192
  109. package/src/user/components/UserHeadCrop.vue +65 -65
  110. package/src/user/components/UserInfo.vue +637 -637
  111. package/src/user/components/UserResourceEmpty.vue +75 -75
  112. package/src/user/components/index.ts +21 -21
  113. package/src/user/index.ts +1 -1
  114. package/tsconfig.json +30 -30
  115. package/types/global.d.ts +21 -21
  116. package/types/vue.d.ts +10 -10
@@ -1,104 +1,104 @@
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) => data.amountList.map((d: any) => ({
18
- token: d.desc,
19
- amount: d.amount
20
- }))
21
- },
22
- /**
23
- * 查询支付参数包
24
- * (获取拉起微信支付用的JSON串)
25
- * 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
26
- */
27
- 获取微信支付参数包: {
28
- // {
29
- // "amount": 100,
30
- // "appCode": "crm",
31
- // "caseCode": "aiApproveRecharge",
32
- // "tenantId": "17454646",
33
- // "transFlowNo": "4343244",
34
- // "certificateNo": "o7k8L0QTqcwRIBKVUPzI7iPfghLM"
35
- // }
36
- path: '/payment/outer/payment/rechargePay',
37
- translate: (params: PaymentParams) => ({
38
- amount: params.amount,
39
- appCode: params.app,
40
- // caseCode: data.stage, 这个参数可以不传
41
- tenantId: params.tenant,
42
- // transFlowNo: '4343244', 这个参数可以不传
43
- certificateNo: params.user,
44
- }),
45
- transform: (data: any) => {
46
- let json = null
47
- try {
48
- json = JSON.parse(data.prePayStr)
49
- } catch (e) {
50
- }
51
- return {
52
- json, // 拉起微信支付用的JSON串
53
- paymentId: data.payId // 查询用支付ID
54
- }
55
- }
56
- },
57
- 获取权益微信支付: {
58
- path: '/payment/outer/payment/valueExchangePay',
59
- translate: (params: PaymentParams) => ({
60
- caseConfigId: params.caseConfigId,
61
- appCode: params.app,
62
- tenantId: params.tenant,
63
- amount: params.amount,
64
- certificateNo: params.user,
65
- }),
66
- transform: (data: any) => {
67
- let json = null
68
- try {
69
- json = JSON.parse(data.prePayStr)
70
- } catch (e) {
71
- }
72
- return {
73
- json, // 拉起微信支付用的JSON串
74
- paymentId: data.payId // 查询用支付ID
75
- }
76
- }
77
- },
78
- 获取增值权益类目: {
79
- path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
80
- transform: (data: any) => data
81
- },
82
- } as const
83
-
84
- const keys = Object.keys(endpointsList as any)
85
-
86
- type Keys = typeof keys[number]
87
-
88
- const endpoints: Record<Keys, string> = Object.fromEntries(
89
- Object.entries(endpointsList).map(([name, def]) => [name, def.path])
90
- )
91
-
92
- const translates = Object.fromEntries(
93
- Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
94
- )
95
-
96
- const transforms = Object.fromEntries(
97
- Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
98
- )
99
-
100
- export {
101
- endpoints,
102
- translates,
103
- 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) => data.amountList.map((d: any) => ({
18
+ token: d.desc,
19
+ amount: d.amount
20
+ }))
21
+ },
22
+ /**
23
+ * 查询支付参数包
24
+ * (获取拉起微信支付用的JSON串)
25
+ * 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
26
+ */
27
+ 获取微信支付参数包: {
28
+ // {
29
+ // "amount": 100,
30
+ // "appCode": "crm",
31
+ // "caseCode": "aiApproveRecharge",
32
+ // "tenantId": "17454646",
33
+ // "transFlowNo": "4343244",
34
+ // "certificateNo": "o7k8L0QTqcwRIBKVUPzI7iPfghLM"
35
+ // }
36
+ path: '/payment/outer/payment/rechargePay',
37
+ translate: (params: PaymentParams) => ({
38
+ amount: params.amount,
39
+ appCode: params.app,
40
+ // caseCode: data.stage, 这个参数可以不传
41
+ tenantId: params.tenant,
42
+ // transFlowNo: '4343244', 这个参数可以不传
43
+ certificateNo: params.user,
44
+ }),
45
+ transform: (data: any) => {
46
+ let json = null
47
+ try {
48
+ json = JSON.parse(data.prePayStr)
49
+ } catch (e) {
50
+ }
51
+ return {
52
+ json, // 拉起微信支付用的JSON串
53
+ paymentId: data.payId // 查询用支付ID
54
+ }
55
+ }
56
+ },
57
+ 获取权益微信支付: {
58
+ path: '/payment/outer/payment/valueExchangePay',
59
+ translate: (params: PaymentParams) => ({
60
+ caseConfigId: params.caseConfigId,
61
+ appCode: params.app,
62
+ tenantId: params.tenant,
63
+ amount: params.amount,
64
+ certificateNo: params.user,
65
+ }),
66
+ transform: (data: any) => {
67
+ let json = null
68
+ try {
69
+ json = JSON.parse(data.prePayStr)
70
+ } catch (e) {
71
+ }
72
+ return {
73
+ json, // 拉起微信支付用的JSON串
74
+ paymentId: data.payId // 查询用支付ID
75
+ }
76
+ }
77
+ },
78
+ 获取增值权益类目: {
79
+ path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
80
+ transform: (data: any) => data
81
+ },
82
+ } as const
83
+
84
+ const keys = Object.keys(endpointsList as any)
85
+
86
+ type Keys = typeof keys[number]
87
+
88
+ const endpoints: Record<Keys, string> = Object.fromEntries(
89
+ Object.entries(endpointsList).map(([name, def]) => [name, def.path])
90
+ )
91
+
92
+ const translates = Object.fromEntries(
93
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
94
+ )
95
+
96
+ const transforms = Object.fromEntries(
97
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
98
+ )
99
+
100
+ export {
101
+ endpoints,
102
+ translates,
103
+ transforms,
104
104
  }
@@ -1,100 +1,101 @@
1
- import Taro 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
- Taro.request({
22
- url: config.url,
23
- method: config.method,
24
- header,
25
- data: config.data,
26
- })
27
- .then(({ data }) => {
28
- if (data.success) {
29
- resolve({
30
- status: +data.code,
31
- message: data.msg,
32
- data: data.result as T,
33
- })
34
- } else if (data.code !== '401') {
35
- Taro.showToast({
36
- title: data.msg,
37
- icon: 'none',
38
- })
39
- }
40
-
41
- // 记录阿里日志
42
- const endTime = new Date().getTime()
43
- logger.info({
44
- send: JSON.stringify({ url: config.url, data: config.data }),
45
- receive: JSON.stringify(data),
46
- traceId: header.traceId,
47
- duration: endTime - startTime,
48
- })
49
- })
50
- .catch((e: any) => {
51
- reject(e)
52
- })
53
- })
54
- },
55
- }
56
-
57
- interface DefaultHeaderType {
58
- Token?: string
59
- Appcode?: string
60
- Tenant?: string
61
- }
62
- function useHttp(defaultHeader?: DefaultHeaderType) {
63
- const appkitOptions = useAppKitOptions()
64
- const headers = {
65
- Token: appkitOptions.tempToken() || appkitOptions.token(),
66
- Appcode: defaultHeader?.Appcode || appkitOptions.app(),
67
- cookie: `tid=${defaultHeader?.Tenant || appkitOptions.tenant()}`,
68
- gray: appkitOptions.gray ? appkitOptions.gray() : '0',
69
- }
70
- /**
71
- * 传入配置获取 Http instanse
72
- */
73
- const $http = createHttp({
74
- vendor,
75
- baseUrl: appkitOptions.baseUrl(),
76
- headers,
77
- interceptors: [
78
- (raw) => {
79
- if (raw.status == 401) {
80
- appkitOptions[401]()
81
- return true
82
- }
83
- return false
84
- },
85
- (raw) => {
86
- if (raw.status > 500 && raw.status != 1100028) {
87
- return true
88
- }
89
- return false
90
- },
91
- ],
92
- translates,
93
- transforms,
94
- })
95
- return $http
96
- }
97
-
98
- export { useHttp }
99
-
100
- export * from './endpoints'
1
+ import Taro 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
+ Taro.request({
22
+ url: config.url,
23
+ method: config.method,
24
+ header,
25
+ data: config.data,
26
+ })
27
+ .then(({ data }) => {
28
+ if (data.success) {
29
+ resolve({
30
+ status: +data.code,
31
+ message: data.msg,
32
+ data: data.result as T,
33
+ })
34
+ } else if (data.code !== '401') {
35
+ Taro.showToast({
36
+ title: data.msg,
37
+ icon: 'none',
38
+ })
39
+ }
40
+
41
+ // 记录阿里日志
42
+ const endTime = new Date().getTime()
43
+ logger.info({
44
+ send: JSON.stringify({ url: config.url, data: config.data }),
45
+ receive: JSON.stringify(data),
46
+ traceId: header.traceId,
47
+ duration: endTime - startTime,
48
+ })
49
+ })
50
+ .catch((e: any) => {
51
+ reject(e)
52
+ })
53
+ })
54
+ },
55
+ }
56
+
57
+ interface DefaultHeaderType {
58
+ Token?: string
59
+ Appcode?: string
60
+ Tenant?: string
61
+ }
62
+ function useHttp(defaultHeader?: DefaultHeaderType) {
63
+ const appkitOptions = useAppKitOptions()
64
+ console.log(appkitOptions.tempToken(), ':----- appkitOptions.tempToken()')
65
+ const headers = {
66
+ Token: appkitOptions.tempToken() || appkitOptions.token(),
67
+ Appcode: defaultHeader?.Appcode || appkitOptions.app(),
68
+ cookie: `tid=${defaultHeader?.Tenant || appkitOptions.tenant()}`,
69
+ gray: appkitOptions.gray ? appkitOptions.gray() : '0',
70
+ }
71
+ /**
72
+ * 传入配置获取 Http instanse
73
+ */
74
+ const $http = createHttp({
75
+ vendor,
76
+ baseUrl: appkitOptions.baseUrl(),
77
+ headers,
78
+ interceptors: [
79
+ (raw) => {
80
+ if (raw.status == 401) {
81
+ appkitOptions[401]()
82
+ return true
83
+ }
84
+ return false
85
+ },
86
+ (raw) => {
87
+ if (raw.status > 500 && raw.status != 1100028) {
88
+ return true
89
+ }
90
+ return false
91
+ },
92
+ ],
93
+ translates,
94
+ transforms,
95
+ })
96
+ return $http
97
+ }
98
+
99
+ export { useHttp }
100
+
101
+ export * from './endpoints'
@@ -1,94 +1,94 @@
1
- <template>
2
- <nut-grid
3
- class="amount-picker"
4
- :column-num="3"
5
- :gutter="10"
6
- :border="false">
7
- <nut-grid-item
8
- class="tile"
9
- v-for="(amount, index) in items"
10
- :class="{selected: state.selected === index}"
11
- @click="() => onGridItemClick(index)"
12
- :key="index">
13
- <h4 class="token-line number">{{ amount.token }}</h4>
14
- <h5>¥<span class="number">{{ amount.amount }}</span></h5>
15
- </nut-grid-item>
16
- </nut-grid>
17
- </template>
18
-
19
- <script lang="ts" setup>
20
- import { reactive } from 'vue'
21
-
22
- // 充值金额选取
23
-
24
- type Amount = {
25
- token: number,
26
- amount: number
27
- }
28
-
29
- interface AmountPickerProps {
30
- items: Amount[],
31
- selected?: number
32
- }
33
-
34
- const emit = defineEmits<{
35
- (event: 'change', selected: number): void
36
- }>()
37
-
38
- withDefaults(
39
- defineProps<AmountPickerProps>(),
40
- {
41
- items: () => [],
42
- selected: () => 0
43
- }
44
- )
45
-
46
- const state = reactive({
47
- selected: 0
48
- })
49
-
50
- const onGridItemClick = (index: number) => {
51
- state.selected = index
52
- emit('change', state.selected)
53
- }
54
- </script>
55
-
56
- <style lang="scss">
57
- .amount-picker {
58
- padding: 14px 0 14px 14px;
59
- .nut-grid-item__content {
60
- border: solid 2px transparent;
61
- background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
62
- linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
63
- border-radius: 5px;
64
- }
65
- .tile {
66
- height: 80px;
67
- &.selected {
68
- .nut-grid-item__content {
69
- background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
70
- linear-gradient(to bottom, #efd082, #ffb877) border-box;
71
- }
72
- }
73
- }
74
- h4.token-line {
75
- background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
76
- background-size: 20px;
77
- background-repeat: no-repeat;
78
- background-position: left center;
79
- padding-left: 24px;
80
- color: #FD6701;
81
- font-weight: 600;
82
- line-height: 25px;
83
- font-size: 18px;
84
- }
85
- h5 {
86
- line-height: 18px;
87
- color: #353535;
88
- font-weight: 600;
89
- opacity: 0.6;
90
- margin-top: 4px;
91
- font-size: 12px;
92
- }
93
- }
1
+ <template>
2
+ <nut-grid
3
+ class="amount-picker"
4
+ :column-num="3"
5
+ :gutter="10"
6
+ :border="false">
7
+ <nut-grid-item
8
+ class="tile"
9
+ v-for="(amount, index) in items"
10
+ :class="{selected: state.selected === index}"
11
+ @click="() => onGridItemClick(index)"
12
+ :key="index">
13
+ <h4 class="token-line number">{{ amount.token }}</h4>
14
+ <h5>¥<span class="number">{{ amount.amount }}</span></h5>
15
+ </nut-grid-item>
16
+ </nut-grid>
17
+ </template>
18
+
19
+ <script lang="ts" setup>
20
+ import { reactive } from 'vue'
21
+
22
+ // 充值金额选取
23
+
24
+ type Amount = {
25
+ token: number,
26
+ amount: number
27
+ }
28
+
29
+ interface AmountPickerProps {
30
+ items: Amount[],
31
+ selected?: number
32
+ }
33
+
34
+ const emit = defineEmits<{
35
+ (event: 'change', selected: number): void
36
+ }>()
37
+
38
+ withDefaults(
39
+ defineProps<AmountPickerProps>(),
40
+ {
41
+ items: () => [],
42
+ selected: () => 0
43
+ }
44
+ )
45
+
46
+ const state = reactive({
47
+ selected: 0
48
+ })
49
+
50
+ const onGridItemClick = (index: number) => {
51
+ state.selected = index
52
+ emit('change', state.selected)
53
+ }
54
+ </script>
55
+
56
+ <style lang="scss">
57
+ .amount-picker {
58
+ padding: 14px 0 14px 14px;
59
+ .nut-grid-item__content {
60
+ border: solid 2px transparent;
61
+ background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
62
+ linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
63
+ border-radius: 5px;
64
+ }
65
+ .tile {
66
+ height: 80px;
67
+ &.selected {
68
+ .nut-grid-item__content {
69
+ background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
70
+ linear-gradient(to bottom, #efd082, #ffb877) border-box;
71
+ }
72
+ }
73
+ }
74
+ h4.token-line {
75
+ background-image: url("https://cdn.ddjf.com/static/images/appkit/yundou.png");
76
+ background-size: 20px;
77
+ background-repeat: no-repeat;
78
+ background-position: left center;
79
+ padding-left: 24px;
80
+ color: #FD6701;
81
+ font-weight: 600;
82
+ line-height: 25px;
83
+ font-size: 18px;
84
+ }
85
+ h5 {
86
+ line-height: 18px;
87
+ color: #353535;
88
+ font-weight: 600;
89
+ opacity: 0.6;
90
+ margin-top: 4px;
91
+ font-size: 12px;
92
+ }
93
+ }
94
94
  </style>