110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
|
|||
|
|
<view class="detailBox">
|
|||
|
|
<view class="detail_top">{{detailData.title}}</view>
|
|||
|
|
<view class="detail_time">{{detailData.creationTime}}</view>
|
|||
|
|
<view class="detail_content" @click="clickhtml(detailData.content)" v-html="detailData.content"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as ema from '@/config/balance.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
detailData: {},
|
|||
|
|
pkId: "",
|
|||
|
|
functionType: ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(query) {
|
|||
|
|
|
|||
|
|
this.pkId = query.pkId
|
|||
|
|
this.functionType = query.index
|
|||
|
|
this.getDetail()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
clickhtml(content) {
|
|||
|
|
// 在组件挂载后，调用handleImageClick方法预览第一张图片
|
|||
|
|
const parser = new DOMParser();
|
|||
|
|
const doc = parser.parseFromString(content, "text/html");
|
|||
|
|
const imgElements = doc.getElementsByTagName("img");
|
|||
|
|
if (imgElements.length > 0) {
|
|||
|
|
const firstImageUrl = imgElements[0].src;
|
|||
|
|
this.handleImageClick(firstImageUrl, content);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleImageClick(url, content) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: this.getUrls(content),
|
|||
|
|
current: url
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getUrls(content) {
|
|||
|
|
const parser = new DOMParser();
|
|||
|
|
const doc = parser.parseFromString(content, "text/html");
|
|||
|
|
const imgElements = doc.getElementsByTagName("img");
|
|||
|
|
const urls = [];
|
|||
|
|
for (let i = 0; i < imgElements.length; i++) {
|
|||
|
|
urls.push(imgElements[i].src);
|
|||
|
|
}
|
|||
|
|
return urls;
|
|||
|
|
},
|
|||
|
|
getDetail() {
|
|||
|
|
ema
|
|||
|
|
.getNoticeDetail({
|
|||
|
|
pkId: this.pkId,
|
|||
|
|
functionType: this.functionType
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
this.detailData = res.data;
|
|||
|
|
// console.log('馃寛query', this.detailData)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
::v-deep img {
|
|||
|
|
max-width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
padding: 22rpx 24rpx;
|
|||
|
|
|
|||
|
|
// padding-bottom: 140rpx;
|
|||
|
|
.detailBox {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-top-left-radius: 20rpx;
|
|||
|
|
border-top-right-radius: 20rpx;
|
|||
|
|
padding: 40rpx 20rpx;
|
|||
|
|
|
|||
|
|
.detail_top {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_time {
|
|||
|
|
text-align: right;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail_content {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|