af-mobile-client-vue3 1.4.60 → 1.4.62
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.
- package/package.json +1 -1
- package/src/components/data/FilePreview/index.vue +155 -141
- package/src/components/data/XOlMap/types.ts +1 -1
- package/src/views/component/FilePreviewView/index.vue +31 -28
- package/src/views/component/XCellListView/index.vue +78 -2
- package/src/views/component/XFormView/index.vue +28 -13
- package/src/views/component/XOlMapView/XLocationPicker/index.vue +118 -118
package/package.json
CHANGED
|
@@ -1,141 +1,155 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { getConfigByNameAsync } from '@af-mobile-client-vue3/services/api/common'
|
|
3
|
-
import { Base64 } from 'js-base64'
|
|
4
|
-
import { ref } from 'vue'
|
|
5
|
-
|
|
6
|
-
interface FilePreviewInitOptions {
|
|
7
|
-
/** 预览文件完整路径（含后缀） */
|
|
8
|
-
path: string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
|
|
12
|
-
const VIDEO_SUFFIX_ARRAY = ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
|
|
13
|
-
|
|
14
|
-
const previewDocService = ref('')
|
|
15
|
-
const fileServer = ref('')
|
|
16
|
-
const previewDocLoading = ref(true)
|
|
17
|
-
const previewDocUrl = ref('')
|
|
18
|
-
const previewMode = ref<'doc' | 'image' | 'video'>('doc')
|
|
19
|
-
const previewImageSrc = ref('')
|
|
20
|
-
const previewVideoSrc = ref('')
|
|
21
|
-
const pathError = ref(false)
|
|
22
|
-
|
|
23
|
-
async function preview(path: string) {
|
|
24
|
-
if (!path) {
|
|
25
|
-
pathError.value = true
|
|
26
|
-
return
|
|
27
|
-
}
|
|
28
|
-
pathError.value = false
|
|
29
|
-
|
|
30
|
-
try {
|
|
31
|
-
const res: any = await getConfigByNameAsync('previewDocServiceConfig')
|
|
32
|
-
if (!res?.fileServer)
|
|
33
|
-
throw new Error('文件预览服务配置错误')
|
|
34
|
-
previewDocService.value = res.previewDocService
|
|
35
|
-
fileServer.value = res.fileServer
|
|
36
|
-
}
|
|
37
|
-
catch (error) {
|
|
38
|
-
console.warn('获取文件预览服务配置失败，使用默认配置', error)
|
|
39
|
-
}
|
|
40
|
-
previewGen(path)
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function previewGen(path: string) {
|
|
44
|
-
previewDocLoading.value = true
|
|
45
|
-
if (isImage(path)) {
|
|
46
|
-
previewImageSrc.value = path
|
|
47
|
-
previewMode.value = 'image'
|
|
48
|
-
return
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
if (isVideo(path)) {
|
|
52
|
-
previewVideoSrc.value = path
|
|
53
|
-
previewMode.value = 'video'
|
|
54
|
-
return
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.preview-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { getConfigByNameAsync } from '@af-mobile-client-vue3/services/api/common'
|
|
3
|
+
import { Base64 } from 'js-base64'
|
|
4
|
+
import { ref } from 'vue'
|
|
5
|
+
|
|
6
|
+
interface FilePreviewInitOptions {
|
|
7
|
+
/** 预览文件完整路径（含后缀） */
|
|
8
|
+
path: string
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
|
|
12
|
+
const VIDEO_SUFFIX_ARRAY = ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
|
|
13
|
+
|
|
14
|
+
const previewDocService = ref('')
|
|
15
|
+
const fileServer = ref('')
|
|
16
|
+
const previewDocLoading = ref(true)
|
|
17
|
+
const previewDocUrl = ref('')
|
|
18
|
+
const previewMode = ref<'http' | 'doc' | 'image' | 'video'>('doc')
|
|
19
|
+
const previewImageSrc = ref('')
|
|
20
|
+
const previewVideoSrc = ref('')
|
|
21
|
+
const pathError = ref(false)
|
|
22
|
+
|
|
23
|
+
async function preview(path: string) {
|
|
24
|
+
if (!path) {
|
|
25
|
+
pathError.value = true
|
|
26
|
+
return
|
|
27
|
+
}
|
|
28
|
+
pathError.value = false
|
|
29
|
+
|
|
30
|
+
try {
|
|
31
|
+
const res: any = await getConfigByNameAsync('previewDocServiceConfig')
|
|
32
|
+
if (!res?.fileServer)
|
|
33
|
+
throw new Error('文件预览服务配置错误')
|
|
34
|
+
previewDocService.value = res.previewDocService
|
|
35
|
+
fileServer.value = res.fileServer
|
|
36
|
+
}
|
|
37
|
+
catch (error) {
|
|
38
|
+
console.warn('获取文件预览服务配置失败，使用默认配置', error)
|
|
39
|
+
}
|
|
40
|
+
previewGen(path)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function previewGen(path: string) {
|
|
44
|
+
previewDocLoading.value = true
|
|
45
|
+
if (isImage(path)) {
|
|
46
|
+
previewImageSrc.value = path
|
|
47
|
+
previewMode.value = 'image'
|
|
48
|
+
return
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
if (isVideo(path)) {
|
|
52
|
+
previewVideoSrc.value = path
|
|
53
|
+
previewMode.value = 'video'
|
|
54
|
+
return
|
|
55
|
+
}
|
|
56
|
+
if (isHttp(path)) {
|
|
57
|
+
previewMode.value = 'doc'
|
|
58
|
+
const previewUrl = `${previewDocService.value}${encodeURIComponent(Base64.encode(`${path}`))}`
|
|
59
|
+
if (previewDocUrl.value !== previewUrl) {
|
|
60
|
+
previewDocLoading.value = true
|
|
61
|
+
previewDocUrl.value = previewUrl
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
previewDocLoading.value = false
|
|
65
|
+
}
|
|
66
|
+
return
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
previewMode.value = 'doc'
|
|
70
|
+
const previewUrl = `${previewDocService.value}${encodeURIComponent(Base64.encode(`${fileServer.value}${path}`))}`
|
|
71
|
+
if (previewDocUrl.value !== previewUrl) {
|
|
72
|
+
previewDocLoading.value = true
|
|
73
|
+
previewDocUrl.value = previewUrl
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
previewDocLoading.value = false
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function isImage(path: string) {
|
|
81
|
+
const suffix = path.toLowerCase().split('.').pop()
|
|
82
|
+
return suffix ? IMAGE_SUFFIX_ARRAY.includes(suffix) : false
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function isVideo(path: string) {
|
|
86
|
+
const suffix = path.toLowerCase().split('.').pop()
|
|
87
|
+
return suffix ? VIDEO_SUFFIX_ARRAY.includes(suffix) : false
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
function isHttp(path: string) {
|
|
91
|
+
return path.startsWith('http://') || path.startsWith('https://')
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
async function init(options: FilePreviewInitOptions) {
|
|
95
|
+
await preview(options.path)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
defineExpose({
|
|
99
|
+
init,
|
|
100
|
+
})
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<template>
|
|
104
|
+
<div v-if="!pathError">
|
|
105
|
+
<div v-if="previewMode === 'doc'" class="preview-doc-container">
|
|
106
|
+
<a-spin size="large" :spinning="previewDocLoading" />
|
|
107
|
+
<iframe
|
|
108
|
+
v-show="!previewDocLoading"
|
|
109
|
+
:src="previewDocUrl"
|
|
110
|
+
width="100%"
|
|
111
|
+
height="100%"
|
|
112
|
+
frameborder="0"
|
|
113
|
+
@load="previewDocLoading = false"
|
|
114
|
+
/>
|
|
115
|
+
</div>
|
|
116
|
+
<div v-else-if="previewMode === 'image'" class="preview-image-wrapper">
|
|
117
|
+
<img :src="previewImageSrc" alt="image" class="preview-image">
|
|
118
|
+
</div>
|
|
119
|
+
<div v-else-if="previewMode === 'video'" class="preview-video-wrapper">
|
|
120
|
+
<video
|
|
121
|
+
class="preview-video"
|
|
122
|
+
controls
|
|
123
|
+
:src="previewVideoSrc"
|
|
124
|
+
/>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
<a-empty v-else description="文件路径为空" />
|
|
128
|
+
</template>
|
|
129
|
+
|
|
130
|
+
<style scoped>
|
|
131
|
+
.preview-doc-container {
|
|
132
|
+
height: 100%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.preview-image-wrapper,
|
|
136
|
+
.preview-video-wrapper {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
height: 100%;
|
|
141
|
+
background: #000000;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.preview-image {
|
|
145
|
+
max-width: 100%;
|
|
146
|
+
max-height: 100%;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.preview-video {
|
|
150
|
+
width: 100%;
|
|
151
|
+
max-height: 100%;
|
|
152
|
+
border: none;
|
|
153
|
+
background: #000;
|
|
154
|
+
}
|
|
155
|
+
</style>
|
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
|
|
3
|
-
import { onMounted, ref } from 'vue'
|
|
4
|
-
|
|
5
|
-
const previewDocType = ref('pdf')
|
|
6
|
-
const previewDocUrl = ref('/resource/af-revenue/pdf/e0a35f3414444d009cbce020af2e617d.pdf')
|
|
7
|
-
|
|
8
|
-
const filePreviewRef = ref<InstanceType<typeof FilePreview> | null>(null)
|
|
9
|
-
|
|
10
|
-
onMounted(() => {
|
|
11
|
-
filePreviewRef.value?.init({
|
|
12
|
-
path: '/resource/af-revenue/pdf/e0a35f3414444d009cbce020af2e617d.pdf',
|
|
13
|
-
})
|
|
14
|
-
})
|
|
15
|
-
</script>
|
|
16
|
-
|
|
17
|
-
<template>
|
|
18
|
-
<div>
|
|
19
|
-
<FilePreview
|
|
20
|
-
ref="filePreviewRef"
|
|
21
|
-
:key="`${previewDocType}-${previewDocUrl}`"
|
|
22
|
-
class="doc-preview-file"
|
|
23
|
-
/>
|
|
24
|
-
</div>
|
|
25
|
-
</template>
|
|
26
|
-
|
|
27
|
-
<style scoped lang="less">
|
|
28
|
-
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
|
|
3
|
+
import { onMounted, ref } from 'vue'
|
|
4
|
+
|
|
5
|
+
const previewDocType = ref('pdf')
|
|
6
|
+
const previewDocUrl = ref('/resource/af-revenue/pdf/e0a35f3414444d009cbce020af2e617d.pdf')
|
|
7
|
+
|
|
8
|
+
const filePreviewRef = ref<InstanceType<typeof FilePreview> | null>(null)
|
|
9
|
+
|
|
10
|
+
onMounted(() => {
|
|
11
|
+
filePreviewRef.value?.init({
|
|
12
|
+
path: '/resource/af-revenue/pdf/e0a35f3414444d009cbce020af2e617d.pdf',
|
|
13
|
+
})
|
|
14
|
+
})
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<template>
|
|
18
|
+
<div>
|
|
19
|
+
<FilePreview
|
|
20
|
+
ref="filePreviewRef"
|
|
21
|
+
:key="`${previewDocType}-${previewDocUrl}`"
|
|
22
|
+
class="doc-preview-file"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<style scoped lang="less">
|
|
28
|
+
.doc-preview-file {
|
|
29
|
+
height: 90vh;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -13,7 +13,83 @@ const router = useRouter()
|
|
|
13
13
|
|
|
14
14
|
// 简易crud表单测试
|
|
15
15
|
const configName = ref('ceshiCRUD')
|
|
16
|
-
const serviceName = ref('af-
|
|
16
|
+
const serviceName = ref('af-safecheck')
|
|
17
|
+
|
|
18
|
+
// 资源权限测试
|
|
19
|
+
// const configName = ref('crud_sources_test')
|
|
20
|
+
// const serviceName = ref('af-system')
|
|
21
|
+
|
|
22
|
+
// 实际业务测试
|
|
23
|
+
// const configName = ref('lngChargeAuditMobileCRUD')
|
|
24
|
+
// const serviceName = ref('af-gaslink')
|
|
25
|
+
|
|
26
|
+
// 跳转到详情页面
|
|
27
|
+
// function toDetail(item) {
|
|
28
|
+
// router.push({
|
|
29
|
+
// name: 'XCellDetailView',
|
|
30
|
+
// params: { id: item[idKey.value] }, // 如果使用命名路由，推荐使用路由参数而不是直接构建 URL
|
|
31
|
+
// query: {
|
|
32
|
+
// operName: item[operNameKey.value],
|
|
33
|
+
// method:item[methodKey.value],
|
|
34
|
+
// requestMethod:item[requestMethodKey.value],
|
|
35
|
+
// operatorType:item[operatorTypeKey.value],
|
|
36
|
+
// operUrl:item[operUrlKey.value],
|
|
37
|
+
// operIp:item[operIpKey.value],
|
|
38
|
+
// costTime:item[costTimeKey.value],
|
|
39
|
+
// operTime:item[operTimeKey.value],
|
|
40
|
+
//
|
|
41
|
+
// title: item[titleKey.value],
|
|
42
|
+
// businessType: item[businessTypeKey.value],
|
|
43
|
+
// status:item[statusKey.value]
|
|
44
|
+
// }
|
|
45
|
+
// })
|
|
46
|
+
// }
|
|
47
|
+
|
|
48
|
+
// 跳转到表单——以表单组来渲染纯表单
|
|
49
|
+
// function toDetail(item) {
|
|
50
|
+
// router.push({
|
|
51
|
+
// name: 'XFormGroupView',
|
|
52
|
+
// query: {
|
|
53
|
+
// id: item[idKey.value],
|
|
54
|
+
// // id: item.rr_id,
|
|
55
|
+
// // o_id: item.o_id,
|
|
56
|
+
// },
|
|
57
|
+
// })
|
|
58
|
+
// }
|
|
59
|
+
|
|
60
|
+
// 新增功能
|
|
61
|
+
// function addOption(totalCount) {
|
|
62
|
+
// router.push({
|
|
63
|
+
// name: 'XFormView',
|
|
64
|
+
// params: { id: totalCount, openid: totalCount },
|
|
65
|
+
// query: {
|
|
66
|
+
// configName: configName.value,
|
|
67
|
+
// serviceName: serviceName.value,
|
|
68
|
+
// mode: '新增',
|
|
69
|
+
// },
|
|
70
|
+
// })
|
|
71
|
+
// }
|
|
72
|
+
|
|
73
|
+
// 修改功能
|
|
74
|
+
// function updateRow(result) {
|
|
75
|
+
// router.push({
|
|
76
|
+
// name: 'XFormView',
|
|
77
|
+
// params: { id: result.o_id, openid: result.o_id },
|
|
78
|
+
// query: {
|
|
79
|
+
// configName: configName.value,
|
|
80
|
+
// serviceName: serviceName.value,
|
|
81
|
+
// mode: '修改',
|
|
82
|
+
// },
|
|
83
|
+
// })
|
|
84
|
+
// }
|
|
85
|
+
|
|
86
|
+
// 删除功能
|
|
87
|
+
// function deleteRow(result) {
|
|
88
|
+
// emit('deleteRow', result.o_id)
|
|
89
|
+
// }
|
|
90
|
+
// const fixQueryForm = ref({
|
|
91
|
+
// f_operator_id: '487184754014158848',
|
|
92
|
+
// })
|
|
17
93
|
</script>
|
|
18
94
|
|
|
19
95
|
<template>
|
|
@@ -21,7 +97,7 @@ const serviceName = ref('af-linepatrol')
|
|
|
21
97
|
<template #layout_content>
|
|
22
98
|
<XCellList
|
|
23
99
|
:config-name="configName"
|
|
24
|
-
:
|
|
100
|
+
:service-name="serviceName"
|
|
25
101
|
/>
|
|
26
102
|
</template>
|
|
27
103
|
</NormalDataLayout>
|
|
@@ -1,26 +1,41 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
|
|
3
|
+
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
3
4
|
import { ref } from 'vue'
|
|
4
5
|
|
|
5
|
-
const configName = ref('
|
|
6
|
-
const serviceName = ref('af-
|
|
6
|
+
const configName = ref('ceshiForm')
|
|
7
|
+
const serviceName = ref('af-system')
|
|
7
8
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
const formGroupAddConstruction = ref(null)
|
|
10
|
+
const formData = ref({
|
|
11
|
+
'YYYY': '2025-09-08 16:03:22',
|
|
12
|
+
'YYYY-MM': '2025-09-08 16:03:22',
|
|
13
|
+
'YYYY-MM-DD': '2025-09-08 16:03:22',
|
|
14
|
+
'YYYY-MM-DDHH': '2025-09-08 16:03:22',
|
|
15
|
+
'YYYY-MM-DDHHMM': '2025-09-08 16:03:22',
|
|
16
|
+
'YYYY-MM-DDHHMMSS': '2025-09-08 16:03:22',
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
function onSubmit(data: any) {
|
|
20
|
+
console.warn('提交表单', data)
|
|
11
21
|
}
|
|
12
22
|
</script>
|
|
13
23
|
|
|
14
24
|
<template>
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
<NormalDataLayout id="XFormGroupView" title="纯表单">
|
|
26
|
+
<template #layout_content>
|
|
27
|
+
<XForm
|
|
28
|
+
ref="formGroupAddConstruction"
|
|
29
|
+
mode="修改"
|
|
30
|
+
:config-name="configName"
|
|
31
|
+
:service-name="serviceName"
|
|
32
|
+
:form-data="formData"
|
|
33
|
+
@on-submit="onSubmit"
|
|
34
|
+
/>
|
|
35
|
+
</template>
|
|
36
|
+
</NormalDataLayout>
|
|
23
37
|
</template>
|
|
24
38
|
|
|
25
39
|
<style scoped lang="less">
|
|
40
|
+
|
|
26
41
|
</style>
|
|
@@ -1,118 +1,118 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
|
|
3
|
-
import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
|
|
4
|
-
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
5
|
-
import { showNotify } from 'vant'
|
|
6
|
-
import { ref } from 'vue'
|
|
7
|
-
|
|
8
|
-
const selectedLocation = ref<LocationResult>()
|
|
9
|
-
|
|
10
|
-
// 处理位置选择
|
|
11
|
-
function handleLocationConfirm(location: LocationResult) {
|
|
12
|
-
// console.log('选择的位置:', location)
|
|
13
|
-
// selectedLocation.value = location
|
|
14
|
-
showNotify({ type: 'success', message: '位置已选择' })
|
|
15
|
-
}
|
|
16
|
-
</script>
|
|
17
|
-
|
|
18
|
-
<template>
|
|
19
|
-
<NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
|
|
20
|
-
<template #layout_content>
|
|
21
|
-
<div class="location-picker-demo">
|
|
22
|
-
<!-- 页面标题 -->
|
|
23
|
-
<div class="page-header">
|
|
24
|
-
<div class="title">
|
|
25
|
-
位置选择
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<!-- 选择结果展示 -->
|
|
30
|
-
<div v-if="selectedLocation" class="location-result">
|
|
31
|
-
<div class="label">
|
|
32
|
-
已选位置:
|
|
33
|
-
</div>
|
|
34
|
-
<div class="value">
|
|
35
|
-
{{ selectedLocation.address }}
|
|
36
|
-
</div>
|
|
37
|
-
<div class="coordinates">
|
|
38
|
-
经度: {{ selectedLocation.longitude.toFixed(6) }},
|
|
39
|
-
纬度: {{ selectedLocation.latitude.toFixed(6) }}
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<!-- 地图组件 -->
|
|
44
|
-
<div class="map-container">
|
|
45
|
-
<LocationPicker
|
|
46
|
-
v-model="selectedLocation"
|
|
47
|
-
:default-center="[108.948024, 34.263161]"
|
|
48
|
-
:default-zoom="12"
|
|
49
|
-
@confirm="handleLocationConfirm"
|
|
50
|
-
/>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</template>
|
|
54
|
-
</NormalDataLayout>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<style scoped lang="less">
|
|
58
|
-
.location-picker-demo {
|
|
59
|
-
width: 100%;
|
|
60
|
-
height: 100%;
|
|
61
|
-
position: relative;
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
background-color: #f7f8fa;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.page-header {
|
|
68
|
-
height: 44px;
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
background: white;
|
|
73
|
-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
74
|
-
position: relative;
|
|
75
|
-
z-index: 1;
|
|
76
|
-
|
|
77
|
-
.title {
|
|
78
|
-
font-size: 16px;
|
|
79
|
-
color: #333;
|
|
80
|
-
font-weight: 500;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.location-result {
|
|
85
|
-
background: white;
|
|
86
|
-
padding: 12px 16px;
|
|
87
|
-
margin: 10px;
|
|
88
|
-
border-radius: 8px;
|
|
89
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
90
|
-
|
|
91
|
-
.label {
|
|
92
|
-
font-size: 14px;
|
|
93
|
-
color: #666;
|
|
94
|
-
margin-bottom: 4px;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.value {
|
|
98
|
-
font-size: 16px;
|
|
99
|
-
color: #333;
|
|
100
|
-
margin-bottom: 8px;
|
|
101
|
-
word-break: break-all;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.coordinates {
|
|
105
|
-
font-size: 12px;
|
|
106
|
-
color: #999;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.map-container {
|
|
111
|
-
flex: 1;
|
|
112
|
-
position: relative;
|
|
113
|
-
margin: 0 10px 10px 10px;
|
|
114
|
-
border-radius: 8px;
|
|
115
|
-
overflow: hidden;
|
|
116
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
117
|
-
}
|
|
118
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { LocationResult } from '@af-mobile-client-vue3/components/data/XOlMap/types'
|
|
3
|
+
import LocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/index.vue'
|
|
4
|
+
import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
|
|
5
|
+
import { showNotify } from 'vant'
|
|
6
|
+
import { ref } from 'vue'
|
|
7
|
+
|
|
8
|
+
const selectedLocation = ref<LocationResult>()
|
|
9
|
+
|
|
10
|
+
// 处理位置选择
|
|
11
|
+
function handleLocationConfirm(location: LocationResult) {
|
|
12
|
+
// console.log('选择的位置:', location)
|
|
13
|
+
// selectedLocation.value = location
|
|
14
|
+
showNotify({ type: 'success', message: '位置已选择' })
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<NormalDataLayout id="XLocationPicker" title="XOlMap地址选择器">
|
|
20
|
+
<template #layout_content>
|
|
21
|
+
<div class="location-picker-demo">
|
|
22
|
+
<!-- 页面标题 -->
|
|
23
|
+
<div class="page-header">
|
|
24
|
+
<div class="title">
|
|
25
|
+
位置选择
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- 选择结果展示 -->
|
|
30
|
+
<div v-if="selectedLocation" class="location-result">
|
|
31
|
+
<div class="label">
|
|
32
|
+
已选位置:
|
|
33
|
+
</div>
|
|
34
|
+
<div class="value">
|
|
35
|
+
{{ selectedLocation.address }}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="coordinates">
|
|
38
|
+
经度: {{ selectedLocation.longitude.toFixed(6) }},
|
|
39
|
+
纬度: {{ selectedLocation.latitude.toFixed(6) }}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- 地图组件 -->
|
|
44
|
+
<div class="map-container">
|
|
45
|
+
<LocationPicker
|
|
46
|
+
v-model="selectedLocation"
|
|
47
|
+
:default-center="[108.948024, 34.263161]"
|
|
48
|
+
:default-zoom="12"
|
|
49
|
+
@confirm="handleLocationConfirm"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
</NormalDataLayout>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped lang="less">
|
|
58
|
+
.location-picker-demo {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
position: relative;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
background-color: #f7f8fa;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.page-header {
|
|
68
|
+
height: 44px;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
background: white;
|
|
73
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
74
|
+
position: relative;
|
|
75
|
+
z-index: 1;
|
|
76
|
+
|
|
77
|
+
.title {
|
|
78
|
+
font-size: 16px;
|
|
79
|
+
color: #333;
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.location-result {
|
|
85
|
+
background: white;
|
|
86
|
+
padding: 12px 16px;
|
|
87
|
+
margin: 10px;
|
|
88
|
+
border-radius: 8px;
|
|
89
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
90
|
+
|
|
91
|
+
.label {
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
color: #666;
|
|
94
|
+
margin-bottom: 4px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.value {
|
|
98
|
+
font-size: 16px;
|
|
99
|
+
color: #333;
|
|
100
|
+
margin-bottom: 8px;
|
|
101
|
+
word-break: break-all;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.coordinates {
|
|
105
|
+
font-size: 12px;
|
|
106
|
+
color: #999;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.map-container {
|
|
111
|
+
flex: 1;
|
|
112
|
+
position: relative;
|
|
113
|
+
margin: 0 10px 10px 10px;
|
|
114
|
+
border-radius: 8px;
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
117
|
+
}
|
|
118
|
+
</style>
|