crs-double-resistance/src/components/sidebox.vue

<template>
  <div class="sidebox-box">
    <div class="fixedMessages">
        <img src="@/assets/img/side/zn.png" alt="" class="fixed-messageImg" @click="drawer = true">
        <img src="@/assets/img/side/sideimg2.png" alt="" class="fixed-messageImg" v-if="!isWeekday()" @click="dialogVisible = true">
        <img src="@/assets/img/side/sideimg3.png" alt="" class="fixed-messageImg" v-if="isWeekday()" @click="init">
        <div class="fixedMessagesBox" v-if="isTop" @click="goTop">
          <img src="@/assets/img/side/sideimg4.png" alt="" class="fixedMessagesImg">
          <p class="fixedMessagesText">TOP</p>
        </div>
    </div>
    <el-drawer
    title=""
    :visible.sync="drawer"
    :with-header="false">
        <div class="sideboxContent">
            <div class="sideboxFixed">
                <div class="sideboxFixedImgBox" @click="drawer = false">
                    <img src="@/assets/img/side/zn.png" alt="" class="sideboxFixedImg">
                </div>
                <div class="sideboxFixedBox"></div>
            </div>
            <p class="sideboxTitle">{{ $t("table.Website") }}</p>
            <div class="Contentbox">
                <div class="singleBox" @click="gotoSanyou">
                    <p class="singleBoxText">Sanyou</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-07.png" alt="">
                </div>
                <!-- <div class="singleBox" @click="gotoCRO">
                    <p class="singleBoxText">CRO</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-01.png" alt="">
                </div>
                <div class="singleBox" @click="gotoCDO">
                    <p class="singleBoxText">CDO</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-02.png" alt="">
                </div>
                <div class="singleBox" @click="gotoCPO">
                    <p class="singleBoxText">CPO</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-03.png" alt="">
                </div> -->
                <div class="singleBox" @click="gotoCRS">
                    <p class="singleBoxText">CRS</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-10.png" alt="">
                </div>
                <div class="singleBox" @click="gotooneClick">
                    <p class="singleBoxText">oneClick⁺</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-05.png" alt="">
                </div>
                <!-- <div class="singleBox" @click="gotomRNA">
                    <p class="singleBoxText">mRNA</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-08.png" alt="">
                </div> -->
                <div class="singleBox" @click="gotoAbx">
                    <p class="singleBoxText">Abx</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-06.png" alt="">
                </div>
                <!-- <div class="singleBox" @click="gotoBSAb">
                    <p class="singleBoxText">BsAb</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-04.png" alt="">
                </div> -->
                <div class="singleBox" @click="gotoHumab">
                    <p class="singleBoxText">Humab</p>
                    <img class="singleBoxImg" src="@/assets/img/side/C-09.png" alt="">
                </div>
            </div>
        </div>
    </el-drawer>
    <el-dialog
      title=""
      v-if="!$util.isMobileDevice()"
      :visible.sync="dialogVisible"
      width="1200px">
      <div class="production_bottom_box">
        <p class="production_bottom_title">{{ $t("input.Comments") }}</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="$t('input.fullname') + ':'" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item :label="$t('input.company') + ':'" required>
                <el-input v-model="form.company"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item :label="$t('input.email') + ':'" required>
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item :label="$t('input.tel') + ':'">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </div>
            <div class="el_input_message">
              <el-form-item :label="$t('input.leaveaMessage') + ':'">
                <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">{{ $t("input.Wewill") }}</p>
            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">{{ $t("input.submit") }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 移动端 -->
    <el-dialog
      v-if="$util.isMobileDevice()"
      :title="$t('input.Comments')"
      :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="$t('input.fullname') + ':'" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item :label="$t('input.company') + ':'" required>
                <el-input v-model="form.company"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item :label="$t('input.email') + ':'" required>
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </div>
            <div class="el_input">
              <el-form-item :label="$t('input.tel') + ':'">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </div>
            <div class="el_input_message">
              <el-form-item :label="$t('input.leaveaMessage') + ':'">
                <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">{{ $t("input.Wewill") }}</p>
            <p class="submit_bottom_button" @click="postSubmit" v-loading.fullscreen.lock="fullscreenLoading">{{ $t("input.submit") }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { toTop } from "@/js/util/utilList.js"
import YSF from '@neysf/qiyu-web-sdk';
export default {
  name: "sidebox",
  components: {
  },
  data() {
    return {
      lang: this.$i18n.locale,
      drawer: false,
      dialogVisible: false,
      form: {
        name: "",
        company: "",
        email: "",
        phone: "",
        message: ""
      },
      fullscreenLoading: false,
      isTop: false // 是否回到顶部
    };
  },
  watch: {
  },
  created() {
  },
  mounted() {
    // 监听滚动
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    // 判断是否是周一到周五 8点半到下午5点半  这段时间
    isWeekday() {
      if (this.lang == "cn") {
        const now = new Date();
        const weekday = now.getDay(); // 0-6 0代表周日
        const hour = now.getHours(); // 0-23 
        const minute = now.getMinutes(); // 0-59
        console.log(weekday, hour, minute);
        // 检查是否在周一到周五，且时间在 8:30 到 17:30 之间
        if (weekday >= 1 && weekday <= 5) {
          const totalMinutes = hour * 60 + minute;
          const startMinutes = 8 * 60 + 30;
          const endMinutes = 17 * 60 + 30;
          console.log(totalMinutes, startMinutes, endMinutes, totalMinutes >= startMinutes && totalMinutes <= endMinutes);
          return totalMinutes >= startMinutes && totalMinutes <= endMinutes;
        }
      }
      return false;
    },
    init () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      YSF.init("467cad5bb74586dff3727cc6e20b014f", {
        hidden: 1 // hidden 表示是否隐藏访客端默认入口
      }).then(ysf => {
        ysf("config", {
          title: "BsAb",
          level: 1,
          success: function () {
            ysf("open")
            loading.close();
          },
          error: function (err) {
            this.$message.error(err);
            loading.close();
          }
        })
      }).catch(error => {
        this.$message.error(error);
        loading.close();
      });
    },
    // 验证
    verification() {
      if (this.form.name == "") {
        this.$message.error(
          this.$t("input.fullname") + this.$t("input.empty")
        );
        return false;
      } else if (this.form.company == "") {
        this.$message.error(
          this.$t("input.company") + this.$t("input.empty")
        );
        return false;
      } else if (this.form.email == "") {
        this.$message.error(this.$t("input.email") + this.$t("input.empty"));
        return false;
      } else if (!this.$util.isEmail(this.form.email)) {
        this.$message.error(this.$t("input.email") + this.$t("input.emailY"));
        return false;
      } else {
        return true;
      }
    },
    postSubmit() {
      if (this.verification()) {
        this.fullscreenLoading = true;
        this.$api.post("message/submitCommon", {
          ...this.form,
          source: 10
        }).then(res => {
          if (res.code == 0) {
            this.$message({
              message: this.$t("input.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
          }
        });
      }
    },
    // 判断滚动条位置
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 100) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    },
    // 回到顶部
    goTop() {
      toTop()
      this.isTop = false;
    },
    gotoSanyou() {
      if (this.lang == "en") {
        window.location.href = "https://sanyoubio.com/";
      } else {
        window.location.href = "https://sanyoubio.com.cn/";
      }
    },
    gotoCRO() {
      if (this.lang == "en") {
        window.location.href = "https://sanyoubio.com/service?value=pointCRO";
      } else {
        window.location.href = "https://sanyoubio.com.cn/service?value=pointCRO";
      }
    },
    gotoCDO() {
      if (this.lang == "en") {
        window.location.href = "https://sanyoubio.com/service?value=pointCDO";
      } else {
        window.location.href = "https://sanyoubio.com.cn/service?value=pointCDO";
      }
    },
    gotoCPO() {
      if (this.lang == "en") {
        window.location.href = "https://sanyoubio.com/service?value=pointCPO";
      } else {
        window.location.href = "https://sanyoubio.com.cn/service?value=pointCPO";
      }
    },
    gotoCRS() {
      if (this.lang == "en") {
        window.location.href = "https://crs.sanyoubio.com/?utm_source=www";
      } else {
        window.location.href = "https://crs.sanyoubio.com.cn/?utm_source=www";
      }
    },
    gotooneClick() {
      if (this.lang == "en") {
        window.location.href = "https://www.oneclick-plus.com/?utm_source=www";
      } else {
        window.location.href = "https://www.oneclick-plus.cn/?utm_source=www";
      }
    },
    gotomRNA() {
      if (this.lang == "en") {
      } else {
      }
    },
    gotoAbx() {
      if (this.lang == "en") {
        window.location.href = "https://abx.sanyoubio.com/?utm_source=www";
      } else {
        window.location.href = "https://abx.sanyoubio.com.cn/?utm_source=www";
      }
    },
    gotoBSAb() {
      if (this.lang == "en") {
        window.location.href = "https://bsab.sanyoubio.com/?utm_source=www";
      } else {
        window.location.href = "https://bsab.sanyoubio.com.cn/?utm_source=www";
      }
    },
    gotoHumab() {
      if (this.lang == "en") {
        window.location.href = "https://humab.sanyoubio.com/?utm_source=www";
      } else {
        window.location.href = "https://humab.sanyoubio.com.cn/?utm_source=www";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
    .sidebox-box{
        position: fixed;
        bottom: 30%;
        right: 0px;
        z-index: 9999;
        .fixedMessages{
          width: 100px;
          background: #FFFFFF;
          box-shadow: 0px 2px 27px 0px rgba(105,105,105,0.35);
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          padding-top: 32px;
          overflow: hidden;
            .fixed-messageImg{
              display: block;
              margin: 0 auto 32px;
              width: 65px;
              background: linear-gradient(180deg, #22AB3A, #1880C1);
              padding: 5px;
              border-radius: 50%;
              cursor: pointer;
            }
            .fixedMessagesBox{
              margin: 0 auto 28px;
              cursor: pointer;
              .fixedMessagesImg{
                display: block;
                width: 20px;
                margin: 0 auto;
              }
              .fixedMessagesText{
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 18px;
                color: #989898;
                line-height: 1;
                text-align: center;
              }
            }
        }
        .el-drawer__wrapper /deep/{
            .el-drawer{
                width: 320px !important;
                .sideboxContent{
                    .sideboxFixed{
                        position: fixed;
                        bottom: 30%;
                        right: 320px;
                        z-index: 9;
                        display: flex;
                        align-items: center;
                        .sideboxFixedImgBox{
                            width: 65px;
                            height: 65px;
                            background: #fff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 50%;
                            cursor: pointer;
                            .sideboxFixedImg{
                                width: 50px;
                                height: 50px;
                                background: -webkit-gradient(linear, left top, left bottom, from(#22ab3a), to(#1880c1));
                                padding: 5px;
                                border-radius: 50%;
                            }
                        }
                        .sideboxFixedBox{
                            width: 40px;
                            height: 3px;
                            background: #fff;
                        }
                    }
                    .sideboxTitle{
                        background: #065ba9;
                        font-size: 32px;
                        text-align: center;
                        color: #fff;
                        height: 80px;
                        line-height: 80px;
                    }
                    .Contentbox{
                        padding: 0 50px;
                        .singleBox{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-top: 20px;
                            .singleBoxText{
                                font-size: 26px;
                                font-weight: 600;
                            }
                            .singleBoxImg{
                                width: 50px;
                            }
                        }
                    }
                }
            }
        }
        .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: 0px) and (max-width: 750px) {
    .sidebox-box{
        position: fixed;
        bottom: 30%;
        right: 0px;
        z-index: 9999;
        .fixedMessages{
          width: 0.6rem;
          background: #FFFFFF;
          box-shadow: 0px 2px 27px 0px rgba(105,105,105,0.35);
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          padding-top: 0.2rem;
          overflow: hidden;
            .fixed-messageImg{
              display: block;
              margin: 0 auto 0.2rem;
              width: 0.4rem;
              background: linear-gradient(180deg, #22AB3A, #1880C1);
              padding: 5px;
              border-radius: 50%;
              cursor: pointer;
            }
            .fixedMessagesBox{
              margin: 0 auto 0.25rem;
              cursor: pointer;
              .fixedMessagesImg{
                display: block;
                width: 0.2rem;
                margin: 0 auto;
              }
              .fixedMessagesText{
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 14px;
                color: #989898;
                line-height: 1;
                text-align: center;
              }
            }
        }
        .el-drawer__wrapper /deep/{
            .el-drawer{
                width: 2.4rem !important;
                .sideboxContent{
                    .sideboxFixed{
                        display: none;
                    }
                    .sideboxTitle{
                        background: #065ba9;
                        font-size: 0.24rem;
                        text-align: center;
                        color: #fff;
                        height: 0.8rem;
                        line-height: 0.8rem;
                    }
                    .Contentbox{
                        padding: 0 0.4rem;
                        .singleBox{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-top: 0.2rem;
                            .singleBoxText{
                                font-size: 0.18rem;
                                font-weight: 600;
                            }
                            .singleBoxImg{
                                width: 0.5rem;
                            }
                        }
                    }
                }
            }
        }
        .production_bottom_box{
          width: 100% !important;
          margin: 0 auto;
          overflow: hidden;
          .production_bottom_title{
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #000;
            line-height: 1;
          }
          .submit_box /deep/{
            width: 100%;
            border-radius: 1px;
            background: rgba(255, 255, 255, .9);
            overflow: hidden;
            .el-form{
              width: 100%;
              margin: 0 auto;
              .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%;
                }
              }
            }
            .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;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              .submit_bottom_text{
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #0466B5;
                width: 100% !important;
                font-size: 12px;
                line-height: 20px;
              }
              .submit_bottom_button{
                width: 100%;
                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;
                margin-top: 0.1rem;
              }
            }
          }
        }
    }

}
</style>