@uxda/appkit 4.1.24 → 4.1.25

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 +21 -24
  5. package/dist/assets/asset-3B_CoPto +1 -0
  6. package/dist/index.js +1117 -1055
  7. package/package.json +75 -77
  8. package/project.config.json +15 -15
  9. package/project.tt.json +13 -13
  10. package/rollup.config.mjs +56 -56
  11. package/src/Appkit.ts +66 -72
  12. package/src/balance/api/endpoints.ts +126 -126
  13. package/src/balance/api/index.ts +82 -82
  14. package/src/balance/components/AccountView.vue +748 -748
  15. package/src/balance/components/BalanceCard.vue +205 -205
  16. package/src/balance/components/BalanceReminder.vue +85 -85
  17. package/src/balance/components/ConsumptionFilter.vue +218 -218
  18. package/src/balance/components/ConsumptionRules.vue +68 -68
  19. package/src/balance/components/DateFilter.vue +230 -249
  20. package/src/balance/components/DateRange.vue +75 -80
  21. package/src/balance/components/ListFilter.vue +63 -63
  22. package/src/balance/components/ListFilterPicker.vue +186 -186
  23. package/src/balance/components/SecondBalance.vue +71 -71
  24. package/src/balance/components/Tip.vue +45 -45
  25. package/src/balance/components/index.ts +13 -13
  26. package/src/balance/types.ts +91 -91
  27. package/src/components/bt-cropper/index.vue +774 -774
  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/components/ocr-id/index.vue +114 -114
  45. package/src/components/ocr-id/types.d.ts +12 -12
  46. package/src/global.ts +6 -6
  47. package/src/index.ts +89 -93
  48. package/src/main.scss +1 -1
  49. package/src/notice/api/endpoints.ts +17 -17
  50. package/src/notice/api/index.ts +82 -82
  51. package/src/notice/components/NoticeBanner.vue +243 -243
  52. package/src/notice/components/NoticeEntry.vue +99 -99
  53. package/src/notice/components/NoticeList.vue +315 -315
  54. package/src/notice/components/NoticePopup.vue +162 -162
  55. package/src/notice/components/index.ts +5 -5
  56. package/src/notice/components/useCommonList.ts +86 -86
  57. package/src/notice/components/useNotice.ts +35 -35
  58. package/src/notice/index.ts +1 -1
  59. package/src/notice/types.ts +25 -25
  60. package/src/payment/api/config.ts +7 -7
  61. package/src/payment/api/endpoints.ts +103 -103
  62. package/src/payment/api/index.ts +76 -71
  63. package/src/payment/components/AmountPicker.vue +93 -93
  64. package/src/payment/components/RechargeResult.vue +69 -69
  65. package/src/payment/components/RechargeView.vue +154 -151
  66. package/src/payment/components/RightsPicker.vue +105 -105
  67. package/src/payment/components/TradeView.vue +294 -294
  68. package/src/payment/components/UserAgreement.vue +234 -234
  69. package/src/payment/components/index.ts +22 -22
  70. package/src/payment/index.ts +5 -5
  71. package/src/payment/services/index.ts +16 -16
  72. package/src/payment/services/invoke-recharge.ts +25 -25
  73. package/src/payment/services/request-payment.ts +58 -58
  74. package/src/payment/types.ts +28 -28
  75. package/src/register/components/SelfRegistration.vue +254 -254
  76. package/src/register/components/index.ts +2 -2
  77. package/src/shared/components/AppDrawer.vue +58 -58
  78. package/src/shared/components/AppVerify.vue +129 -129
  79. package/src/shared/components/DeviceVersion.vue +68 -68
  80. package/src/shared/components/EmptyView.vue +33 -33
  81. package/src/shared/components/OcrBusinessLicense.vue +133 -133
  82. package/src/shared/components/OcrIcon.vue +133 -133
  83. package/src/shared/components/PageHeader.vue +79 -79
  84. package/src/shared/components/index.ts +8 -8
  85. package/src/shared/composables/index.ts +7 -7
  86. package/src/shared/composables/useCountdown.ts +46 -46
  87. package/src/shared/composables/useCrypto.ts +76 -76
  88. package/src/shared/composables/useDragBox.ts +97 -97
  89. package/src/shared/composables/useEncode.ts +43 -43
  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 +2 -2
  100. package/src/styles/vars.scss +3 -3
  101. package/src/user/api/endpoints.ts +17 -17
  102. package/src/user/api/index.ts +87 -87
  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,70 +1,70 @@
1
- <template>
2
- <div class="recharge-result">
3
- <div class="content">
4
- <div class="figure"></div>
5
- <h2>{{views[type][0]}}成功</h2>
6
- <div class="caption" v-if="payMethod == 'bean'">权益已到账</div>
7
- <div class="caption" v-else>{{views[type][1]}}将在1分钟之内到账</div>
8
- <nut-button class="back-button" type="default" @click="onBackClick">返回</nut-button>
9
- </div>
10
- </div>
11
- </template>
12
-
13
- <script lang="ts" setup>
14
- const emit = defineEmits(['dismiss'])
15
-
16
- type viewProps = {
17
- type: string;
18
- payMethod: string // bean: 云豆支付 wePay: 微信支付
19
- };
20
- const props = withDefaults(defineProps<viewProps>(), {
21
- type: "recharge",
22
- payMethod: ''
23
- });
24
-
25
- const views = {
26
- recharge: ['充值', '云豆'],
27
- trade: ['购买', '权益']
28
- }
29
-
30
- function onBackClick () {
31
- emit('dismiss')
32
- }
33
-
34
- </script>
35
-
36
- <style lang="scss">
37
- .recharge-result {
38
- background-color: #fff;
39
- height: 100vh;
40
- padding-top: 120px;
41
- box-sizing: border-box;
42
- .content {
43
- display: flex;
44
- width: 100%;
45
- height: fit-content;
46
- flex-direction: column;
47
- justify-content: flex-start;
48
- align-items: center;
49
- }
50
- h2 {
51
- font-size: 16px;
52
- font-weight: bold;
53
- margin-top: 20px;
54
- }
55
- .caption {
56
- color: #353535;
57
- opacity: 0.5;
58
- margin-top: 8px;
59
- }
60
- .figure {
61
- width: 100px;
62
- height: 100px;
63
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01MC41IDEwQzcyLjg2NzUgMTAgOTEgMjcuOTA4NiA5MSA1MEM5MSA3Mi4wOTE0IDcyLjg2NzUgOTAgNTAuNSA5MEMyOC4xMzI1IDkwIDEwIDcyLjA5MTQgMTAgNTBDMTAgMjcuOTA4NiAyOC4xMzI1IDEwIDUwLjUgMTBaIiBmaWxsPSIjOUFFMkNEIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTAuNSAxOEM2OS4wMDE1IDE4IDg0IDMyLjU1MDggODQgNTAuNUM4NCA2OC40NDkyIDY5LjAwMTUgODMgNTAuNSA4M0MzMS45OTg1IDgzIDE3IDY4LjQ0OTIgMTcgNTAuNUMxNyAzMi41NTA4IDMxLjk5ODUgMTggNTAuNSAxOFoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTM3IDQ5LjVMNDcgNjBMNjcgMzkiIHN0cm9rZT0iIzNEQ0E5RCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5LjEyMDQgMTYuMjkxOUw3Ljk5ODg0IDEyLjczMjFMMTUuOTI5NCA1LjA1ODk3TDE5LjEyMDQgMTYuMjkxOVoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTEyLjgzNCAyMy40NjQyTDguNTQ2MzEgMjcuNTc3OEw3LjEyNzY1IDIxLjgwNzhMMTIuODM0IDIzLjQ2NDJaIiBmaWxsPSIjQ0FGQUVDIi8+Cjwvc3ZnPgo=");
64
- }
65
- .back-button {
66
- margin-top: 40px;
67
- width: 128px;
68
- }
69
- }
1
+ <template>
2
+ <div class="recharge-result">
3
+ <div class="content">
4
+ <div class="figure"></div>
5
+ <h2>{{views[type][0]}}成功</h2>
6
+ <div class="caption" v-if="payMethod == 'bean'">权益已到账</div>
7
+ <div class="caption" v-else>{{views[type][1]}}将在1分钟之内到账</div>
8
+ <nut-button class="back-button" type="default" @click="onBackClick">返回</nut-button>
9
+ </div>
10
+ </div>
11
+ </template>
12
+
13
+ <script lang="ts" setup>
14
+ const emit = defineEmits(['dismiss'])
15
+
16
+ type viewProps = {
17
+ type: string;
18
+ payMethod: string // bean: 云豆支付 wePay: 微信支付
19
+ };
20
+ const props = withDefaults(defineProps<viewProps>(), {
21
+ type: "recharge",
22
+ payMethod: ''
23
+ });
24
+
25
+ const views = {
26
+ recharge: ['充值', '云豆'],
27
+ trade: ['购买', '权益']
28
+ }
29
+
30
+ function onBackClick () {
31
+ emit('dismiss')
32
+ }
33
+
34
+ </script>
35
+
36
+ <style lang="scss">
37
+ .recharge-result {
38
+ background-color: #fff;
39
+ height: 100vh;
40
+ padding-top: 120px;
41
+ box-sizing: border-box;
42
+ .content {
43
+ display: flex;
44
+ width: 100%;
45
+ height: fit-content;
46
+ flex-direction: column;
47
+ justify-content: flex-start;
48
+ align-items: center;
49
+ }
50
+ h2 {
51
+ font-size: 16px;
52
+ font-weight: bold;
53
+ margin-top: 20px;
54
+ }
55
+ .caption {
56
+ color: #353535;
57
+ opacity: 0.5;
58
+ margin-top: 8px;
59
+ }
60
+ .figure {
61
+ width: 100px;
62
+ height: 100px;
63
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01MC41IDEwQzcyLjg2NzUgMTAgOTEgMjcuOTA4NiA5MSA1MEM5MSA3Mi4wOTE0IDcyLjg2NzUgOTAgNTAuNSA5MEMyOC4xMzI1IDkwIDEwIDcyLjA5MTQgMTAgNTBDMTAgMjcuOTA4NiAyOC4xMzI1IDEwIDUwLjUgMTBaIiBmaWxsPSIjOUFFMkNEIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTAuNSAxOEM2OS4wMDE1IDE4IDg0IDMyLjU1MDggODQgNTAuNUM4NCA2OC40NDkyIDY5LjAwMTUgODMgNTAuNSA4M0MzMS45OTg1IDgzIDE3IDY4LjQ0OTIgMTcgNTAuNUMxNyAzMi41NTA4IDMxLjk5ODUgMTggNTAuNSAxOFoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTM3IDQ5LjVMNDcgNjBMNjcgMzkiIHN0cm9rZT0iIzNEQ0E5RCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5LjEyMDQgMTYuMjkxOUw3Ljk5ODg0IDEyLjczMjFMMTUuOTI5NCA1LjA1ODk3TDE5LjEyMDQgMTYuMjkxOVoiIGZpbGw9IiNDQUZBRUMiLz4KPHBhdGggZD0iTTEyLjgzNCAyMy40NjQyTDguNTQ2MzEgMjcuNTc3OEw3LjEyNzY1IDIxLjgwNzhMMTIuODM0IDIzLjQ2NDJaIiBmaWxsPSIjQ0FGQUVDIi8+Cjwvc3ZnPgo=");
64
+ }
65
+ .back-button {
66
+ margin-top: 40px;
67
+ width: 128px;
68
+ }
69
+ }
70
70
  </style>
@@ -1,151 +1,154 @@
1
- <template>
2
- <view class="view recharge-view">
3
- <view class="flex-grow">
4
- <amount-picker :items="amounts"
5
- :selected="state.selected"
6
- @change="onAmountSelect" />
7
- </view>
8
- <view class="amount-footer">
9
- <view class="agreement">
10
- <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline" @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
11
- </view>
12
- <nut-button block
13
- shape="square"
14
- :loading="state.buttonLoading"
15
- @click="onPayClick"
16
- class="recharge-button">立即充值</nut-button>
17
- </view>
18
- </view>
19
- </template>
20
-
21
- <script lang="ts" setup>
22
- import { onMounted, reactive, ref } from 'vue'
23
- import AmountPicker from './AmountPicker.vue'
24
- import { useHttp, endpoints } from '../api'
25
- import { requestPayment } from '../services'
26
- import Taro from '@tarojs/taro'
27
-
28
- // 充值用户界面
29
- // 配置了必须的属性后
30
- // 自动获取支付套餐包列表
31
- // 并发起微信支付
32
- export interface RechargeViewProps {
33
- /**
34
- * 应用
35
- **/
36
- app: string,
37
- /**
38
- * 充值场景
39
- */
40
- // stage?: string, // 这个参数暂时不用
41
- /**
42
- * 租户
43
- */
44
- tenant: string
45
- }
46
-
47
- const props = defineProps<RechargeViewProps>()
48
-
49
- const emit = defineEmits<{
50
- (event: 'complete', value: boolean): void,
51
- (event: 'agree'): void,
52
- }>()
53
-
54
- const state = reactive({
55
- agreed: false,
56
- selected: 0,
57
- agreementOpen: false,
58
- buttonLoading: false,
59
- })
60
-
61
- const amounts = ref<any[]>([])
62
-
63
- const onAgreementLinkClick = (e) => {
64
- e.preventDefault()
65
- e.stopImmediatePropagation()
66
- emit('agree')
67
- // state.agreementOpen = true
68
- }
69
-
70
- const onAmountSelect = (selected: number) => {
71
- state.selected = selected
72
- }
73
-
74
- onMounted(() => {
75
- const $http = useHttp()
76
- $http.get<any[]>(endpoints.获取充值金额列表, {
77
- app: props.app,
78
- // stage: 'aiApproveRecharge', // 支付场景
79
- tenant: props.tenant
80
- }).then(response => {
81
- amounts.value = response
82
- })
83
- })
84
-
85
- const onPayClick = () => {
86
- if (!state.agreed) {
87
- Taro.showToast({
88
- title: '请勾选《大道云平台云豆充值协议》',
89
- icon: 'none',
90
- })
91
- return false
92
- }
93
- state.buttonLoading = true
94
- wx.login({
95
- success ({code}: {code: string}) {
96
- requestPayment({
97
- amount: amounts.value[state.selected].amount,
98
- app: props.app, // 'crm',
99
- tenant: props.tenant, // '17454646',
100
- user: code
101
- }).then(result => {
102
- state.buttonLoading = false
103
- if (result) {
104
- emit('complete', true)
105
- }
106
- })
107
- }
108
- })
109
- }
110
- </script>
111
-
112
- <style lang="scss">
113
- .recharge-view {
114
- height: 100%;
115
- display: flex;
116
- flex-direction: column;
117
- .flex-grow {
118
- flex-grow: 1;
119
- }
120
- .amount-footer {
121
- padding: 10px;
122
- padding-bottom: 20px;
123
- .agreement {
124
- font-size: 12px;
125
- display: flex;
126
- justify-content: center;
127
- align-items: cebter;
128
- height: 40px;
129
- }
130
- .recharge-button {
131
- background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
132
- color: #353535;
133
- margin: 12px 0;
134
- border: 0;
135
- border-radius: 8px;
136
- }
137
- .nut-checkbox {
138
- line-height: 40px;
139
- }
140
- .nut-checkbox__label {
141
- margin-left: 8px;
142
- flex: flex;
143
- font-size: 12px;
144
- }
145
- .link {
146
- display: inline;
147
- color: #FD6701;
148
- }
149
- }
150
- }
151
- </style>
1
+ <template>
2
+ <view class="view recharge-view">
3
+ <view class="flex-grow">
4
+ <amount-picker :items="amounts" :selected="state.selected" @change="onAmountSelect" />
5
+ </view>
6
+ <view class="amount-footer">
7
+ <view class="agreement">
8
+ <nut-checkbox v-model="state.agreed">我已阅读并同意<a class="link inline"
9
+ @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
10
+ </view>
11
+ <nut-button block shape="square" :loading="state.buttonLoading" @click="onPayClick"
12
+ class="recharge-button">立即充值</nut-button>
13
+ </view>
14
+ </view>
15
+ </template>
16
+
17
+ <script lang="ts" setup>
18
+ import { onMounted, reactive, ref } from 'vue'
19
+ import AmountPicker from './AmountPicker.vue'
20
+ import { useHttp, endpoints } from '../api'
21
+ import { requestPayment } from '../services'
22
+ import Taro from '@tarojs/taro'
23
+
24
+ // 充值用户界面
25
+ // 配置了必须的属性后
26
+ // 自动获取支付套餐包列表
27
+ // 并发起微信支付
28
+ export interface RechargeViewProps {
29
+ /**
30
+ * 应用
31
+ **/
32
+ app: string,
33
+ /**
34
+ * 充值场景
35
+ */
36
+ // stage?: string, // 这个参数暂时不用
37
+ /**
38
+ * 租户
39
+ */
40
+ tenant: string
41
+ }
42
+
43
+ const props = defineProps<RechargeViewProps>()
44
+
45
+ const emit = defineEmits<{
46
+ (event: 'complete', value: boolean): void,
47
+ (event: 'agree'): void,
48
+ }>()
49
+
50
+ const state = reactive({
51
+ agreed: false,
52
+ selected: 0,
53
+ agreementOpen: false,
54
+ buttonLoading: false,
55
+ })
56
+
57
+ const amounts = ref<any[]>([])
58
+
59
+ const onAgreementLinkClick = (e) => {
60
+ e.preventDefault()
61
+ e.stopImmediatePropagation()
62
+ emit('agree')
63
+ // state.agreementOpen = true
64
+ }
65
+
66
+ const onAmountSelect = (selected: number) => {
67
+ state.selected = selected
68
+ }
69
+
70
+ onMounted(() => {
71
+ const $http = useHttp({ Appcode: props.app !== 'cloudkitPro' ? props.app : '', Tenant: props.tenant })
72
+
73
+ $http.get<any[]>(endpoints.获取充值金额列表, {
74
+ app: props.app,
75
+ tenant: props.tenant
76
+ }).then(response => {
77
+ amounts.value = response
78
+ })
79
+ })
80
+
81
+ const onPayClick = () => {
82
+ if (!state.agreed) {
83
+ Taro.showToast({
84
+ title: '请勾选《大道云平台云豆充值协议》',
85
+ icon: 'none',
86
+ })
87
+ return false
88
+ }
89
+ state.buttonLoading = true
90
+ wx.login({
91
+ success({ code }: { code: string }) {
92
+ requestPayment({
93
+ amount: amounts.value[state.selected].amount,
94
+ app: props.app, // 'crm',
95
+ tenant: props.tenant, // '17454646',
96
+ user: code
97
+ }).then(result => {
98
+ state.buttonLoading = false
99
+ if (result) {
100
+ emit('complete', true)
101
+ }
102
+ })
103
+ }
104
+ })
105
+ }
106
+ </script>
107
+
108
+ <style lang="scss">
109
+ .recharge-view {
110
+ height: 100%;
111
+ display: flex;
112
+ flex-direction: column;
113
+
114
+ .flex-grow {
115
+ flex-grow: 1;
116
+ }
117
+
118
+ .amount-footer {
119
+ padding: 10px;
120
+ padding-bottom: 20px;
121
+
122
+ .agreement {
123
+ font-size: 12px;
124
+ display: flex;
125
+ justify-content: center;
126
+ align-items: cebter;
127
+ height: 40px;
128
+ }
129
+
130
+ .recharge-button {
131
+ background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
132
+ color: #353535;
133
+ margin: 12px 0;
134
+ border: 0;
135
+ border-radius: 8px;
136
+ }
137
+
138
+ .nut-checkbox {
139
+ line-height: 40px;
140
+ }
141
+
142
+ .nut-checkbox__label {
143
+ margin-left: 8px;
144
+ flex: flex;
145
+ font-size: 12px;
146
+ }
147
+
148
+ .link {
149
+ display: inline;
150
+ color: #FD6701;
151
+ }
152
+ }
153
+ }
154
+ </style>
@@ -1,106 +1,106 @@
1
- <template>
2
- <nut-grid
3
- class="trade-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
- <div class="tag">{{ amount.paymentDesc }}</div>
14
- <h4 class="token-line number">{{ amount.priceRightNum }}笔</h4>
15
- <h5>¥<span class="number">{{ amount.paymentAmount }}</span></h5>
16
- </nut-grid-item>
17
- </nut-grid>
18
- </template>
19
-
20
- <script lang="ts" setup>
21
- import { reactive } from 'vue'
22
-
23
- // 充值金额选取
24
-
25
- export type Amount = {
26
- id: string,
27
- paymentAmount: number
28
- paymentDesc: string
29
- priceRightNum: number
30
- }
31
-
32
- interface AmountPickerProps {
33
- items: Amount[],
34
- selected?: number
35
- }
36
-
37
- const emit = defineEmits<{
38
- (event: 'change', selected: number): void
39
- }>()
40
-
41
- withDefaults(
42
- defineProps<AmountPickerProps>(),
43
- {
44
- items: () => [],
45
- selected: () => 0
46
- }
47
- )
48
-
49
- const state = reactive({
50
- selected: 0
51
- })
52
-
53
- const onGridItemClick = (index: number) => {
54
- state.selected = index
55
- emit('change', state.selected)
56
- }
57
- </script>
58
-
59
- <style lang="scss">
60
- .trade-picker {
61
- padding: 14px 0 14px 14px;
62
- .nut-grid-item__content {
63
- border: solid 2px transparent;
64
- background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
65
- linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
66
- border-radius: 5px;
67
- }
68
- .tile {
69
- height: 80px;
70
- position: relative;
71
- overflow: hidden;
72
- &.selected {
73
- .nut-grid-item__content {
74
- background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
75
- linear-gradient(to bottom, #efd082, #ffb877) border-box;
76
- }
77
- }
78
- .tag{
79
- position: absolute;
80
- left: 0;
81
- top: 0;
82
- background: linear-gradient(90deg, #FD6701 0%, #FF9349 100%);
83
- color: #fff;
84
- font-size: 10px;
85
- padding:0 10px;
86
- line-height: 17px;
87
- height: 17px;;
88
- border-radius: 10px 100px 100px 0px;
89
- }
90
- }
91
- h4.token-line {
92
- color: #FD6701;
93
- font-weight: 600;
94
- line-height: 25px;
95
- font-size: 18px;
96
- }
97
- h5 {
98
- line-height: 18px;
99
- color: #353535;
100
- font-weight: 600;
101
- opacity: 0.6;
102
- margin-top: 4px;
103
- font-size: 12px;
104
- }
105
- }
1
+ <template>
2
+ <nut-grid
3
+ class="trade-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
+ <div class="tag">{{ amount.paymentDesc }}</div>
14
+ <h4 class="token-line number">{{ amount.priceRightNum }}笔</h4>
15
+ <h5>¥<span class="number">{{ amount.paymentAmount }}</span></h5>
16
+ </nut-grid-item>
17
+ </nut-grid>
18
+ </template>
19
+
20
+ <script lang="ts" setup>
21
+ import { reactive } from 'vue'
22
+
23
+ // 充值金额选取
24
+
25
+ export type Amount = {
26
+ id: string,
27
+ paymentAmount: number
28
+ paymentDesc: string
29
+ priceRightNum: number
30
+ }
31
+
32
+ interface AmountPickerProps {
33
+ items: Amount[],
34
+ selected?: number
35
+ }
36
+
37
+ const emit = defineEmits<{
38
+ (event: 'change', selected: number): void
39
+ }>()
40
+
41
+ withDefaults(
42
+ defineProps<AmountPickerProps>(),
43
+ {
44
+ items: () => [],
45
+ selected: () => 0
46
+ }
47
+ )
48
+
49
+ const state = reactive({
50
+ selected: 0
51
+ })
52
+
53
+ const onGridItemClick = (index: number) => {
54
+ state.selected = index
55
+ emit('change', state.selected)
56
+ }
57
+ </script>
58
+
59
+ <style lang="scss">
60
+ .trade-picker {
61
+ padding: 14px 0 14px 14px;
62
+ .nut-grid-item__content {
63
+ border: solid 2px transparent;
64
+ background: linear-gradient(#f5f5f5, #f5f5f5) padding-box,
65
+ linear-gradient(to bottom, #cccccc88, #cccccc88) border-box;
66
+ border-radius: 5px;
67
+ }
68
+ .tile {
69
+ height: 80px;
70
+ position: relative;
71
+ overflow: hidden;
72
+ &.selected {
73
+ .nut-grid-item__content {
74
+ background: linear-gradient(#FFF7E3, #FEFDE6) padding-box,
75
+ linear-gradient(to bottom, #efd082, #ffb877) border-box;
76
+ }
77
+ }
78
+ .tag{
79
+ position: absolute;
80
+ left: 0;
81
+ top: 0;
82
+ background: linear-gradient(90deg, #FD6701 0%, #FF9349 100%);
83
+ color: #fff;
84
+ font-size: 10px;
85
+ padding:0 10px;
86
+ line-height: 17px;
87
+ height: 17px;;
88
+ border-radius: 10px 100px 100px 0px;
89
+ }
90
+ }
91
+ h4.token-line {
92
+ color: #FD6701;
93
+ font-weight: 600;
94
+ line-height: 25px;
95
+ font-size: 18px;
96
+ }
97
+ h5 {
98
+ line-height: 18px;
99
+ color: #353535;
100
+ font-weight: 600;
101
+ opacity: 0.6;
102
+ margin-top: 4px;
103
+ font-size: 12px;
104
+ }
105
+ }
106
106
  </style>