af-mobile-client-vue3 1.3.99 → 1.4.2

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.
@@ -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>
@@ -1,158 +1,158 @@
1
- <script setup lang="ts">
2
- import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
3
- import { getPlatformConfig, getPlatformRoutePrefix } from '@af-mobile-client-vue3/types/platform'
4
- import {
5
- Icon as VanIcon,
6
- } from 'vant'
7
- import { computed } from 'vue'
8
- import { useRouter } from 'vue-router'
9
-
10
- const router = useRouter()
11
- const userStore = useUserStore()
12
-
13
- const userInfo = computed(() => userStore.getUserInfo())
14
- const userName = computed(() => userInfo.value?.name || '外部用户')
15
- const platformType = computed(() => userStore.getPlatformType())
16
- const platformConfig = computed(() => getPlatformConfig(platformType.value))
17
- const userDescription = computed(() =>
18
- platformConfig.value?.description || '外部系统访问用户',
19
- )
20
-
21
- function goToProfile() {
22
- const routePrefix = getPlatformRoutePrefix(platformType.value)
23
- router.push(`${routePrefix}/my`)
24
- }
25
- async function clean() {
26
- await useUserStore().registerClean()
27
- }
28
- </script>
29
-
30
- <template>
31
- <main class="external_main">
32
- <!-- 顶部导航栏 -->
33
- <nav class="header_nav">
34
- <div class="header_content">
35
- <h1 class="main_title">
36
- 智慧燃气外部系统
37
- </h1>
38
- <div class="user_section" @click="goToProfile">
39
- <VanIcon name="user-o" class="user-icon" />
40
- </div>
41
- </div>
42
- </nav>
43
-
44
- <!-- 主要内容区域 -->
45
- <div class="content">
46
- <!-- 用户信息卡片 -->
47
- <div class="user-card">
48
- <div class="user-content">
49
- <div class="user-info">
50
- <VanIcon name="user-circle-o" size="64" color="#3b82f6" />
51
- <h2 class="user-name">
52
- {{ userName }}
53
- </h2>
54
- <p class="user-desc">
55
- {{ userDescription }}
56
- </p>
57
- <p v-if="platformConfig" class="platform-name">
58
- {{ platformConfig.name }}
59
- </p>
60
- <p class="platform-name" @click="clean">
61
- 清理缓存
62
- </p>
63
- </div>
64
- </div>
65
- </div>
66
- </div>
67
- </main>
68
- </template>
69
-
70
- <style scoped lang="less">
71
- .external_main {
72
- min-height: 100vh;
73
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
74
-
75
- .header_nav {
76
- background: rgba(255, 255, 255, 0.95);
77
- backdrop-filter: blur(10px);
78
- padding: 0 16px;
79
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
80
-
81
- .header_content {
82
- display: flex;
83
- justify-content: space-between;
84
- align-items: center;
85
- height: 56px;
86
-
87
- .main_title {
88
- font-size: 1.125rem;
89
- font-weight: 600;
90
- color: #333;
91
- margin: 0;
92
- }
93
-
94
- .user_section {
95
- padding: 8px;
96
- cursor: pointer;
97
- border-radius: 50%;
98
- background: rgba(59, 130, 246, 0.1);
99
- transition: all 0.3s ease;
100
-
101
- &:active {
102
- background: rgba(59, 130, 246, 0.2);
103
- }
104
-
105
- .user-icon {
106
- font-size: 20px;
107
- color: #3b82f6;
108
- }
109
- }
110
- }
111
- }
112
-
113
- .content {
114
- padding: 24px 16px;
115
- display: flex;
116
- justify-content: center;
117
-
118
- .user-card {
119
- width: 100%;
120
- max-width: 400px;
121
- border-radius: 12px;
122
- overflow: hidden;
123
- background: rgba(255, 255, 255, 0.95);
124
- backdrop-filter: blur(10px);
125
-
126
- :deep(.van-card__content) {
127
- padding: 32px 24px;
128
- }
129
-
130
- .user-content {
131
- .user-info {
132
- text-align: center;
133
-
134
- .user-name {
135
- font-size: 24px;
136
- font-weight: 600;
137
- color: #333;
138
- margin: 16px 0 8px 0;
139
- }
140
-
141
- .user-desc {
142
- font-size: 14px;
143
- color: #666;
144
- margin: 0;
145
- }
146
-
147
- .platform-name {
148
- font-size: 12px;
149
- color: #3b82f6;
150
- margin: 4px 0 0 0;
151
- font-weight: 500;
152
- }
153
- }
154
- }
155
- }
156
- }
157
- }
158
- </style>
1
+ <script setup lang="ts">
2
+ import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
3
+ import { getPlatformConfig, getPlatformRoutePrefix } from '@af-mobile-client-vue3/types/platform'
4
+ import {
5
+ Icon as VanIcon,
6
+ } from 'vant'
7
+ import { computed } from 'vue'
8
+ import { useRouter } from 'vue-router'
9
+
10
+ const router = useRouter()
11
+ const userStore = useUserStore()
12
+
13
+ const userInfo = computed(() => userStore.getUserInfo())
14
+ const userName = computed(() => userInfo.value?.name || '外部用户')
15
+ const platformType = computed(() => userStore.getPlatformType())
16
+ const platformConfig = computed(() => getPlatformConfig(platformType.value))
17
+ const userDescription = computed(() =>
18
+ platformConfig.value?.description || '外部系统访问用户',
19
+ )
20
+
21
+ function goToProfile() {
22
+ const routePrefix = getPlatformRoutePrefix(platformType.value)
23
+ router.push(`${routePrefix}/my`)
24
+ }
25
+ async function clean() {
26
+ await useUserStore().registerClean()
27
+ }
28
+ </script>
29
+
30
+ <template>
31
+ <main class="external_main">
32
+ <!-- 顶部导航栏 -->
33
+ <nav class="header_nav">
34
+ <div class="header_content">
35
+ <h1 class="main_title">
36
+ 智慧燃气外部系统
37
+ </h1>
38
+ <div class="user_section" @click="goToProfile">
39
+ <VanIcon name="user-o" class="user-icon" />
40
+ </div>
41
+ </div>
42
+ </nav>
43
+
44
+ <!-- 主要内容区域 -->
45
+ <div class="content">
46
+ <!-- 用户信息卡片 -->
47
+ <div class="user-card">
48
+ <div class="user-content">
49
+ <div class="user-info">
50
+ <VanIcon name="user-circle-o" size="64" color="#3b82f6" />
51
+ <h2 class="user-name">
52
+ {{ userName }}
53
+ </h2>
54
+ <p class="user-desc">
55
+ {{ userDescription }}
56
+ </p>
57
+ <p v-if="platformConfig" class="platform-name">
58
+ {{ platformConfig.name }}
59
+ </p>
60
+ <p class="platform-name" @click="clean">
61
+ 清理缓存
62
+ </p>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </main>
68
+ </template>
69
+
70
+ <style scoped lang="less">
71
+ .external_main {
72
+ min-height: 100vh;
73
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
74
+
75
+ .header_nav {
76
+ background: rgba(255, 255, 255, 0.95);
77
+ backdrop-filter: blur(10px);
78
+ padding: 0 16px;
79
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
80
+
81
+ .header_content {
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ height: 56px;
86
+
87
+ .main_title {
88
+ font-size: 1.125rem;
89
+ font-weight: 600;
90
+ color: #333;
91
+ margin: 0;
92
+ }
93
+
94
+ .user_section {
95
+ padding: 8px;
96
+ cursor: pointer;
97
+ border-radius: 50%;
98
+ background: rgba(59, 130, 246, 0.1);
99
+ transition: all 0.3s ease;
100
+
101
+ &:active {
102
+ background: rgba(59, 130, 246, 0.2);
103
+ }
104
+
105
+ .user-icon {
106
+ font-size: 20px;
107
+ color: #3b82f6;
108
+ }
109
+ }
110
+ }
111
+ }
112
+
113
+ .content {
114
+ padding: 24px 16px;
115
+ display: flex;
116
+ justify-content: center;
117
+
118
+ .user-card {
119
+ width: 100%;
120
+ max-width: 400px;
121
+ border-radius: 12px;
122
+ overflow: hidden;
123
+ background: rgba(255, 255, 255, 0.95);
124
+ backdrop-filter: blur(10px);
125
+
126
+ :deep(.van-card__content) {
127
+ padding: 32px 24px;
128
+ }
129
+
130
+ .user-content {
131
+ .user-info {
132
+ text-align: center;
133
+
134
+ .user-name {
135
+ font-size: 24px;
136
+ font-weight: 600;
137
+ color: #333;
138
+ margin: 16px 0 8px 0;
139
+ }
140
+
141
+ .user-desc {
142
+ font-size: 14px;
143
+ color: #666;
144
+ margin: 0;
145
+ }
146
+
147
+ .platform-name {
148
+ font-size: 12px;
149
+ color: #3b82f6;
150
+ margin: 4px 0 0 0;
151
+ font-weight: 500;
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
158
+ </style>