添加活动

src/components/homeHeader.vue

@@ -12,6 +12,7 @@
             <el-menu-item index="home">{{ $t("nav.Overview") }}</el-menu-item>
             <!-- <el-menu-item index="article">{{ $t("nav.RelatedArticles") }}</el-menu-item> -->
             <el-menu-item index="product">{{ $t("nav.ProductDetails") }}</el-menu-item>
+            <el-menu-item index="promotion">Promotion</el-menu-item>
             <!-- <el-menu-item index="antibody">{{ $t("nav.AntibodyDatabase") }}</el-menu-item> -->
             <el-menu-item index="profile">{{ $t("nav.MaterialsDownload") }}</el-menu-item>
             <!-- <el-menu-item index="">Materials Download</el-menu-item> -->
@@ -38,6 +39,7 @@
             <el-menu-item index="article">{{ $t("nav.RelatedArticles") }}</el-menu-item>
             <!-- <el-menu-item index="product">{{ $t("nav.ProductDetails") }}</el-menu-item> -->
             <el-menu-item index="antibody">{{ $t("nav.AntibodyDatabase") }}</el-menu-item>
+            <el-menu-item index="promotion">Promotion</el-menu-item>
             <!-- <el-menu-item index="profile">{{ $t("nav.MaterialsDownload") }}</el-menu-item> -->
             <!-- <el-menu-item index="">Materials Download</el-menu-item> -->
             <el-menu-item index="contact">{{ $t("button.contactUs") }}</el-menu-item>

src/langs/cn/index.js

@@ -2,11 +2,13 @@ import tdk from "./tdk"
 import advertisement from "./advertisement"
 import antigen from "./antigen"
 import downloadList from "./DownloadList"
+import Promotion from "./promotion"
 export default {
   antigen,
   advertisement,
   tdk,
   downloadList,
+  Promotion,
   // 资料下载
   Download: {
     LatestInformation: 'Latest information',

src/langs/cn/promotion/index.js

@@ -0,0 +1,87 @@
+export default {
+  time: "Activity time",
+  viewAll: "View All",
+  activityDoing: "In progress",
+  activityDone: "Ended",
+  activityNotStarted: "Not started",
+  list: [
+    {
+      imgName: "promotion/en/banner_holophyly.png",
+      title: "Whole Series Bispecific Reference Antibody",
+      desc: "72 bispecific reference antibodies available for selection",
+      time: ["2025-03-05", "2025-04-05"],
+      pageRoute: "/bispecific-antibody-reference"
+    },
+    {
+      imgName: "promotion/en/monkeypox.jpg",
+      title: "Whole Series Monkeypox Products Samples for Free",
+      desc: "26 antigens and 27 antibodies are available",
+      time: ["2024-08-25", "2024-09-30"],
+      pageRoute: "/monkeypox-free-samples-application"
+    },
+    {
+      imgName: "promotion/en/free-sample.jpg",
+      title: "Discover High-quality Reference Antibody Samples for Free",
+      desc: "Explore now and advance your research with our high-quality antibodies",
+      time: [],
+      pageRoute: "/apply-free-samples"
+    }
+    // {
+    //   imgName: "promotion/en/banner_ADC_en_new.jpg",
+    //   title: "ADC参比抗体队伍再壮大，抗体试用活动限时开放！",
+    //   desc: "39个热门靶点现货ADC抗体可供选择",
+    //   time: ["2024-04-01", "2024-12-31"],
+    //   pageRoute: "/adc-reference-antibody-free-samples-application"
+    // },
+    // {
+    //   imgName: "promotion/en/banner_thanksgiving_en_new.jpg",
+    //   title: "感恩季 温情大回馈 400种现货抗体免费送",
+    //   desc: "抗体大放送，400个现货抗体可供选择",
+    //   time: ["2023-11-21", "2023-12-21"],
+    //   pageRoute: "/gratefulness-giving-back"
+    // },
+    // {
+    //   imgName: "promotion/en/banner_dankang_en_new.jpg",
+    //   title: "千载难逢-单抗标准品促销大放送，超值特惠，质量有保证！",
+    //   desc:
+    //     "幸运客户（第1、50、100个客户）享受一年内免费领取30个试用装福利",
+    //   time: ["2023-07-01", "2023-07-31"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_baijie_en_new.jpg",
+    //   title: "白介新时代—IL-23抗体免费送",
+    //   desc: "高纯度、高活性IL-23相关抗体免费试用",
+    //   time: ["2023-04-28", "2023-05-28"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_gaopingzhi_en_new.jpg",
+    //   title: "高品质抗体- PD-1/PD-L1免费送",
+    //   desc: "高品质PD-1 / PD-L1靶点多种抗体免费送，数量有限，先到先得",
+    //   time: ["2023-04-01", "2023-06-01"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_gaopingzhi_kangyuan_kangti_en_new.jpg",
+    //   title: "高品质抗原抗体- IGF-1免费送",
+    //   desc: "高品质IGF-1相关抗原抗体免费试用",
+    //   time: ["2023-02-24", "2023-04-30"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_yuehui_en_new.jpg",
+    //   title: "约“惠”三优 免疫检查点蛋白抗体免费送",
+    //   desc: "在这个春天与三优相约，热门靶点蛋白免费挑选",
+    //   time: ["2023-02-24", "2023-03-30"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_ADC_duizhaopin_en_new.jpg",
+    //   title: "ADC对照品新品上线，免费试用",
+    //   desc: "多种验证数据的ADC抗体免费用",
+    //   time: ["2023-02-24", "2023-03-21"],
+    //   pageRoute: ""
+    // }
+  ]
+}

src/langs/en/index.js

@@ -2,11 +2,13 @@ import tdk from "./tdk"
 import advertisement from "./advertisement"
 import antigen from "./antigen"
 import downloadList from "./DownloadList"
+import Promotion from "./promotion"
 export default {
   antigen,
   advertisement,
   tdk,
   downloadList,
+  Promotion,
   // 资料下载
   Download: {
     LatestInformation: 'Latest information',

src/langs/en/promotion/index.js

@@ -0,0 +1,87 @@
+export default {
+  time: "Activity time",
+  viewAll: "View All",
+  activityDoing: "In progress",
+  activityDone: "Ended",
+  activityNotStarted: "Not started",
+  list: [
+    {
+      imgName: "promotion/en/banner_holophyly.png",
+      title: "Whole Series Bispecific Reference Antibody",
+      desc: "72 bispecific reference antibodies available for selection",
+      time: ["2025-03-05", "2025-04-05"],
+      pageRoute: "/bispecific-antibody-reference"
+    },
+    {
+      imgName: "promotion/en/monkeypox.jpg",
+      title: "Whole Series Monkeypox Products Samples for Free",
+      desc: "26 antigens and 27 antibodies are available",
+      time: ["2024-08-25", "2024-09-30"],
+      pageRoute: "/monkeypox-free-samples-application"
+    },
+    {
+      imgName: "promotion/en/free-sample.jpg",
+      title: "Discover High-quality Reference Antibody Samples for Free",
+      desc: "Explore now and advance your research with our high-quality antibodies",
+      time: [],
+      pageRoute: "/apply-free-samples"
+    }
+    // {
+    //   imgName: "promotion/en/banner_ADC_en_new.jpg",
+    //   title: "ADC参比抗体队伍再壮大，抗体试用活动限时开放！",
+    //   desc: "39个热门靶点现货ADC抗体可供选择",
+    //   time: ["2024-04-01", "2024-12-31"],
+    //   pageRoute: "/adc-reference-antibody-free-samples-application"
+    // },
+    // {
+    //   imgName: "promotion/en/banner_thanksgiving_en_new.jpg",
+    //   title: "感恩季 温情大回馈 400种现货抗体免费送",
+    //   desc: "抗体大放送，400个现货抗体可供选择",
+    //   time: ["2023-11-21", "2023-12-21"],
+    //   pageRoute: "/gratefulness-giving-back"
+    // },
+    // {
+    //   imgName: "promotion/en/banner_dankang_en_new.jpg",
+    //   title: "千载难逢-单抗标准品促销大放送，超值特惠，质量有保证！",
+    //   desc:
+    //     "幸运客户（第1、50、100个客户）享受一年内免费领取30个试用装福利",
+    //   time: ["2023-07-01", "2023-07-31"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_baijie_en_new.jpg",
+    //   title: "白介新时代—IL-23抗体免费送",
+    //   desc: "高纯度、高活性IL-23相关抗体免费试用",
+    //   time: ["2023-04-28", "2023-05-28"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_gaopingzhi_en_new.jpg",
+    //   title: "高品质抗体- PD-1/PD-L1免费送",
+    //   desc: "高品质PD-1 / PD-L1靶点多种抗体免费送，数量有限，先到先得",
+    //   time: ["2023-04-01", "2023-06-01"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_gaopingzhi_kangyuan_kangti_en_new.jpg",
+    //   title: "高品质抗原抗体- IGF-1免费送",
+    //   desc: "高品质IGF-1相关抗原抗体免费试用",
+    //   time: ["2023-02-24", "2023-04-30"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_yuehui_en_new.jpg",
+    //   title: "约“惠”三优 免疫检查点蛋白抗体免费送",
+    //   desc: "在这个春天与三优相约，热门靶点蛋白免费挑选",
+    //   time: ["2023-02-24", "2023-03-30"],
+    //   pageRoute: ""
+    // },
+    // {
+    //   imgName: "promotion/en/banner_ADC_duizhaopin_en_new.jpg",
+    //   title: "ADC对照品新品上线，免费试用",
+    //   desc: "多种验证数据的ADC抗体免费用",
+    //   time: ["2023-02-24", "2023-03-21"],
+    //   pageRoute: ""
+    // }
+  ]
+}

src/router/routerList.js

@@ -139,5 +139,16 @@ export default [
       navActive: "articleDetail",
       fullScreen: true
     }
+  }, {
+    path: "/promotion",
+    name: "promotion",
+    component: () => import("@/view/promotion/index"),
+    hidden: true,
+    meta: {
+      pageTitle: "promotion",
+      chineseTitle: "申请免费样品",
+      navActive: "promotion",
+      fullScreen: false
+    }
   }
-]
+]

src/view/promotion/Components/AllSample.vue

@@ -0,0 +1,350 @@
+<template>
+  <div>
+    <div class="input_box">
+      <el-input
+        :placeholder="$t('input.enterkeywords')"
+        v-model="catalog"
+        @clear="inputClear"
+        @change="
+          pageable.page = 0;
+          searchByCatalog();
+        "
+        clearable
+      >
+      </el-input>
+      <div
+        class="buttom"
+        @click="
+          pageable.page = 0;
+          searchByCatalog();
+        "
+      >
+        {{ $t("button.search") }}
+      </div>
+    </div>
+    <el-table
+      :data="list"
+      class="my-table"
+      ref="multipleTable"
+      style="width: 100%; margin-top:1.5rem; margin-bottom:2rem; border-bottom: none"
+      :empty-text="$t('table.notable')"
+      max-height="500"
+      :row-key="getRowKeys"
+      :row-class-name="tableRowClassName"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" :reserve-selection="true" width="40" />
+      <el-table-column prop="catalog" :label="$t('table.catalog')" width="80" />
+      <el-table-column
+        v-if="showTarget"
+        prop="target"
+        :label="$t('table.Target')"
+        width="80"
+      />
+      <el-table-column prop="productName" :label="$t('table.productName')" />
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: "AllSample",
+  props: {
+    dataUrl: {
+      type: String,
+      default: "product/adcMarketingCampaign"
+    },
+    type: {
+      type: Number || String,
+      default: ""
+    },
+    maxNum: {
+      tpye: Number,
+      default: 10
+    },
+    checkList: {
+      type: Array,
+      default: () => []
+    },
+    showTarget: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      catalog: "", // 货号
+      pageable: {
+        page: 0,
+        size: 1000
+      },
+      list: []
+    };
+  },
+  methods: {
+    // 清空
+    inputClear() {
+      this.pageable.page = 0;
+    },
+    deleteRowSelected(targetItem) {
+      let canDelete = false;
+      for (var n = 0; n < this.list.length; n++) {
+        if (this.list[n].catalog === targetItem.catalog) {
+          canDelete = true;
+          this.$refs.multipleTable.toggleRowSelection(this.list[n], false);
+        }
+      }
+
+      if (!canDelete) {
+        this.$refs.multipleTable.toggleRowSelection(targetItem, false);
+      }
+    },
+    setTableRowSelected() {
+      const listCheck = [].concat(this.checkList);
+      if (listCheck.length === 0) {
+        this.$refs.multipleTable.clearSelection();
+      } else {
+        const needToSetList = [];
+        for (var i = 0; i < this.list.length; i++) {
+          for (var j = 0; j < listCheck.length; j++) {
+            if (listCheck[j].catalog === this.list[i].catalog) {
+              needToSetList.push(this.list[i]);
+            }
+          }
+        }
+
+        if (needToSetList.length > 0) {
+          this.$refs.multipleTable.clearSelection();
+          needToSetList.forEach(item => {
+            this.$refs.multipleTable.toggleRowSelection(item, true);
+          });
+
+          this.$emit("set-check-list", listCheck);
+        }
+      }
+    },
+    searchByCatalog() {
+      // 货号查询
+      let that = this;
+      this.$api
+        .post(this.dataUrl, {
+          criteria: {
+            keywords: this.catalog,
+            type: this.type || undefined
+          },
+          pageable: this.pageable
+        })
+        .then(res => {
+          if (res.code === 0) {
+            if (that.pageable.page === 0) {
+              this.list = res.data.content;
+            } else {
+              this.list = this.list.concat(res.data.content);
+            }
+            this.setTableRowSelected();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    handleSelectionChange(val) {
+      if (val.length > this.maxNum) {
+        this.$message({
+          message: this.$t("message.MaxNum") + this.maxNum,
+          type: "error"
+        });
+
+        const targetList = val.filter(item => {
+          return !this.checkList.includes(item);
+        });
+
+        if (targetList.length > 0) {
+          this.$refs.multipleTable.toggleRowSelection(targetList[0]);
+        }
+
+        return false;
+      } else {
+        console.log(val);
+        this.$emit("set-check-list", val);
+      }
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+    },
+    getRowKeys(row, index) {
+      return row.id;
+    },
+    postlist() {
+      let that = this;
+      this.$api
+        .post(this.dataUrl, {
+          criteria: {
+            keywords: this.catalog,
+            type: this.type || undefined
+          },
+          pageable: this.pageable
+        })
+        .then(res => {
+          if (res.code === 0) {
+            if (that.pageable.page === 0) {
+              this.list = res.data.content;
+            } else {
+              this.list = this.list.concat(res.data.content);
+            }
+          }
+        });
+    }
+  },
+  created() {
+    this.postlist();
+  }
+};
+</script>
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .input_box /deep/ {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      color: #005bab;
+      font-size: 0.14rem;
+      margin-right: 0.04rem;
+    }
+    .el-input {
+      width: 200px;
+      //   flex: 1;
+      //   font-size: 0.14rem;
+    }
+    .buttom {
+      // width: 100px;
+      text-align: center;
+      padding: 0 10px;
+      line-height: 40px;
+      color: #fff;
+      background-color: #005bab;
+      border-radius: 4px;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .my-table /deep/ {
+    .el-table__header-wrapper {
+      .cell {
+        font-size: 16px;
+        font-family: Arial;
+        font-weight: normal;
+        color: #005bab;
+      }
+
+      .el-checkbox {
+        display: none;
+      }
+    }
+    .el-table__body-wrapper {
+      tr {
+        .cell {
+          word-break: break-word;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          margin: 8px 2px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .input_box /deep/ {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      color: #005bab;
+      font-size: 0.14rem;
+      margin-right: 0.04rem;
+    }
+    .el-input {
+      flex: 1;
+      width: 100px;
+      //   font-size: 0.14rem;
+    }
+    .buttom {
+      // width: 100px;
+      text-align: center;
+      padding: 0 10px;
+      line-height: 40px;
+      color: #fff;
+      background-color: #005bab;
+      border-radius: 4px;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .my-table /deep/ {
+    border: 1px solid #dfdfdf;
+    margin-top: 0.12rem !important ;
+    margin-bottom: 0.14rem !important ;
+    .el-table__header-wrapper {
+      .el-checkbox {
+        display: none;
+      }
+
+      width: 100%;
+      .el-table__header {
+        width: 100% !important;
+        thead {
+          tr {
+            th {
+              .cell {
+                font-size: 12px;
+                padding: 0 4px;
+                font-family: Arial;
+                font-weight: bold;
+                color: #005bab;
+              }
+            }
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper {
+      .el-table__body {
+        width: 100% !important;
+        tbody {
+          .el-table__row {
+            .el-table__cell {
+              padding: 0;
+              .cell {
+                font-size: 12px;
+                padding: 0 4px;
+                line-height: 0.24rem;
+                word-break: break-word;
+              }
+            }
+          }
+        }
+      }
+      .cell {
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+      }
+    }
+    .el-table__empty-block {
+      width: 100% !important;
+    }
+  }
+}
+</style>

src/view/promotion/Components/ApplySampleTable.vue

@@ -0,0 +1,158 @@
+<template>
+  <!-- height="200" -->
+  <el-table
+    class="my-sample-table"
+    :data="list"
+    :empty-text="$t('applyFressSamples.PleaseSelectSamples')"
+    :row-key="getRowKeys"
+    :row-class-name="tableRowClassName"
+  >
+    <el-table-column prop="catalog" :label="$t('table.catalog')" width="90px">
+    </el-table-column>
+    <el-table-column prop="productName" :label="$t('table.productName')">
+    </el-table-column>
+    <el-table-column :label="$t('table.delete')" width="70px">
+      <template slot-scope="scope">
+        <img
+          style="width:24px;cursor: pointer"
+          src="@/assets/img/delete.png"
+          alt=""
+          @click="deleteList(scope.$index)"
+        />
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script>
+export default {
+  name: "ApplySampleTable",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      locale: this.$util.localeStorage()
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+    },
+    getRowKeys(row, index) {
+      return row.id;
+    },
+    deleteList(idx) {
+      this.$emit("delete-list", idx);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .my-sample-table {
+    width: 100%;
+    margin-top: 1.5rem;
+    margin-bottom: 2rem;
+    border-bottom: none;
+    line-height: 40px;
+  }
+
+  .my-sample-table /deep/ {
+    .el-table__header-wrapper {
+      .cell {
+        font-size: 16px;
+        font-family: Arial;
+        font-weight: normal;
+        color: #005bab;
+      }
+
+      .el-checkbox {
+        display: none;
+      }
+    }
+    .el-table__body-wrapper {
+      tr {
+        .cell {
+          word-break: break-word;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          margin: 8px 2px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .my-sample-table {
+    width: 100%;
+    border: 1px solid #dfdfdf;
+    margin-top: 0.12rem !important ;
+    margin-bottom: 0.14rem !important ;
+  }
+
+  .my-sample-table /deep/ {
+    .el-table__header-wrapper {
+      .el-checkbox {
+        display: none;
+      }
+
+      .el-table__header {
+        width: 100% !important;
+        thead {
+          tr {
+            th {
+              .cell {
+                font-size: 12px;
+                padding: 0 4px;
+                font-family: Arial;
+                font-weight: bold;
+                color: #005bab;
+              }
+            }
+          }
+        }
+      }
+    }
+    .el-table__body-wrapper {
+      .el-table__body {
+        width: 100% !important;
+        tbody {
+          .el-table__row {
+            .el-table__cell {
+              padding: 0;
+              .cell {
+                font-size: 12px;
+                padding: 0 4px;
+                line-height: 0.24rem;
+                word-break: break-word;
+              }
+            }
+          }
+        }
+      }
+      .cell {
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+      }
+    }
+    .el-table__empty-block {
+      width: 100% !important;
+    }
+  }
+}
+</style>

src/view/promotion/index.vue

@@ -0,0 +1,916 @@
+<template>
+  <div class="box">
+    <div class="header-image">
+      <img
+        v-if="$util.localeStorage()"
+        src="@/assets/img/ApplyFreeSample/banner_en.jpg"
+        alt=""
+        class="image"
+      />
+      <img
+        v-if="!$util.localeStorage()"
+        src="@/assets/img/ApplyFreeSample/banner_cn.jpg"
+        alt=""
+        class="image"
+      />
+    </div>
+    <div class="contentbox">
+      <div class="topcontentbox" v-if="!$util.localeStorage()">
+        <div class="title">提示</div>
+        <div class="tips_b">
+          <!-- <div class="tips_d">
+            <div class="name">活动时间：</div>
+            <div class="data">2024.04.22-2024.05.22</div>
+          </div> -->
+          <div class="tips_d">
+            <div class="name">活动方式：</div>
+            <div class="data">搜索您所需要的抗体，并确认加入领取清单。</div>
+          </div>
+          <div class="tips_d">
+            <div class="name">活动规则：</div>
+            <div class="data">
+              1. 385个现货抗体可供选择<br />
+              2. 每种产品限领一个，同一客户申请种类≤3个<br />
+              3. 抗体小样规格20 μg/个<br />
+              <!-- 4. 点击下方“申请产品试用装”，搜索您所需要的抗体，并确认加入领取清单 -->
+            </div>
+          </div>
+          <!-- <div class="tips_d">
+            <div class="data">活动最终解释权归三优生物所有。</div>
+          </div> -->
+        </div>
+      </div>
+      <div class="topcontentbox" v-if="$util.localeStorage()">
+        <div class="title">Tips</div>
+        <div class="tips_b">
+          <!-- <div class="tips_d">
+            <div class="name">Promotion Time：</div>
+            <div class="data">2024.04.22-2024.05.22</div>
+          </div> -->
+          <div class="tips_d">
+            <div class="name">Promotion Method：</div>
+            <div class="data">
+              Search for the antibodies you need, and add to the list.
+            </div>
+          </div>
+          <div class="tips_d">
+            <div class="name">Promotion Rules：</div>
+            <div class="data">
+              1. 385 spot antibodies available for selection<br />
+              2. Each product is limited to one sample when applied, and each
+              customer applies for ≤ 3 types of product<br />
+              3. 20 μg/product<br />
+              <!-- 4. Click "Free Trial Application" below, search for the antibodoies you need, and add to the list -->
+            </div>
+          </div>
+          <!-- <div class="tips_d">
+              <div class="data">The final interpretation right of the promotion belongs to SanyouBio.</div>
+            </div> -->
+        </div>
+      </div>
+      <div class="bottomcontentbox_b">
+        <p>
+          {{ $t("inquiry.ProductInformation") }}
+        </p>
+        <div
+          class="bottomcontentbox"
+          style="font-size: 16px;font-weight: bold;"
+        >
+          {{ $t("applyFressSamples.SelectedSamples") }}({{ checkList.length }})
+        </div>
+        <div class="bottomcontentbox">
+          <apply-sample-table :list="checkList" @delete-list="deleteList" />
+        </div>
+        <div
+          class="bottomcontentbox"
+          style="font-size: 16px;font-weight: bold;margin-bottom: 10px;"
+        >
+          {{ $t("applyFressSamples.AllSamples") }}
+        </div>
+        <div class="bottomcontentbox">
+          <div class="input_box">
+            <el-input
+              :placeholder="$t('input.enterkeywords')"
+              v-model="catalog"
+              @clear="inputClear"
+              @change="
+                pageable.page = 0;
+                searchByCatalog();
+              "
+              clearable
+            >
+            </el-input>
+            <div
+              class="buttom"
+              @click="
+                pageable.page = 0;
+                searchByCatalog();
+              "
+            >
+              {{ $t("button.search") }}
+            </div>
+          </div>
+          <el-table
+            :data="list"
+            ref="multipleTable"
+            style="width: 100%; margin-top:1.5rem; margin-bottom:2rem; border-bottom: none"
+            :empty-text="$t('table.notable')"
+            max-height="500"
+            :row-key="getRowKeys"
+            :row-class-name="tableRowClassName"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              type="selection"
+              :reserve-selection="true"
+              width="40"
+            />
+            <el-table-column
+              prop="catalog"
+              :label="$t('table.catalog')"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="productName"
+              :label="$t('table.productName')"
+            >
+            </el-table-column>
+            <!-- <el-table-column prop="date" :label="$t('table.size')" width="120px">
+                <template slot-scope="scope">
+                    <div class="size_data">50μg</div>
+                </template>
+                </el-table-column>
+                <el-table-column prop="date" :label="$t('table.quantity')" width="120px">
+                <template slot-scope="scope">
+                    <div class="size_data">1</div>
+                </template>
+                </el-table-column> -->
+            <!-- <el-table-column :label="$t('table.delete')" width="120px">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small"><img style="width:24px;" src="@/assets/img/delete.png" alt="" @click="deleteList(scope.$index)"></el-button>
+                </template>
+                </el-table-column> -->
+          </el-table>
+          <!-- <div class="load_b" v-if="list.length > 9 && (pageable.page+1) !== moreParams.totalPages " @click="loadList">
+                <i v-show="loadShow" class="el-icon-loading"></i>
+                <span class="load">{{$t('table.load')}}</span>
+            </div> -->
+        </div>
+      </div>
+
+      <div class="footerbox_b">
+        <p>
+          {{ $t("inquiry.YourInformation") }}
+        </p>
+        <div class="footerbox">
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.name"
+              :placeholder="$t('input.fullname')"
+            ></el-input>
+            <div class="red-t">*</div>
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.region"
+              :placeholder="$t('input.country')"
+            ></el-input>
+            <!-- <div class="red-t">*</div> -->
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.company"
+              :placeholder="$t('input.companyInstitution')"
+            ></el-input>
+            <div class="red-t">*</div>
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.shippingAddress"
+              :placeholder="$t('input.address_must')"
+            ></el-input>
+            <div class="red-t">*</div>
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.email"
+              :placeholder="$t('input.email')"
+            ></el-input>
+            <div class="red-t">*</div>
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              v-model="from.phone"
+              :placeholder="$t('input.tel')"
+            ></el-input>
+            <div class="red-t">*</div>
+          </div>
+          <div>
+            <el-input
+              class="inputbox"
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 6 }"
+              v-model="from.message"
+              :placeholder="$t('input.telFor')"
+            ></el-input>
+          </div>
+          <el-button class="buttonbox" type="primary" @click="postsubmit">{{
+            $t("button.submit")
+          }}</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import ApplySampleTable from "./Components/ApplySampleTable.vue";
+
+export default {
+  components: {
+    ApplySampleTable
+  },
+  name: "ApplySample",
+  data() {
+    return {
+      from: {
+        company: "",
+        shippingAddress: "",
+        name: "",
+        email: "",
+        phone: "",
+        region: "",
+        message: ""
+      },
+      catalog: "", // 货号
+      pageable: {
+        page: 0,
+        size: 1000
+      },
+      list: [],
+      // loadShow: false,
+      // moreParams: {},
+      checkList: [],
+      maxNum: 3
+    };
+  },
+  methods: {
+    // 清空
+    inputClear() {
+      this.pageable.page = 0;
+      // this.searchByCatalog()
+    },
+    // 删除数据
+    deleteList(e) {
+      const targetItem = this.checkList[e];
+
+      let canDelete = false;
+      for (var n = 0; n < this.list.length; n++) {
+        if (this.list[n].catalog === targetItem.catalog) {
+          canDelete = true;
+          this.$refs.multipleTable.toggleRowSelection(this.list[n], false);
+        }
+      }
+
+      if (!canDelete) {
+        // this.checkList.splice(e, 1)
+        this.$refs.multipleTable.toggleRowSelection(targetItem, false);
+      }
+
+      this.$message({
+        message: this.$t("message.delete"),
+        type: "success"
+      });
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    setTableRowSelected() {
+      const listCheck = [].concat(this.checkList);
+      if (listCheck.length === 0) {
+        this.$refs.multipleTable.clearSelection();
+      } else {
+        const needToSetList = [];
+        for (var i = 0; i < this.list.length; i++) {
+          for (var j = 0; j < listCheck.length; j++) {
+            if (listCheck[j].catalog === this.list[i].catalog) {
+              needToSetList.push(this.list[i]);
+            }
+          }
+        }
+
+        if (needToSetList.length > 0) {
+          this.$refs.multipleTable.clearSelection();
+          needToSetList.forEach(item => {
+            this.$refs.multipleTable.toggleRowSelection(item, true);
+          });
+
+          this.checkList = listCheck;
+        }
+      }
+    },
+    searchByCatalog() {
+      // 货号查询
+      let that = this;
+      this.$api
+        .post("product/crsSampleSack", {
+          criteria: {
+            keywords: this.catalog,
+            types: [1, 2]
+          },
+          pageable: this.pageable
+        })
+        .then(res => {
+          if (res.code === 0) {
+            if (that.pageable.page === 0) {
+              this.list = res.data.content;
+            } else {
+              this.list = this.list.concat(res.data.content);
+            }
+            this.setTableRowSelected();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+    },
+    postsubmit() {
+      // 提交询单
+      if (this.verification()) {
+        const params = {
+          ...this.from,
+          inquiryType: 0,
+          inquiryDetailList: this.checkList.map(item => {
+            return {
+              catalog: item.catalog,
+              productName: item.productName,
+              quantity: 1,
+              size: 20,
+              unit: "μg"
+            };
+          })
+        };
+        this.$api.post("inquiry/submitForm", params).then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: this.$t("message.YourInformation"),
+              type: "success",
+              center: true,
+              duration: 6000,
+              customClass: "submit-success"
+            });
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      }
+    },
+    // 验证
+    verification() {
+      if (this.checkList.length === 0) {
+        this.$message.error(this.$t("message.goods"));
+        return false;
+      } else if (this.from.name === "") {
+        this.$message.error(
+          this.$t("input.fullname") + this.$t("message.empty")
+        );
+        return false;
+      } else if (this.from.company === "") {
+        this.$message.error(
+          this.$t("input.companyInstitution") + this.$t("message.empty")
+        );
+        return false;
+      } else if (this.from.shippingAddress === "") {
+        this.$message.error(
+          this.$t("input.address") + this.$t("message.empty")
+        );
+        return false;
+      } else if (this.from.phone === "") {
+        this.$message.error(this.$t("input.tel") + this.$t("message.empty"));
+        return false;
+      } else if (this.from.email === "") {
+        this.$message.error(this.$t("input.email") + this.$t("message.empty"));
+        return false;
+      } else {
+        return true;
+      }
+    },
+    handleSelectionChange(val) {
+      if (val.length > this.maxNum) {
+        this.$message({
+          message: this.$t("message.MaxNum") + this.maxNum,
+          type: "error"
+        });
+
+        const targetList = val.filter(item => {
+          return !this.checkList.includes(item);
+        });
+
+        if (targetList.length > 0) {
+          this.$refs.multipleTable.toggleRowSelection(targetList[0]);
+        }
+
+        return false;
+      }
+
+      console.log(val);
+      this.checkList = val;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "warning-row";
+      } else {
+        return "success-row";
+      }
+    },
+    getRowKeys(row, index) {
+      return row.id;
+    },
+    // 加载更多
+    loadList() {
+      this.loadShow = true;
+      this.pageable.page++;
+      this.searchByCatalog();
+    }
+  },
+  mounted() {},
+  created() {
+    this.searchByCatalog();
+  }
+};
+</script>
+<style>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .submit-success {
+    top: 100px !important;
+    height: 80px;
+  }
+  .submit-success > i {
+    font-size: 24px !important;
+  }
+  .submit-success > p {
+    font-size: 24px !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+@media screen and (min-width: 751px) and (max-width: 9999px) {
+  .header-image {
+    width: 100%;
+    margin-bottom: 20px;
+    .image {
+      width: 100%;
+    }
+  }
+  .contentbox {
+    width: 100%;
+    overflow: hidden;
+  }
+  .topcontentbox {
+    border: 1px solid #dbdbdb;
+    // padding: 1.5rem 2rem;
+    .title {
+      font-size: 18px;
+      padding: 1.5rem 2rem;
+      font-weight: 700;
+      font-family: Arial;
+      color: #005bab;
+      background: #cfe0ef;
+    }
+    .tips_b {
+      padding: 1.5rem 2rem 2rem 2rem;
+      .tips_d {
+        display: flex;
+        font-size: 16px;
+        font-family: Arial;
+        color: #005bab;
+        .name {
+          // width: 100px;
+          font-weight: 600;
+          white-space: nowrap;
+        }
+        .data {
+          word-wrap: break-word;
+          word-break: normal;
+        }
+      }
+      .tips_d + .tips_d {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .bottomcontentbox_b /deep/ {
+    margin-top: 2rem;
+    border: 1px solid #dbdbdb;
+    // padding: 0rem 2rem;
+    .el-table__header-wrapper {
+      .cell {
+        font-size: 16px;
+        font-family: Arial;
+        font-weight: normal;
+        color: #005bab;
+      }
+
+      .el-checkbox {
+        display: none;
+      }
+    }
+    .el-table__body-wrapper {
+      tr {
+        //  .el-table__cell:nth-of-type(1){
+        //  .cell{
+        //    font-size: 14px;
+        //     font-family: Arial;
+        //     color: #005BAB;
+        //     word-break: break-all;
+        //     text-overflow: ellipsis;
+        //     overflow: hidden;
+        //     display: -webkit-box;
+        //     -webkit-box-orient: vertical;
+        //     -webkit-line-clamp: 4;
+        //     margin: 8px;
+        //     text-align: center;
+        //  }
+        // }
+        .cell {
+          word-break: break-word;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          margin: 8px 2px;
+        }
+      }
+    }
+  }
+  .bottomcontentbox_b > p {
+    font-size: 18px;
+    padding: 1.5rem 2rem;
+    font-weight: 700;
+    font-family: Arial;
+    color: #005bab;
+    background: #cfe0ef;
+    margin-bottom: 1.5rem;
+  }
+  .bottomcontentbox /deep/ {
+    // margin-top: 2rem;
+    padding: 0rem 2rem;
+    overflow: hidden;
+    .el-table {
+      border: 1px solid #dfdfdf;
+    }
+    .el-table__row {
+      .el-table__cell {
+        padding: 0;
+      }
+    }
+
+    .size_data {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input_box /deep/ {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      color: #005bab;
+      font-size: 0.14rem;
+      margin-right: 0.04rem;
+    }
+    .el-input {
+      width: 200px;
+      //   flex: 1;
+      //   font-size: 0.14rem;
+    }
+    .buttom {
+      // width: 100px;
+      text-align: center;
+      padding: 0 10px;
+      line-height: 40px;
+      color: #fff;
+      background-color: #005bab;
+      border-radius: 4px;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .footerbox_b {
+    margin-top: 2rem;
+    border: 1px solid #dbdbdb;
+    // padding: 0rem 2rem;
+    margin-bottom: 3rem;
+  }
+  .footerbox_b > p {
+    font-size: 1.4rem;
+    padding: 1.5rem 2rem;
+    font-weight: 700;
+    color: #005bab;
+    background: #cfe0ef;
+    margin-bottom: 1.5rem;
+  }
+  .footerbox {
+    padding: 0rem 2rem;
+    overflow: hidden;
+  }
+  .footerbox > div {
+    position: relative;
+    margin-bottom: 1.4rem;
+  }
+  .inputbox {
+    width: 100%;
+  }
+  .footerbox > div > .red-t {
+    font-size: 1.5rem;
+    color: #e52323;
+    position: absolute;
+    top: 40%;
+    left: -1rem;
+  }
+  .buttonbox {
+    width: 100%;
+    background: #0166b4;
+    height: 3rem;
+    padding: 0;
+    margin-bottom: 2rem;
+    font-size: 20px;
+  }
+  .load_b {
+    margin: 1.2rem 0;
+    font-size: 14px;
+    font-family: Arial;
+    color: #005bab;
+    text-align: center;
+    cursor: pointer;
+    .el-icon-loading {
+      font-size: 24px;
+    }
+    .load {
+      display: block;
+      line-height: 32px;
+    }
+  }
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .header-image {
+    width: 100%;
+    margin-bottom: 0.1rem;
+    .image {
+      width: 100%;
+    }
+  }
+  .contentbox {
+    width: 100%;
+    overflow: hidden;
+  }
+  .topcontentbox {
+    border: 1px solid #dbdbdb;
+    .title {
+      font-size: 0.16rem;
+      padding: 0.14rem 0.23rem;
+      font-weight: 700;
+      color: #005bab;
+      background: #cfe0ef;
+    }
+    .tips_b {
+      padding: 0.14rem;
+      .tips_d {
+        // display: flex;
+        font-size: 0.14rem;
+        color: #005bab;
+        .name {
+          // width: 1.2rem;
+          font-weight: 600;
+          white-space: nowrap;
+        }
+        .data {
+          margin-top: 0.06rem;
+          word-wrap: break-word;
+          word-break: normal;
+        }
+      }
+      .tips_d + .tips_d {
+        margin-top: 0.1rem;
+      }
+    }
+  }
+  .topcontentbox > p:nth-of-type(1) {
+    font-size: 0.16rem;
+    padding: 0.14rem 0.23rem;
+    font-weight: 700;
+    color: #005bab;
+    background: #cfe0ef;
+  }
+  .topcontentbox > p:nth-of-type(2) {
+    padding: 0.14rem;
+    font-size: 0.16rem;
+    color: #005bab;
+    word-wrap: break-word;
+    word-break: normal;
+  }
+
+  .bottomcontentbox_b {
+    margin-top: 0.2rem;
+    border: 1px solid #dbdbdb;
+    // padding: 0rem 2rem;
+  }
+  .bottomcontentbox_b > p {
+    font-size: 0.16rem;
+    padding: 0.14rem 0.23rem;
+    font-weight: 700;
+    color: #005bab;
+    background: #cfe0ef;
+    margin-bottom: 0.14rem;
+  }
+  .bottomcontentbox /deep/ {
+    // margin-top: 2rem;
+    padding: 0rem 0.14rem;
+    overflow: hidden;
+    .el-table {
+      border: 1px solid #dfdfdf;
+      margin-top: 0.12rem !important ;
+      margin-bottom: 0.14rem !important ;
+      .el-table__header-wrapper {
+        .el-checkbox {
+          display: none;
+        }
+
+        width: 100%;
+        .el-table__header {
+          width: 100% !important;
+          thead {
+            tr {
+              th {
+                .cell {
+                  font-size: 12px;
+                  padding: 0 4px;
+                  font-family: Arial;
+                  font-weight: bold;
+                  color: #005bab;
+                }
+              }
+            }
+          }
+        }
+      }
+      .el-table__body-wrapper {
+        .el-table__body {
+          width: 100% !important;
+          tbody {
+            .el-table__row {
+              .el-table__cell {
+                padding: 0;
+                .cell {
+                  font-size: 12px;
+                  padding: 0 4px;
+                  line-height: 0.24rem;
+                  word-break: break-word;
+                  .size_data {
+                    .size_q {
+                      width: 40% !important;
+                      max-width: 100px;
+                      .el-input__inner {
+                        width: 100% !important;
+                      }
+                    }
+                    .el-select {
+                      max-width: 100px;
+                      width: 60% !important;
+                      .el-input__inner {
+                        padding-right: 16px;
+                      }
+                      .el-input__suffix {
+                        .el-select__caret {
+                          width: 16px;
+                        }
+                      }
+                    }
+                  }
+                  .el-input-number {
+                    .el-input-number__decrease {
+                      width: 0.16rem;
+                    }
+                    .el-input-number__increase {
+                      width: 0.16rem;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .cell {
+          word-break: break-all;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+        }
+      }
+      .el-table__empty-block {
+        width: 100% !important;
+      }
+    }
+
+    .size_data {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input_box /deep/ {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    .title {
+      color: #005bab;
+      font-size: 0.14rem;
+      margin-right: 0.04rem;
+    }
+    .el-input {
+      flex: 1;
+      width: 100px;
+      //   font-size: 0.14rem;
+    }
+    .buttom {
+      // width: 100px;
+      text-align: center;
+      padding: 0 10px;
+      line-height: 40px;
+      color: #fff;
+      background-color: #005bab;
+      border-radius: 4px;
+      margin-left: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .footerbox_b {
+    margin-top: 0.2rem;
+    border: 1px solid #dbdbdb;
+    // padding: 0rem 2rem;
+  }
+  .footerbox_b > p {
+    font-size: 0.16rem;
+    padding: 0.14rem 0.23rem;
+    font-weight: 700;
+    color: #005bab;
+    background: #cfe0ef;
+  }
+  .footerbox {
+    margin-top: 0.14rem;
+    padding: 0rem 0.14rem;
+    overflow: hidden;
+  }
+  .footerbox > div {
+    position: relative;
+    margin-bottom: 0.15rem;
+    margin-left: 0.1rem;
+  }
+  .inputbox {
+    width: 100%;
+  }
+  .footerbox > div > .red-t {
+    font-size: 0.2rem;
+    color: #e52323;
+    position: absolute;
+    top: 40%;
+    left: -0.1rem;
+  }
+  .buttonbox {
+    width: 100%;
+    background: #0166b4;
+    height: 0.4rem;
+    padding: 0;
+    margin-bottom: 0.14rem;
+    font-size: 20px;
+  }
+  .load_b {
+    margin: 0.2rem 0;
+    font-size: 14px;
+    font-family: Arial;
+    color: #005bab;
+    text-align: center;
+    cursor: pointer;
+    .el-icon-loading {
+      font-size: 24px;
+    }
+    .load {
+      display: block;
+      line-height: 32px;
+    }
+  }
+}
+</style>