ref |> 更新H5模板

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>

@@ -116,7 +116,6 @@ function useAudio(audioState, details) {
 
   watch(audioState, (val) => {
     if (val) {
-      console.log('watch', val)
       const audioElList = document.querySelectorAll('.preview-audio-player, .preview-audio-player-cover')
 
       audioElList.forEach((item, _) => {

@@ -61,13 +61,12 @@ function useImage(details, netstutas, loadlmageOnlyWifiSwitch) {
 
   const initImage = (netWorkStatus, loadImage) => {
     const list = document.querySelectorAll('#newsContent img[data-src]')
-
     for (let i = 0; i < list.length; i++) {
       const hasPreview = list[i].classList.contains('image-player')
       const record = list[i]
       const areadySrc = record.getAttribute('src')
       const src = record.getAttribute('data-src')
-      const status = hasPreview ? record.parentNode.getAttribute('status') : record.getAttribute('status')
+      const status = hasPreview ? record.parentNode.getAttribute('status') || 'loading' : record.getAttribute('status')
       // 防止重复加载
       if (areadySrc) {
         continue

@@ -217,7 +217,7 @@ const app = Vue.createApp({
           state.environment = window.config.VUE_BASE_HEADER.environment
           // channelId.value = 2038
           // state.relId = 500005771692
-          state.contentId = 30037846595
+          state.contentId = 30037891349
           contentId = state.contentId
           clearInterval(time.value)
           setTimeout(() => {
@@ -358,7 +358,7 @@ const app = Vue.createApp({
           methot: 'get',
           appStatus: false,
           // isMock: true,
-          // weakNetwork: true,
+          // weakNetwork: true,1
           // mockTimeOut: 10,
           //环境
           environment: state.environment,
@@ -793,7 +793,6 @@ const app = Vue.createApp({
         //       break
         //   }
         // }
-        console.log(state.details.newLinkObject)
         try {
           sendNative(
             'jsCall_receiveH5Data',

@@ -707,7 +707,7 @@ function getArticleDetails() {
     </section>
     <p><br></p>`,
       newsSourceName: Mock.Random.ctitle(80, 100),
-      // newsContent: `<p>测试下测试下测试下测试下测试下测试测700测试下测试下测试下测试下测试测你“你好呢你好呢你好呢你好呢你好呢”测试下测试测吃测试测测试测测试测测试测测试测测试测测试测试“你正在洒水的”测试测测试测测试测测试测</p>`,
+      newsContent: `<p class="textAlignCenter"><span style="font-size: 12px;"><strong><img src="https://uatjdcdnphoto.aikan.pdnews.cn/zhbj-20241016/image/content/b938dcaf6a07422da7ab00f96c9a80a4.jpg" alt=""></strong></span></p><div></div>`,
       coverImgUrl: handleRandomImage(343, 197),
       imageUrl: handleRandomImage(50, 50),
       adress: 'Cai Hairuo, Liang Jun',

@@ -864,7 +864,10 @@ class DomUtil {
         className = className + ' link-image'
         linkIocnHtml = `<div class="preview-image-link-icon"><img class="local-image" src="./image/image_link.svg" alt=""><span>链接</span></div>`
       }
-      const el = document.createElement('div')
+      const parentNode = effectImage[i].parentNode
+      const style = getComputedStyle(parentNode);
+      const isInline = style.display === 'inline'
+      const el = document.createElement(isInline ? 'span' : 'div')
       const findRecord = photoList.find(el => {
         const originSrc = src.split('?')[0]
         return handleMediaSrc(el.picPath) == handleMediaSrc(originSrc)
@@ -877,7 +880,6 @@ class DomUtil {
 
       if (width) width = !isNaN(width) && typeof width === 'number' ? width : 0
       if (height) height = !isNaN(width) && typeof height === 'number' ? height : 0
-
       if (findRecord) {
         width = findRecord.width || width
         height = findRecord.height || height
@@ -887,16 +889,18 @@ class DomUtil {
 
       if (width <= 0) width = 0
       if (height <= 0) height = 0
-      const parentNode = effectImage[i].parentNode
-      const parentWidth = parentNode ? parentNode.getBoundingClientRect().width : contentWidth
+
+      const parentNodeWdith = findAncestorWithNonZeroWidth(effectImage[i])
+      const parentWidth = parentNodeWdith ? parentNodeWdith.getBoundingClientRect().width : contentWidth
       const overMaxWidth = width > parentWidth
       el.setAttribute('class', className)
       el.setAttribute('status', 'loading')
-      el.style.height = width && height ? overMaxWidth ? `${parentWidth * height / width}px` : `${height}px` : ''
+      height = width && height ? overMaxWidth ? parentWidth * height / width : height : 0
+      el.style.height = height ? `${height}px` : ''
       if (!height) el.classList.add('minHeight')
       jqHtml(el, {
         type: 'set',
-        str: `<img class="image-player none image-player-${i}" src="" alt="" data-src="${previewSrc}" data-origin-src="${src}" data-image="image"><img class="preview-image-placehold local-image not-preview-image" src="${imageSrc}" alt=""><img class="preview-image-error not-preview-image local-image none" src="${errorSrc}" alt=""><span class="no-network-text">点击查看原图</span>${linkIocnHtml}`
+        str: `<img class="image-player none image-player-${i}" src="" alt="" data-src="${previewSrc}" data-origin-src="${src}" data-image="image"><img class="preview-image-placehold local-image not-preview-image" style="width: ${height > 0 && height < 50 ? '1.6rem' : undefined}" src="${imageSrc}" alt=""><img class="preview-image-error not-preview-image local-image none" src="${errorSrc}" alt=""><span class="no-network-text">点击查看原图</span>${linkIocnHtml}`
       })
 
       try {
@@ -1085,26 +1089,26 @@ class DomUtil {
       }
     }
 
-    const lastEle = document.querySelector('#newsContent')
-      ? document.querySelector('#newsContent').lastElementChild
-      : null
-
-    if (lastEle && lastEle.lastChild && lastEle.lastChild.classList && lastEle.lastChild.classList.contains(
-      'preview-image-block')) {
-      const el = lastEle.lastChild
-      el.style.setProperty('margin-bottom', '0', 'important')
-    }
-    if (lastEle && lastEle.style) {
-      if (lastEle.childNodes && lastEle.childNodes.length === 1) {
-        if (lastEle.childNodes[0].tagName === 'BR') {
-          if (lastEle.previousElementSibling) {
-            lastEle.previousElementSibling.style.setProperty('margin-bottom', '0', 'important')
-          }
-        }
-      } else {
-        lastEle.style.setProperty('margin-bottom', '0', 'important')
-      }
-    }
+    // const lastEle = document.querySelector('#newsContent')
+    //   ? document.querySelector('#newsContent').lastElementChild
+    //   : null
+    //
+    // if (lastEle && lastEle.lastChild && lastEle.lastChild.classList && lastEle.lastChild.classList.contains(
+    //   'preview-image-block')) {
+    //   const el = lastEle.lastChild
+    //   el.style.setProperty('margin-bottom', '0', 'important')
+    // }
+    // if (lastEle && lastEle.style) {
+    //   if (lastEle.childNodes && lastEle.childNodes.length === 1) {
+    //     if (lastEle.childNodes[0].tagName === 'BR') {
+    //       if (lastEle.previousElementSibling) {
+    //         lastEle.previousElementSibling.style.setProperty('margin-bottom', '0', 'important')
+    //       }
+    //     }
+    //   } else {
+    //     lastEle.style.setProperty('margin-bottom', '0', 'important')
+    //   }
+    // }
 
     let html = jqHtml(document.querySelector('#newsContent'), { type: 'get' })
     jqHtml(document.querySelector('#newsContent'), { type: 'set', str: html })

@@ -1400,7 +1400,7 @@ function jumpAppInnerFun(record, url) {
             //内容id
             contentId: record.contentId,
             relId: record.relId,
-            relType: record.relType,
+            relType: record.relType
           },
           //请求头信息
           headers: shallowMerge({
@@ -1411,7 +1411,6 @@ function jumpAppInnerFun(record, url) {
             if (response.data) {
               const details = response.data.length > 0 ? response.data[0] : {}
               const newsLinkUrl = details.newsLinkUrl
-              console.log(details)
               if (newsLinkUrl) {
                 window.open(newsLinkUrl)
               }
@@ -1429,11 +1428,11 @@ function jumpAppInnerFun(record, url) {
             {
               method: 'get',
               url: '/api/rmrb-bff-display-zh/content/zh/c/content/detail',
-              parameters:  {
+              parameters: {
                 //内容id
                 contentId: record.contentId,
                 relId: record.relId,
-                relType: record.relType,
+                relType: record.relType
               }
             },
             (res) => {
@@ -1583,13 +1582,28 @@ function jqHtml(el, options) {
 
 function rgbToRgba(rgb, alpha) {
   // 从字符串中提取出 r、g、b 值
-  const rgbValues = rgb.match(/\d+/g).map(Number);
+  const rgbValues = rgb.match(/\d+/g).map(Number)
 
   // 确保 r、g、b 值都是有效的数字
   if (rgbValues.length === 3) {
-    const [r, g, b] = rgbValues;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    const [ r, g, b ] = rgbValues
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
   } else {
-    throw new Error("Invalid RGB input");
+    throw new Error('Invalid RGB input')
   }
 }
+
+function findAncestorWithNonZeroWidth(element) {
+  let currentElement = element
+
+  // 递归向上查找，直到找到 width 不为 0 的元素
+  while (currentElement) {
+    const width = currentElement.getBoundingClientRect().width
+    if (width > 0) {
+      return currentElement // 找到符合条件的祖先元素
+    }
+    currentElement = currentElement.parentElement // 继续查找父元素
+  }
+
+  return null // 如果没有找到符合条件的元素
+}