<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>