Przeglądaj źródła

商品详情页富文本处理

DELL 3 lat temu
rodzic
commit
3cd7c26520
3 zmienionych plików z 49 dodań i 5 usunięć
  1. 26 2
      package-lock.json
  2. 1 0
      package.json
  3. 22 3
      src/packageGoods/goods/detail.vue

+ 26 - 2
package-lock.json

@@ -6365,8 +6365,7 @@
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
     },
     "domexception": {
       "version": "1.0.1",
@@ -11245,6 +11244,31 @@
         }
       }
     },
+    "mini-html-parser2": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/mini-html-parser2/-/mini-html-parser2-0.3.0.tgz",
+      "integrity": "sha512-W4x1MCmtlnAH5M9qQ1WbRn+hTvv7bdrJx4VI+6SD0MUZatW/6K7v213Aidx7VDQmSKoRv+iAn5TswJnesOs71Q==",
+      "requires": {
+        "domhandler": "^2.4.2",
+        "entities": "^1.1.1",
+        "events": "^3.0.0"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmmirror.com/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        }
+      }
+    },
     "mini-types": {
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/mini-types/-/mini-types-0.1.7.tgz",

+ 1 - 0
package.json

@@ -70,6 +70,7 @@
     "@vue/shared": "^3.0.0",
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
+    "mini-html-parser2": "^0.3.0",
     "regenerator-runtime": "^0.12.1",
     "uview-ui": "^2.0.31",
     "vue": "^2.6.11",

+ 22 - 3
src/packageGoods/goods/detail.vue

@@ -29,7 +29,12 @@
 			</view>
 			<view class="detail-goods">产品介绍</view>
 			<view class="detail-description">
+				<!-- #ifndef MP-ALIPAY -->
 				<u-parse :content="description" :selectable="true"></u-parse>
+				<!-- #endif -->
+				<!-- #ifdef MP-ALIPAY -->
+				<rich-text :nodes="description"></rich-text>
+				<!-- #endif -->
 			</view>
 			<view style="detail-merchant" @click="toCompanyData" v-if="info.merchantInfo?true:false">
 				<view class="detail-merchant-warp">
@@ -110,6 +115,7 @@
 	import { formatRichText } from '@/utils/util.js'
 	import ExchangePopop from '../components/exchange-popup/exchange-popup.vue'
 	import PurchasePopup from '../components/purchase-popup/purchase-popup.vue'
+	import parse from 'mini-html-parser2';
 	export default {
 		components: {
 			ExchangePopop,
@@ -153,6 +159,7 @@
 					goodsId: this.goodsId,
 					noToken: true
 				}).then(res => {
+					
 					uni.hideLoading();
 					if (res.code == 0) {
 						this.info = res.data
@@ -161,10 +168,22 @@
 							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
 						})
 						// 处理富文本
-						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
-							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
-								".png?imageView2/2/w/750\"");
+						// #ifndef MP-ALIPAY
+						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"").replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",".png?imageView2/2/w/750\"");
 						this.description = formatRichText(description);
+						// #endif
+						
+						// #ifdef MP-ALIPAY
+						parse(formatRichText(res.data.description),(err,nodes) => {
+							if(!err){
+								nodes[0].children.forEach(item => {
+									item.attrs.src = item.attrs.src + '?imageView2/2/w/750'
+								})
+								this.description = nodes
+							}
+						})
+						// #endif
+						
 						this.skuListInit = res.data.skuList
 						if (res.data.skuList.length) {
 							let skuProp = JSON.parse(res.data.skuProp)