crs-double-resistance/src/view/product/details.vue

<template>
  <div>
    <div class="pc-page">
      <div class="box">
        <div class="topbox">
          <div style="display: flex;align-items: center;">
            <div style="flex:1;font-weight: bold;">
              {{ list.productName }}
            </div>
            <div
              style="display: flex;align-items: center;margin-left: 20px;gap: 10px;flex:1;"
            >
              <div @click="clickCoa">
                <img
                  src="@/assets/img/productDetail/coa.png"
                  style="width: 43px;height: 47px;cursor: pointer;"
                  alt=""
                  class="butt_image"
                />
              </div>
              <div @click="clickMsds">
                <img
                  src="@/assets/img/productDetail/msds.png"
                  style="width: 43px;height: 47px;cursor: pointer;"
                  alt=""
                  class="butt_image"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="contentbox">
          <info :list="list" v-loading="getProductDetaiLoading" />
          <validation :list="list" v-loading="getProductDetaiLoading" />
        </div>
        <div class="rightbox">
          <price-table
            class="common-border"
            :list="list"
            :sku-list="skuList"
            v-loading="getProductDetaiLoading"
          />
          <!-- 最近访问 -->
          <recently-list
            v-if="recentlyList.length > 0"
            class="common-border"
            :recentlyList="recentlyList"
          />
          <!-- <div
            class="rightcenterbox common-border"
            v-if="recentlyList.length > 0"
          >
            <div class="box-title">{{ $t("inquiry.RecentlyViewed") }}</div>
            <div class="rightcenterbox_text">
              <div
                class="topage"
                v-for="one in recentlyList.slice(0, 5)"
                :key="one.id"
                @click="tapRoduct(one)"
              >
                <div class="list_name">
                  {{ one.catalog }} / {{ one.product }}
                </div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div> -->
          <!-- 相关产品 -->
          <related-product
            class="common-border"
            v-if="relatedProductlist.length > 0"
            :relatedProductlist="relatedProductlist"
          />
          <!-- <div
            class="rightcenterbox common-border"
            v-if="relatedProductlist.length > 0"
          >
            <div class="box-title">{{ $t("button.RelatedProducts") }}</div>
            <div class="rightcenterbox_text">
              <div
                class="topage"
                v-for="one in relatedProductlist.slice(0, 5)"
                :key="one.id"
                @click="tapRoduct(one)"
              >
                <div class="list_name">
                  {{ one.catalog }} / {{ one.productName }}
                </div>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="mobile-page">
      <div class="box">
        <div class="topbox">
          <div class="product-title">
            {{ list.productName }}
          </div>
          <div class="img-group">
            <div @click="clickCoa">
              <img
                src="@/assets/img/productDetail/coa.png"
                style="width: 43px;height: 47px;cursor: pointer;"
                alt=""
                class="butt_image"
              />
            </div>
            <div @click="clickMsds">
              <img
                src="@/assets/img/productDetail/msds.png"
                style="width: 43px;height: 47px;cursor: pointer;"
                alt=""
                class="butt_image"
              />
            </div>
          </div>
        </div>
      </div>
      <price-table
        class="common-border"
        :list="list"
        :sku-list="skuList"
        v-loading="getProductDetaiLoading"
      />
      <info :list="list" v-loading="getProductDetaiLoading" />
      <validation :list="list" v-loading="getProductDetaiLoading" />
      <!-- 最近访问 -->
      <recently-list
        v-if="recentlyList.length > 0"
        class="common-border"
        :recentlyList="recentlyList"
      />
      <!-- 相关产品 -->
      <related-product
        class="common-border"
        v-if="relatedProductlist.length > 0"
        :relatedProductlist="relatedProductlist"
      />
    </div>
  </div>
</template>
<script>
import Bus from "@/js/bus";
import sites from "@/assets/josn/search";
import axios from "axios";
import info from "./components/info.vue";
import validation from "./components/validation.vue";
import PriceTable from "./components/PriceTable";
import RecentlyList from "./components/RecentlyList";
import RelatedProduct from "./components/RelatedProduct";

export default {
  components: {
    info,
    validation,
    PriceTable,
    RecentlyList,
    RelatedProduct
  },
  name: "product",
  data() {
    return {
      type: "",
      tapoption: 1,
      list: {},
      skuList: [], // 价格
      options: [
        {
          value: 0,
          label: 0
        },
        {
          value: 1,
          label: 1
        },
        {
          value: 2,
          label: 2
        },
        {
          value: 3,
          label: 3
        },
        {
          value: 4,
          label: 4
        },
        {
          value: 5,
          label: 5
        },
        {
          value: 6,
          label: 6
        },
        {
          value: 7,
          label: 7
        },
        {
          value: 8,
          label: 8
        },
        {
          value: 9,
          label: 9
        },
        {
          value: 10,
          label: 10
        }
      ],
      recentlyList: [],
      relatedProductlist: [],
      swiperOption: {
        // loop: true,
        slidesPerView: 2,
        slidesPerGroup: 2,
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      menuList: {},
      changeNumList: [],
      pageable: {
        // 文献
        page: 0,
        size: 10
      },
      literature: false,
      busShow: false,
      num: 1,
      msdsUrl: ""
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    clickCoa() {
      if (this.list.coaUrl) {
        window.location.href = this.list.coaUrl;
      } else {
        this.$message.error(this.$t("taps.service"));
      }
    },
    clickMsds() {
      // this.$message({
      //   message: this.$t('message.MDSD'),
      //   type: 'warning'
      // });

      this.$alert(this.$t('message.MDSD'), {
        confirmButtonText: this.$t('button.determine'),
        customClass: "tankuang",
        callback: action => {
        }
      });
      
      // if (this.list.msdsUrl) {
      //   window.location.href = this.list.msdsUrl;
      // } else {
      //   if (this.msdsUrl) {
      //     window.location.href = this.msdsUrl;
      //   } else {
      //     axios
      //       .post("https://crs.sanyoubio.com/api/product/msds", {
      //         catalog: this.$route.params.catalog
      //       })
      //       .then(res => {
      //         if (res.data.data) {
      //           // console.log(res)
      //           this.msdsUrl = res.data.data;
      //           window.location.href = res.data.data;
      //         } else {
      //           this.$message.error(this.$t("taps.service"));
      //         }
      //       });
      //   }
      // }
    },
    datasheet() {
      window.open(
        "https://crs.sanyoubio.com/ds/SYD100_Mix_and_Go_Competent_Cells_DH5α_COA221011.pdf" +
          "?response-content-type=application/pdf"
      );
    },
    goMsds() {
      window.open(
        "https://crs.sanyoubio.com/ds/SYD100_Mix_and_Go_Competent_Cells_DH5α_MSDS.pdf"
      );
    },
    changeNum() {
      // 计数器
      let that = this;
      that.changeNumList = [];
      for (var i = 0; i < that.skuList.length; i++) {
        if (that.skuList[i].num > 0) {
          let datas = {
            skuId: that.skuList[i].id,
            cnDiscountPrice: that.skuList[i].cnDiscountPrice,
            productCatalog: that.skuList[i].catalog,
            productName: that.skuList[i].productName,
            size: that.skuList[i].specifications,
            number: that.skuList[i].num,
            discountPrice: that.skuList[i].discountPrice,
            price: that.skuList[i].price,
            checked: true,
            id: that.list.id,
            cnPrice: that.skuList[i].cnPrice
          };
          this.changeNumList.push(datas);
        }
      }
    },
    tapShoppingCart() {
      // 购物车
      let that = this;
      //   var obj = []
      var cartList = [];
      if (this.skuList.length > 0) {
        if (this.changeNumList.length === 0) {
          this.$message.error(this.$t("button.Article"));
        } else {
          if (JSON.parse(localStorage.getItem("token"))) {
            that.skuList.forEach(item => {
              if (item.num > 0) {
                var data = {
                  checked: true,
                  id: that.list.id,
                  number: item.num,
                  productCatalog: item.catalog,
                  skuId: item.id
                };
                cartList.push(data);
              }
            });
            this.$api
              .post("cart/batchAdd", {
                cartList: cartList
              })
              .then(res => {
                if (res.code === 0) {
                  this.getIndex();
                  this.$message({
                    message: this.$t("button.successfully"),
                    type: "success"
                  });
                  // localStorage.setItem('cartTap', '1')
                } else {
                  this.$message(res.msg);
                }
              });
          } else {
            this.localList();
          }
        }
      }
    },
    localList() {
      // 本地存储
      var shoppingCart = null;
      var arrObj = null; // 选中数量
      var list = []; // 新增数据
      arrObj = JSON.parse(JSON.stringify(this.changeNumList));
      shoppingCart = JSON.parse(localStorage.getItem("shoppingCart")) || []; // 获取购物车数据
      if (shoppingCart.length > 0) {
        for (var i = 0; i < this.changeNumList.length; i++) {
          for (var j = 0; j < shoppingCart.length; j++) {
            if (
              Number(this.changeNumList[i].skuId) ===
              Number(shoppingCart[j].skuId)
            ) {
              this.$set(arrObj[i], "checked", false);
              shoppingCart[j].number =
                Number(this.changeNumList[i].number) +
                Number(shoppingCart[j].number);
            }
          }
        }
      } else {
        localStorage.setItem(
          "shoppingCart",
          JSON.stringify(this.changeNumList)
        );
        localStorage.setItem(
          "shoppingNum",
          JSON.stringify(this.changeNumList.length)
        );
        this.elementByValue();
        this.$message({
          message: this.$t("button.successfully"),
          type: "success"
        });
        return;
      }
      for (var n = 0; n < arrObj.length; n++) {
        if (arrObj[n].checked) {
          list.push(arrObj[n]);
        }
      }
      this.$message({
        message: this.$t("button.successfully"),
        type: "success"
      });
      var arr = shoppingCart.concat(list);
      localStorage.setItem("shoppingCart", JSON.stringify(arr));
      localStorage.setItem("shoppingNum", JSON.stringify(arr.length));
      // localStorage.setItem('cartTap', '1')
      this.elementByValue();
    },
    getIndex() {
      // 获取购物车数量
      this.$api
        .post("cart/index", {
          cartList: null
        })
        .then(res => {
          if (res.code === 0) {
            localStorage.removeItem("shoppingCart");
            localStorage.setItem(
              "shoppingNum",
              JSON.stringify(res.data.cartList.length)
            );
            this.elementByValue();
          }
        });
    },
    postLIstanbul() {
      let that = this;
      that.getProductDetaiLoading = true;
      this.$api
        .post("product/getProductDetail", {
          catalog: this.$route.params.catalog
          // catalog: this.$route.query.catalog
        })
        .then(res => {
          if (res.code === 0) {
            this.$store.commit("setProductName", res.data.productName);
            this.list = res.data;
            that.skuList = res.data.skuList || [];
            that.skuList.forEach((item, index) => {
              this.$set(that.skuList[index], "num", 0);
            });
            this.getList(); // 文献
            this.postpageRelatedProduct();
          }
          that.getProductDetaiLoading = false;
        })
        .catch(() => {
          that.getProductDetaiLoading = false;
        });
    },
    getrecentlyList() {
      // 最近浏览
      this.$api.post("product/recentlyList").then(res => {
        if (res.code === 0) {
          this.recentlyList = res.data.content;
        }
      });
    },
    postpageRelatedProduct() {
      this.$api
        .post("product/pageRelatedProduct", {
          criteria: {
            catalog: this.list.catalog,
            type: this.list.type,
            targetId: this.list.target,
            category: this.list.category
          },
          pageable: this.pageable
        })
        .then(res => {
          if (res.code === 0) {
            this.relatedProductlist = res.data.content;
          }
        });
    },
    goBack() {
      console.log(sites.obj[this.list.type].url);
      let kes = JSON.parse(sessionStorage.getItem("keywords"));
      this.$router.replace({
        path: "/search/by-category",
        // name: sites.obj[this.list.type].url,
        query: {
          keywords: kes.keywords,
          category: sites.obj[this.list.type].value
        }
      });
      sessionStorage.removeItem("keywords");
    },
    getList() {
      // 文献
      this.$api
        .post("citations/list", {
          criteria: {
            catalog: this.list.catalog
          },
          pageable: this.pageable
        })
        .then(res => {
          if (res.code === 0) {
            if (res.data.content && res.data.content.length > 0) {
              this.literature = true;
            } else {
              this.literature = false;
            }
          }
        });
    },
    elementByValue() {
      // localStorage.setItem('cartTap', 1)
      Bus.$emit("onmycar", "1");
      // console.log('---------888888-')
      // this.num = this.num + 1
      // this.$store.commit('settapscart', this.num)
      // console.log('----77777-----888888-')
    }
  },
  mounted() {
    // 浏览器返回
    if (sessionStorage.getItem("keywords")) {
      if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.goBack, false);
      }
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  created() {
    this.postLIstanbul();
    this.getrecentlyList();
  }
};
</script>
<style lang="scss" scoped>
.common-border {
  border-top: 1px solid #0166b4;
  border-left: 1px solid #d6eaff;
  border-right: 1px solid #d6eaff;
  border-bottom: 1px solid #d6eaff;
}

@media screen and (min-width: 751px) and (max-width: 9999px) {
  .pc-page {
    display: block;
  }

  .mobile-page {
    display: none;
  }

  .box {
    overflow: hidden;
    margin-bottom: 3rem;
  }

  .topbox {
    margin-bottom: 26px;
    margin-top: 30px;
    font-size: 20px;
    color: #313131;
    // font-weight: 700;
  }
  .contentbox {
    width: 66%;
    float: left;
  }

  .rightbox {
    width: 32%;
    float: right;
  }

  .rightcenterbox:not(:nth-child(1)) {
    margin-top: 2rem;
  }

  .rightcenterbox {
    width: 100%;

    .box-title {
      font-size: 14px;
      height: 36px;
      line-height: 36px;
      background-color: #f4faff;
      font-weight: bold;
      text-indent: 16px;
    }
  }
  // .rightcenterbox > div:nth-of-type(1) {
  //   height: 3rem;
  //   font-size: 18px;
  //   font-weight: 700;
  //   color: #313131;
  //   background: #f5f5f5;
  //   line-height: 3rem;
  //   text-indent: 1rem;
  // }
  .rightcenterbox > div:nth-of-type(2) {
    font-size: 0.16rem;
    padding: 1rem;
    font-size: 16px;
  }
  .rightcenterbox_text /deep/ {
    font-size: 1rem !important;
    .topage {
      display: block;
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      color: #6f6f6f;
      padding-left: 12px;
      margin-left: -12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      &:hover {
        background: rgba(0, 91, 171, 0.11);
        border-radius: 2px;
        border: 1px solid #005bab;
        color: #005bab;
        .el-icon-arrow-right {
          color: #005bab;
        }
      }
      .list_name {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .el-icon-arrow-right {
      height: 42px;
      line-height: 42px;
      margin-right: 10px;
    }
  }
  .rightcenterbox > div:nth-of-type(2) > p:nth-of-type(1) {
    margin-top: 0;
  }
  // .rightcenterbox>div:nth-of-type(2)>p{
  //   margin-top: 1rem;
  //   color: #6f6f6f;
  // }
  .rightcenterbox > div > p {
    word-wrap: break-word;
    word-break: normal;
    cursor: pointer;
    a {
      color: #6f6f6f;
      text-decoration: none;
    }
  }
  .rightbox_ds {
    line-height: 24px;
    color: #6f6f6f;
  }
  .rightcenterbox > div:nth-of-type(2) > .rightbox_b {
    color: #005bab;
    // font-weight: 600;
    margin-top: 10px;
  }
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  .pc-page {
    display: none;
  }

  .mobile-page {
    display: block;
  }

  .box {
    overflow: hidden;
    margin-bottom: 0.1rem;

    .topbox {
      margin-bottom: 0.2rem;
      font-size: 0.18rem;
      color: #313131;
      font-weight: 600;

      .img-group {
        display: flex;
        margin-top: 0.2rem;
        gap: 0.1rem;
      }
    }
    .contentbox {
      width: 100%;
      overflow: hidden;
    }
  }

  .not_list {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .block_img {
      width: 80%;
    }
  }
  .tankuang, .el-message-box{
    width: 80% !important;
  }
}
</style>