自动返回弹窗

<template>
<!--    <div id="app">-->
  <div>
    <div
      id="app"
      @click="initDate"
      @keyup="initDate"
      @keydown="initDate"
      @mousemove="initDate"
      @onTouch="initDate"
    >
      <div class="img-header">
        <div class="logo-name">
          <div class="logo">
            <img :src="court_logo" alt="" />
          </div>
          <div class="name">{{ court_title }}{{ device_name }}</div>
        </div>
        <div class="time">{{ timeShow }}</div>
      </div>
      <div class="banner">
        <img src="@/assets/images/header.png" alt="" />
      </div>
      <!-- 登录公用按钮 -->
      <div v-if="!!!user_name">
        <!--     <div class="out " :class="{'out-disable ':header_show_visibility,'btn1 div1':!header_show_visibility}" @click="login" v-if="!header_show_visibility">-->
        <!--       <img src="./assets/images/shouye-denglu@1x.png" alt="" class="img"/>-->
        <!--       <div class="text" >登录</div>-->
        <!--     </div>-->
        <!--     <div class="out " :class="{'out-disable ':header_show_visibility,'btn1 div1':!header_show_visibility}" v-else>-->
        <!--       <img src="./assets/images/shouye-denglu@1x.png" alt="" class="img"/>-->
        <!--       <div class="text" >登录</div>-->
        <!--     </div>-->
        <div class="back btn1 div1" v-show="header_show_visibility" @click="home">
          <img src="./assets/images/shouye-home.png" alt="" class="img" />
          <div class="text">首页</div>
        </div>
      </div>
      <div v-else>
        <div class="out btn1 div1" @click="clearEnsure">
          <img src="./assets/images/shouye-tuichu@1x.png" alt="" class="img" />
          <div class="text">退出</div>
        </div>
        <div class="userbtn btn1 div1" @click="user">
          <img src="./assets/images/shouye-denglu@1x.png" alt="" class="img" />
          <div class="text">{{ user_name }}</div>
        </div>
        <div
          class="court btn1 div1"
          v-if="!header_show_visibility"
          @click="court"
        >
          <img
            src="./assets/images/shouye-xuanzefayuan@1x.png"
            alt=""
            class="img"
          />
          <div class="text">选择法院</div>
        </div>
        <div class="back btn1 div1" v-else @click="home">
          <img src="./assets/images/shouye-tuichu@1x.png" alt="" class="img" />
          <div class="text">首页</div>
        </div>
      </div>

      <router-view />
    </div>
    <isDialog
      :isPromptBox="isPromptBox"
      @isPromptClose="isPromptClose"
      :promptBoxObj="promptBoxObj"
    >
      <div v-if="!!promptBoxObj.tipImg" slot="tipImg">
        <img src="./assets/images/waring@1x.png" alt="" />
      </div>
      <div
        v-if="!!promptBoxObj.popupFooter"
        slot="popup-footer"
        class="popup-footer div1"
      >
        <el-button v-if="!!promptBoxObj.leftBtn" @click="onDetermine">{{
            promptBoxObj.leftBtn
          }}</el-button>
        <el-button v-if="!!promptBoxObj.rightBtn" @click="cancel">{{
            promptBoxObj.rightBtn
          }}</el-button>
      </div>
    </isDialog>
  </div>

</template>

<script>
import QWebChannel from "./utils/qwebchannel";
import { mapActions, mapGetters } from "vuex";
import store from "@/store";
// import initConfig from './utils/config'

export default {
  name: "App",
  data() {
    return {
      isCourt: true,
      timeShow: "",
      loginOutTime: 10, //10秒显示弹窗
      timer: "", //定时器
      out_time: "", //超时时间
      promptBoxObj: {
        leftBtn: "", //底部按钮左边文字
        rightBtn: "", //底部按钮右边文字
        popupFooter: false, //底部按钮
        tipImg: false, //成功失败之类大标题图片
        isclose: false,
        contentTop: false, //判断是content主体距离上部样式
        mainTop: "", //主体部分距离标题的margin-top距离
        content: "",
        popupStyle:
          "left: 17%;top: 25%;width: 730px;height: 540px;  border-radius: 10px;",
      },
      isPromptBox: false, //弹框显示
      isApp: true, //是否在本页面
    };
  },
  computed: {
    ...mapGetters([
      "user_name",
      "header_show_visibility",
      "court_title",
      "court_logo",
      "overtime",
      "is_dialog",
      "is_touch",
      "device_name"
    ]),
  },
  created() {
    this.getTime();
    this.saveStore();
    this.getConfig();
    // if (process.env.NODE_ENV === "development" && window.WebPlatform) {
    //   const VConsole = require("vconsole");
    //   new VConsole();
    // }
    setInterval(() => {
      this.getTime();
    }, 1000);
    this.loginOutTime = parseInt(this.overtime.overtime_tips.value);
  },
  mounted() {
    this.out_time = parseInt(this.overtime?.overtime_logout?.value);
    console.log(this.out_time);
  },
  methods: {
    ...mapActions([
      "get_user_message",
      "get_change_header",
      "change_is_touch",
      "change_is_dialog",
      "change_courtCode_and_areaCode",
    ]),
    user() {
      this.$router.push('/personalCenter/index').catch(()=>{})
    },
    court() {
      this.$router.push('/home/court').catch(()=>{})
    },
    //获取时间
    getTime() {
      let t = new Date();
      let y = t.getFullYear();
      let m = t.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      let d = t.getDate();
      if (d < 10) {
        d = "0" + d;
      }
      let h = t.getHours();
      if (h < 10) {
        h = "0" + h;
      }
      let min = t.getMinutes();
      if (min < 10) {
        min = "0" + min;
      }
      this.timeShow = y + "/" + m + "/" + d + " " + h + ":" + min;
    },
    saveStore() {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
        store.replaceState(
          Object.assign(
            {},
            store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state));
      });
    },
    //获取QT配置信息
    getConfig() {
      let _this = this;
      new Promise((resolve, reject) => {
        new QWebChannel(qt.webChannelTransport, function (channel) {
          window.WebPlatform = channel.objects.WebPlatform;
          WebPlatform.readIniSlot("Platform/deviceId", function (msg) {
            console.log("qt读取deviceId", msg);
            sessionStorage.setItem("meterDeviceId", msg);
            store.dispatch("change_device_id", {
              device_id: msg,
            });
          });
          WebPlatform.readIniSlot("Platform/CourtName", function (msg) {
            console.log("qt获取到CourtName:", msg);
            sessionStorage.setItem("meterCourtName", msg);
            // store.commit('setCourtName', msg);
          });
          WebPlatform.readIniSlot("Platform/court_code", function (msg) {
            console.log("qt获取到CourtCode:", msg);
            sessionStorage.setItem("meterCourtCode", msg);

            // store.commit('setCourtName', msg);
          });
          WebPlatform.readIniSlot("Platform/mac_address", function (msg) {
            console.log("qt获取到mac_address:", msg);
            sessionStorage.setItem("meterMac", msg);
            // store.commit("setMacAddress",msg);
          });
        });
      }).then((val) => {
        // qtApi.closeAFR();
        //获取各个模块
      });
    },
    //  登录  进入登录页
    //  退出登录  清空状态
    clear() {
      this.get_user_message({
        phone_num: "",
        user_id: "",
        user_name: "",
        id_card: "",
      });
      this.change_is_touch({
        is_touch: false,
      });
      this.change_is_dialog({
        is_dialog: false,
      });
      console.log("clear!!=====>>>>");
      sessionStorage.removeItem("msgBoxList");
      sessionStorage.removeItem("agentList");
      sessionStorage.removeItem("ayId");
      //清楚已选法院
      this.change_courtCode_and_areaCode({
        court_title_select:'',
        court_code_select:'',
        city_code:'320000',
        area_index1:9,
        area_index2:0,
        area_index3:3,
      })
      this.get_change_header({
        header_show_visibility: false,
      }).then(() => {
        this.$router.push("/").catch(() => {});
      });
    },
    //清除确认弹框
    clearEnsure(){
      this.promptBoxObj = {
        popupFooter: true,
        tipImg: true,
        isclose: true,
        contentTop: true,
        title: "",
        mainTop: "67px",
        leftBtn: "",
        rightBtn: "确定",
        content: "是否确认退出？",
        popupStyle:
          "left: 17%;top: 25%;width: 730px;height: 540px;  border-radius: 10px;",
      };
      setTimeout(()=>{
        this.isPromptBox = true;
      },100)
      return false;
    },
    home() {
      this.$router.push("/").catch(() => {});
    },
    //  超时无操作退出
    overTimeLoginOut() {
      const vm = this;
      this.clearInterval();
      vm.timer = window.setInterval(function () {
        vm.out_time--;
        console.log(vm.out_time);
        if (vm.out_time == 0) {
          vm.clearInterval();
          vm.timer = null;
          vm.isPromptBox = false;
          vm.clear();
          window.WebPlatform.setKeyBoardState(false);
        } else if (vm.out_time <= vm.loginOutTime) {
          vm.showAutoOut();
        }
      }, 1000);
    },
    //清除超时定时器
    clearInterval() {
      if (this.timer) {
        window.clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 显示自动退出的模态框
    showAutoOut() {
      this.promptBoxObj = {
        popupFooter: true,
        tipImg: true,
        isclose: true,
        contentTop: true,
        title: "",
        mainTop: "67px",
        leftBtn: "确定",
        rightBtn: "",
        content: this.out_time + "S自动退出返回首页！",
        popupStyle:
          "left: 17%;top: 25%;width: 730px;height: 540px;  border-radius: 10px;",
      };
      this.isPromptBox = true;
      return false;
    },

    //  自定义弹框组件  方法
    isPromptClose(val) {
      // this.clearInterval();
      this.isPromptBox = val;
    },
    //确定
    onDetermine() {
      this.isPromptBox = false;
    },
    //取消
    cancel() {
      this.isPromptBox = false;
      this.clear();
    },
    // 点击页面 初始化 dateTime
    initDate() {
      // 清除计时器
      if (this.overtime.overtime_logout.value != 0){
        this.clearInterval();
        this.isPromptBox = false;
        this.change_is_touch({
          is_touch: false,
        });
        this.change_is_touch({
          is_touch: true,
        });
        if (!!this.user_name) {
          if (this.is_dialog) {
            this.out_time = 120;
          } else {
            this.out_time = parseInt(this.overtime.overtime_logout.value);
          }
          this.overTimeLoginOut();
        }
      }
    },
  },
  watch: {
    // 自动退出系统界面
    is_dialog(value) {
      if (this.isPromptBox){

      }else{
        this.initDate();
      }
    },
  //  登录之后开始倒计时
    user_name(value){
      if (!!value) {
        this.initDate();
      }
    }
  },
};
</script>

<style lang="less" src="./assets/style/global.less"></style>
<style lang="less">
// @import url("./assets/style/global.css");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  // font-family: "Avenir", Helvetica, Arial, sans-serif;
  font-family: SourceHanSansCN-Normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  font-weight: 200;
  background: url("~@/assets/images/bg@1x.png");
  height: 100%; //大小设置为100%
  // position:fixed;
  background-size: 100% 100%;
}

.img-header {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  line-height: 100px;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: -0.72px;

  .logo-name {
    display: flex;
    img {
      width: 41px;
      height: 41px;
      margin-top: 27px;
    }
  }
}

.banner {
  /* width: 1080px; */
  height: 700px;
  background-color: #eee;
  font-size: 100px;
  font-weight: 700;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.btn1 {
  width: 154px;
  height: 69px;
  background: rgba(73, 105, 188, 0.25);
  border: 1px solid #486fe8;
  border-radius: 42.5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 16px;
  .img {
    width: 28px;
    height: 34px;
    margin-right: -15px;
  }

  .text {
    font-size: 27px;
    color: #ffffff;
    letter-spacing: -0.72px;
    margin-left: -15px;
    transform: translateY(1px);
  }
}

.out {
  position: absolute;
  top: 757px;
  right: 30px;
}

.out-disable {
  opacity: 0.55;
  background: rgba(73, 105, 188, 0.25);
  width: 154px;
  height: 69px;
  border: 1px solid #486fe8;
  border-radius: 42.5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: -0.72px;
}

.userbtn {
  position: absolute;
  top: 757px;
  right: 196px;
}

.court {
  position: absolute;
  top: 757px;
  left: 30px;
  width: 190px;

  .img {
    width: 32px;
    height: 34px;
    margin-right: -15px;
  }
}

.back {
  position: absolute;
  top: 757px;
  left: 30px;
}

img {
  pointer-events: none; /* 禁止长按图片保存 */
}

* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}

input {
  -webkit-user-select: auto; /*webkit浏览器*/
}

textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
}
</style>