@uxda/appkit 4.1.40 → 4.1.44

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 (117) 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 +121 -43
  5. package/dist/assets/asset-3B_CoPto +1 -0
  6. package/dist/index.js +406 -246
  7. package/package.json +77 -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 -66
  12. package/src/balance/api/endpoints.ts +133 -126
  13. package/src/balance/api/index.ts +106 -106
  14. package/src/balance/components/AccountView.vue +747 -749
  15. package/src/balance/components/BalanceCard.vue +213 -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 +250 -251
  20. package/src/balance/components/DateRange.vue +80 -80
  21. package/src/balance/components/ListFilter.vue +63 -63
  22. package/src/balance/components/ListFilterPicker.vue +188 -186
  23. package/src/balance/components/PromoterCard.vue +186 -0
  24. package/src/balance/components/SecondBalance.vue +71 -71
  25. package/src/balance/components/Tip.vue +45 -45
  26. package/src/balance/components/index.ts +8 -13
  27. package/src/balance/types.ts +97 -91
  28. package/src/components/bt-cropper/index.vue +774 -774
  29. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  30. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  31. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  32. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  33. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  34. package/src/components/bt-cropper/utils/ratio.js +3 -3
  35. package/src/components/bt-cropper/utils/tools.js +25 -25
  36. package/src/components/dd-area/index.vue +225 -225
  37. package/src/components/dd-icon/doc.md +21 -21
  38. package/src/components/dd-icon/index.vue +23 -23
  39. package/src/components/dd-notice-bar/index.vue +78 -78
  40. package/src/components/dd-search/doc.md +34 -34
  41. package/src/components/dd-search/index.vue +168 -168
  42. package/src/components/dd-selector/index.vue +124 -124
  43. package/src/components/dd-skeleton/doc.md +19 -19
  44. package/src/components/dd-skeleton/index.vue +36 -36
  45. package/src/components/ocr-id/index.vue +114 -114
  46. package/src/components/ocr-id/types.d.ts +12 -12
  47. package/src/global.ts +6 -6
  48. package/src/index.ts +89 -89
  49. package/src/main.scss +1 -1
  50. package/src/notice/api/endpoints.ts +17 -17
  51. package/src/notice/api/index.ts +106 -106
  52. package/src/notice/components/NoticeBanner.vue +243 -243
  53. package/src/notice/components/NoticeEntry.vue +99 -99
  54. package/src/notice/components/NoticeList.vue +315 -315
  55. package/src/notice/components/NoticePopup.vue +162 -162
  56. package/src/notice/components/index.ts +5 -5
  57. package/src/notice/components/useCommonList.ts +86 -86
  58. package/src/notice/components/useNotice.ts +35 -35
  59. package/src/notice/index.ts +1 -1
  60. package/src/notice/types.ts +25 -25
  61. package/src/payment/api/config.ts +7 -7
  62. package/src/payment/api/endpoints.ts +103 -103
  63. package/src/payment/api/index.ts +100 -100
  64. package/src/payment/components/AmountPicker.vue +90 -93
  65. package/src/payment/components/RechargeResult.vue +69 -69
  66. package/src/payment/components/RechargeView.vue +154 -154
  67. package/src/payment/components/RightsPicker.vue +105 -105
  68. package/src/payment/components/TradeView.vue +294 -294
  69. package/src/payment/components/UserAgreement.vue +234 -234
  70. package/src/payment/components/index.ts +22 -22
  71. package/src/payment/index.ts +5 -5
  72. package/src/payment/services/index.ts +16 -16
  73. package/src/payment/services/invoke-recharge.ts +25 -25
  74. package/src/payment/services/request-payment.ts +58 -58
  75. package/src/payment/types.ts +28 -28
  76. package/src/register/components/SelfRegistration.vue +254 -254
  77. package/src/register/components/index.ts +2 -2
  78. package/src/shared/components/AppDrawer.vue +58 -54
  79. package/src/shared/components/AppVerify.vue +129 -126
  80. package/src/shared/components/DeviceVersion.vue +68 -68
  81. package/src/shared/components/EmptyView.vue +33 -33
  82. package/src/shared/components/OcrBusinessLicense.vue +133 -133
  83. package/src/shared/components/OcrIcon.vue +133 -133
  84. package/src/shared/components/PageHeader.vue +79 -79
  85. package/src/shared/components/index.ts +8 -8
  86. package/src/shared/composables/index.ts +8 -8
  87. package/src/shared/composables/useCountdown.ts +46 -46
  88. package/src/shared/composables/useCrypto.ts +76 -76
  89. package/src/shared/composables/useDragBox.ts +97 -97
  90. package/src/shared/composables/useEncode.ts +43 -43
  91. package/src/shared/composables/useLogger.ts +123 -123
  92. package/src/shared/composables/useSafeArea.ts +46 -46
  93. package/src/shared/composables/useTabbar.ts +24 -24
  94. package/src/shared/composables/useUpload.ts +54 -54
  95. package/src/shared/composables/useValidator.ts +31 -31
  96. package/src/shared/http/Http.ts +136 -136
  97. package/src/shared/http/index.ts +1 -1
  98. package/src/shared/http/types.ts +157 -157
  99. package/src/shared/index.ts +3 -3
  100. package/src/shared/weixin/payment.ts +38 -38
  101. package/src/styles/vars.scss +3 -3
  102. package/src/user/api/endpoints.ts +17 -17
  103. package/src/user/api/index.ts +111 -111
  104. package/src/user/components/LoginSetting.vue +114 -114
  105. package/src/user/components/UserBinding.vue +307 -307
  106. package/src/user/components/UserBindingSuccess.vue +80 -80
  107. package/src/user/components/UserEntry.vue +137 -137
  108. package/src/user/components/UserFeedback.vue +431 -431
  109. package/src/user/components/UserFeedbackEntry.vue +192 -192
  110. package/src/user/components/UserHeadCrop.vue +65 -65
  111. package/src/user/components/UserInfo.vue +637 -637
  112. package/src/user/components/UserResourceEmpty.vue +75 -75
  113. package/src/user/components/index.ts +21 -21
  114. package/src/user/index.ts +1 -1
  115. package/tsconfig.json +30 -30
  116. package/types/global.d.ts +21 -21
  117. 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,154 +1,154 @@
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
+ <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>