<template>
|
<div class="productContentBox">
|
<div class="topContent">
|
<el-carousel :interval="5000" arrow="always">
|
<el-carousel-item v-for="(item,index) in form.images" :key="index">
|
<video v-show='getFileType(item.imgUrl) === "video"' controls :src="item.imgUrl"/>
|
<img v-show='getFileType(item.imgUrl) !== "video"' :src="item.imgUrl"/>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="spuName">{{form.spuInfo.spuName}}</div>
|
<div>{{form.spuInfo.spuAdWords}}</div>
|
<div class="price"> <span class="salePrice">￥ {{form.salePrice ? form.salePrice.toFixed(2) : 0}}</span><span class="listPrice">￥ {{form.listPrice ? form.listPrice.toFixed(2) : 0}}</span></div>
|
<div class="label" v-show="form.spuInfo.spuTags"><span>{{form.spuInfo.spuTags}}</span></div>
|
<div class="stock">
|
<span>运费：包邮</span>
|
<!-- <span>库存</span> -->
|
</div>
|
</div>
|
<div class="infoContent">
|
<div class="infoTop">详情 </div>
|
<ul class="productInfo">
|
<p>商品信息</p>
|
<li v-for="(item,index) in form.spuPropList" :key="index">
|
<span class="spuPropWordsLimit">{{item.propName}} {{item.propUnit ? '('+item.propUnit+')' : ''}}</span>
|
<el-tooltip class="item" effect="dark" :content="item.propValues.map(item=>item.value).join('、')" placement="right-start">
|
<span class="spuPropWordsLimit">{{item.propValues.map(item=>item.value).join('、')}}</span>
|
</el-tooltip>
|
</li>
|
</ul>
|
<div class="infoTop">介绍 </div>
|
<div class="introduce" v-html="form.details[0].spuContent"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getFileType } from '@/utils/getFileType'
|
export default {
|
props: ['form'],
|
methods: {
|
// 获取文件类型
|
getFileType(file) {
|
return getFileType(file)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.productContentBox{
|
font-size: 16px;
|
width: 100%;
|
.topContent{
|
img, video{
|
width: 100%;
|
height: 100%;
|
}
|
div{
|
margin-bottom: 8px;
|
}
|
.price{
|
font-weight: bold;
|
.listPrice{
|
text-decoration:line-through;
|
margin-left: 10px;
|
}
|
.salePrice{
|
color:#fe4646 ;
|
}
|
}
|
.label{
|
span{
|
font-size: 12px;
|
font-weight: 400;
|
color: #fff;
|
padding: 5px 10px;
|
border-radius: 4px;
|
background-color: #fe4646;
|
}
|
}
|
.stock{
|
display: flex;
|
span{
|
flex:1;
|
}
|
span:nth-child(2){
|
text-align: right;
|
}
|
}
|
}
|
.infoContent{
|
margin-top: 40px;
|
margin-bottom: 15px;
|
max-width: 455px;
|
.infoTop{
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
font-size: 14px;
|
font-weight: 400;
|
color: #333;
|
position: relative;
|
margin-bottom: 12px;
|
}
|
.infoTop::after{
|
right: 8%;
|
}
|
.infoTop::before{
|
left: 8%;
|
}
|
.infoTop::after, .infoTop::before{
|
content: '';
|
width: 25%;
|
height: 1px;
|
position: absolute;
|
top: 50%;
|
background-color: #bdbdbd;
|
}
|
.productInfo{
|
height: auto;
|
overflow: hidden;
|
font-size: 12px;
|
box-sizing: border-box;
|
border: 1px solid #d9d9d9;
|
border-bottom: transparent;
|
margin-bottom: 20px;
|
p{
|
color: #333;
|
padding: 5px;
|
border-bottom: 1px solid #d9d9d9;
|
}
|
li{
|
border-bottom: 1px solid #d9d9d9;
|
display: flex;
|
color: #000;
|
height: 30px;
|
line-height: 30px;
|
span{
|
flex: 1;
|
display: inline-block;
|
padding-left: 5px;
|
}
|
span:last-child{
|
border-left: 1px solid #d9d9d9;
|
}
|
.spuPropWordsLimit{
|
max-width:200px;
|
text-overflow:ellipsis;
|
overflow:hidden;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
.introduce{
|
width: 95%;
|
padding-left: 13px;
|
img, video{width: 100%;height: auto}
|
div,p{
|
width: 100% !important;
|
}
|
}
|
}
|
</style>
|
