@uxda/appkit 4.2.82 → 4.2.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/.eslintrc.mjs +7 -7
  2. package/README.md +187 -187
  3. package/babel.config.js +12 -12
  4. package/dist/appkit.css +41 -3
  5. package/dist/index.js +994 -535
  6. package/package.json +81 -81
  7. package/project.config.json +15 -15
  8. package/project.tt.json +13 -13
  9. package/rollup.config.mjs +77 -77
  10. package/src/Appkit.ts +67 -67
  11. package/src/balance/api/endpoints.ts +133 -133
  12. package/src/balance/api/index.ts +112 -106
  13. package/src/balance/components/AccountView.vue +773 -773
  14. package/src/balance/components/BalanceCard.vue +210 -210
  15. package/src/balance/components/BalanceReminder.vue +84 -84
  16. package/src/balance/components/ConsumptionFilter.vue +218 -218
  17. package/src/balance/components/ConsumptionRules.vue +68 -68
  18. package/src/balance/components/DateFilter.vue +259 -259
  19. package/src/balance/components/DateRange.vue +111 -111
  20. package/src/balance/components/ListFilter.vue +62 -62
  21. package/src/balance/components/ListFilterPicker.vue +191 -191
  22. package/src/balance/components/PromoterCard.vue +310 -310
  23. package/src/balance/components/SecondBalance.vue +77 -77
  24. package/src/balance/components/Tip.vue +45 -45
  25. package/src/balance/components/index.ts +8 -8
  26. package/src/balance/types.ts +99 -99
  27. package/src/components/bt-cropper/index.vue +730 -730
  28. package/src/components/bt-cropper/utils/calcCropper.js +42 -42
  29. package/src/components/bt-cropper/utils/calcImagePosition.js +23 -23
  30. package/src/components/bt-cropper/utils/calcImageSize.js +37 -37
  31. package/src/components/bt-cropper/utils/calcPointDistance.js +12 -12
  32. package/src/components/bt-cropper/utils/calcRightAndBottom.js +7 -7
  33. package/src/components/bt-cropper/utils/ratio.js +3 -3
  34. package/src/components/bt-cropper/utils/tools.js +25 -25
  35. package/src/components/dd-area/index.vue +225 -225
  36. package/src/components/dd-icon/doc.md +21 -21
  37. package/src/components/dd-icon/index.vue +23 -23
  38. package/src/components/dd-notice-bar/index.vue +78 -78
  39. package/src/components/dd-search/doc.md +34 -34
  40. package/src/components/dd-search/index.vue +168 -168
  41. package/src/components/dd-selector/index.vue +124 -124
  42. package/src/components/dd-skeleton/doc.md +19 -19
  43. package/src/components/dd-skeleton/index.vue +36 -36
  44. package/src/global.ts +6 -6
  45. package/src/index.ts +93 -93
  46. package/src/main.scss +1 -1
  47. package/src/notice/api/endpoints.ts +54 -17
  48. package/src/notice/api/index.ts +115 -106
  49. package/src/notice/components/NoticeBanner.vue +247 -247
  50. package/src/notice/components/NoticeEntry.vue +99 -99
  51. package/src/notice/components/NoticeList.vue +311 -311
  52. package/src/notice/components/NoticeList2.vue +243 -0
  53. package/src/notice/components/NoticePopup.vue +163 -163
  54. package/src/notice/components/index.ts +6 -5
  55. package/src/notice/components/useCommonList.ts +86 -86
  56. package/src/notice/components/useNotice.ts +35 -35
  57. package/src/notice/index.ts +1 -1
  58. package/src/notice/types.ts +25 -25
  59. package/src/payment/api/config.ts +7 -7
  60. package/src/payment/api/endpoints.ts +95 -95
  61. package/src/payment/api/index.ts +101 -101
  62. package/src/payment/components/AmountPicker.vue +90 -90
  63. package/src/payment/components/RechargeResult.vue +69 -69
  64. package/src/payment/components/RechargeView.vue +190 -190
  65. package/src/payment/components/RightsPicker.vue +105 -105
  66. package/src/payment/components/TradeView.vue +363 -363
  67. package/src/payment/components/UserAgreement.vue +234 -234
  68. package/src/payment/components/index.ts +22 -22
  69. package/src/payment/index.ts +5 -5
  70. package/src/payment/services/index.ts +16 -16
  71. package/src/payment/services/invoke-recharge.ts +25 -25
  72. package/src/payment/services/request-payment.ts +130 -130
  73. package/src/payment/types.ts +32 -32
  74. package/src/register/components/SelfRegistration.vue +233 -233
  75. package/src/register/components/index.ts +2 -2
  76. package/src/scenarios/components/SharePoster.vue +364 -364
  77. package/src/scenarios/components/index.ts +2 -2
  78. package/src/scenarios/components/poster-paste.vue +93 -93
  79. package/src/scenarios/components/share-poster.md +273 -273
  80. package/src/shared/components/AppDrawer.vue +53 -53
  81. package/src/shared/components/AppVerify.vue +128 -128
  82. package/src/shared/components/DeviceVersion.vue +78 -78
  83. package/src/shared/components/EmptyView.vue +33 -33
  84. package/src/shared/components/OcrBusinessLicense.vue +137 -137
  85. package/src/shared/components/OcrIcon.vue +229 -229
  86. package/src/shared/components/PageHeader.vue +84 -84
  87. package/src/shared/components/index.ts +8 -8
  88. package/src/shared/composables/index.ts +9 -9
  89. package/src/shared/composables/useAmount.ts +46 -46
  90. package/src/shared/composables/useCountdown.ts +46 -46
  91. package/src/shared/composables/useCrypto.ts +76 -76
  92. package/src/shared/composables/useDeviceEnv.ts +11 -11
  93. package/src/shared/composables/useDragBox.ts +97 -97
  94. package/src/shared/composables/useEncode.ts +43 -43
  95. package/src/shared/composables/useLogger.ts +131 -131
  96. package/src/shared/composables/useSafeArea.ts +46 -46
  97. package/src/shared/composables/useTabbar.ts +24 -24
  98. package/src/shared/composables/useUpload.ts +61 -61
  99. package/src/shared/composables/useValidator.ts +32 -32
  100. package/src/shared/composables/useWxAuth.ts +48 -48
  101. package/src/shared/http/Http.ts +148 -146
  102. package/src/shared/http/index.ts +1 -1
  103. package/src/shared/http/types.ts +163 -160
  104. package/src/shared/index.ts +8 -8
  105. package/src/shared/weixin/index.ts +9 -9
  106. package/src/shared/weixin/jssdk.ts +103 -103
  107. package/src/shared/weixin/payment.ts +38 -38
  108. package/src/styles/vars.scss +3 -3
  109. package/src/user/api/endpoints.ts +17 -17
  110. package/src/user/api/index.ts +117 -111
  111. package/src/user/components/LoginSetting.vue +114 -114
  112. package/src/user/components/UserAuth.vue +220 -220
  113. package/src/user/components/UserBinding.vue +277 -277
  114. package/src/user/components/UserBindingSuccess.vue +80 -80
  115. package/src/user/components/UserEntry.vue +139 -139
  116. package/src/user/components/UserFeedback.vue +427 -427
  117. package/src/user/components/UserFeedbackEntry.vue +175 -175
  118. package/src/user/components/UserHeadCrop.vue +65 -65
  119. package/src/user/components/UserInfo.vue +708 -708
  120. package/src/user/components/UserResourceEmpty.vue +75 -75
  121. package/src/user/components/index.ts +23 -23
  122. package/src/user/index.ts +1 -1
  123. package/src/utils/utils.ts +28 -28
  124. package/tsconfig.json +30 -30
  125. package/types/global.d.ts +22 -22
  126. package/types/vue.d.ts +10 -10
  127. /package/dist/assets/{asset-DcH8Kg-2 → asset-3B_CoPto} +0 -0
@@ -1,229 +1,229 @@
1
- <template>
2
- <div class="ocr-icon" :class="[disabled ? 'disabled' : '']" @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' : '']" @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" @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" @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'