富文本组件

src/components/basicTool/rich-text/index.vue

+<template>
+  <!-- 富文本组件 -->
+  <div
+    class="rich-text"
+    :style="{ padding: padding + 'px', background: backgroundColor }"
+  >
+    <div v-html="richText"></div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+/**
+ * 处理富文本里的图片宽度自适应
+ * 1.去掉img标签里的style、width、height属性
+ * 2.img标签添加style属性：max-width:100%;height:auto
+ * 3.修改所有style里的width属性为max-width:100%
+ * 4.去掉<br/>标签
+ * @param html
+ * @returns {void|string|*}
+ */
+function 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="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
+  );
+  return newContent;
+}
+export default {
+  name: "rich-text",
+  props: {
+    render: {
+      type: Boolean,
+      default: false,
+    },
+    datas: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {
+    padding() {
+      return this.datas.componentData["padding"];
+    },
+    backgroundColor() {
+      return this.datas.componentData["backgroundColor"];
+    },
+    richText() {
+      return formatRichText(this.datas.componentData["richText"]);
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.rich-text {
+  /deep/ img {
+    max-width: 100% !important;
+    height: auto;
+  }
+}
+</style>

src/components/basicTool/transverse-label/index.vue

@@ -139,6 +139,12 @@
           <div v-if="item1.componentCode == 'share-picture' && item1.componentInfo.visible == 1" >
             <share-picture :datas="item1" :indexs="index"></share-picture>
           </div>
+          <div v-if="item1.componentCode == 'custom-list' && item1.componentInfo.visible == 1">
+			      <custom-list :datas="item1"></custom-list>
+          </div>
+          <!-- <div v-if="item1.componentCode == 'rich-text' && item1.componentInfo.visible == 1">
+			      <rich-text :datas="item1"></rich-text>
+          </div> -->
           <!-- <component
             :is="item1.componentCode"
             :datas="item1"
@@ -163,6 +169,8 @@ import coupon from "@/components/activity/coupon";
 import integralTurntable from "@/components/activity/integralTurntable";
 import information from '@/components/content/information/index'
 import spellGroup from '@/components/activity/spellGroup'
+import customList from "@/components/custom-list";
+import richText from "@/components/basicTool/rich-text";
 let rect='',vanTabsThis=[];
 export default {
   name: "transverse-label",
@@ -199,7 +207,9 @@ export default {
     coupon,
     integralTurntable,
     information,
-    spellGroup
+    spellGroup,
+    customList,
+    richText
   },
   computed: {
     tabList: {

src/components/custom-list/index.vue

@@ -87,7 +87,8 @@ export default {
       }
       index.outDataSourceData(query).then(res=>{
         if(res.data.code == 200){
-          this.comDataList = res.data.data.records || [];
+          this.comDataList = res.data.data.data || [];
+          this.comDataList = this.comDataList.slice(0,this.showCont-1);
           if(this.comDataList && this.comDataList.length>0){
             this.comDataList.forEach((item,index)=>{
               item.comStr = compiler(this.datas.componentData.comStr,item);

src/pages/home/index.vue

@@ -96,6 +96,9 @@
           <div v-if="item.componentCode == 'custom-list' && item.componentInfo.visible == 1">
 			      <custom-list :datas="item"></custom-list>
           </div>
+          <div v-if="item.componentCode == 'rich-text' && item.componentInfo.visible == 1">
+			      <rich-text :datas="item"></rich-text>
+          </div>
 
         </div>
         <bottomCont></bottomCont>
@@ -149,6 +152,7 @@ import couponPopup from '@/components/couponPopup.vue'
 import NewUser from "../../components/newCustomer/newUser";
 import NewPolite from "../../components/newCustomer/newPolite";
 import customList from "../../components/custom-list";
+import richText from "../../components/basicTool/rich-text";
 import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } from "../../utils/mayi.js";
 import indexApi from "@/api/index.js";
 import { throttle, concatUrl } from "../../utils/index.js"
@@ -205,7 +209,8 @@ export default {
     birthPopup,
     mpvueCropper,
     woTimeout,
-    'custom-list':customList
+    'custom-list':customList,
+    'rich-text':richText,
   },
   onShareAppMessage(res) {
     let {shopCode} = app.globalData.shopInfo;