App.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <div class="app" id="app" v-cloak ref="vueDom">
  3. <div class="bigbox">
  4. <div class="noHome">
  5. <home-header></home-header>
  6. <div :class="$route.meta.fullScreen ? 'content' :'content_app'">
  7. <!-- <keep-alive include="AntigenPreparation"> -->
  8. <router-view :key="key"/>
  9. <sidebox class="fixed-message"></sidebox>
  10. <!-- </keep-alive> -->
  11. </div>
  12. <footerbox></footerbox>
  13. </div>
  14. <!-- <div class="fixed-message" @click="dialogVisible = true">
  15. <img src="@/assets/img/messageFixed.png" alt="">
  16. <div class="fixed-message-text">
  17. Contact with<br/>
  18. our experts
  19. </div>
  20. </div> -->
  21. </div>
  22. <!-- loading -->
  23. <div class="loading" v-show="loading">
  24. <div class="lod_c">
  25. <i class="el-icon-loading"></i>
  26. <div class="lod_name">{{ $t("message.Loading") }}</div>
  27. </div>
  28. </div>
  29. <el-dialog
  30. title=""
  31. v-if="!$util.isMobileDevice()"
  32. :visible.sync="dialogVisible"
  33. width="1200px">
  34. <div class="production_bottom_box">
  35. <p class="production_bottom_title">Leave Message</p>
  36. <div class="submit_box">
  37. <el-form label-position="left" ref="form" :model="form" label-width="130px">
  38. <div class="el_input">
  39. <el-form-item label="Name:" required>
  40. <el-input v-model="form.name"></el-input>
  41. </el-form-item>
  42. <el-form-item label="Company name:" required>
  43. <el-input v-model="form.company"></el-input>
  44. </el-form-item>
  45. </div>
  46. <div class="el_input">
  47. <el-form-item label="Email:" required>
  48. <el-input v-model="form.email"></el-input>
  49. </el-form-item>
  50. <el-form-item label="Tel:">
  51. <el-input v-model="form.phone"></el-input>
  52. </el-form-item>
  53. </div>
  54. <div class="el_input_message">
  55. <el-form-item label="Leave a message:">
  56. <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
  57. </el-form-item>
  58. </div>
  59. </el-form>
  60. <div class="submit_bottom">
  61. <p class="submit_bottom_text">Thank you for contacting us, we will reach you out in 24hr by email</p>
  62. <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">Submit</p>
  63. </div>
  64. </div>
  65. </div>
  66. </el-dialog>
  67. <!-- 移动端 -->
  68. <el-dialog
  69. v-if="$util.isMobileDevice()"
  70. title="Leave Message"
  71. :visible.sync="dialogVisible"
  72. width="90%">
  73. <div class="production_bottom_box">
  74. <!-- <p class="production_bottom_title">Leave Message</p> -->
  75. <div class="submit_box">
  76. <el-form label-position="left" ref="form" :model="form" label-width="140px">
  77. <div class="el_input">
  78. <el-form-item label="Name:" required>
  79. <el-input v-model="form.name"></el-input>
  80. </el-form-item>
  81. </div>
  82. <div class="el_input">
  83. <el-form-item label="Company name:" required>
  84. <el-input v-model="form.company"></el-input>
  85. </el-form-item>
  86. </div>
  87. <div class="el_input">
  88. <el-form-item label="Email:" required>
  89. <el-input v-model="form.email"></el-input>
  90. </el-form-item>
  91. </div>
  92. <div class="el_input">
  93. <el-form-item label="Tel:">
  94. <el-input v-model="form.phone"></el-input>
  95. </el-form-item>
  96. </div>
  97. <div class="el_input_message">
  98. <el-form-item label="Leave a message:">
  99. <el-input v-model="form.message" type="textarea" :rows="3"></el-input>
  100. </el-form-item>
  101. </div>
  102. </el-form>
  103. <div class="submit_bottom">
  104. <p class="submit_bottom_text">Thank you for contacting us, we will reach you out in 24hr by email</p>
  105. <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">Submit</p>
  106. </div>
  107. </div>
  108. </div>
  109. </el-dialog>
  110. </div>
  111. </template>
  112. <script>
  113. import homeHeader from "@/components/homeHeader";
  114. import footerbox from "@/components/footerbox";
  115. import sidebox from "@/components/sidebox";
  116. export default {
  117. name: "App",
  118. components: {
  119. homeHeader,
  120. footerbox,
  121. sidebox
  122. },
  123. data() {
  124. return {
  125. tempBool: true,
  126. prayTimer: null,
  127. loading: true,
  128. isRouterAlive: true,
  129. dialogVisible: false,
  130. form: {
  131. name: "",
  132. company: "",
  133. email: "",
  134. phone: "",
  135. message: ""
  136. },
  137. fullscreenLoading: false
  138. };
  139. },
  140. computed: {
  141. key() {
  142. if (this.$route.meta.pageTitle) {
  143. return this.$route.path + new Date().getTime();
  144. } else {
  145. return 1;
  146. }
  147. }
  148. },
  149. methods: {
  150. startPray() {
  151. var timeFun = () => {
  152. if (this.prayTimer) clearTimeout(this.prayTimer);
  153. var stime = new Date("2020/04/04 00:00:00").getTime();
  154. var etime = new Date("2020/04/04 23:59:59").getTime();
  155. var now = new Date().getTime();
  156. this.prayTimer = setTimeout(() => {
  157. if (now < etime) {
  158. if (now > stime) {
  159. document.getElementsByTagName("html")[0].style.filter =
  160. "grayscale(1)";
  161. } else {
  162. document.getElementsByTagName("html")[0].style.filter = "";
  163. }
  164. timeFun();
  165. } else {
  166. document.getElementsByTagName("html")[0].style.filter = "";
  167. timeFun = null;
  168. this.prayTimer = null;
  169. }
  170. }, 1000);
  171. };
  172. timeFun();
  173. },
  174. findAllCategory() {
  175. // 字典
  176. this.$api.post("category/findAllCategory").then(res => {
  177. if (res.code === 0) {
  178. this.$store.commit("setDictionary", res.data);
  179. }
  180. });
  181. },
  182. findAllMolecule() {
  183. this.$api.post("molecule/findAllMolecule").then(res => {
  184. if (res.code === 0) {
  185. this.$store.commit("setProductDictionary", res.data);
  186. }
  187. });
  188. },
  189. getinfo() {
  190. if (JSON.parse(localStorage.getItem("token"))) {
  191. this.$api.post("auth/info").then(res => {
  192. if (res.code === 0) {
  193. localStorage.setItem("info", JSON.stringify(res.data));
  194. }
  195. });
  196. }
  197. },
  198. // 验证
  199. verification() {
  200. if (this.form.name == "") {
  201. this.$message.error(
  202. this.$t("input.fullname") + this.$t("message.empty")
  203. );
  204. return false;
  205. } else if (this.form.company == "") {
  206. this.$message.error(
  207. this.$t("input.company") + this.$t("message.empty")
  208. );
  209. return false;
  210. } else if (this.form.email == "") {
  211. this.$message.error(this.$t("input.email") + this.$t("message.empty"));
  212. return false;
  213. } else if (!this.$util.isEmail(this.form.email)) {
  214. this.$message.error(this.$t("input.email") + this.$t("message.email"));
  215. return false;
  216. } else {
  217. return true;
  218. }
  219. },
  220. postSubmit() {
  221. if (this.verification()) {
  222. this.fullscreenLoading = true;
  223. this.$api.post("antibody/saveMessage", this.form).then(res => {
  224. if (res.code == 0) {
  225. this.$message({
  226. message: this.$t("message.YourMessage"),
  227. type: "success"
  228. });
  229. this.form = {
  230. company: "",
  231. email: "",
  232. name: "",
  233. phone: "",
  234. message: ""
  235. };
  236. this.fullscreenLoading = false;
  237. this.dialogVisible = false
  238. window.gtag && window.gtag("event", "submit_message");
  239. } else {
  240. this.$message.error(res.msg);
  241. this.fullscreenLoading = false;
  242. this.dialogVisible = false
  243. }
  244. });
  245. }
  246. }
  247. },
  248. created() {
  249. this.loading = true;
  250. var timer = null;
  251. window.onresize = () => {
  252. clearTimeout(timer);
  253. timer = setTimeout(() => {
  254. this.$store.commit("setWinInfo", {
  255. width: document.documentElement.clientWidth,
  256. height: document.documentElement.clientHeight
  257. });
  258. }, 250);
  259. };
  260. // this.startPray()
  261. this.findAllCategory();
  262. this.getinfo();
  263. },
  264. mounted() {
  265. this.findAllMolecule();
  266. let that = this;
  267. setTimeout(() => {
  268. that.loading = false;
  269. this.tempBool = false;
  270. that.$refs.vueDom.style.display = "block";
  271. // document.getElementById('id').style.display = 'block'
  272. }, 1000);
  273. }
  274. };
  275. </script>
  276. <style lang="scss" scoped>
  277. v-cloak {
  278. display: none;
  279. }
  280. .loading {
  281. position: fixed;
  282. top: 0;
  283. left: 0;
  284. right: 0;
  285. bottom: 0;
  286. background-color: rgba(255, 255, 255, 1);
  287. z-index: 9999;
  288. .lod_c {
  289. position: absolute;
  290. top: 50%;
  291. left: 50%;
  292. transform: translate(-50%, -50%);
  293. .el-icon-loading {
  294. font-size: 2rem;
  295. color: #ccc;
  296. text-align: center;
  297. margin-left: 6px;
  298. }
  299. .lod_name {
  300. text-align: center;
  301. font-size: 16px;
  302. }
  303. }
  304. }
  305. .fixed-message{
  306. position: fixed;
  307. bottom: 30%;
  308. right: 20px;
  309. z-index: 9;
  310. cursor: pointer;
  311. }
  312. .production_bottom_box{
  313. width: 90%;
  314. margin: 0 auto;
  315. overflow: hidden;
  316. .production_bottom_title{
  317. font-family: Source Han Sans CN;
  318. font-weight: bold;
  319. font-size: 18px;
  320. color: #000;
  321. line-height: 36px;
  322. }
  323. .submit_box /deep/{
  324. width: 100%;
  325. border-radius: 1px;
  326. background: rgba(255, 255, 255, .9);
  327. overflow: hidden;
  328. .el-form{
  329. width: 100%;
  330. margin: 46px auto 0;
  331. .el_input{
  332. display: flex;
  333. align-items: center;
  334. justify-content: space-between;
  335. .el-input__inner{
  336. border: 1px solid #0466b5;
  337. }
  338. .el-form-item{
  339. width: 48%;
  340. }
  341. }
  342. .el_input_message{
  343. .el-textarea__inner{
  344. border: 1px solid #0466b5;
  345. }
  346. .el-form-item{
  347. width: 100%;
  348. }
  349. }
  350. }
  351. .submit_bottom{
  352. margin: 20px 0 20px 130px;
  353. width: 914px;
  354. display: flex;
  355. align-items: center;
  356. justify-content: space-between;
  357. .submit_bottom_text{
  358. font-family: Source Han Sans CN;
  359. font-weight: 500;
  360. font-size: 16px;
  361. color: #0466B5;
  362. line-height: 36px;
  363. }
  364. .submit_bottom_button{
  365. width: 330px;
  366. height: 45px;
  367. line-height: 45px;
  368. background: #0466B5;
  369. font-family: Source Han Sans CN;
  370. font-weight: 500;
  371. font-size: 18px;
  372. color: #FFFFFF;
  373. text-align: center;
  374. cursor: pointer;
  375. }
  376. }
  377. }
  378. }
  379. @media screen and (min-width: 751px) and (max-width: 9999px) {
  380. .app {
  381. // display: flex;
  382. // flex-direction: column;
  383. }
  384. .bigbox {
  385. height: 100%;
  386. }
  387. .home_b {
  388. height: 100%;
  389. }
  390. .noHome {
  391. min-height: 100%;
  392. display: flex;
  393. flex-direction: column;
  394. .header {
  395. position: sticky;
  396. top: 0;
  397. z-index: 9;
  398. }
  399. }
  400. .content_app {
  401. flex: 1;
  402. width: 1200px;
  403. margin: 0 auto;
  404. padding: 20px 0
  405. }
  406. .content{
  407. width: 100%;
  408. }
  409. }
  410. @media screen and (max-width: 1200px) {
  411. .content_app {
  412. width: 100% !important;
  413. padding: 20px;
  414. }
  415. }
  416. @media screen and (min-width: 0px) and (max-width: 750px) {
  417. .app /deep/{
  418. // display: flex;
  419. // flex-direction: column;
  420. min-height: 6rem;
  421. .el-icon-loading {
  422. font-size: 0.6rem !important;
  423. color: #ccc;
  424. text-align: center;
  425. margin-left: 0px !important;
  426. }
  427. .el-dialog__title{
  428. font-family: Source Han Sans CN;
  429. font-weight: bold;
  430. font-size: 18px;
  431. color: #000;
  432. }
  433. }
  434. .production_bottom_box{
  435. width: 100% !important;
  436. .production_bottom_title{
  437. line-height: 1;
  438. }
  439. .submit_box /deep/{
  440. .el-form{
  441. margin-top: 0 !important;
  442. }
  443. .el_input{
  444. width: 100%;
  445. .el-form-item{
  446. width: 100% !important;
  447. .el-form-item__label{
  448. font-size: 12px !important;
  449. }
  450. }
  451. }
  452. .submit_bottom{
  453. width: 100% !important;
  454. margin: 0;
  455. padding-left: 140px;
  456. flex-wrap: wrap;
  457. .submit_bottom_text{
  458. width: 100% !important;
  459. font-size: 12px;
  460. line-height: 20px;
  461. }
  462. .submit_bottom_button{
  463. margin-top: 0.1rem;
  464. }
  465. }
  466. }
  467. }
  468. .bigbox {
  469. height: 100%;
  470. }
  471. .home_b {
  472. height: 100%;
  473. }
  474. .noHome {
  475. height: 100%;
  476. display: flex;
  477. flex-direction: column;
  478. }
  479. .content {
  480. flex: 1;
  481. width: 100%;
  482. margin: 0 auto;
  483. // padding: 0.2rem;
  484. }
  485. .content_app {
  486. flex: 1;
  487. width: 100%;
  488. margin: 0 auto;
  489. // padding: 0.2rem;
  490. }
  491. .fixed-message{
  492. display: none;
  493. }
  494. }
  495. // loading
  496. </style>