crs-double-resistance/src/App.vue

<template>
  <div class="app" id="app" v-cloak ref="vueDom">
    <div class="bigbox">
      <div class="noHome">
        <home-header></home-header>
        <div :class="$route.meta.fullScreen ? 'content' :'content_app'">
          <!-- <keep-alive include="AntigenPreparation"> -->
            <router-view :key="key"/>
          <!-- </keep-alive> -->
        </div>
        <footerbox></footerbox>
      </div>
      <div class="fixed-message" @click="dialogVisible = true">
        <img src="@/assets/img/messageFixed.png" alt="">
        <div class="fixed-message-text">
          Contact with<br/>
          our experts
        </div>
      </div>
    </div>
    <!-- loading -->
    <div class="loading" v-show="loading">
      <div class="lod_c">
        <i class="el-icon-loading"></i>
        <div class="lod_name">{{ $t("message.Loading") }}</div>
      </div>
    </div>

    <el-dialog
      title=""
      v-if="!$util.isMobileDevice()"
      :visible.sync="dialogVisible"
      width="1200px">
      <div class="production_bottom_box">
        <p class="production_bottom_title">Leave Message</p>
        <div class="submit_box">
          <el-form label-position="left" ref="form" :model="form" label-width="130px">
            <div class="el_input">
              <el-form-item label="Name:" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="Company name:" required>
                <el-input v-model="form.company"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item label="Email:" required>
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item label="Tel:">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </div>
            <div class="el_input_message">
              <el-form-item label="Leave a message:">
                <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="submit_bottom">
            <p class="submit_bottom_text">Thank you for contacting us, we will reach you out in 24hr by email</p>
            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">Submit</p>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 移动端 -->
    <el-dialog
      v-if="$util.isMobileDevice()"
      title="Leave Message"
      :visible.sync="dialogVisible"
      width="90%">
      <div class="production_bottom_box">
        <!-- <p class="production_bottom_title">Leave Message</p> -->
        <div class="submit_box">
          <el-form label-position="left" ref="form" :model="form" label-width="140px">
            <div class="el_input">
              <el-form-item label="Name:" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item label="Company name:" required>
                <el-input v-model="form.company"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item label="Email:" required>
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item label="Tel:">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </div>
            <div class="el_input_message">
              <el-form-item label="Leave a message:">
                <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="submit_bottom">
            <p class="submit_bottom_text">Thank you for contacting us, we will reach you out in 24hr by email</p>
            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">Submit</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import homeHeader from "@/components/homeHeader";
import footerbox from "@/components/footerbox";

export default {
  name: "App",
  components: {
    homeHeader,
    footerbox
  },
  data() {
    return {
      tempBool: true,
      prayTimer: null,
      loading: true,
      isRouterAlive: true,
      dialogVisible: false,
      form: {
        name: "",
        company: "",
        email: "",
        phone: "",
        message: ""
      },
      fullscreenLoading: false
    };
  },
  computed: {
    key() {
      if (this.$route.meta.pageTitle) {
        return this.$route.path + new Date().getTime();
      } else {
        return 1;
      }
    }
  },
  methods: {
    startPray() {
      var timeFun = () => {
        if (this.prayTimer) clearTimeout(this.prayTimer);
        var stime = new Date("2020/04/04 00:00:00").getTime();
        var etime = new Date("2020/04/04 23:59:59").getTime();
        var now = new Date().getTime();
        this.prayTimer = setTimeout(() => {
          if (now < etime) {
            if (now > stime) {
              document.getElementsByTagName("html")[0].style.filter =
                "grayscale(1)";
            } else {
              document.getElementsByTagName("html")[0].style.filter = "";
            }
            timeFun();
          } else {
            document.getElementsByTagName("html")[0].style.filter = "";
            timeFun = null;
            this.prayTimer = null;
          }
        }, 1000);
      };
      timeFun();
    },
    findAllCategory() {
      // 字典
      this.$api.post("category/findAllCategory").then(res => {
        if (res.code === 0) {
          this.$store.commit("setDictionary", res.data);
        }
      });
    },
    findAllMolecule() {
      this.$api.post("molecule/findAllMolecule").then(res => {
        if (res.code === 0) {
          this.$store.commit("setProductDictionary", res.data);
        }
      });
    },
    getinfo() {
      if (JSON.parse(localStorage.getItem("token"))) {
        this.$api.post("auth/info").then(res => {
          if (res.code === 0) {
            localStorage.setItem("info", JSON.stringify(res.data));
          }
        });
      }
    },
    // 验证
    verification() {
      if (this.form.name == "") {
        this.$message.error(
          this.$t("input.fullname") + this.$t("message.empty")
        );
        return false;
      } else if (this.form.company == "") {
        this.$message.error(
          this.$t("input.company") + this.$t("message.empty")
        );
        return false;
      } else if (this.form.email == "") {
        this.$message.error(this.$t("input.email") + this.$t("message.empty"));
        return false;
      } else if (!this.$util.isEmail(this.form.email)) {
        this.$message.error(this.$t("input.email") + this.$t("message.email"));
        return false;
      } else {
        return true;
      }
    },
    postSubmit() {
      if (this.verification()) {
        this.fullscreenLoading = true;
        this.$api.post("antibody/saveMessage", this.form).then(res => {
          if (res.code == 0) {
            this.$message({
              message: this.$t("message.YourMessage"),
              type: "success"
            });
            this.form = {
              company: "",
              email: "",
              name: "",
              phone: "",
              message: ""
            };
            this.fullscreenLoading = false;
            this.dialogVisible = false
            window.gtag && window.gtag("event", "submit_message");
          } else {
            this.$message.error(res.msg);
            this.fullscreenLoading = false;
            this.dialogVisible = false
          }
        });
      }
    }
  },
  created() {
    this.loading = true;
    var timer = null;
    window.onresize = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.$store.commit("setWinInfo", {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        });
      }, 250);
    };
    // this.startPray()
    this.findAllCategory();
    this.getinfo();
  },
  mounted() {
    this.findAllMolecule();
    let that = this;
    setTimeout(() => {
      that.loading = false;
      this.tempBool = false;
      that.$refs.vueDom.style.display = "block";
      // document.getElementById('id').style.display = 'block'
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
v-cloak {
  display: none;
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
  z-index: 9999;
  .lod_c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-icon-loading {
      font-size: 2rem;
      color: #ccc;
      text-align: center;
      margin-left: 6px;
    }
    .lod_name {
      text-align: center;
      font-size: 16px;
    }
  }
}
.fixed-message{
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 9;
  background: #065ba9;
  display: flex;
  align-items: center;
  // width: 175px;
  // height: 64px;
  padding: 8px 15px;
  border-radius: 30px;
  cursor: pointer;
  .fixed-message-text{
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-left: 10px;
  }
}
.production_bottom_box{
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  .production_bottom_title{
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    line-height: 36px;
  }
  .submit_box /deep/{
    width: 100%;
    border-radius: 1px;
    background: rgba(255, 255, 255, .9);
    overflow: hidden;
    .el-form{
      width: 100%;
      margin: 46px auto 0;
      .el_input{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-input__inner{
          border: 1px solid #0466b5;
        }
        .el-form-item{
          width: 48%;
        }
      }
      .el_input_message{
        .el-textarea__inner{
          border: 1px solid #0466b5;
        }
        .el-form-item{
          width: 100%;
        }
      }
    }
    .submit_bottom{
      margin: 20px 0 20px 130px;
      width: 914px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .submit_bottom_text{
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #0466B5;
        line-height: 36px;
      }
      .submit_bottom_button{
        width: 330px;
        height: 45px;
        line-height: 45px;
        background: #0466B5;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .app {
    // display: flex;
    // flex-direction: column;
  }
  .bigbox {
    height: 100%;
  }
  .home_b {
    height: 100%;
  }
  .noHome {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      position: sticky;
      top: 0;
      z-index: 9;
    }
  }
  .content_app {
    flex: 1;
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0
  }
  .content{
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  .content_app {
    width: 100% !important;
    padding: 20px;
  }
}
@media screen and (min-width: 0px) and (max-width: 750px) {
  .app /deep/{
    // display: flex;
    // flex-direction: column;
    min-height: 6rem;
    .el-icon-loading {
      font-size: 0.6rem !important;
      color: #ccc;
      text-align: center;
      margin-left: 0px !important;
    }
    .el-dialog__title{
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #000;
    }
  }
  .production_bottom_box{
    width: 100% !important;
    .production_bottom_title{
      line-height: 1;
    }
    .submit_box /deep/{
      .el-form{
        margin-top: 0 !important;
      }
      .el_input{
        width: 100%;
        .el-form-item{
          width: 100% !important;
          .el-form-item__label{
            font-size: 12px !important;
          }
        }
      }
      .submit_bottom{
        width: 100% !important;
        margin: 0;
        padding-left: 140px;
        flex-wrap: wrap;
        .submit_bottom_text{
          width: 100% !important;
          font-size: 12px;
          line-height: 20px;
        }
        .submit_bottom_button{
          margin-top: 0.1rem;
        }
      }
    }
  }
  .bigbox {
    height: 100%;
  }
  .home_b {
    height: 100%;
  }
  .noHome {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    // padding: 0.2rem;
  }
  .content_app {
    flex: 1;
    width: 100%;
    margin: 0 auto;
    // padding: 0.2rem;
  }
  .fixed-message{
    position: fixed;
    bottom: .6rem;
    right: .1rem;
    z-index: 9;
    background: #065ba9;
    display: flex;
    align-items: center;
    // width: 175px;
    // height: 64px;
    padding: 0.05rem .1rem;
    border-radius: 30px;
    cursor: pointer;
    img{
      width: 0.2rem;
    }
    .fixed-message-text{
      font-size: .12rem;
      color: #fff;
      text-align: center;
      margin-left: .1rem;
    }
  }
}
// loading
</style>