You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<view class="details">
|
|
<!-- <view class="title">
|
|
<view class="line"></view>
|
|
<view class="con">详情</view>
|
|
<view class="line"></view>
|
|
</view> -->
|
|
<u-transition show>
|
|
<u-parse :content="detail"></u-parse>
|
|
</u-transition>
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<view class="line-box"></view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["goods"],
|
|
|
|
data() {
|
|
return {
|
|
detail: ""
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.detail = this.getDetail()
|
|
},
|
|
|
|
methods: {
|
|
getDetail() {
|
|
return this.formatRichText(this.goods.detail || "");
|
|
},
|
|
formatRichText: (html) => {
|
|
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
|
match = match
|
|
.replace(/style="[^"]+"/gi, "")
|
|
.replace(/style='[^']+'/gi, "");
|
|
match = match
|
|
.replace(/width="[^"]+"/gi, "")
|
|
.replace(/width='[^']+'/gi, "");
|
|
match = match
|
|
.replace(/height="[^"]+"/gi, "")
|
|
.replace(/height='[^']+'/gi, "");
|
|
return match;
|
|
});
|
|
newContent = newContent.replace(
|
|
/style="[^"]+"/gi,
|
|
function(match, capture) {
|
|
match = match
|
|
.replace(/width:[^;]+;/gi, "max-width:100%;")
|
|
.replace(/width:[^;]+;/gi, "max-width:100%;");
|
|
return match;
|
|
}
|
|
);
|
|
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
|
|
newContent = newContent.replace(
|
|
/\<img/gi,
|
|
'<img style="display:block;max-width:100%;height:auto"'
|
|
);
|
|
return newContent;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.details {
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90rpx;
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.con {
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.line {
|
|
width: 48rpx;
|
|
height: 2rpx;
|
|
background: #cecece;
|
|
}
|
|
|
|
.line-box {
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
</style> |