developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
xugenyuan
9ad2d539 1 parent 08ddf821

ref |> 更新H5模板 

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>
Inline Side-by-side
Showing 6 changed files with 55 additions and 40 deletions
@@ -116,7 +116,6 @@ function useAudio(audioState, details) { @@ -116,7 +116,6 @@ function useAudio(audioState, details) {
116 116
117 watch(audioState, (val) => { 117 watch(audioState, (val) => {
118 if (val) { 118 if (val) {
119 - console.log('watch', val)  
120 const audioElList = document.querySelectorAll('.preview-audio-player, .preview-audio-player-cover') 119 const audioElList = document.querySelectorAll('.preview-audio-player, .preview-audio-player-cover')
121 120
122 audioElList.forEach((item, _) => { 121 audioElList.forEach((item, _) => {
@@ -61,13 +61,12 @@ function useImage(details, netstutas, loadlmageOnlyWifiSwitch) { @@ -61,13 +61,12 @@ function useImage(details, netstutas, loadlmageOnlyWifiSwitch) {
61 61
62 const initImage = (netWorkStatus, loadImage) => { 62 const initImage = (netWorkStatus, loadImage) => {
63 const list = document.querySelectorAll('#newsContent img[data-src]') 63 const list = document.querySelectorAll('#newsContent img[data-src]')
64 -  
65 for (let i = 0; i < list.length; i++) { 64 for (let i = 0; i < list.length; i++) {
66 const hasPreview = list[i].classList.contains('image-player') 65 const hasPreview = list[i].classList.contains('image-player')
67 const record = list[i] 66 const record = list[i]
68 const areadySrc = record.getAttribute('src') 67 const areadySrc = record.getAttribute('src')
69 const src = record.getAttribute('data-src') 68 const src = record.getAttribute('data-src')
70 - const status = hasPreview ? record.parentNode.getAttribute('status') : record.getAttribute('status') 69 + const status = hasPreview ? record.parentNode.getAttribute('status') || 'loading' : record.getAttribute('status')
71 // 防止重复加载 70 // 防止重复加载
72 if (areadySrc) { 71 if (areadySrc) {
73 continue 72 continue
@@ -217,7 +217,7 @@ const app = Vue.createApp({ @@ -217,7 +217,7 @@ const app = Vue.createApp({
217 state.environment = window.config.VUE_BASE_HEADER.environment 217 state.environment = window.config.VUE_BASE_HEADER.environment
218 // channelId.value = 2038 218 // channelId.value = 2038
219 // state.relId = 500005771692 219 // state.relId = 500005771692
220 - state.contentId = 30037846595 220 + state.contentId = 30037891349
221 contentId = state.contentId 221 contentId = state.contentId
222 clearInterval(time.value) 222 clearInterval(time.value)
223 setTimeout(() => { 223 setTimeout(() => {
@@ -358,7 +358,7 @@ const app = Vue.createApp({ @@ -358,7 +358,7 @@ const app = Vue.createApp({
358 methot: 'get', 358 methot: 'get',
359 appStatus: false, 359 appStatus: false,
360 // isMock: true, 360 // isMock: true,
361 - // weakNetwork: true, 361 + // weakNetwork: true,1
362 // mockTimeOut: 10, 362 // mockTimeOut: 10,
363 //环境 363 //环境
364 environment: state.environment, 364 environment: state.environment,
@@ -793,7 +793,6 @@ const app = Vue.createApp({ @@ -793,7 +793,6 @@ const app = Vue.createApp({
793 // break 793 // break
794 // } 794 // }
795 // } 795 // }
796 - console.log(state.details.newLinkObject)  
797 try { 796 try {
798 sendNative( 797 sendNative(
799 'jsCall_receiveH5Data', 798 'jsCall_receiveH5Data',
@@ -707,7 +707,7 @@ function getArticleDetails() { @@ -707,7 +707,7 @@ function getArticleDetails() {
707 </section> 707 </section>
708 <p><br></p>`, 708 <p><br></p>`,
709 newsSourceName: Mock.Random.ctitle(80, 100), 709 newsSourceName: Mock.Random.ctitle(80, 100),
710 - // newsContent: `<p>测试下测试下测试下测试下测试下测试测700测试下测试下测试下测试下测试测你“你好呢你好呢你好呢你好呢你好呢”测试下测试测吃测试测测试测测试测测试测测试测测试测测试测试“你正在洒水的”测试测测试测测试测测试测</p>`, 710 + 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>`,
711 coverImgUrl: handleRandomImage(343, 197), 711 coverImgUrl: handleRandomImage(343, 197),
712 imageUrl: handleRandomImage(50, 50), 712 imageUrl: handleRandomImage(50, 50),
713 adress: 'Cai Hairuo, Liang Jun', 713 adress: 'Cai Hairuo, Liang Jun',
@@ -864,7 +864,10 @@ class DomUtil { @@ -864,7 +864,10 @@ class DomUtil {
864 className = className + ' link-image' 864 className = className + ' link-image'
865 linkIocnHtml = `<div class="preview-image-link-icon"><img class="local-image" src="./image/image_link.svg" alt=""><span>链接</span></div>` 865 linkIocnHtml = `<div class="preview-image-link-icon"><img class="local-image" src="./image/image_link.svg" alt=""><span>链接</span></div>`
866 } 866 }
867 - const el = document.createElement('div') 867 + const parentNode = effectImage[i].parentNode
  868 + const style = getComputedStyle(parentNode);
  869 + const isInline = style.display === 'inline'
  870 + const el = document.createElement(isInline ? 'span' : 'div')
868 const findRecord = photoList.find(el => { 871 const findRecord = photoList.find(el => {
869 const originSrc = src.split('?')[0] 872 const originSrc = src.split('?')[0]
870 return handleMediaSrc(el.picPath) == handleMediaSrc(originSrc) 873 return handleMediaSrc(el.picPath) == handleMediaSrc(originSrc)
@@ -877,7 +880,6 @@ class DomUtil { @@ -877,7 +880,6 @@ class DomUtil {
877 880
878 if (width) width = !isNaN(width) && typeof width === 'number' ? width : 0 881 if (width) width = !isNaN(width) && typeof width === 'number' ? width : 0
879 if (height) height = !isNaN(width) && typeof height === 'number' ? height : 0 882 if (height) height = !isNaN(width) && typeof height === 'number' ? height : 0
880 -  
881 if (findRecord) { 883 if (findRecord) {
882 width = findRecord.width || width 884 width = findRecord.width || width
883 height = findRecord.height || height 885 height = findRecord.height || height
@@ -887,16 +889,18 @@ class DomUtil { @@ -887,16 +889,18 @@ class DomUtil {
887 889
888 if (width <= 0) width = 0 890 if (width <= 0) width = 0
889 if (height <= 0) height = 0 891 if (height <= 0) height = 0
890 - const parentNode = effectImage[i].parentNode  
891 - const parentWidth = parentNode ? parentNode.getBoundingClientRect().width : contentWidth 892 +
  893 + const parentNodeWdith = findAncestorWithNonZeroWidth(effectImage[i])
  894 + const parentWidth = parentNodeWdith ? parentNodeWdith.getBoundingClientRect().width : contentWidth
892 const overMaxWidth = width > parentWidth 895 const overMaxWidth = width > parentWidth
893 el.setAttribute('class', className) 896 el.setAttribute('class', className)
894 el.setAttribute('status', 'loading') 897 el.setAttribute('status', 'loading')
895 - el.style.height = width && height ? overMaxWidth ? `${parentWidth * height / width}px` : `${height}px` : '' 898 + height = width && height ? overMaxWidth ? parentWidth * height / width : height : 0
  899 + el.style.height = height ? `${height}px` : ''
896 if (!height) el.classList.add('minHeight') 900 if (!height) el.classList.add('minHeight')
897 jqHtml(el, { 901 jqHtml(el, {
898 type: 'set', 902 type: 'set',
899 - 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}` 903 + 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}`
900 }) 904 })
901 905
902 try { 906 try {
@@ -1085,26 +1089,26 @@ class DomUtil { @@ -1085,26 +1089,26 @@ class DomUtil {
1085 } 1089 }
1086 } 1090 }
1087 1091
1088 - const lastEle = document.querySelector('#newsContent')  
1089 - ? document.querySelector('#newsContent').lastElementChild  
1090 - : null  
1091 -  
1092 - if (lastEle && lastEle.lastChild && lastEle.lastChild.classList && lastEle.lastChild.classList.contains(  
1093 - 'preview-image-block')) {  
1094 - const el = lastEle.lastChild  
1095 - el.style.setProperty('margin-bottom', '0', 'important')  
1096 - }  
1097 - if (lastEle && lastEle.style) {  
1098 - if (lastEle.childNodes && lastEle.childNodes.length === 1) {  
1099 - if (lastEle.childNodes[0].tagName === 'BR') {  
1100 - if (lastEle.previousElementSibling) {  
1101 - lastEle.previousElementSibling.style.setProperty('margin-bottom', '0', 'important')  
1102 - }  
1103 - }  
1104 - } else {  
1105 - lastEle.style.setProperty('margin-bottom', '0', 'important')  
1106 - }  
1107 - } 1092 + // const lastEle = document.querySelector('#newsContent')
  1093 + // ? document.querySelector('#newsContent').lastElementChild
  1094 + // : null
  1095 + //
  1096 + // if (lastEle && lastEle.lastChild && lastEle.lastChild.classList && lastEle.lastChild.classList.contains(
  1097 + // 'preview-image-block')) {
  1098 + // const el = lastEle.lastChild
  1099 + // el.style.setProperty('margin-bottom', '0', 'important')
  1100 + // }
  1101 + // if (lastEle && lastEle.style) {
  1102 + // if (lastEle.childNodes && lastEle.childNodes.length === 1) {
  1103 + // if (lastEle.childNodes[0].tagName === 'BR') {
  1104 + // if (lastEle.previousElementSibling) {
  1105 + // lastEle.previousElementSibling.style.setProperty('margin-bottom', '0', 'important')
  1106 + // }
  1107 + // }
  1108 + // } else {
  1109 + // lastEle.style.setProperty('margin-bottom', '0', 'important')
  1110 + // }
  1111 + // }
1108 1112
1109 let html = jqHtml(document.querySelector('#newsContent'), { type: 'get' }) 1113 let html = jqHtml(document.querySelector('#newsContent'), { type: 'get' })
1110 jqHtml(document.querySelector('#newsContent'), { type: 'set', str: html }) 1114 jqHtml(document.querySelector('#newsContent'), { type: 'set', str: html })
@@ -1400,7 +1400,7 @@ function jumpAppInnerFun(record, url) { @@ -1400,7 +1400,7 @@ function jumpAppInnerFun(record, url) {
1400 //内容id 1400 //内容id
1401 contentId: record.contentId, 1401 contentId: record.contentId,
1402 relId: record.relId, 1402 relId: record.relId,
1403 - relType: record.relType, 1403 + relType: record.relType
1404 }, 1404 },
1405 //请求头信息 1405 //请求头信息
1406 headers: shallowMerge({ 1406 headers: shallowMerge({
@@ -1411,7 +1411,6 @@ function jumpAppInnerFun(record, url) { @@ -1411,7 +1411,6 @@ function jumpAppInnerFun(record, url) {
1411 if (response.data) { 1411 if (response.data) {
1412 const details = response.data.length > 0 ? response.data[0] : {} 1412 const details = response.data.length > 0 ? response.data[0] : {}
1413 const newsLinkUrl = details.newsLinkUrl 1413 const newsLinkUrl = details.newsLinkUrl
1414 - console.log(details)  
1415 if (newsLinkUrl) { 1414 if (newsLinkUrl) {
1416 window.open(newsLinkUrl) 1415 window.open(newsLinkUrl)
1417 } 1416 }
@@ -1433,7 +1432,7 @@ function jumpAppInnerFun(record, url) { @@ -1433,7 +1432,7 @@ function jumpAppInnerFun(record, url) {
1433 //内容id 1432 //内容id
1434 contentId: record.contentId, 1433 contentId: record.contentId,
1435 relId: record.relId, 1434 relId: record.relId,
1436 - relType: record.relType, 1435 + relType: record.relType
1437 } 1436 }
1438 }, 1437 },
1439 (res) => { 1438 (res) => {
@@ -1583,13 +1582,28 @@ function jqHtml(el, options) { @@ -1583,13 +1582,28 @@ function jqHtml(el, options) {
1583 1582
1584 function rgbToRgba(rgb, alpha) { 1583 function rgbToRgba(rgb, alpha) {
1585 // 从字符串中提取出 r、g、b 值 1584 // 从字符串中提取出 r、g、b 值
1586 - const rgbValues = rgb.match(/\d+/g).map(Number); 1585 + const rgbValues = rgb.match(/\d+/g).map(Number)
1587 1586
1588 // 确保 r、g、b 值都是有效的数字 1587 // 确保 r、g、b 值都是有效的数字
1589 if (rgbValues.length === 3) { 1588 if (rgbValues.length === 3) {
1590 - const [r, g, b] = rgbValues;  
1591 - return `rgba(${r}, ${g}, ${b}, ${alpha})`; 1589 + const [ r, g, b ] = rgbValues
  1590 + return `rgba(${r}, ${g}, ${b}, ${alpha})`
1592 } else { 1591 } else {
1593 - throw new Error("Invalid RGB input"); 1592 + throw new Error('Invalid RGB input')
1594 } 1593 }
1595 } 1594 }
  1595 +
  1596 +function findAncestorWithNonZeroWidth(element) {
  1597 + let currentElement = element
  1598 +
  1599 + // 递归向上查找，直到找到 width 不为 0 的元素
  1600 + while (currentElement) {
  1601 + const width = currentElement.getBoundingClientRect().width
  1602 + if (width > 0) {
  1603 + return currentElement // 找到符合条件的祖先元素
  1604 + }
  1605 + currentElement = currentElement.parentElement // 继续查找父元素
  1606 + }
  1607 +
  1608 + return null // 如果没有找到符合条件的元素
  1609 +}