wei

src/App.vue

@@ -6,7 +6,7 @@
         <div :class="$route.meta.fullScreen ? 'content' :'content_app'">
           <!-- <keep-alive include="AntigenPreparation"> -->
             <router-view :key="key"/>
-            <sidebox class="fixed-message"></sidebox>
+            <sidebox></sidebox>
           <!-- </keep-alive> -->
         </div>
         <footerbox></footerbox>

src/components/sidebox.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="sidebox-box">
-    <div @click="drawer = true" class="fixedMessages">
-        <img src="@/assets/img/side/sideimg.png" alt="" class="fixed-messageImg">
-        <p v-if="lang == 'cn'" class="fixed-text">三优<br/>导航</p>
-        <p v-if="lang == 'en'" class="fixed-text">Sanyou<br/>navigation</p>
+    <div class="fixedMessages">
+        <img src="@/assets/img/side/sideimg1.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>
+        <!-- <p v-if="lang == 'cn'" class="fixed-text">三优<br/>导航</p> -->
+        <!-- <p v-if="lang == 'en'" class="fixed-text">Sanyou<br/>navigation</p> -->
     </div>
     <el-drawer
     title=""
@@ -61,9 +67,110 @@
             </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.leaveaMessage") }}</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">
+              <el-form-item :label="$t('input.catalogNumber') + ':'">
+                <el-input v-model="form.catalog"></el-input>
+              </el-form-item>
+              <el-form-item :label="$t('input.productName') + ':'">
+                <el-input v-model="form.productName"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input_message">
+              <el-form-item :label="$t('input.Comments') + ':'">
+                <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.leaveaMessage')"
+      :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">
+              <el-form-item :label="$t('input.catalogNumber') + ':'">
+                <el-input v-model="form.catalog"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input">
+              <el-form-item :label="$t('input.productName') + ':'">
+                <el-input v-model="form.productName"></el-input>
+              </el-form-item>
+            </div>
+            <div class="el_input_message">
+              <el-form-item :label="$t('input.Comments') + ':'">
+                <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: {
@@ -71,7 +178,19 @@ export default {
   data() {
     return {
       lang: this.$i18n.locale,
-      drawer: false
+      drawer: false,
+      dialogVisible: false,
+      form: {
+        catalog: "",
+        company: "",
+        email: "",
+        message: "",
+        name: "",
+        phone: "",
+        productName: ""
+      },
+      fullscreenLoading: false,
+      isTop: false // 是否回到顶部
     };
   },
   watch: {
@@ -79,8 +198,117 @@ export default {
   created() {
   },
   mounted() {
+    // 监听滚动
+    window.addEventListener("scroll", this.handleScroll, true);
+  },
+  beforeDestroy() {
+    // 移除监听
+    window.removeEventListener("scroll", this.handleScroll, true);
   },
   methods: {
+    // 判断是否是周一到周五 8点半到下午5点半  这段时间
+    isWeekday() {
+      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 () {
+      YSF.init('467cad5bb74586dff3727cc6e20b014f', {
+        hidden: 1 // hidden 表示是否隐藏访客端默认入口
+      }).then(ysf => {
+        ysf("config", {
+          title: "SRC",
+          level: 1,
+          success: function () {
+            ysf('open')
+          },
+          error: function (err) {
+            console.log(err, "配置失败，拒绝 Promise 并返回错误信息"); // 配置失败，拒绝 Promise 并返回错误信息
+          }
+        })
+      }).catch(error => {
+        console.log('sdk加载失败---', error);
+      });
+    },
+    // 验证
+    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/submit", this.from).then(res => {
+          if (res.code == 0) {
+            this.$message({
+              message: this.$t("input.YourMessage"),
+              type: "success"
+            });
+            this.form = {
+              catalog: "",
+              company: "",
+              email: "",
+              message: "",
+              name: "",
+              phone: "",
+              productName: ""
+            };
+            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/";
@@ -156,22 +384,43 @@ export default {
 <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{
-          display: flex;
-          align-items: center;
-          background: linear-gradient(180deg, #22AB3A, #1880C1);
-          padding: 10px;
-          border-top-left-radius: 50px;
-          border-bottom-left-radius: 50px;
+          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{
-              width: 60px;
-              margin-right: 10px;
+              display: block;
+              margin: 0 auto 32px;
+              width: 65px;
+              background: linear-gradient(180deg, #22AB3A, #1880C1);
+              padding: 5px;
+              border-radius: 50%;
+              cursor: pointer;
             }
-            .fixed-text{
-              font-size: 16px;
-              color: #fff;
-              text-align: center;
+            .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/{
@@ -193,6 +442,7 @@ export default {
                             align-items: center;
                             justify-content: center;
                             border-radius: 50%;
+                            cursor: pointer;
                             .sideboxFixedImg{
                                 width: 50px;
                                 height: 50px;
@@ -231,15 +481,116 @@ export default {
                 }
             }
         }
+        .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.9rem;
+          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.3rem;
+          overflow: hidden;
             .fixed-messageImg{
+              display: block;
+              margin: 0 auto 0.3rem;
+              width: 0.6rem;
+              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: 18px;
+                color: #989898;
+                line-height: 1;
+                text-align: center;
+              }
             }
         }
         .el-drawer__wrapper /deep/{
@@ -276,6 +627,86 @@ export default {
                 }
             }
         }
+        .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;
+              }
+            }
+          }
+        }
     }
 
 }

src/langs/cn/index.js

@@ -221,22 +221,28 @@ export default {
     Expression: "Expression",
     Product: "Product Description"
   },
-  input: {
-    all: "All",
-    Diagnostic: "Diagnostic",
-    fullname: "Full Name",
-    country: "Country / Region",
-    companyInstitution: "Company / Institution",
-    address: "Address",
-    email: "Email Address",
-    telFor: "Comments",
-    company: "Company",
-    tel: "Tel",
-    catalogNumber: "Catalog Number",
-    productName: "Product Name",
-    leaveaMessage: "Leave a Message",
-    enterkeywords: "Enter Keywords",
-    address_must: "Please fill in your address accurately to prevent samples from not being received"
+  input: { // 输入框
+    all: '全部',
+    Diagnostic: '检测试剂',
+    fullname: '姓名',
+    country: '国家/地区',
+    companyInstitution: '公司/机构',
+    address: '地址',
+    email: '电子邮箱',
+    telFor: '例如，研究方向',
+    company: '公司',
+    tel: '电话',
+    catalogNumber: '货号',
+    productName: '产品名称',
+    leaveaMessage: '给我们留言',
+    enterkeywords: '输入关键字',
+    address_must: '请准确填写您的地址，以防样品接收不到。例如：国家/省/市/区/街道/楼号',
+    Wewill: '我们会在24小时内通过电子邮件联系您',
+    Comments: '备注',
+    submit: '提交',
+    empty: '是必填的',
+    emailY: '请填写正确的',
+    YourMessage: '您的留言信息提交成功'
   },
   menu: {
     protein: "Protein",

src/langs/en/index.js

@@ -222,21 +222,27 @@ export default {
     Product: "Product Description"
   },
   input: {
-    all: "All",
-    Diagnostic: "Diagnostic",
-    fullname: "Full Name",
-    country: "Country / Region",
-    companyInstitution: "Company / Institution",
-    address: "Address",
-    email: "Email Address",
-    telFor: "Comments",
-    company: "Company",
-    tel: "Tel",
-    catalogNumber: "Catalog Number",
-    productName: "Product Name",
-    leaveaMessage: "Leave a Message",
-    enterkeywords: "Enter Keywords",
-    address_must: "Please fill in your address accurately to prevent samples from not being received"
+    all: 'All',
+    Diagnostic: 'Diagnostic',
+    fullname: 'Full Name',
+    country: 'Country / Region',
+    companyInstitution: 'Company / Institution',
+    address: 'Address',
+    email: 'Email Address',
+    telFor: 'Comments',
+    company: 'Company',
+    tel: 'Tel',
+    catalogNumber: 'Catalog Number',
+    productName: 'Product Name',
+    leaveaMessage: 'Leave a Message',
+    enterkeywords: 'Enter Keywords',
+    address_must: 'Please fill in your address accurately to prevent samples from not being received',
+    Wewill: 'We will contact you by email Within 24 hours',
+    Comments: 'Comments',
+    submit: 'Submit',
+    empty: 'Is Required',
+    emailY: 'Format is Incorrect',
+    YourMessage: 'Your message was submitted successfully'
   },
   menu: {
     protein: "Protein",