xinsi_book/src/components/Navigation.vue

<template>
       <div id="nav" v-if="!isMobileDevice">
      <div>
        <a :href="backUrl" @click="gotoback">返回首页</a> 
        <!-- <a  @click="gotoback">返回首页</a>  -->

      </div>
      <!-- <router-link to="/book">书籍</router-link> | -->
      <h3>{{this.$store.state.textBookData.textBooksName}}</h3>
      <div style="display: flex; justify-content: center;align-items: center;">
        <!-- <el-button v-if="this.$store.state.showNaotu" 
        type="primary" icon="el-icon-edit"  
        @click="showDialog">脑图</el-button> -->
        <div v-if="userId" style="display: flex; margin-right: 20px; justify-content: center;" @click="showDialog">
          <el-button  icon="el-icon-edit" >脑图</el-button>
          <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->

          <!-- <i class="el-icon-edit" style="margin-right: 10px"></i>
          <p>脑图</p> -->
        </div>
         <el-switch v-model="mode" 
          active-text="专注模式"
          @change="changeMode"
          >
        </el-switch>
      </div>
    
        <MindElixirDialog :visible.sync="dialogVisible" :mindData="mindData" @save="save" />
    </div>
</template>

<script>
import MindElixirDialog from './MindElixirDialog.vue';
import {eventBus} from '../eventBus'
import {bookApi}  from "../service/getData"
import {getStore} from '../utils/mUtils'
export default {

    components:{
        MindElixirDialog
    },
    data(){
        return {
            dialogVisible:false,
            show:true,
            mode:false, 
            bookId:'',
            userId:'',
            mindData:{}, 
        }
    },
    computed:{

      backUrl(){
       return this.$store.state.redirecturl?this.$store.state.redirecturl:"../"
      },

      isMobileDevice() {
        return window.matchMedia("(max-width: 767px)").matches;
      },

    },

    async mounted() {
      this.bookId = this.$route.query.bookId

      console.log(this.bookId)
       this.userId = getStore("userId")
     var res = await bookApi.naotu.info({
        "bookId": this.bookId,
        "userId": this.userId,
      })

      console.log(res)
      if (res.length>0){
        console.log("bbbbbb")
        this.$nextTick(()=>{
          this.mindData = res[0].content

        })
      }
      console.log("aaaaaa")

    },
   methods:{

    gotoback(){
      debugger
      window.location.replace("https://www.xinsiketang.com")
    },
    showDialog() {
      this.dialogVisible = true;
    },
    changeMode(e){
      eventBus.$emit('changeMode',e)
   
    },
    save(data){
      console.log(data)

        data  = {
          bookId:this.bookId,
           userId:this.userId, 
           content:data
        }
        data = JSON.stringify(data)
 
        bookApi.naotu.update({data})
        console.log(data)
    },
   }


}
</script>


<style scoped>

#nav {
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>