Skip to content

M
mayi-mp-shop
Commit 6b88bad1 by 柳士祥
Options

文章详情组件

parent f373002c
Showing with 96 additions and 20 deletions
src/pages/pages_subpack/article/index.vue
<template>
<div class="article_container">
<div class="richText">
<div class="title" v-if="article.title">{{article.title}}</div>
<div class="title_info">
<div class="title_user">{{article.author}}</div>
<div class="title_time">{{article.createDatetime}}</div>
<div class="title_user" v-if="article.author">{{article.author}}</div>
<div class="title_time" v-if="article.createDatetime">{{article.createDatetime}}</div>
</div>
<!-- <wxParse :content="article.content" v-if="!article.msg" /> -->
<div v-html="article.content" v-if="!article.msg"></div>
<!-- <div v-html="article.content" v-if="!article.msg"></div>/ -->
<mp-html :content="article.content" :copy-link="false" @linktap="linktap" v-if="!article.msg" />
<!-- <rich-text :datas="datas" v-if="!article.msg"></rich-text> -->
<div class="title" style="min-height: 50vh;color: #999;align-items: center;display: flex;justify-content: center;" v-else>{{article.msg}}</div>
</div>
<div style="width:100%;height:10px;background-color:#EEF2F5;"></div>
<ul>
<div class="all">全部评论</div>
<div v-if="list.length == 0" style="text-align: center;color: #969799;font-size:12px">暂无评论</div>
<li id="pingLun" style="opacity:0;height: 0px;position:absolute;top:-130px;left:0;"></li>
<li class="van-hairline--bottom" v-for="(item,index) in list" :key="index">
......@@ -57,7 +60,7 @@ import { throttle, concatUrl } from "../../../utils/index.js"
// import wxParse from 'mpvue-wxparse'
const app = getApp();
const { log } = app;
const { $themeToLink, log } = app;
export default {
data() {
return {
......@@ -77,7 +80,8 @@ export default {
}
},
components: {
"shade-guide": shadeGuide
"shade-guide": shadeGuide,
},
created() {
},
......@@ -233,6 +237,48 @@ export default {
// }
// },
methods: {
toPageUrl(backPath, backParams = "") {
return `../../index/main?from=themeLink&backpath=${encodeURIComponent(
backPath
)}&params=${encodeURIComponent(backParams)}`;
},
getUrlofLink(data) {
return data.link.split("?")[0];
},
getUrlofQuery(data) {
let arr = data.link.split("?")
let params = [];
arr.forEach((res, index) => {
if (index >= 1) {
params.push(res)
}
})
return params.join("?") || "";
},
linktap(e) {
console.log(e.mp.detail);
let href = e.mp.detail.href
let articleid = e.mp.detail['data-articleid']
let productid = e.mp.detail['data-productid']
let data = {
link: `/goods/${productid}`,
type: 1
}
let url = this.toPageUrl(this.getUrlofLink(data), this.getUrlofQuery(data));
console.log(url,'last');
wx.navigateTo({
url
});
// console.log(href, articleid, productid);
// let linkVal = `/goods/${productid}`;
// $themeToLink({
// type: 1,
// link: linkVal
// });
},
getSpokesmanInit(extConfig) {
//绑定上下级关系
app.fenxiaoModel.becomeRelation(extConfig).then(res => {
......@@ -245,11 +291,17 @@ export default {
},
//富文本解析和替换
formatRichText(html) {
// let newContent = html.replace(/class="(.*)gobuy(.*)"/gi,function(match){
// match = match + ' onclick="gotowebview"'
// console.log(match, 'match');
// return match;
// })
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
if (match.startsWith('<img style="object-fit: contain;')) {
console.log(match,'match');
// console.log(match, 'match');
match = match.replace(/height:(.*?);/g, 'height: 76px !important;')
console.log(match,'match');
match = match.replace(/width:(.*?);/g, 'width: 90px !important;')
// console.log(match, 'match');
} else {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
......@@ -257,13 +309,13 @@ export default {
}
return match;
});
console.log('newContent', newContent);
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:block;margin:10px 0;"');
// console.log('newContent', newContent);
// 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:block;margin:10px 0;"');
return newContent
},
......@@ -409,6 +461,9 @@ export default {
<style lang="scss" scoped>
// @import url("~mpvue-wxparse/src/wxParse.css");
.mceNonEditable{
box-sizing: border-box;
}
.imgbox .img {
height: 96px !important;
}
......@@ -425,7 +480,7 @@ export default {
}
.title {
font-size: 24px;
font-size: 20px;
color: #333;
width: 100%;
padding: 12px 0;
......@@ -557,4 +612,4 @@ ul {
padding: 10px 12px 12px;
}
}
</style>
\ No newline at end of file
</style>
src/pages/pages_subpack/article/main.json
......@@ -4,6 +4,6 @@
"navigationBarTitleText": "",
"navigationBarTextStyle": "black",
"usingComponents": {
"mp-html": "/static/nativeComponents/mp-html/index"
}
}
\ No newline at end of file
}
static/nativeComponents/mp-html/index.js 0 → 100644
"use strict";function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}/*!
* mp-html v2.2.1
* https://github.com/jin-yufeng/mp-html
*
* Released under the MIT license
* Author: Jin Yufeng
*/
var t=require("./parser"),n=[];Component({data:{nodes:[]},properties:{containerStyle:String,content:{type:String,value:"",observer:function(e){this.setContent(e)}},copyLink:{type:Boolean,value:!0},domain:String,errorImg:String,lazyLoad:Boolean,loadingImg:String,pauseVideo:{type:Boolean,value:!0},previewImg:{type:Boolean,value:!0},scrollTable:Boolean,selectable:null,setTitle:{type:Boolean,value:!0},showImgMenu:{type:Boolean,value:!0},tagStyle:Object,useAnchor:null},created:function(){this.plugins=[];for(var e=n.length;e--;)this.plugins.push(new n[e](this))},detached:function(){clearInterval(this._timer),this._hook("onDetached")},methods:{in:function(e,t,n){e&&t&&n&&(this._in={page:e,selector:t,scrollTop:n})},navigateTo:function(t,n){var o=this;return new Promise(function(r,i){if(!o.data.useAnchor)return void i(Error("Anchor is disabled"));var a=wx.createSelectorQuery().in(o._in?o._in.page:o).select((o._in?o._in.selector:"._root")+(t?"".concat(">>>","#").concat(t):"")).boundingClientRect();o._in?a.select(o._in.selector).scrollOffset().select(o._in.selector).boundingClientRect():a.selectViewport().scrollOffset(),a.exec(function(t){if(!t[0])return void i(Error("Label not found"));var a=t[1].scrollTop+t[0].top-(t[2]?t[2].top:0)+(n||parseInt(o.data.useAnchor)||0);o._in?o._in.page.setData(e({},o._in.scrollTop,a)):wx.pageScrollTo({scrollTop:a,duration:300}),r()})})},getText:function(e){var t="";return function e(n){for(var o=0;o<n.length;o++){var r=n[o];if("text"===r.type)t+=r.text.replace(/&amp;/g,"&");else if("br"===r.name)t+="\n";else{var i="p"===r.name||"div"===r.name||"tr"===r.name||"li"===r.name||"h"===r.name[0]&&r.name[1]>"0"&&r.name[1]<"7";i&&t&&"\n"!==t[t.length-1]&&(t+="\n"),r.children&&e(r.children),i&&"\n"!==t[t.length-1]?t+="\n":"td"!==r.name&&"th"!==r.name||(t+="\t")}}}(e||this.data.nodes),t},getRect:function(){var e=this;return new Promise(function(t,n){wx.createSelectorQuery().in(e).select("._root").boundingClientRect().exec(function(e){return e[0]?t(e[0]):n(Error("Root label not found"))})})},setContent:function(e,n){var o=this;this.imgList&&n||(this.imgList=[]),this._videos=[];var r={},i=new t(this).parse(e);if(n)for(var a=this.data.nodes.length,l=i.length;l--;)r["nodes[".concat(a+l,"]")]=i[l];else r.nodes=i;this.setData(r,function(){o._hook("onLoad"),o.triggerEvent("load")});var s;clearInterval(this._timer),this._timer=setInterval(function(){o.getRect().then(function(e){e.height===s&&(o.triggerEvent("ready",e),clearInterval(o._timer)),s=e.height}).catch(function(){})},350)},_hook:function(e){for(var t=n.length;t--;)this.plugins[t][e]&&this.plugins[t][e]()},_add:function(e){e.detail.root=this}}});
\ No newline at end of file
static/nativeComponents/mp-html/index.json 0 → 100644
{"component":true,"usingComponents":{"node":"./node/node"}}
\ No newline at end of file
static/nativeComponents/mp-html/index.wxml 0 → 100644
<view class="_root {{selectable?'_select':''}}" style="{{containerStyle}}"><slot wx:if="{{!nodes[0]}}"/><node id="_root" childs="{{nodes}}" opts="{{[lazyLoad,loadingImg,errorImg,showImgMenu]}}" catchadd="_add"/></view>
\ No newline at end of file
static/nativeComponents/mp-html/index.wxss 0 → 100644
._root{padding:1px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}._select{-webkit-user-select:text;user-select:text}
\ No newline at end of file
static/nativeComponents/mp-html/node/node.js 0 → 100644
"use strict";function t(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}Component({data:{ctrl:{}},properties:{childs:Array,opts:Array},attached:function(){this.triggerEvent("add",this,{bubbles:!0,composed:!0})},methods:{noop:function(){},getNode:function(t){for(var i=t.split("_"),e=this.data.childs[i[0]],r=1;r<i.length;r++)e=e.children[i[r]];return e},play:function(t){if(this.root.data.pauseVideo){for(var i=!1,e=t.target.id,r=this.root._videos.length;r--;)this.root._videos[r].id===e?i=!0:this.root._videos[r].pause();if(!i){var s=wx.createVideoContext(e,this);s.id=e,this.root._videos.push(s)}}},imgTap:function(t){var i=this.getNode(t.target.dataset.i);if(i.a)return this.linkTap(i.a);if(!i.attrs.ignore&&(this.root.triggerEvent("imgtap",i.attrs),this.root.data.previewImg)){var e=this.root.imgList[i.i];wx.previewImage({current:e,urls:this.root.imgList})}},imgLoad:function(i){var e,r=i.target.dataset.i,s=this.getNode(r);s.w?(this.data.opts[1]&&!this.data.ctrl[r]||-1===this.data.ctrl[r])&&(e=1):e=i.detail.width,e&&this.setData(t({},"ctrl."+r,e))},linkTap:function(t){var i=t.currentTarget?this.getNode(t.currentTarget.dataset.i):{},e=i.attrs||t,r=e.href;this.root.triggerEvent("linktap",Object.assign({innerText:this.root.getText(i.children||[])},e)),r&&("#"===r[0]?this.root.navigateTo(r.substring(1)).catch(function(){}):r.split("?")[0].includes("://")?this.root.data.copyLink&&wx.setClipboardData({data:r,success:function(){return wx.showToast({title:"链接已复制"})}}):wx.navigateTo({url:r,fail:function(){wx.switchTab({url:r,fail:function(){}})}}))},mediaError:function(i){var e=i.target.dataset.i,r=this.getNode(e);if("video"===r.name||"audio"===r.name){var s=(this.data.ctrl[e]||0)+1;if(s>r.src.length&&(s=0),s<r.src.length)return this.setData(t({},"ctrl."+e,s))}else"img"===r.name&&this.data.opts[2]&&this.setData(t({},"ctrl."+e,-1));this.root&&this.root.triggerEvent("error",{source:r.name,attrs:r.attrs,errMsg:i.detail.errMsg})}}});
\ No newline at end of file
static/nativeComponents/mp-html/node/node.json 0 → 100644
{"component":true,"usingComponents":{"node":"./node"}}
\ No newline at end of file
static/nativeComponents/mp-html/node/node.wxml 0 → 100644
<wxs module="use">var e={abbr:!0,b:!0,big:!0,code:!0,del:!0,em:!0,i:!0,ins:!0,label:!0,q:!0,small:!0,span:!0,strong:!0,sub:!0,sup:!0};module.exports=function(n){return!n.c&&(!n.children||"a"===n.name||!e[n.name]&&-1===(n.attrs.style||"").indexOf("inline"))};</wxs><template name="el"><block wx:if="{{n.name==='img'}}"><image wx:if="{{(opts[1]&&!ctrl[i])||ctrl[i]<0}}" class="_img" style="{{n.attrs.style}}" src="{{ctrl[i]<0?opts[2]:opts[1]}}" mode="widthFix"/><image id="{{n.attrs.id}}" class="_img {{n.attrs.class}}" style="{{ctrl[i]===-1?'display:none;':''}}width:{{ctrl[i]||1}}px;height:1px;{{n.attrs.style}}" src="{{n.attrs.src}}" mode="{{n.h?'':'widthFix'}}" lazy-load="{{opts[0]}}" webp="{{n.webp}}" show-menu-by-longpress="{{opts[3]&&!n.attrs.ignore}}" data-i="{{i}}" bindload="imgLoad" binderror="mediaError" catchtap="imgTap" bindlongpress="noop"/></block><text wx:elif="{{n.text}}" user-select="{{n.us}}" decode>{{n.text}}</text><text wx:elif="{{n.name==='br'}}">\n</text><view wx:elif="{{n.name==='a'}}" id="{{n.attrs.id}}" class="{{n.attrs.href?'_a ':''}}{{n.attrs.class}}" hover-class="_hover" style="display:inline;{{n.attrs.style}}" data-i="{{i}}" catchtap="linkTap"><node childs="{{n.children}}" opts="{{opts}}" style="display:inherit"/></view><video wx:elif="{{n.name==='video'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" autoplay="{{n.attrs.autoplay}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" muted="{{n.attrs.muted}}" poster="{{n.attrs.poster}}" src="{{n.src[ctrl[i]||0]}}" data-i="{{i}}" bindplay="play" binderror="mediaError"/><audio wx:elif="{{n.name==='audio'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" author="{{n.attrs.author}}" controls="{{n.attrs.controls}}" loop="{{n.attrs.loop}}" name="{{n.attrs.name}}" poster="{{n.attrs.poster}}" src="{{n.src[ctrl[i]||0]}}" data-i="{{i}}" bindplay="play" binderror="mediaError"/><rich-text wx:else id="{{n.attrs.id}}" style="{{n.f}}" nodes="{{[n]}}"/></template><block wx:for="{{childs}}" wx:for-item="n1" wx:for-index="i1" wx:key="i1"><template wx:if="{{use(n1)}}" is="el" data="{{n:n1,i:''+i1,opts:opts,ctrl:ctrl}}"/><view wx:else id="{{n1.attrs.id}}" class="_{{n1.name}} {{n1.attrs.class}}" style="{{n1.attrs.style}}"><block wx:for="{{n1.children}}" wx:for-item="n2" wx:for-index="i2" wx:key="i2"><template wx:if="{{use(n2)}}" is="el" data="{{n:n2,i:i1+'_'+i2,opts:opts,ctrl:ctrl}}"/><view wx:else id="{{n2.attrs.id}}" class="_{{n2.name}} {{n2.attrs.class}}" style="{{n2.attrs.style}}"><block wx:for="{{n2.children}}" wx:for-item="n3" wx:for-index="i3" wx:key="i3"><template wx:if="{{use(n3)}}" is="el" data="{{n:n3,i:i1+'_'+i2+'_'+i3,opts:opts,ctrl:ctrl}}"/><view wx:else id="{{n3.attrs.id}}" class="_{{n3.name}} {{n3.attrs.class}}" style="{{n3.attrs.style}}"><block wx:for="{{n3.children}}" wx:for-item="n4" wx:for-index="i4" wx:key="i4"><template wx:if="{{use(n4)}}" is="el" data="{{n:n4,i:i1+'_'+i2+'_'+i3+'_'+i4,opts:opts,ctrl:ctrl}}"/><view wx:else id="{{n4.attrs.id}}" class="_{{n4.name}} {{n4.attrs.class}}" style="{{n4.attrs.style}}"><block wx:for="{{n4.children}}" wx:for-item="n5" wx:for-index="i5" wx:key="i5"><template wx:if="{{use(n5)}}" is="el" data="{{n:n5,i:i1+'_'+i2+'_'+i3+'_'+i4+'_'+i5,opts:opts,ctrl:ctrl}}"/><node wx:else id="{{n5.attrs.id}}" class="_{{n5.name}} {{n5.attrs.class}}" style="{{n5.attrs.style}}" childs="{{n5.children}}" opts="{{opts}}"/></block></view></block></view></block></view></block></view></block>
\ No newline at end of file
static/nativeComponents/mp-html/node/node.wxss 0 → 100644
._a{padding:1.5px 0 1.5px 0;color:#366092;word-break:break-all}._hover{text-decoration:underline;opacity:.7}._img{max-width:100%;-webkit-touch-callout:none}._b,._strong{font-weight:700}._code{font-family:monospace}._del{text-decoration:line-through}._em,._i{font-style:italic}._h1{font-size:2em}._h2{font-size:1.5em}._h3{font-size:1.17em}._h5{font-size:.83em}._h6{font-size:.67em}._h1,._h2,._h3,._h4,._h5,._h6{display:block;font-weight:700}._ins{text-decoration:underline}._li{display:list-item}._ol{list-style-type:decimal}._ol,._ul{display:block;padding-left:40px;margin:1em 0}._q::before{content:'"'}._q::after{content:'"'}._sub{font-size:smaller;vertical-align:sub}._sup{font-size:smaller;vertical-align:super}._tbody,._tfoot,._thead{display:table-row-group}._tr{display:table-row}._td,._th{display:table-cell;vertical-align:middle}._th{font-weight:700;text-align:center}._ul{list-style-type:disc}._ul ._ul{margin:0;list-style-type:circle}._ul ._ul ._ul{list-style-type:square}._abbr,._b,._code,._del,._em,._i,._ins,._label,._q,._span,._strong,._sub,._sup{display:inline}._blockquote,._div,._p{display:block}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment