@uxda/appkit 4.3.8 → 4.3.11

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 (131) hide show
  1. package/.eslintrc.mjs +7 -7
  2. package/COMPONENT_USAGE.md +1523 -1523
  3. package/PROJECT_DOCS.md +142 -142
  4. package/README.md +187 -187
  5. package/babel.config.js +12 -12
  6. package/dist/appkit.css +3 -48
  7. package/dist/index.js +84 -152
  8. package/package.json +82 -79
  9. package/project.config.json +15 -15
  10. package/project.tt.json +13 -13
  11. package/rollup.config.mjs +78 -78
  12. package/src/Appkit.ts +72 -72
  13. package/src/balance/api/endpoints.ts +133 -133
  14. package/src/balance/api/index.ts +118 -118
  15. package/src/balance/components/AccountView.vue +770 -770
  16. package/src/balance/components/BalanceCard.vue +210 -210
  17. package/src/balance/components/BalanceReminder.vue +84 -84
  18. package/src/balance/components/ConsumptionFilter.vue +218 -218
  19. package/src/balance/components/ConsumptionRules.vue +68 -68
  20. package/src/balance/components/DateFilter.vue +259 -259
  21. package/src/balance/components/DateRange.vue +111 -111
  22. package/src/balance/components/ListFilter.vue +62 -62
  23. package/src/balance/components/ListFilterPicker.vue +191 -191
  24. package/src/balance/components/PromoterCard.vue +307 -307
  25. package/src/balance/components/SecondBalance.vue +77 -77
  26. package/src/balance/components/Tip.vue +45 -45
  27. package/src/balance/components/index.ts +8 -8
  28. package/src/balance/types.ts +99 -99
  29. package/src/components/bt-cropper/index.vue +730 -730
  30. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  31. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  32. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  33. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  34. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  35. package/src/components/bt-cropper/utils/ratio.js +3 -3
  36. package/src/components/bt-cropper/utils/tools.js +25 -25
  37. package/src/components/dd-area/index.vue +225 -225
  38. package/src/components/dd-icon/doc.md +21 -21
  39. package/src/components/dd-icon/index.vue +23 -23
  40. package/src/components/dd-notice-bar/index.vue +78 -78
  41. package/src/components/dd-search/doc.md +34 -34
  42. package/src/components/dd-search/index.vue +168 -168
  43. package/src/components/dd-selector/index.vue +124 -124
  44. package/src/components/dd-skeleton/doc.md +19 -19
  45. package/src/components/dd-skeleton/index.vue +36 -36
  46. package/src/global.ts +6 -6
  47. package/src/index.ts +101 -101
  48. package/src/main.scss +1 -1
  49. package/src/notice/api/endpoints.ts +54 -54
  50. package/src/notice/api/index.ts +121 -121
  51. package/src/notice/components/NoticeBanner.vue +247 -247
  52. package/src/notice/components/NoticeEntry.vue +99 -99
  53. package/src/notice/components/NoticeList.vue +311 -311
  54. package/src/notice/components/NoticeList2.vue +240 -400
  55. package/src/notice/components/NoticePopup.vue +163 -163
  56. package/src/notice/components/index.ts +6 -6
  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 +96 -96
  63. package/src/payment/api/index.ts +107 -107
  64. package/src/payment/components/AmountPicker.vue +90 -90
  65. package/src/payment/components/RechargeResult.vue +69 -69
  66. package/src/payment/components/RechargeView.vue +195 -191
  67. package/src/payment/components/RightsPicker.vue +105 -105
  68. package/src/payment/components/TradeView.vue +365 -363
  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 +130 -130
  75. package/src/payment/types.ts +33 -33
  76. package/src/register/components/SelfRegistration.vue +233 -233
  77. package/src/register/components/index.ts +2 -2
  78. package/src/scenarios/components/SharePoster.vue +364 -364
  79. package/src/scenarios/components/index.ts +2 -2
  80. package/src/scenarios/components/poster-paste.vue +93 -93
  81. package/src/scenarios/components/share-poster.md +273 -273
  82. package/src/shared/components/AppDrawer.vue +53 -53
  83. package/src/shared/components/AppVerify.vue +128 -128
  84. package/src/shared/components/DeviceVersion.vue +78 -78
  85. package/src/shared/components/EmptyView.vue +33 -33
  86. package/src/shared/components/OcrBusinessLicense.vue +137 -137
  87. package/src/shared/components/OcrIcon.vue +229 -229
  88. package/src/shared/components/PageHeader.vue +84 -84
  89. package/src/shared/components/index.ts +8 -8
  90. package/src/shared/composables/index.ts +9 -9
  91. package/src/shared/composables/useAmount.ts +46 -46
  92. package/src/shared/composables/useCountdown.ts +46 -46
  93. package/src/shared/composables/useCrypto.ts +76 -76
  94. package/src/shared/composables/useDeviceEnv.ts +26 -26
  95. package/src/shared/composables/useDragBox.ts +97 -97
  96. package/src/shared/composables/useEncode.ts +43 -43
  97. package/src/shared/composables/useLogger.ts +144 -144
  98. package/src/shared/composables/useSafeArea.ts +46 -46
  99. package/src/shared/composables/useTabbar.ts +24 -24
  100. package/src/shared/composables/useUpload.ts +61 -61
  101. package/src/shared/composables/useValidator.ts +32 -32
  102. package/src/shared/composables/useWxAuth.ts +48 -48
  103. package/src/shared/http/Http.ts +148 -148
  104. package/src/shared/http/index.ts +1 -1
  105. package/src/shared/http/types.ts +163 -163
  106. package/src/shared/index.ts +9 -9
  107. package/src/shared/tracking/directives/index.ts +40 -40
  108. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  109. package/src/shared/weixin/index.ts +9 -9
  110. package/src/shared/weixin/jssdk.ts +103 -103
  111. package/src/shared/weixin/payment.ts +38 -38
  112. package/src/styles/vars.scss +3 -3
  113. package/src/user/api/endpoints.ts +17 -17
  114. package/src/user/api/index.ts +123 -123
  115. package/src/user/components/LoginSetting.vue +114 -114
  116. package/src/user/components/UserAuth.vue +218 -218
  117. package/src/user/components/UserBinding.vue +277 -277
  118. package/src/user/components/UserBindingSuccess.vue +80 -80
  119. package/src/user/components/UserEntry.vue +139 -139
  120. package/src/user/components/UserFeedback.vue +427 -427
  121. package/src/user/components/UserFeedbackEntry.vue +175 -175
  122. package/src/user/components/UserHeadCrop.vue +65 -65
  123. package/src/user/components/UserInfo.vue +709 -709
  124. package/src/user/components/UserResourceEmpty.vue +75 -75
  125. package/src/user/components/index.ts +23 -23
  126. package/src/user/index.ts +1 -1
  127. package/src/utils/utils.ts +33 -33
  128. package/tsconfig.json +30 -30
  129. package/types/global.d.ts +22 -22
  130. package/types/vue.d.ts +10 -10
  131. package/dist/assets/asset-DcH8Kg-2 +0 -1
@@ -1,229 +1,229 @@
1
- <template>
2
- <div class="ocr-icon" :class="[disabled ? 'disabled' : '']" v-track-click="'身份证识别-点击'" @click="onPhotograph">
3
- <slot name="icon">
4
- <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
5
- </slot>
6
- </div>
7
-
8
- <nut-action-sheet v-model:visible="activeSheetVisible" :menu-items="actionSheetMenus" @choose="chooseImages"
9
- cancel-txt="取消" />
10
- </template>
11
-
12
- <script lang="ts" setup>
13
- import Taro, { showToast, showLoading, hideLoading, chooseMedia, chooseMessageFile, uploadFile } from '@tarojs/taro'
14
- import { NsIcon } from '@uxda/nutshell/taro'
15
- import { useAppKitOptions } from '../../Appkit'
16
- import { ref } from 'vue';
17
-
18
- const appKitOptions = useAppKitOptions()
19
-
20
- const emits = defineEmits(['complete'])
21
-
22
- type OcrIconProps = {
23
- disabled?: boolean,
24
- side?: 'face' | 'back',
25
- class?: string
26
- }
27
-
28
- const props = withDefaults(defineProps<OcrIconProps>(), {
29
- disabled: false,
30
- side: 'face',
31
- class: ''
32
- })
33
-
34
- type OcrResultType = {
35
- faceInfo: {
36
- name: string
37
- certNo: string
38
- address: string
39
- }
40
- backInfo: {
41
- startDate: string
42
- endDate: string
43
- }
44
- fileUploadVO: {
45
- fileKey: string
46
- fileUrl: string
47
- objectNo: string
48
- thumbnailUrl?: string
49
- }
50
- }
51
-
52
- async function taroImgCompress(src: string, quality = 80) {
53
- if (Taro.getEnv() === 'WEB') {
54
- return src;
55
- } else {
56
- return new Promise((resolve, reject) => {
57
- Taro.compressImage({
58
- src: src,
59
- quality: quality,
60
- success: (res) => {
61
- resolve(res)
62
- },
63
- fail: (res) => {
64
- reject(res)
65
- },
66
- })
67
- })
68
- }
69
- }
70
-
71
- function getCompressQuality(size: number) {
72
- let quality = 100
73
- const curSize = size / (1024 * 1024)
74
- if (curSize > 6) {
75
- quality = quality - ((curSize - 6) / curSize) * 100
76
- }
77
- return quality
78
- }
79
-
80
- function allTrim(str: string) {
81
- return str.replace(/\s+/g, '')
82
- }
83
-
84
- async function onUploadFile(csRes: any) {
85
- let result: OcrResultType | null = null
86
- try {
87
- console.log('===上传', csRes)
88
- let { path, size, tempFilePath } = csRes.tempFiles[0]
89
- let filePath
90
- if (Taro.getEnv() !== 'WEB') {
91
- const compressImg: any = (await taroImgCompress(path || tempFilePath, getCompressQuality(size))) || {}
92
- filePath = compressImg.tempFilePath || path
93
- } else {
94
- filePath = path || tempFilePath
95
- }
96
-
97
- console.log(filePath, 'filePath')
98
- showLoading({ title: '身份证识别中..' })
99
-
100
- const session = appKitOptions.token()
101
- const baseUrl = appKitOptions.baseUrl()
102
- const upRes: any = await uploadFile({
103
- url: baseUrl + '/hkapprove/ocr/idcard',
104
- filePath,
105
- name: 'file',
106
- formData: {
107
- objectNo: `min${Date.now()}`,
108
- side: props.side,
109
- },
110
- header: {
111
- token: session || '',
112
- },
113
- })
114
- hideLoading()
115
-
116
- const res = JSON.parse(upRes.data)
117
- if (res.code === '200') {
118
- const faceInfo = res.result.faceInfo || {}
119
- const backInfo = res.result.backInfo || {}
120
- result = {
121
- faceInfo: {
122
- name: allTrim(faceInfo.name || ''),
123
- certNo: allTrim(faceInfo.num || ''),
124
- address: allTrim(faceInfo.address || ''),
125
- },
126
- backInfo: {
127
- startDate: backInfo?.startDate || '',
128
- endDate: backInfo?.endDate || ''
129
- },
130
- fileUploadVO: res.result.fileUploadVO || {},
131
- }
132
- console.log('===识别', result)
133
- if (props.side === 'face' && !result.faceInfo.name && !result.faceInfo.certNo) {
134
- showToast({ title: '识别失败,请重试', icon: 'none' })
135
- }
136
- if (props.side === 'back' && !result.backInfo?.startDate && !result.backInfo?.endDate) {
137
- showToast({ title: '识别失败,请重试', icon: 'none' })
138
- }
139
- } else {
140
- showToast({
141
- title: res.msg,
142
- icon: 'error',
143
- })
144
- }
145
- } catch (err) {
146
- hideLoading()
147
- console.log(err)
148
- }
149
- emits('complete', result)
150
- }
151
-
152
-
153
- // 上传图片操作面板
154
- const activeSheetVisible = ref(false)
155
- const actionSheetMenus = [
156
- {
157
- name: '拍摄',
158
- type: 'camera',
159
- },
160
- {
161
- name: '从相册选择',
162
- type: 'album',
163
- },
164
- {
165
- name: '从聊天会话选择',
166
- type: 'message',
167
- },
168
- ]
169
- if (Taro.getEnv() === 'WEB') {
170
- actionSheetMenus.pop()
171
- }
172
-
173
- // 选择图像上传
174
- async function chooseImages(item: any) {
175
- if (['camera', 'album'].includes(item.type)) {
176
- const csRes = await chooseMedia({
177
- count: 1,
178
- sourceType: [item.type], // "camera" | "album"
179
- maxDuration: 60, // 使用duration属性判断是图片还是视频,图片没有该属性
180
- })
181
-
182
- onUploadFile(csRes)
183
- } else {
184
- const csRes = await chooseMessageFile({
185
- count: 1,
186
- type: 'image',
187
- })
188
-
189
- onUploadFile(csRes)
190
- }
191
- }
192
-
193
- async function onPhotograph() {
194
- if (props.disabled) return
195
-
196
- if (Taro.getEnv() === 'WEB') {
197
- const csRes = await chooseMedia({
198
- count: 1,
199
- sourceType: ['album'], // "camera" | "album"
200
- maxDuration: 60, // 使用duration属性判断是图片还是视频,图片没有该属性
201
- })
202
-
203
- onUploadFile(csRes)
204
- return
205
- }
206
-
207
- activeSheetVisible.value = true
208
- }
209
- </script>
210
-
211
- <style lang="scss">
212
- .ocr-icon {
213
- width: 24px;
214
- height: 24px;
215
- display: inline-flex;
216
- align-items: center;
217
-
218
- .ns-icon {
219
- width: 24px;
220
- height: 24px;
221
- }
222
-
223
- &.disabled {
224
- .ns-icon {
225
- filter: brightness(1.5) grayscale(1);
226
- }
227
- }
228
- }
229
- </style>
1
+ <template>
2
+ <div class="ocr-icon" :class="[disabled ? 'disabled' : '']" v-track-click="'身份证识别-点击'" @click="onPhotograph">
3
+ <slot name="icon">
4
+ <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
5
+ </slot>
6
+ </div>
7
+
8
+ <nut-action-sheet v-model:visible="activeSheetVisible" :menu-items="actionSheetMenus" @choose="chooseImages"
9
+ cancel-txt="取消" />
10
+ </template>
11
+
12
+ <script lang="ts" setup>
13
+ import Taro, { showToast, showLoading, hideLoading, chooseMedia, chooseMessageFile, uploadFile } from '@tarojs/taro'
14
+ import { NsIcon } from '@uxda/nutshell/taro'
15
+ import { useAppKitOptions } from '../../Appkit'
16
+ import { ref } from 'vue';
17
+
18
+ const appKitOptions = useAppKitOptions()
19
+
20
+ const emits = defineEmits(['complete'])
21
+
22
+ type OcrIconProps = {
23
+ disabled?: boolean,
24
+ side?: 'face' | 'back',
25
+ class?: string
26
+ }
27
+
28
+ const props = withDefaults(defineProps<OcrIconProps>(), {
29
+ disabled: false,
30
+ side: 'face',
31
+ class: ''
32
+ })
33
+
34
+ type OcrResultType = {
35
+ faceInfo: {
36
+ name: string
37
+ certNo: string
38
+ address: string
39
+ }
40
+ backInfo: {
41
+ startDate: string
42
+ endDate: string
43
+ }
44
+ fileUploadVO: {
45
+ fileKey: string
46
+ fileUrl: string
47
+ objectNo: string
48
+ thumbnailUrl?: string
49
+ }
50
+ }
51
+
52
+ async function taroImgCompress(src: string, quality = 80) {
53
+ if (Taro.getEnv() === 'WEB') {
54
+ return src;
55
+ } else {
56
+ return new Promise((resolve, reject) => {
57
+ Taro.compressImage({
58
+ src: src,
59
+ quality: quality,
60
+ success: (res) => {
61
+ resolve(res)
62
+ },
63
+ fail: (res) => {
64
+ reject(res)
65
+ },
66
+ })
67
+ })
68
+ }
69
+ }
70
+
71
+ function getCompressQuality(size: number) {
72
+ let quality = 100
73
+ const curSize = size / (1024 * 1024)
74
+ if (curSize > 6) {
75
+ quality = quality - ((curSize - 6) / curSize) * 100
76
+ }
77
+ return quality
78
+ }
79
+
80
+ function allTrim(str: string) {
81
+ return str.replace(/\s+/g, '')
82
+ }
83
+
84
+ async function onUploadFile(csRes: any) {
85
+ let result: OcrResultType | null = null
86
+ try {
87
+ console.log('===上传', csRes)
88
+ let { path, size, tempFilePath } = csRes.tempFiles[0]
89
+ let filePath
90
+ if (Taro.getEnv() !== 'WEB') {
91
+ const compressImg: any = (await taroImgCompress(path || tempFilePath, getCompressQuality(size))) || {}
92
+ filePath = compressImg.tempFilePath || path
93
+ } else {
94
+ filePath = path || tempFilePath
95
+ }
96
+
97
+ console.log(filePath, 'filePath')
98
+ showLoading({ title: '身份证识别中..' })
99
+
100
+ const session = appKitOptions.token()
101
+ const baseUrl = appKitOptions.baseUrl()
102
+ const upRes: any = await uploadFile({
103
+ url: baseUrl + '/hkapprove/ocr/idcard',
104
+ filePath,
105
+ name: 'file',
106
+ formData: {
107
+ objectNo: `min${Date.now()}`,
108
+ side: props.side,
109
+ },
110
+ header: {
111
+ token: session || '',
112
+ },
113
+ })
114
+ hideLoading()
115
+
116
+ const res = JSON.parse(upRes.data)
117
+ if (res.code === '200') {
118
+ const faceInfo = res.result.faceInfo || {}
119
+ const backInfo = res.result.backInfo || {}
120
+ result = {
121
+ faceInfo: {
122
+ name: allTrim(faceInfo.name || ''),
123
+ certNo: allTrim(faceInfo.num || ''),
124
+ address: allTrim(faceInfo.address || ''),
125
+ },
126
+ backInfo: {
127
+ startDate: backInfo?.startDate || '',
128
+ endDate: backInfo?.endDate || ''
129
+ },
130
+ fileUploadVO: res.result.fileUploadVO || {},
131
+ }
132
+ console.log('===识别', result)
133
+ if (props.side === 'face' && !result.faceInfo.name && !result.faceInfo.certNo) {
134
+ showToast({ title: '识别失败,请重试', icon: 'none' })
135
+ }
136
+ if (props.side === 'back' && !result.backInfo?.startDate && !result.backInfo?.endDate) {
137
+ showToast({ title: '识别失败,请重试', icon: 'none' })
138
+ }
139
+ } else {
140
+ showToast({
141
+ title: res.msg,
142
+ icon: 'error',
143
+ })
144
+ }
145
+ } catch (err) {
146
+ hideLoading()
147
+ console.log(err)
148
+ }
149
+ emits('complete', result)
150
+ }
151
+
152
+
153
+ // 上传图片操作面板
154
+ const activeSheetVisible = ref(false)
155
+ const actionSheetMenus = [
156
+ {
157
+ name: '拍摄',
158
+ type: 'camera',
159
+ },
160
+ {
161
+ name: '从相册选择',
162
+ type: 'album',
163
+ },
164
+ {
165
+ name: '从聊天会话选择',
166
+ type: 'message',
167
+ },
168
+ ]
169
+ if (Taro.getEnv() === 'WEB') {
170
+ actionSheetMenus.pop()
171
+ }
172
+
173
+ // 选择图像上传
174
+ async function chooseImages(item: any) {
175
+ if (['camera', 'album'].includes(item.type)) {
176
+ const csRes = await chooseMedia({
177
+ count: 1,
178
+ sourceType: [item.type], // "camera" | "album"
179
+ maxDuration: 60, // 使用duration属性判断是图片还是视频,图片没有该属性
180
+ })
181
+
182
+ onUploadFile(csRes)
183
+ } else {
184
+ const csRes = await chooseMessageFile({
185
+ count: 1,
186
+ type: 'image',
187
+ })
188
+
189
+ onUploadFile(csRes)
190
+ }
191
+ }
192
+
193
+ async function onPhotograph() {
194
+ if (props.disabled) return
195
+
196
+ if (Taro.getEnv() === 'WEB') {
197
+ const csRes = await chooseMedia({
198
+ count: 1,
199
+ sourceType: ['album'], // "camera" | "album"
200
+ maxDuration: 60, // 使用duration属性判断是图片还是视频,图片没有该属性
201
+ })
202
+
203
+ onUploadFile(csRes)
204
+ return
205
+ }
206
+
207
+ activeSheetVisible.value = true
208
+ }
209
+ </script>
210
+
211
+ <style lang="scss">
212
+ .ocr-icon {
213
+ width: 24px;
214
+ height: 24px;
215
+ display: inline-flex;
216
+ align-items: center;
217
+
218
+ .ns-icon {
219
+ width: 24px;
220
+ height: 24px;
221
+ }
222
+
223
+ &.disabled {
224
+ .ns-icon {
225
+ filter: brightness(1.5) grayscale(1);
226
+ }
227
+ }
228
+ }
229
+ </style>
@@ -1,85 +1,85 @@
1
- <template>
2
- <div :class="[
3
- 'page-header',
4
- `color-mode-${colorMode}`
5
- ]" :style="cssVars">
6
- <h1 class="page-title" v-if="title">{{ title }}</h1>
7
- <view class="back-button" v-track-click="'页面头部-返回'" @click="onBackButtonClick"></view>
8
- <slot></slot>
9
- </div>
10
- </template>
11
-
12
- <script lang="ts" setup>
13
- import { useSafeArea } from '../composables'
14
-
15
-
16
- const safeArea = useSafeArea()
17
-
18
- const cssVars = {
19
- '--top': `${safeArea.status}px`,
20
- '--height': `${safeArea.nav}px`
21
- }
22
-
23
- export type PageHeaderColorMode = 'light' | 'dark'
24
-
25
- export interface PageHeaderProps {
26
- title?: string,
27
- colorMode?: PageHeaderColorMode
28
- }
29
-
30
- const emit = defineEmits<{
31
- (event: 'close'): void
32
- }>()
33
-
34
- withDefaults(
35
- defineProps<PageHeaderProps>(), {
36
- title: '',
37
- colorMode: 'light'
38
- }
39
- )
40
-
41
- const onBackButtonClick = () => {
42
- emit('close')
43
- }
44
- </script>
45
-
46
- <style lang="scss">
47
- .page-header {
48
- display: flex;
49
- position: relative;
50
- align-items: center;
51
- padding-top: var(--top);
52
- min-height: var(--height);
53
-
54
- .page-title {
55
- position: absolute;
56
- font-size: 18px;
57
- height: var(--height);
58
- line-height: var(--height);
59
- top: var(--top);
60
- width: 100%;
61
- text-align: center;
62
- margin: 0;
63
- }
64
-
65
- .back-button {
66
- position: absolute;
67
- top: var(--top);
68
- left: 10px;
69
- width: var(--height);
70
- height: var(--height);
71
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg3OCA0MUw0MC45OTk5IDQxTDQwLjk5OTkgMUwwLjk5OTg3OCAxTDAuOTk5ODc4IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTMzIDE4Ljk0NzdDMTEuODYzMyAyMC4wMTQ1IDExLjgxMiAyMS43OTU0IDEyLjg3ODggMjIuOTI1NUwyNy45MTA1IDM3LjEzNDVDMjguNjkyNSAzNy44NzM0IDI5LjkyNTUgMzcuODM4NCAzMC42NjQ0IDM3LjA1NjRDMzEuMzY4MSAzNi4zMTE2IDMxLjM2OTkgMzUuMTU3OSAzMC42OTI5IDM0LjQxMTRMMTYuNTAxMiAyMC45OTM5TDMwLjU4NTcgNy42OTc4NUMzMS4zMzA4IDYuOTk0NDkgMzEuMjk4MiA1LjcyNzk1IDMwLjY2NDkgNC45NDQwMkMyOS45NjE2IDQuMTk4OTUgMjguODA5OCA0LjEzMTI5IDI4LjAyNTkgNC43NjQ1MkwxMi45OTMzIDE4Ljk0NzdaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
72
- background-size: 50%;
73
- background-repeat: no-repeat;
74
- background-position: center center;
75
- }
76
-
77
- &.color-mode-dark {
78
- color: var(--text-color-dark-mode, #fff);
79
-
80
- .back-button {
81
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg0NyA0MUw0MC45OTk4IDQxTDQwLjk5OTggMUwwLjk5OTg0NyAxTDAuOTk5ODQ3IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTM0IDE4Ljk0NzVDMTEuODYzNCAyMC4wMTQzIDExLjgxMjEgMjEuNzk1MiAxMi44Nzg5IDIyLjkyNTJMMjcuOTEwNiAzNy4xMzQzQzI4LjY5MjcgMzcuODczMSAyOS45MjU2IDM3LjgzODIgMzAuNjY0NSAzNy4wNTYyQzMxLjM2ODIgMzYuMzExNCAzMS4zNyAzNS4xNTc2IDMwLjY5MyAzNC40MTExTDE2LjUwMTMgMjAuOTkzNkwzMC41ODU4IDcuNjk3NjFDMzEuMzMwOSA2Ljk5NDI0IDMxLjI5ODMgNS43Mjc3MSAzMC42NjUxIDQuOTQzNzdDMjkuOTYxNyA0LjE5ODcxIDI4LjgwOTkgNC4xMzEwNCAyOC4wMjYgNC43NjQyN0wxMi45OTM0IDE4Ljk0NzVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
82
- }
83
- }
84
- }
1
+ <template>
2
+ <div :class="[
3
+ 'page-header',
4
+ `color-mode-${colorMode}`
5
+ ]" :style="cssVars">
6
+ <h1 class="page-title" v-if="title">{{ title }}</h1>
7
+ <view class="back-button" v-track-click="'页面头部-返回'" @click="onBackButtonClick"></view>
8
+ <slot></slot>
9
+ </div>
10
+ </template>
11
+
12
+ <script lang="ts" setup>
13
+ import { useSafeArea } from '../composables'
14
+
15
+
16
+ const safeArea = useSafeArea()
17
+
18
+ const cssVars = {
19
+ '--top': `${safeArea.status}px`,
20
+ '--height': `${safeArea.nav}px`
21
+ }
22
+
23
+ export type PageHeaderColorMode = 'light' | 'dark'
24
+
25
+ export interface PageHeaderProps {
26
+ title?: string,
27
+ colorMode?: PageHeaderColorMode
28
+ }
29
+
30
+ const emit = defineEmits<{
31
+ (event: 'close'): void
32
+ }>()
33
+
34
+ withDefaults(
35
+ defineProps<PageHeaderProps>(), {
36
+ title: '',
37
+ colorMode: 'light'
38
+ }
39
+ )
40
+
41
+ const onBackButtonClick = () => {
42
+ emit('close')
43
+ }
44
+ </script>
45
+
46
+ <style lang="scss">
47
+ .page-header {
48
+ display: flex;
49
+ position: relative;
50
+ align-items: center;
51
+ padding-top: var(--top);
52
+ min-height: var(--height);
53
+
54
+ .page-title {
55
+ position: absolute;
56
+ font-size: 18px;
57
+ height: var(--height);
58
+ line-height: var(--height);
59
+ top: var(--top);
60
+ width: 100%;
61
+ text-align: center;
62
+ margin: 0;
63
+ }
64
+
65
+ .back-button {
66
+ position: absolute;
67
+ top: var(--top);
68
+ left: 10px;
69
+ width: var(--height);
70
+ height: var(--height);
71
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg3OCA0MUw0MC45OTk5IDQxTDQwLjk5OTkgMUwwLjk5OTg3OCAxTDAuOTk5ODc4IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTMzIDE4Ljk0NzdDMTEuODYzMyAyMC4wMTQ1IDExLjgxMiAyMS43OTU0IDEyLjg3ODggMjIuOTI1NUwyNy45MTA1IDM3LjEzNDVDMjguNjkyNSAzNy44NzM0IDI5LjkyNTUgMzcuODM4NCAzMC42NjQ0IDM3LjA1NjRDMzEuMzY4MSAzNi4zMTE2IDMxLjM2OTkgMzUuMTU3OSAzMC42OTI5IDM0LjQxMTRMMTYuNTAxMiAyMC45OTM5TDMwLjU4NTcgNy42OTc4NUMzMS4zMzA4IDYuOTk0NDkgMzEuMjk4MiA1LjcyNzk1IDMwLjY2NDkgNC45NDQwMkMyOS45NjE2IDQuMTk4OTUgMjguODA5OCA0LjEzMTI5IDI4LjAyNTkgNC43NjQ1MkwxMi45OTMzIDE4Ljk0NzdaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
72
+ background-size: 50%;
73
+ background-repeat: no-repeat;
74
+ background-position: center center;
75
+ }
76
+
77
+ &.color-mode-dark {
78
+ color: var(--text-color-dark-mode, #fff);
79
+
80
+ .back-button {
81
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjk5OTg0NyA0MUw0MC45OTk4IDQxTDQwLjk5OTggMUwwLjk5OTg0NyAxTDAuOTk5ODQ3IDQxWiIgZmlsbD0iI0Q4RDhEOCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi45OTM0IDE4Ljk0NzVDMTEuODYzNCAyMC4wMTQzIDExLjgxMjEgMjEuNzk1MiAxMi44Nzg5IDIyLjkyNTJMMjcuOTEwNiAzNy4xMzQzQzI4LjY5MjcgMzcuODczMSAyOS45MjU2IDM3LjgzODIgMzAuNjY0NSAzNy4wNTYyQzMxLjM2ODIgMzYuMzExNCAzMS4zNyAzNS4xNTc2IDMwLjY5MyAzNC40MTExTDE2LjUwMTMgMjAuOTkzNkwzMC41ODU4IDcuNjk3NjFDMzEuMzMwOSA2Ljk5NDI0IDMxLjI5ODMgNS43Mjc3MSAzMC42NjUxIDQuOTQzNzdDMjkuOTYxNyA0LjE5ODcxIDI4LjgwOTkgNC4xMzEwNCAyOC4wMjYgNC43NjQyN0wxMi45OTM0IDE4Ljk0NzVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLW9wYWNpdHk9IjAuMDEiLz4KPC9zdmc+Cg==");
82
+ }
83
+ }
84
+ }
85
85
  </style>
@@ -1,8 +1,8 @@
1
- import AppDrawer from './AppDrawer.vue'
2
- import PageHeader from './PageHeader.vue'
3
- import AppVerify from './AppVerify.vue'
4
- import DeviceVersion from './DeviceVersion.vue'
5
- import OcrIcon from './OcrIcon.vue'
6
- import OcrBusinessLicense from './OcrBusinessLicense.vue'
7
-
8
- export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBusinessLicense }
1
+ import AppDrawer from './AppDrawer.vue'
2
+ import PageHeader from './PageHeader.vue'
3
+ import AppVerify from './AppVerify.vue'
4
+ import DeviceVersion from './DeviceVersion.vue'
5
+ import OcrIcon from './OcrIcon.vue'
6
+ import OcrBusinessLicense from './OcrBusinessLicense.vue'
7
+
8
+ export { AppDrawer, PageHeader, DeviceVersion, AppVerify, OcrIcon, OcrBusinessLicense }
@@ -1,9 +1,9 @@
1
- export * from './useSafeArea'
2
- export * from './useTabbar'
3
- export * from './useCountdown'
4
- export * from './useValidator'
5
- export * from './useEncode'
6
- export * from './useUpload'
7
- export * from './useCrypto'
8
- export * from './useLogger'
9
- export * from './useWxAuth'
1
+ export * from './useSafeArea'
2
+ export * from './useTabbar'
3
+ export * from './useCountdown'
4
+ export * from './useValidator'
5
+ export * from './useEncode'
6
+ export * from './useUpload'
7
+ export * from './useCrypto'
8
+ export * from './useLogger'
9
+ export * from './useWxAuth'