feat: 增加导航地图设置

aweikalee · May 31, 2024 · 5fef80d · 5fef80d
1 parent 0646bfd
commit 5fef80d
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 13 deletions.
diff --git a/src/router.ts b/src/router.ts
@@ -23,6 +23,7 @@ import UserInndex from './views/User/Index.vue'
 import Login from './views/User/Login.vue'
 import Register from './views/User/Register.vue'
 import SetPassword from './views/User/SetPassword.vue'
+import Options from './views/User/Options.vue'
 
 import NotFound from './views/Other/NotFound.vue'
 
@@ -310,6 +311,12 @@ const router = new Router({
                     path: 'setpassword',
                     component: SetPassword,
                     beforeEnter: needLogin
+                },
+                /* 设置 */
+                {
+                    path: 'options',
+                    component: Options,
+                    beforeEnter: needLogin
                 }
             ]
         },

diff --git a/src/store/state.ts b/src/store/state.ts
@@ -24,6 +24,7 @@ export interface ILocalState {
     nickname: string
     loggedin: boolean
     detailSpread: boolean
+    mapType: 'baidu' | 'google'
 }
 export const localState: ILocalState = {
     lastRoute: '', // 记录用户最后浏览的页面 用于PWA打开时能直接打开该页（允许记录的页面有[/, /itinerary/:id, /schedule/:id, /bill/:pid]）
@@ -32,7 +33,8 @@ export const localState: ILocalState = {
     username: '',
     nickname: '',
     loggedin: false,
-    detailSpread: false
+    detailSpread: false,
+    mapType: 'baidu'
 }
 
 /* 保存在内存的属性 */

diff --git a/src/views/Schedule/Index.vue b/src/views/Schedule/Index.vue
@@ -196,10 +196,6 @@ export default class Schedule extends Vue {
                             :inactive-value="false"
                         />
                     </el-dropdown-item>
-
-                    <el-dropdown-item title="地图设置" disabled>
-                        <Icon>&#xe602;</Icon>地图设置
-                    </el-dropdown-item>
                 </template>
             </HeaderBar>
         </template>

diff --git a/src/views/Schedule/components/CardAddress.vue b/src/views/Schedule/components/CardAddress.vue
@@ -24,15 +24,21 @@ export default class ScheduleCard extends Vue {
     // TODO: 如果对方没有装百度地图APP 该如何处理？
     getMapUrl(value: IPosition) {
         const os = this.systemOS
-        let parse = ''
-        parse += `location=${value.y},${value.x}`
-        parse += `&title=${value.title}`
-        parse += `&content=${value.address}`
         if (os === 'ios' || os === 'android') {
+            switch (this.$store.state.mapType){
+                case 'baidu':
+                    return 'baidumap://map/marker?location=${value.y},${value.x}&title=${value.title}&content=${value.address}'
+                case 'google':
+                    return `https://www.google.com/maps/search/?api=1&query=${value.y},${value.x}`
+            }
             return 'baidumap://map/marker?' + parse
         } else {
-            parse += '&output=html'
-            return '//api.map.baidu.com/marker?' + parse
+            switch (this.$store.state.mapType){
+                case 'baidu':
+                    return `//api.map.baidu.com/marker?location=${value.y},${value.x}&title=${value.title}&content=${value.address}&output=html`
+                case 'google':
+                    return `https://www.google.com/maps/search/?api=1&query=${value.y},${value.x}`
+            }
         }
     }
 }

diff --git a/src/views/User/Index.vue b/src/views/User/Index.vue
@@ -33,10 +33,10 @@ export default class UserIndex extends Vue {
         </div>
 
         <card class="card">
-            <div class="card-item disabled">
+            <Ripple class="card-item" to="/user/options">
                 <div class="text">设置</div>
                 <Icon class="icon">&#xe61d;</Icon>
-            </div>
+            </Ripple>
             <Ripple class="card-item" to="/user/setpassword">
                 <div class="text">修改密码</div>
                 <Icon class="icon">&#xe61d;</Icon>

diff --git a/src/views/User/Options.vue b/src/views/User/Options.vue
@@ -0,0 +1,46 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Body from '@/components/Body.vue'
+import Label from '@/components/Label.vue'
+
+
+export default defineComponent({
+    components: {
+        Body,
+        Label,
+    },
+    data() {
+        return {
+            form: {
+                type: ''
+            },
+        }
+    },
+    computed: {
+        mapType: {
+            get() {
+                return this.$store.state.mapType
+            },
+            set(value) {
+                this.$store.commit('setState', {
+                    key: 'mapType',
+                    value
+                })
+            }
+        }
+    
+    }
+})
+</script>
+
+<template>
+    <Body padding>
+        <Label title="导航地图" />
+        <el-radio-group v-model="mapType" size="medium">
+            <el-radio key="baidu" label="baidu" border>百度地图</el-radio>
+            <el-radio key="google" label="google" border>谷歌地图</el-radio>
+        </el-radio-group>
+    </Body>
+</template>
+
+<style lang="scss" scoped></style>