tuisong

pages/courseInformation/index/index.vue

@@ -22,7 +22,6 @@
       }"
     >
       <template slot="tabs" slot-scope="slotProps">
-        
         <common-sticky
           label="title"
           itemStyle="width:50%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
@@ -32,10 +31,18 @@
         ></common-sticky>
       </template>
       <template slot="label" slot-scope="slotProps">
-        <view class="content_title " style="margin-top: 40px; margin-bottom: 60px;">{{ slotProps.title }}</view>
+        
+        <view
+          class="content_title"
+          :style="`margin-top: ${
+            slotProps.dataIndex == 0 ? 10 : 30
+          }px; margin-bottom: 20px;`"
+          >{{ slotProps.title }}</view
+        >
       </template>
       <template slot="contentList" slot-scope="slotProps">
-        <common-list style="margin-bottom: 120px;"
+        <common-list
+          style="margin-bottom: 40px"
           v-if="currentCateIndex == 0"
           noDataIcon="data"
           :isCondition="true"
@@ -90,23 +97,39 @@
         </common-list>
       </template>
       <template slot="detail_buyRecord" slot-scope="slotProps">
-        <view style="padding: 20px 20rpx 40px">
-          <view v-html="slotProps.dataList"></view>
+        <view style="padding: 20rpx">
+          <rich-text
+            :nodes="slotProps.dataList | formatRichText"
+            @click.stop="showPreview"
+            :data-nodes="slotProps.dataList"
+          ></rich-text>
         </view>
       </template>
       <template slot="detail_useRecord" slot-scope="slotProps">
-        <view style="padding: 20px 20rpx 40px">
-          <view v-html="slotProps.dataList"></view>
+        <view style="padding: 20rpx">
+          <rich-text
+            :nodes="slotProps.dataList | formatRichText"
+            @click.stop="showPreview"
+            :data-nodes="slotProps.dataList"
+          ></rich-text>
         </view>
       </template>
       <template slot="detail_studyRecord" slot-scope="slotProps">
-        <view style="padding: 20px 20rpx 40px">
-          <view v-html="slotProps.dataList"></view>
+        <view style="padding: 20rpx">
+          <rich-text
+            :nodes="slotProps.dataList | formatRichText"
+            @click.stop="showPreview"
+            :data-nodes="slotProps.dataList"
+          ></rich-text>
         </view>
       </template>
       <template slot="detail_vipRecord" slot-scope="slotProps">
-        <view style="padding: 20px 20rpx 40px">
-          <view v-html="slotProps.dataList"></view>
+        <view style="padding: 20rpx">
+          <rich-text
+            :nodes="slotProps.dataList | formatRichText"
+            @click.stop="showPreview"
+            :data-nodes="slotProps.dataList"
+          ></rich-text>
         </view>
       </template>
     </common-anchor-link>
@@ -195,6 +218,36 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
+    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:inline-block;margin:10rpx auto;"'
+      );
+      return newContent;
+    },
     gotoDetail(v) {
       console.log(v);
       uni.navigateTo({