[优化] 处理商品详情页富文本显示问题

manifest.json

@@ -62,9 +62,11 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx1031981885c80917",
+        "appid" : "wxb35ef055a4dd8ad4",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+            "postcss" : true,
+            "es6" : true
         },
         "usingComponents" : true
     },

pages/goodsDetail/index.vue

@@ -18,7 +18,7 @@
 							<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
 							<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
 						</view>
-						<view class="lf-font-24">
+						<view class="lf-font-24 lf-text-right">
 							<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
 							<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view>
 						</view>
@@ -42,15 +42,15 @@
 					</view>
 					<view class="lf-flex lf-m-t-20" @click="openMap">
 						<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
-							<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #000000;"></text>
+							<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text>
 						</view>
-						<view class="lf-m-l-20 lf-font-28">{{ goods_detail.store.address }}</view>
+						<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view>
 					</view>
 				</view>
 				<!-- 商品详情 -->
 				<view class="goods-detail">
 					<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
-					<rich-text :nodes="goods_detail.content" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
+					<rich-text :nodes="formatRichText(goods_detail.content)" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
 					<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
 				</view>
 				<!-- 修饰专用 -->
@@ -165,6 +165,26 @@
 					})
 				}, 200);
 			},
+			// 富文本处理
+			formatRichText(richText){
+			  if(richText != null){
+					let newRichText= richText.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;
+					});
+					newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
+						match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
+						return match;
+					});
+					newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
+					newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
+					return newRichText;
+				}else{
+					return null;
+				}
+			}
 		},
 		onShareAppMessage(){
 			let goods = this.goods_detail;