You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
5.5 KiB
Vue
229 lines
5.5 KiB
Vue
8 months ago
|
<template>
|
||
|
|
<view class="content" hover-class="none" :hover-stop-propagation="false">
|
||
|
|
<view class="title g_fs_18 g_fw_600">{{ currentInfo.title }}</view>
|
||
|
|
<rich-text class="info f14" space="nbsp" :nodes="showText"></rich-text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const app = getApp();
|
||
|
|
// pages/messageDetail/index.js
|
||
|
|
export default {
|
||
|
|
onShareAppMessage() {
|
||
|
|
return this.G.shareFun();
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
iosDialogTobe: false,
|
||
|
|
|
||
|
|
pageType: null,
|
||
|
|
currentId: null,
|
||
|
|
|
||
|
|
currentInfo: {
|
||
|
|
title: "",
|
||
|
|
},
|
||
|
|
|
||
|
|
showText: "",
|
||
|
|
|
||
|
|
tagStyle: {
|
||
|
|
p: "margin-top: 0; margin-bottom: 0;line-height: 1.8; white-space:pre-wrap;",
|
||
|
|
body: " margin: 0; color: #333; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-variant: tabular-nums; line-height: 1.8; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum';",
|
||
|
|
h1: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1;font-size:24px; ",
|
||
|
|
h2: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1;font-size:21px; ",
|
||
|
|
h3: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1;font-size:16px; ",
|
||
|
|
h4: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1 ",
|
||
|
|
h5: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1 ",
|
||
|
|
h6: " margin-top: 0; margin-bottom: 0.5em;margin-top:0.3em; color: rgba(0, 0, 0, 0.85); font-weight: 500;line-height: 1.1 ",
|
||
|
|
strong: "font-weight: bolder;",
|
||
|
|
b: "font-weight: bolder;",
|
||
|
|
dl: "margin-top: 0; margin-bottom: 1em;",
|
||
|
|
ol: "margin-top: 0; margin-bottom: 1em;",
|
||
|
|
ul: "margin-top: 0; margin-bottom: 1em;",
|
||
|
|
li: "line-height: 1.8",
|
||
|
|
hr: "box-sizing: content-box;height:1rpx;overflow: visible;background-color: #ddd;border:0;",
|
||
|
|
table: "border-collapse: collapse;border: 1px solid #d9d9d9;margin: 18px 0 16px 0;line-height: 1.8",
|
||
|
|
td: "border: 1px solid #d9d9d9;vertical-align: top;padding: 4px 8px;line-height: 1.8",
|
||
|
|
},
|
||
|
|
|
||
|
|
html: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面加载
|
||
|
|
*/ onLoad(options) {
|
||
|
|
console.log(options);
|
||
|
|
if (options.id) {
|
||
|
|
this.currentId = options.id;
|
||
|
|
this.requestInfo();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面初次渲染完成
|
||
|
|
*/
|
||
|
|
onReady() {},
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面显示
|
||
|
|
*/
|
||
|
|
onShow() {},
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面隐藏
|
||
|
|
*/
|
||
|
|
onHide() {},
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面卸载
|
||
|
|
*/
|
||
|
|
onUnload() {},
|
||
|
|
/**
|
||
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
||
|
|
*/
|
||
|
|
onPullDownRefresh() {},
|
||
|
|
/**
|
||
|
|
* 页面上拉触底事件的处理函数
|
||
|
|
*/
|
||
|
|
onReachBottom() {},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* 用户点击右上角分享
|
||
|
|
*/
|
||
|
|
onShareAppMessage1() {},
|
||
|
|
|
||
|
|
requestInfo() {
|
||
|
|
let that = this;
|
||
|
|
uni.showLoading({
|
||
|
|
title: "正在获取内容",
|
||
|
|
});
|
||
|
|
that.G.Get(that.api.message_detail + that.currentId, {}, (res) => {
|
||
|
|
console.log(res);
|
||
|
|
setTimeout(() => {
|
||
|
|
// let reg = /<a[^>]*href=['"]([^"]*)['"][^>]*>(.*?)<\/a>/g.exec(res.content);
|
||
|
|
// console.log(reg);
|
||
|
|
|
||
|
|
var s = res.content.replace(/<img/g, '<img style="max-width:100% !important;height:auto !important;margin-top:10px;"');
|
||
|
|
console.log(s);
|
||
|
|
that.currentInfo = res;
|
||
|
|
that.showText = s;
|
||
|
|
that.html = res.content.replace(/<!doctype html>/g, "");
|
||
|
|
uni.hideLoading();
|
||
|
|
}, 1000);
|
||
|
|
that.G.Get(that.api.message_readed + that.currentId, {}, (res) => {});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
showTobe() {
|
||
|
|
this.setData({
|
||
|
|
iosDialogTobe: true,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
closeDialog() {
|
||
|
|
this.setData({
|
||
|
|
iosDialogTobe: false,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* pages/messageDetail/index.wxss */
|
||
|
|
page {
|
||
|
|
padding: 10px;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
height: calc(100vh - 20px);
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
min-height: calc(100% - 30px);
|
||
|
|
padding: 24px 12px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
/* overflow: hidden; */
|
||
|
|
}
|
||
|
|
.content .title {
|
||
|
|
text-align: center;
|
||
|
|
padding-bottom: 24px;
|
||
|
|
}
|
||
|
|
.info view {
|
||
|
|
padding-bottom: 24px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
text-indent: 20px;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.tobe {
|
||
|
|
height: 70%;
|
||
|
|
}
|
||
|
|
.guanbi {
|
||
|
|
position: absolute;
|
||
|
|
right: 16px;
|
||
|
|
top: -28px;
|
||
|
|
}
|
||
|
|
.tobe .guanbi {
|
||
|
|
top: 12px;
|
||
|
|
}
|
||
|
|
.tobe .weui-dialog__hd {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 8%;
|
||
|
|
}
|
||
|
|
.tobe .weui-dialog__hd .top {
|
||
|
|
padding-bottom: 20px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.tobe .weui-dialog__hd .bottom {
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
/* padding-top: 10px; */
|
||
|
|
}
|
||
|
|
.tobe .weui-dialog__hd .bottom > view {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: -30px;
|
||
|
|
}
|
||
|
|
.tobeText {
|
||
|
|
display: inline;
|
||
|
|
color: #576b95;
|
||
|
|
font-weight: bold;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.messageContent {
|
||
|
|
padding: 16px 0;
|
||
|
|
border-radius: 8px;
|
||
|
|
background-color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.btnBox {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
margin-top: 110px;
|
||
|
|
}
|
||
|
|
.btnBox button {
|
||
|
|
width: 128px;
|
||
|
|
height: 42px;
|
||
|
|
margin: 10px;
|
||
|
|
padding: 0;
|
||
|
|
border-radius: 22px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 42px;
|
||
|
|
}
|
||
|
|
.cancel {
|
||
|
|
background: #ffffff;
|
||
|
|
border: 1px solid #ff4400;
|
||
|
|
border-radius: 22px;
|
||
|
|
color: #ff4400;
|
||
|
|
}
|
||
|
|
.agree {
|
||
|
|
background: #ff4400;
|
||
|
|
border-radius: 21px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|