@uxda/appkit 4.2.83 → 4.2.85

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 +3 -8
  5. package/dist/index.js +10 -10
  6. package/package.json +80 -80
  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 -112
  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 -54
  48. package/src/notice/api/index.ts +115 -115
  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 -249
  53. package/src/notice/components/NoticePopup.vue +163 -163
  54. package/src/notice/components/index.ts +6 -6
  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 -148
  102. package/src/shared/http/index.ts +1 -1
  103. package/src/shared/http/types.ts +163 -163
  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 -117
  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,95 +1,95 @@
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
- }),
39
- transform: (data: any) => {
40
- let json = null
41
- try {
42
- json = JSON.parse(data.prePayStr)
43
- } catch (e) {}
44
- return {
45
- json, // 拉起微信支付用的JSON串
46
- paymentId: data.payId, // 查询用支付ID
47
- }
48
- },
49
- },
50
- 获取权益微信支付: {
51
- path: '/payment/outer/payment/valueExchangePay',
52
- translate: (params: PaymentParams) => ({
53
- caseConfigId: params.caseConfigId,
54
- appCode: params.app,
55
- tenantId: params.tenant,
56
- amount: params.amount,
57
- certificateNo: params.user,
58
- accountAuthFlag: params.accountAuthFlag || false,
59
- channelCode: params.channelCode || null,
60
- payFinishJumpUrl: params.payFinishJumpUrl || null,
61
- }),
62
- transform: (data: any) => {
63
- let json = null
64
- try {
65
- json = JSON.parse(data.prePayStr)
66
- } catch (e) {}
67
- return {
68
- json, // 拉起微信支付用的JSON串
69
- paymentId: data.payId, // 查询用支付ID
70
- }
71
- },
72
- },
73
- 获取增值权益类目: {
74
- path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
75
- transform: (data: any) => data,
76
- },
77
- } as const
78
-
79
- const keys = Object.keys(endpointsList as any)
80
-
81
- type Keys = (typeof keys)[number]
82
-
83
- const endpoints: Record<Keys, string> = Object.fromEntries(
84
- Object.entries(endpointsList).map(([name, def]) => [name, def.path])
85
- )
86
-
87
- const translates = Object.fromEntries(
88
- Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
89
- )
90
-
91
- const transforms = Object.fromEntries(
92
- Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
93
- )
94
-
95
- 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
+ }),
39
+ transform: (data: any) => {
40
+ let json = null
41
+ try {
42
+ json = JSON.parse(data.prePayStr)
43
+ } catch (e) {}
44
+ return {
45
+ json, // 拉起微信支付用的JSON串
46
+ paymentId: data.payId, // 查询用支付ID
47
+ }
48
+ },
49
+ },
50
+ 获取权益微信支付: {
51
+ path: '/payment/outer/payment/valueExchangePay',
52
+ translate: (params: PaymentParams) => ({
53
+ caseConfigId: params.caseConfigId,
54
+ appCode: params.app,
55
+ tenantId: params.tenant,
56
+ amount: params.amount,
57
+ certificateNo: params.user,
58
+ accountAuthFlag: params.accountAuthFlag || false,
59
+ channelCode: params.channelCode || null,
60
+ payFinishJumpUrl: params.payFinishJumpUrl || null,
61
+ }),
62
+ transform: (data: any) => {
63
+ let json = null
64
+ try {
65
+ json = JSON.parse(data.prePayStr)
66
+ } catch (e) {}
67
+ return {
68
+ json, // 拉起微信支付用的JSON串
69
+ paymentId: data.payId, // 查询用支付ID
70
+ }
71
+ },
72
+ },
73
+ 获取增值权益类目: {
74
+ path: '/payment/paymentCaseConfig/getBalanceAndRiskQueryPriceConfig',
75
+ transform: (data: any) => data,
76
+ },
77
+ } as const
78
+
79
+ const keys = Object.keys(endpointsList as any)
80
+
81
+ type Keys = (typeof keys)[number]
82
+
83
+ const endpoints: Record<Keys, string> = Object.fromEntries(
84
+ Object.entries(endpointsList).map(([name, def]) => [name, def.path])
85
+ )
86
+
87
+ const translates = Object.fromEntries(
88
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
89
+ )
90
+
91
+ const transforms = Object.fromEntries(
92
+ Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
93
+ )
94
+
95
+ export { endpoints, translates, transforms }
@@ -1,101 +1,101 @@
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
- TaroRequest({
22
- url: config.url,
23
- method: config.method,
24
- header,
25
- data: config.data,
26
- })
27
- .then(({ data }) => {
28
- // 记录阿里日志
29
- const endTime = new Date().getTime()
30
- logger.info({
31
- send: JSON.stringify({ url: config.url, data: config.data }),
32
- receive: JSON.stringify(data),
33
- traceId: header.traceId,
34
- duration: endTime - startTime,
35
- })
36
-
37
- if (data.success) {
38
- resolve({
39
- status: +data.code,
40
- message: data.msg,
41
- data: data.result as T,
42
- })
43
- } else if (data.code !== '401') {
44
- showToast({
45
- title: data.msg,
46
- icon: 'none',
47
- })
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
- /**
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
+ 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
+ TaroRequest({
22
+ url: config.url,
23
+ method: config.method,
24
+ header,
25
+ data: config.data,
26
+ })
27
+ .then(({ data }) => {
28
+ // 记录阿里日志
29
+ const endTime = new Date().getTime()
30
+ logger.info({
31
+ send: JSON.stringify({ url: config.url, data: config.data }),
32
+ receive: JSON.stringify(data),
33
+ traceId: header.traceId,
34
+ duration: endTime - startTime,
35
+ })
36
+
37
+ if (data.success) {
38
+ resolve({
39
+ status: +data.code,
40
+ message: data.msg,
41
+ data: data.result as T,
42
+ })
43
+ } else if (data.code !== '401') {
44
+ showToast({
45
+ title: data.msg,
46
+ icon: 'none',
47
+ })
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
+ /**
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,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>