2-10 定位城市与弹窗组件

一、定义弹窗组件

使用js去调用组件

index.js

1-1 JS配置弹窗组件

<template>
    <div class="msgBox">
        <h2>{{title}}</h2>
        <p>{{content}}</p>
        <div class="msg-btn">
            <div @touchstart="handleCancel">{{cancel}}</div>
            <div @touchstart="handleOk">{{ok}}</div>
        </div>
    </div>
</template>
<script>
export default {
    name:"MsgBox"
}
</script>

import Vue from 'vue';
import MsgBox from './MsgBox';
export var msgBox = (function(){
     var defaults = {
         title:"",
         content:"",
         cancel:"",
         ok:"",
         handleCancel:null,
         handleOk:null
     };
     var MyComponent = Vue.extend(MsgBox);
     return function(opts){
         //配置参数
         for(var attr in opts){
             defaults[attr] = opts[attr];
         }
         var vm = new MyComponent({
             el:document.createElement("div"),
             data:{
                 title:defaults.title,
                 content:defaults.content,
                 cancel:defaults.cancel,
                 ok:defaults.ok
             },
             methods:{
                 handleCancel(){
                     defaults.handleCancel && defaults.handleCancel.call(this);
                     document.body.removeChild(vm.$el)
                 },
                 handleOk(){
                     defaults.handleOk && defaults.handleOk.call(this)
                     document.body.removeChild(vm.$el)
                 }
             }
         })
         document.body.appendChild(vm.$el)
     }
})();

1-2 调用弹窗组件

import {msgBox} from '@/components/JS'
export default {
  name: "Movie",
  mounted(){
    msgBox({
      title:"定位",
      content:"武汉",
      cancel:"取消",
      ok:"切换城市",
      handleCancel(){
        console.log(1)
      },
      handleOk(){
        console.log(2)
      }
    })
  }
};
</script>

二、切换定位城市

src/views/Movie/index.vue中调用组件

2-1 首先获取当前城市

import { msgBox } from "@/components/JS";
export default {
  name: "Movie",
  components: {
    MovieNav
  },
  mounted() {
      this.axios.get("/api/getLocation").then(res => {
        var data = res.data.data;
        var city = data.nm;
      });
  }
};
</script>

2-2 延时3s显示弹窗

mounted() {
    setTimeout(() => {
      this.axios.get("/api/getLocation").then(res => {
        var data = res.data.data;
        var city = data.nm;
        msgBox({
          title: "定位",
          content: city,
          cancel: "取消",
          ok: "切换城市",
          handleCancel() {
            console.log(1);
          },
          handleOk() {
          }
        });
      });
    }, 3000);

2-3 切换缓存中的定位城市

handleOk() {
            localStorage.setItem("city",city);
            localStorage.setItem("cityId",data.id);
            location.reload()
}

2-4 判断vuex中的city和当前定位获取的city

如果vuex中的city和通过定位获取的city一样,就不需要弹窗了

mounted() {
    setTimeout(() => {
      this.axios.get("/api/getLocation").then(res => {
        var data = res.data.data;
        var city = data.nm;
        //判断定位城市
        if(this.$store.state.city ===city){
          return false;
        }
        msgBox({
          title: "定位",
          content: city,
          cancel: "取消",
          ok: "切换城市",
          handleCancel() {
            console.log(1);
          },
          handleOk() {
            localStorage.setItem("city",city);
            localStorage.setItem("cityId",data.id);
            location.reload()
          }
        });
      });
    }, 3000);
  }