caimei-applets-caimei/pages/goods/components/cm-service.vue

<template name="cm-service">
	<!-- 服务项目 -->
	<view class="cm-service">
		<view class="cm-service-text" v-show="product.orderInfo">
			<view class="cm-service-title">订购方案</view>
			<view class="cm-service-p">
                <mp-html :content="orderInfoHtml" :tag-style="tagStyle" />
            </view>
		</view>
		<view class="cm-service-text" v-show="product.serviceInfo">
			<view class="cm-service-title">服务详情</view>
			<view class="cm-service-p">
                <mp-html :content="serviceInfoHtml" :tag-style="tagStyle" />
            </view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'cm-service',
		props:{
			product:{
				type:Object,
			}
		},
		data() {
			return{
				orderInfoHtml:'',
                serviceInfoHtml:''
			}
		},
		created() {
			this.adaptOrderInfoHtml(this.product)
			this.adaptServiceInfoHtml(this.product)
		},
		methods:{
            adaptOrderInfoHtml(product){
                let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
                this.orderInfoHtml = product.orderInfo ? this.$api.adaptRichTextImg(product.orderInfo) : defaulHtml
            },
            adaptServiceInfoHtml(product){
                let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
                this.serviceInfoHtml = product.serviceInfo ? this.$api.adaptRichTextImg(product.serviceInfo) : defaulHtml
            }
		},
		
	}
</script>

<style lang="scss">	
	.cm-service{
		width: 702rpx;
		height: auto;
		background: #FFF;
		margin: 0 auto;
		padding: 24rpx 0;
		.cm-service-text{
			width: 100%;
			height: auto;
			margin-bottom: 24rpx;
			.cm-service-title{
				font-size: $font-size-28;
				color: #333;
				text-align: left;
				line-height: 44rpx;
				margin-bottom: 8rpx;
			}
			.cm-service-p{
				font-size: $font-size-28;
				color: #999;
				text-align: justify;
				line-height: 44rpx;
			}
		}
	}
</style>