@uxda/appkit 4.3.1 → 4.3.3

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 -0
  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 +48 -3
  7. package/dist/assets/asset-DcH8Kg-2 +1 -0
  8. package/dist/index.js +147 -78
  9. package/package.json +79 -82
  10. package/project.config.json +15 -15
  11. package/project.tt.json +13 -13
  12. package/rollup.config.mjs +78 -78
  13. package/src/Appkit.ts +72 -72
  14. package/src/balance/api/endpoints.ts +133 -133
  15. package/src/balance/api/index.ts +118 -118
  16. package/src/balance/components/AccountView.vue +770 -770
  17. package/src/balance/components/BalanceCard.vue +210 -210
  18. package/src/balance/components/BalanceReminder.vue +84 -84
  19. package/src/balance/components/ConsumptionFilter.vue +218 -218
  20. package/src/balance/components/ConsumptionRules.vue +68 -68
  21. package/src/balance/components/DateFilter.vue +259 -259
  22. package/src/balance/components/DateRange.vue +111 -111
  23. package/src/balance/components/ListFilter.vue +62 -62
  24. package/src/balance/components/ListFilterPicker.vue +191 -191
  25. package/src/balance/components/PromoterCard.vue +307 -307
  26. package/src/balance/components/SecondBalance.vue +77 -77
  27. package/src/balance/components/Tip.vue +45 -45
  28. package/src/balance/components/index.ts +8 -8
  29. package/src/balance/types.ts +99 -99
  30. package/src/components/bt-cropper/index.vue +730 -730
  31. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  32. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  33. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  34. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  35. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  36. package/src/components/bt-cropper/utils/ratio.js +3 -3
  37. package/src/components/bt-cropper/utils/tools.js +25 -25
  38. package/src/components/dd-area/index.vue +225 -225
  39. package/src/components/dd-icon/doc.md +21 -21
  40. package/src/components/dd-icon/index.vue +23 -23
  41. package/src/components/dd-notice-bar/index.vue +78 -78
  42. package/src/components/dd-search/doc.md +34 -34
  43. package/src/components/dd-search/index.vue +168 -168
  44. package/src/components/dd-selector/index.vue +124 -124
  45. package/src/components/dd-skeleton/doc.md +19 -19
  46. package/src/components/dd-skeleton/index.vue +36 -36
  47. package/src/global.ts +6 -6
  48. package/src/index.ts +101 -101
  49. package/src/main.scss +1 -1
  50. package/src/notice/api/endpoints.ts +54 -54
  51. package/src/notice/api/index.ts +121 -121
  52. package/src/notice/components/NoticeBanner.vue +247 -247
  53. package/src/notice/components/NoticeEntry.vue +99 -99
  54. package/src/notice/components/NoticeList.vue +311 -311
  55. package/src/notice/components/NoticeList2.vue +398 -240
  56. package/src/notice/components/NoticePopup.vue +163 -163
  57. package/src/notice/components/index.ts +6 -6
  58. package/src/notice/components/useCommonList.ts +86 -86
  59. package/src/notice/components/useNotice.ts +35 -35
  60. package/src/notice/index.ts +1 -1
  61. package/src/notice/types.ts +25 -25
  62. package/src/payment/api/config.ts +7 -7
  63. package/src/payment/api/endpoints.ts +96 -96
  64. package/src/payment/api/index.ts +107 -107
  65. package/src/payment/components/AmountPicker.vue +90 -90
  66. package/src/payment/components/RechargeResult.vue +69 -69
  67. package/src/payment/components/RechargeView.vue +191 -191
  68. package/src/payment/components/RightsPicker.vue +105 -105
  69. package/src/payment/components/TradeView.vue +363 -363
  70. package/src/payment/components/UserAgreement.vue +234 -234
  71. package/src/payment/components/index.ts +22 -22
  72. package/src/payment/index.ts +5 -5
  73. package/src/payment/services/index.ts +16 -16
  74. package/src/payment/services/invoke-recharge.ts +25 -25
  75. package/src/payment/services/request-payment.ts +130 -130
  76. package/src/payment/types.ts +33 -33
  77. package/src/register/components/SelfRegistration.vue +233 -233
  78. package/src/register/components/index.ts +2 -2
  79. package/src/scenarios/components/SharePoster.vue +364 -364
  80. package/src/scenarios/components/index.ts +2 -2
  81. package/src/scenarios/components/poster-paste.vue +93 -93
  82. package/src/scenarios/components/share-poster.md +273 -273
  83. package/src/shared/components/AppDrawer.vue +53 -53
  84. package/src/shared/components/AppVerify.vue +128 -128
  85. package/src/shared/components/DeviceVersion.vue +78 -78
  86. package/src/shared/components/EmptyView.vue +33 -33
  87. package/src/shared/components/OcrBusinessLicense.vue +137 -137
  88. package/src/shared/components/OcrIcon.vue +229 -229
  89. package/src/shared/components/PageHeader.vue +84 -84
  90. package/src/shared/components/index.ts +8 -8
  91. package/src/shared/composables/index.ts +9 -9
  92. package/src/shared/composables/useAmount.ts +46 -46
  93. package/src/shared/composables/useCountdown.ts +46 -46
  94. package/src/shared/composables/useCrypto.ts +76 -76
  95. package/src/shared/composables/useDeviceEnv.ts +26 -26
  96. package/src/shared/composables/useDragBox.ts +97 -97
  97. package/src/shared/composables/useEncode.ts +43 -43
  98. package/src/shared/composables/useLogger.ts +144 -144
  99. package/src/shared/composables/useSafeArea.ts +46 -46
  100. package/src/shared/composables/useTabbar.ts +24 -24
  101. package/src/shared/composables/useUpload.ts +61 -61
  102. package/src/shared/composables/useValidator.ts +32 -32
  103. package/src/shared/composables/useWxAuth.ts +48 -48
  104. package/src/shared/http/Http.ts +148 -148
  105. package/src/shared/http/index.ts +1 -1
  106. package/src/shared/http/types.ts +163 -163
  107. package/src/shared/index.ts +9 -9
  108. package/src/shared/tracking/directives/index.ts +40 -40
  109. package/src/shared/tracking/examples/page-tracking-template.vue +27 -27
  110. package/src/shared/weixin/index.ts +9 -9
  111. package/src/shared/weixin/jssdk.ts +103 -103
  112. package/src/shared/weixin/payment.ts +38 -38
  113. package/src/styles/vars.scss +3 -3
  114. package/src/user/api/endpoints.ts +17 -17
  115. package/src/user/api/index.ts +123 -123
  116. package/src/user/components/LoginSetting.vue +114 -114
  117. package/src/user/components/UserAuth.vue +218 -218
  118. package/src/user/components/UserBinding.vue +277 -277
  119. package/src/user/components/UserBindingSuccess.vue +80 -80
  120. package/src/user/components/UserEntry.vue +139 -139
  121. package/src/user/components/UserFeedback.vue +427 -427
  122. package/src/user/components/UserFeedbackEntry.vue +175 -175
  123. package/src/user/components/UserHeadCrop.vue +65 -65
  124. package/src/user/components/UserInfo.vue +709 -709
  125. package/src/user/components/UserResourceEmpty.vue +75 -75
  126. package/src/user/components/index.ts +23 -23
  127. package/src/user/index.ts +1 -1
  128. package/src/utils/utils.ts +33 -33
  129. package/tsconfig.json +30 -30
  130. package/types/global.d.ts +22 -22
  131. package/types/vue.d.ts +10 -10
@@ -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'