Fix：5778 【商城小程序】【商户入驻-入驻申请须知】香道滇小程序展示的“入驻申请须知”段落格式，与香道滇后台管理系统中配置的内容格式不一致

assets/css/pkg_join.less

@@ -127,6 +127,25 @@
     height: 52vh;
     overflow-y: auto;
     margin: 30rpx 0;
+
+    // 小程序rich-text内块级标签无默认段间距，补充与后台富文本编辑器一致的段落格式
+    rich-text {
+      display: block;
+      width: 100%;
+
+      p, div, ul, ol {
+        display: block;
+        margin: 0 0 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      li {
+        margin: 0 0 8rpx;
+      }
+    }
   }
 
   .agree-box {

pkg_join/views/experienceStore.vue

@@ -451,7 +451,7 @@
 <script>
 import CitySelect from '@/components/CitySelect'
 import { getCity, registerVerify } from '@/api/user'
-import { uploadVideo, uploadImage } from '@/utils'
+import { uploadVideo, uploadImage, formatRichText } from '@/utils'
 import {
   getShopData,
   saveExperienceStore,
@@ -523,7 +523,7 @@ export default {
     this.promoterUid = opts.promoterUid || ''
     this.queryCity()
     getShopData({partnerId: this.partnerId, promoterUid: this.promoterUid}).then(({ data }) => {
-      this.notice = data.merchantApplyNotice
+      this.notice = formatRichText(data.merchantApplyNotice)
     })
     getExperienceStoreCategoryList().then(({ data }) => {
       this.experienceStoreCategoryList = data || []
@@ -865,6 +865,25 @@ export default {
   height: 52vh;
   overflow-y: auto;
   margin: 30rpx 0;
+
+  // 小程序rich-text内块级标签无默认段间距，补充与后台富文本编辑器一致的段落格式
+  ::v-deep rich-text {
+    display: block;
+    width: 100%;
+
+    p, div, ul, ol {
+      display: block;
+      margin: 0 0 16rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    li {
+      margin: 0 0 8rpx;
+    }
+  }
 }
 .popup-body .agree-box {
   margin: 60rpx 0;

pkg_join/views/shop.vue

@@ -461,7 +461,8 @@ import {
   chooseImage,
   moreImage,
   uploadImage,
-  chooseVideoToUpload
+  chooseVideoToUpload,
+  formatRichText
 } from '@/utils'
 
 export default {
@@ -699,7 +700,7 @@ export default {
       getShopData({partnerId: this.partnerId, promoterUid: this.promoterUid}).then(({data}) => {
         this.hotelTypeList = data.hotelTypeList || []
         this.columnsType = this.hotelTypeList
-        this.notice = data.merchantApplyNotice
+        this.notice = formatRichText(data.merchantApplyNotice)
         getCountyFamousHotelType({
           page: 1,
           limit: 9999

pkg_join/views/supplier.vue

@@ -553,7 +553,8 @@ import {
   chooseImage,
   moreImage,
   uploadImage,
-  chooseVideoToUpload
+  chooseVideoToUpload,
+  formatRichText
 } from '@/utils'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
@@ -886,7 +887,7 @@ export default {
       getShopData({partnerId: this.partnerId, promoterUid: this.promoterUid}).then(({data}) => {
         this.columnsType = data.hotelTypeList
         this.columnsSupplierType = data.supplierTypeList
-        this.notice = data.merchantApplyNotice
+        this.notice = formatRichText(data.merchantApplyNotice)
         this.initInfo()
       })
     },

pkg_join/views/travelResidence.vue

@@ -376,7 +376,8 @@ import {getCity, registerVerify} from '@/api/user'
 import {
   chooseImage,
   uploadVideo,
-  uploadImage
+  uploadImage,
+  formatRichText
 } from '@/utils'
 import {
   getShopData,
@@ -471,7 +472,7 @@ export default {
     this.promoterUid = opts.promoterUid || ''
     this.queryCity()
     getShopData({partnerId: this.partnerId, promoterUid: this.promoterUid}).then(({data}) => {
-      this.notice = data.merchantApplyNotice
+      this.notice = formatRichText(data.merchantApplyNotice)
       this.initInfo()
     })
   },
@@ -860,6 +861,25 @@ export default {
     height: 52vh;
     overflow-y: auto;
     margin: 30rpx 0;
+
+    // 小程序rich-text内块级标签无默认段间距，补充与后台富文本编辑器一致的段落格式
+    ::v-deep rich-text {
+      display: block;
+      width: 100%;
+
+      p, div, ul, ol {
+        display: block;
+        margin: 0 0 16rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      li {
+        margin: 0 0 8rpx;
+      }
+    }
 }
 .popup-body .agree-box {
     margin: 60rpx 0;

pkg_join/views/wholesaler.vue

@@ -270,7 +270,7 @@
 import CitySelect from '@/components/CitySelect'
 import {getShopData, getWholesaler, removeApply, saveWholesaler} from '@/api/join'
 import {getCity, registerVerify} from '@/api/user'
-import {chooseImage} from '@/utils'
+import {chooseImage, formatRichText} from '@/utils'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
 export default {
@@ -413,7 +413,7 @@ export default {
         this.district = data
       })
       getShopData({partnerId: this.partnerId, promoterUid: this.promoterUid}).then(({data}) => {
-        this.notice = data.merchantApplyNotice
+        this.notice = formatRichText(data.merchantApplyNotice)
         this.initInfo()
       })
     },

utils/index.js

@@ -9,6 +9,15 @@ import stringify from "@/utils/querystring";
 import {VUE_APP_API_URL} from "@/config";
 import {auth} from '@/libs/wechat'
 
+// 富文本内容预处理：
+// 纯文本内容（不含HTML标签）中的换行符\n在rich-text中会被折叠为空格，需转为<br/>以保留换行格式
+export function formatRichText(content) {
+    if (!content) return ''
+    // 含HTML标签的富文本内容不做处理，避免破坏原有结构
+    if (/<[a-zA-Z][^>]*>/.test(content)) return content
+    return content.replace(/\r\n/g, '\n').replace(/\n/g, '<br/>')
+}
+
 export function dataFormat(time, option) {
     time = +time * 1000;
     const d = new Date(time);