From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1

---
 src/components/mobileCloseRouter/index.vue |   83 ++++++++++++++++++++++++++++++++++++++---
 1 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/components/mobileCloseRouter/index.vue b/src/components/mobileCloseRouter/index.vue
index 8d48d09..2e47070 100644
--- a/src/components/mobileCloseRouter/index.vue
+++ b/src/components/mobileCloseRouter/index.vue
@@ -1,10 +1,29 @@
 <template>
   <!-- v-show="isOpenDrawALine" -->
-  <div
-    :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
-    @click="mobileRouterClose"
-  >
-    退出导航
+  <!-- 退出导航，右边按钮
+mobileCloseRouter
+ -->
+  <div class="routers">
+    <div
+      :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
+      @click="mobileRouterClose"
+    >
+      退出导航
+    </div>
+    <div
+      v-for="(item, index) in routerS"
+      :key="item.Str"
+      :style="{ bottom: 357 + index * 37 + 'px' }"
+      :class="[
+        'mobileCloseRouterOpen',
+        index < lengthS && isOpenDrawALine ? 'mobileCloseActive' : '',
+        choiceRouterS == index ? 'mobileCloseActiveOpen' : '',
+      ]"
+      @click="mobileRouterCloseOpen(item.Str, index)"
+    >
+      <!-- 路径{{ index + 1 }}：{{ item.titles }} -->
+      路径{{ index + 1 }}
+    </div>
   </div>
 </template>
 
@@ -13,7 +32,12 @@
 export default {
   name: "mobileCloseRouter",
   computed: {
-    ...mapGetters(["isOpenDrawALine"]),
+    ...mapGetters(["isOpenDrawALine", "routerS", "choiceRouterS"]),
+  },
+  data() {
+    return {
+      lengthS: 0,
+    };
   },
   watch: {
     isOpenDrawALine() {
@@ -21,16 +45,36 @@
       } else {
       }
     },
+    routerS() {
+      if (this.routerS.length == 0) {
+        this.lengthS = 0;
+      }
+      setTimeout(() => {
+        this.lengthS++;
+      }, 200);
+    },
   },
   methods: {
     mobileRouterClose() {
       this.$store.commit("removePolyline");
+      this.$store.commit("removerPolyLineIcon");
+    },
+    mobileRouterCloseOpen(Str, index) {
+      if (this.choiceRouterS == index) {
+        return;
+      }
+      this.$store.commit("set_choiceRouterS", index);
+      this.$store.dispatch("MSET_DRAWALINELAYER", [Str]);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.routers {
+  width: 0;
+  height: 0;
+}
 .mobileCloseRouter {
   position: fixed;
   width: 80px;
@@ -48,8 +92,35 @@
   color: #fff;
   transition: all 0.5s;
 }
+.mobileCloseRouterOpen {
+  position: fixed;
+  // width: 127px;
+  width: 50px;
+  height: 32px;
+  background-color: #fff;
+  z-index: 600;
+  right: -100px;
+  opacity: 0;
+  bottom: 357px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px 0 0 8px;
+  color: #000;
+  border-left: 1px solid #a4d1ff;
+  border-top: 1px solid #a4d1ff;
+  border-bottom: 1px solid #a4d1ff;
+  transition: all 0.5s;
+}
 .mobileCloseActive {
   right: 0px;
   opacity: 1;
 }
+.mobileCloseActiveOpen {
+  width: 80px;
+  border: 1px solid #409eff;
+  background-color: #409eff;
+  color: #fff;
+}
 </style>

--
Gitblit v1.9.3