<template>
|
<div class="productDetail">
|
<IndexHeader :opacity="false"></IndexHeader>
|
<!-- 面包屑 -->
|
<div class="heart" v-if="showData">
|
<el-breadcrumb separator=">">
|
<el-breadcrumb-item :to="{ path: '/product' }"
|
>全部产品</el-breadcrumb-item
|
>
|
<el-breadcrumb-item>产品详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
|
<!-- 购买配置 -->
|
<PayCard :dataInfo="data"></PayCard>
|
|
<!-- 功能区域 -->
|
<Function :dataInfo="data"></Function>
|
</div>
|
|
<!-- 页尾 -->
|
<Footer :isBlack="true"></Footer>
|
</div>
|
</template>
|
|
<script>
|
import IndexHeader from "@/components/IndexHeader";
|
import PayCard from "@/views/productDetail/components/PayCard";
|
import Footer from "@/components/Footer";
|
import Function from "@/views/productDetail/components/Function";
|
import { getProductById } from "@/api/product";
|
export default {
|
created() {
|
this.getProduct();
|
},
|
data() {
|
return {
|
data: {
|
data: {},
|
},
|
showData: false,
|
};
|
},
|
components: {
|
IndexHeader,
|
PayCard,
|
Footer,
|
Function,
|
},
|
methods: {
|
getProduct() {
|
let param = {
|
id: this.$route.query.id,
|
};
|
getProductById(param).then((res) => {
|
this.data.data = res.data;
|
this.showData = true;
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.productDetail {
|
background-color: rgb(243, 245, 248);
|
|
.el-breadcrumb {
|
margin-top: 48px;
|
margin-bottom: 24px;
|
|
::v-deep span {
|
color: #666;
|
}
|
}
|
|
.heart {
|
min-height: calc(100vh - 210px);
|
}
|
}
|
</style>
|
