<!--
|
/**
|
* @description 商品详情-详情内容板块
|
* @author shm
|
*/
|
-->
|
<template>
|
<div class="good-content">
|
<div class="content-header row-center coloum-center">
|
<div class="line left"></div>
|
<div class="center">
|
<div class="">PRODUCT DETAILS</div>
|
<div class="">商品详情</div>
|
</div>
|
<div class="line right"></div>
|
</div>
|
<!-- <rich-text :nodes="getContent" v-if="content.spuContent"></rich-text> -->
|
<!-- <div class="content-continuer pd20" v-html="getContent" v-if="content.spuContent"></div> -->
|
<div v-if='getContent' @click="getGoodContentImg" v-html="getContent" class="sup-content"></div>
|
<!-- <u-parse :content="getContent" v-if="content.spuContent"></u-parse> -->
|
<div class="row-center" v-else>暂无更多详情</div>
|
</div>
|
</template>
|
|
<script>
|
// import uParse from '@/components/u-parse/u-parse.vue'
|
export default {
|
name: 'GoodInfo',
|
components: {
|
// uParse
|
},
|
props: {
|
goodParams: {
|
type: Object,
|
default: () => { }
|
}
|
},
|
data() {
|
return {
|
content: this.goodParams
|
}
|
},
|
computed: {
|
getContent() {
|
var reg = new RegExp('<oembed url', 'g')
|
var reg1 = new RegExp('</oembed>', 'g')
|
let spuContent = this.goodParams.spuContent
|
if (spuContent) {
|
spuContent = spuContent.replace(new RegExp(/img/g), 'img class="goods-content-img" style="width:100%;height:auto"')
|
spuContent = spuContent.replace(reg, '<video autoplay controls src')
|
spuContent = spuContent.replace(reg1, '</video>')
|
}
|
return spuContent
|
}
|
},
|
watch: {
|
goodParams: {
|
handler(newVal) {
|
if (newVal) {
|
newVal.spuContent = newVal ? newVal.spuContent.replace('img', 'img style="width:100%;height:auto"') : ''
|
this.content = newVal
|
}
|
}
|
}
|
},
|
methods: {
|
getGoodContentImg(e) {
|
if (e.target.nodeName.toLowerCase() === 'img') {
|
const goodsImgList = document.getElementsByClassName('goods-content-img')
|
let index = 0
|
const arr = []
|
for (let i = 0; i < goodsImgList.length; i++) {
|
if (e.target.currentSrc === goodsImgList[i].currentSrc) {
|
index = i
|
}
|
arr.push(goodsImgList[i].currentSrc)
|
}
|
this.$ImagePreview({
|
images: arr,
|
startPosition: index
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// @import url("@/components/u-parse/u-parse.css");
|
.good-content {
|
/deep/.text-small {
|
font-size: 26px !important;
|
}
|
/deep/.text-tiny {
|
font-size: 22px !important;
|
}
|
/deep/.text-big {
|
font-size: 44px !important;
|
}
|
/deep/.text-huge {
|
font-size: 56px !important;
|
}
|
.content-continuer {
|
height: 100% !important;
|
/deep/div {
|
width: 100% !important;
|
}
|
/deep/p {
|
width: 100% !important;
|
}
|
/deep/img {
|
width: 100% !important;
|
height: auto !important;
|
}
|
}
|
.content-header {
|
margin-top: 80px;
|
text-align: center;
|
font-size: 32px;
|
font-weight: 600;
|
letter-spacing: 2px;
|
margin-bottom: 40px;
|
.left {
|
margin-right: 30px;
|
}
|
.right {
|
margin-left: 30px;
|
}
|
.line {
|
height: 4px;
|
width: 100px;
|
background: #e5e5e5;
|
}
|
}
|
.sup-content {
|
/deep/.image {
|
margin: 0;
|
width: 100% !important;
|
font-size: 0;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
