356 lines
8.3 KiB
Vue
356 lines
8.3 KiB
Vue
<template>
|
||
<div style="min-width: 1300px">
|
||
<div class="img_text_bgc">
|
||
<el-row type="flex">
|
||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||
<div class="img_text_content">
|
||
<div class="img_bgc">
|
||
<img :src="mainSrc" alt=""/>
|
||
</div>
|
||
<div class="img_right">
|
||
<div class="title">
|
||
产品名称：{{ detailList.name }}
|
||
</div>
|
||
<div class="space_style">
|
||
<p>产品分类：{{ classifyName }}</p>
|
||
<p>适用空间：{{ detailList.space }}</p>
|
||
<p>所属风格：{{ detailList.style }}</p>
|
||
</div>
|
||
<div class="img_part">
|
||
<ul>
|
||
<li v-for="(item,index) in imgList" :key="index" @click.stop="changeMainImg(index)">
|
||
<img :src="item.thumb_image" alt=""/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="shares">
|
||
分享到：
|
||
<span @click="shareToMicroblog()">
|
||
<img src="@/assets/weibo.png" alt=""/>
|
||
</span>
|
||
<span @click="shareToQQRom()">
|
||
<img src="@/assets/QQKJ.png" alt=""/>
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<el-button size="small" @click="prevProduct(detailList.id)">上一款产品</el-button>
|
||
<el-button size="small" @click="nextProduct(detailList.id)">下一款产品</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 同类产品推荐 -->
|
||
<div class="sameProducts">
|
||
<div class="same_title">同类产品推荐</div>
|
||
<div>
|
||
<ul>
|
||
<li v-for="(item,index) in goodsList" :key="index" @click="handleClickSameProducts(item)">
|
||
<div class="sameItem">
|
||
<img :src="item.image" alt=""/>
|
||
<div class="info">{{ item.name }}</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="nullData" v-if="showNull">
|
||
暂时没有数据！
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {getGoodsInfo, getGoodsList} from "@/api";
|
||
|
||
export default {
|
||
name: "detail",
|
||
metaInfo() {
|
||
return {
|
||
title: this.detailList.name + " | " + localStorage.getItem("corporate_name")
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
showNull: false,
|
||
mainSrc: "",
|
||
detailList: [],
|
||
imgList: [],
|
||
classifyName: "",
|
||
goodsList: [],
|
||
allGoodList: []
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getGoodsInfo(this.$route.query.classid);
|
||
this.getGoodsList();
|
||
},
|
||
methods: {
|
||
//点击同类产品推荐
|
||
handleClickSameProducts(item) {
|
||
this.$router.push({
|
||
path: "/products_detail", //跳转的路由
|
||
query: { //跳转路由的参数
|
||
classid: item.id
|
||
}
|
||
});
|
||
this.getGoodsInfo(item.id);
|
||
},
|
||
//获取产品列表
|
||
getGoodsList() {
|
||
getGoodsList({
|
||
classid: 1,
|
||
page: 1,
|
||
limit: 50
|
||
}).then(res => {
|
||
this.allGoodList = res.data.list;
|
||
});
|
||
},
|
||
//获取产品详情
|
||
getGoodsInfo(classid) {
|
||
getGoodsInfo(classid).then(res => {
|
||
if (res.data.goods_lists) {
|
||
this.goodsList = res.data.goods_lists;
|
||
}
|
||
if (res.data.goods_lists.length == 0) {
|
||
this.showNull = true;
|
||
} else {
|
||
this.showNull = false;
|
||
}
|
||
if (res.data.info) {
|
||
this.detailList = res.data.info;
|
||
this.classifyName = res.data.info.goods_category.name;
|
||
}
|
||
if (res.data.img_list) {
|
||
this.imgList = res.data.img_list;
|
||
if (this.imgList[0]) {
|
||
this.mainSrc = this.imgList[0].ori_image;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//上一款产品
|
||
prevProduct(id) {
|
||
const middleId = id - 1;
|
||
this.$router.push({
|
||
path: "/products_detail", //跳转的路由
|
||
query: { //跳转路由的参数
|
||
classid: middleId
|
||
}
|
||
});
|
||
for (let i = 0; i < this.allGoodList.length; i++) {
|
||
if (this.allGoodList[i].id === middleId) {
|
||
this.getGoodsInfo(middleId);
|
||
}
|
||
}
|
||
},
|
||
//下一款产品
|
||
nextProduct(id) {
|
||
const middleId = id + 1;
|
||
this.$router.push({
|
||
path: "/products_detail", //跳转的路由
|
||
query: { //跳转路由的参数
|
||
classid: middleId
|
||
}
|
||
});
|
||
for (let i = 0; i < this.allGoodList.length; i++) {
|
||
if (this.allGoodList[i].id === middleId) {
|
||
this.getGoodsInfo(middleId);
|
||
}
|
||
}
|
||
},
|
||
//点击小图切换主览图
|
||
changeMainImg(index) {
|
||
this.mainSrc = this.imgList[index].ori_image;
|
||
},
|
||
/**
|
||
* 分享到微博
|
||
*/
|
||
shareToMicroblog() {
|
||
//跳转地址
|
||
window.open(
|
||
"https://service.weibo.com/share/share.php?url=" +
|
||
encodeURIComponent(location.href)
|
||
// "&title=" +
|
||
// this.sysInfo
|
||
);
|
||
},
|
||
/**
|
||
* 分享到qq空间
|
||
*/
|
||
shareToQQRom() {
|
||
//跳转地址
|
||
window.open(
|
||
"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
|
||
encodeURIComponent(location.href)
|
||
// "&title=" +
|
||
// this.sysInfo +
|
||
// "&summary=" +
|
||
// this.sysInfo
|
||
);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
* {
|
||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||
}
|
||
|
||
.nullData {
|
||
display: block;
|
||
height: 150px;
|
||
line-height: 150px;
|
||
text-align: center;
|
||
}
|
||
|
||
/deep/ .el-button:focus, .el-button:hover {
|
||
color: #333;
|
||
border-color: #ddd;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/deep/ .el-button:hover {
|
||
span {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
.center_border {
|
||
width: 100%;
|
||
height: 55px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.img_text_bgc {
|
||
padding: 30px 0;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
background-color: #f3f3f3;
|
||
|
||
.img_text_content {
|
||
//width: 1360px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
|
||
.img_bgc {
|
||
width: 500px;
|
||
height: 500px;
|
||
padding: 20px;
|
||
border: 1px solid #eee;
|
||
background-color: #fff;
|
||
margin-right: 30px;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.img_right {
|
||
float: right;
|
||
flex: 1;
|
||
|
||
.title {
|
||
width: 100%;
|
||
padding: 25px 0 10px 0;
|
||
font-size: 24px;
|
||
border-bottom: 1px solid #555;
|
||
}
|
||
|
||
.space_style {
|
||
padding: 20px 0;
|
||
|
||
p {
|
||
color: #000;
|
||
margin: 5px 0 5px 0;
|
||
font-size: 16px !important;
|
||
}
|
||
}
|
||
|
||
.img_part {
|
||
padding: 10px 0 5px 0;
|
||
border-top: 1px dotted #ddd;
|
||
border-bottom: 1px dotted #ddd;
|
||
|
||
ul {
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
|
||
li {
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 60px;
|
||
margin: 5px;
|
||
padding: 5px;
|
||
border: 1px solid #e5e5e5;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shares {
|
||
display: flex;
|
||
line-height: 35px;
|
||
|
||
span {
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sameProducts {
|
||
padding: 50px 0;
|
||
background-color: #f4f4f4;
|
||
|
||
.same_title {
|
||
display: inline;
|
||
width: 100%;
|
||
float: left;
|
||
margin: 0 0 15px 0;
|
||
padding: 0 0 15px 0;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
ul {
|
||
li {
|
||
display: inline;
|
||
width: 20%;
|
||
float: left;
|
||
cursor: pointer;
|
||
|
||
.sameItem {
|
||
display: block;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
border: 1px solid #e9e9e9;
|
||
background-color: #fff;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
.info {
|
||
padding: 5px 0 5px 0;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|