143 lines
4.2 KiB
Vue
143 lines
4.2 KiB
Vue
<!-- 新闻 详情 -->
|
||
<template>
|
||
<view class="container">
|
||
<view>
|
||
<view style="background-color: #FFFFFF;padding: 30rpx 30rpx 30rpx 30rpx;">
|
||
<view class="titleBox text-xl text-black text-bold">{{ newsData.name }}</view>
|
||
|
||
<view class="flex justify-between text-df text-gray margin-top-sm margin-bottom-sm">
|
||
<text>{{ newsData.create_time_text }}</text>
|
||
<!-- <text>{{newsData.type | typeF}}</text> -->
|
||
</view>
|
||
<!-- <image mode="widthFix" :src="newsData.cover_image" @click="previewImage(0)"></image> -->
|
||
|
||
<!-- 中间文章区域 -->
|
||
<view class="contentBox text-lg text-black margin-top-sm margin-tb-lg">
|
||
<mp-html :tag-style="tagStyle" :scroll-table="true" :content="newsData.contents" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="cu-bar justify-left bg-white margin-top-sm">
|
||
<view class="action border-title">
|
||
<text class="text-lg text-bold text-blue">图片展示</text>
|
||
<text class="bg-gradual-blue" style="width:3rem"></text>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view style="background-color: #FFFFFF;padding: 0rpx 30rpx 30rpx 30rpx;">
|
||
|
||
<image @click="previewImage(index)" v-for="(item, index) in newsData.images" :key="index"
|
||
mode="widthFix" :src="item"></image>
|
||
|
||
<view class="text-right text-df text-gray margin-top-sm margin-bottom-sm">
|
||
<text class="text-gray cuIcon-attentionfill text-df" style="margin-right: 6rpx;"></text>
|
||
<text class="text-df margin-right-sm" style="margin-top: 2rpx;">{{newsData.seeNum}}</text>
|
||
<text class="text-gray cuIcon-appreciatefill text-df" style="margin-right: 6rpx;"></text>
|
||
<text class="text-df margin-right-sm" style="margin-top: 2rpx;">{{newsData.likesNum}}</text>
|
||
<text class="text-gray cuIcon-share text-df" style="margin-right: 6rpx;"></text>
|
||
<text class="text-df" style="margin-top: 2rpx;">{{newsData.commentNum}}</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- <view class="cu-bar bg-white tabbar border shop bottomBox">
|
||
<view class="btn-group">
|
||
<tn-button shape="round" backgroundColor="#1A73E8" padding="30rpx 0" width="200rpx" shadow @click="handleBack()"
|
||
fontBold plain>
|
||
<text class="primary-color">返回列表</text>
|
||
</tn-button>
|
||
|
||
<tn-button shape="round" backgroundColor="#1A73E8" padding="30rpx 0" width="200rpx" shadow @click="handleGo()"
|
||
v-if="newsData && newsData.front_info && newsData.front_info.url" fontBold>
|
||
<text class="tn-color-white">点击前往</text>
|
||
</tn-button>
|
||
</view>
|
||
</view> -->
|
||
<view class="safe-area-inset-bottom"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import newsApi from "@/common/api/news.js"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
newsData: [],
|
||
requestStatus: false, // 事件防抖
|
||
tagStyle: {
|
||
table: 'border: 1px solid gray;border-collapse:collapse',
|
||
th: 'border: 1px solid gray;',
|
||
td: 'border: 1px solid gray;'
|
||
}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
this.getData(option.id);
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getData(id) {
|
||
console.log(id);
|
||
|
||
newsApi.getNewsDetail(this, {
|
||
id: id
|
||
}).then(res => {
|
||
if (res && res.data) {
|
||
this.newsData = res.data
|
||
}
|
||
})
|
||
},
|
||
handleBack() {
|
||
this.utils.goto('news-list')
|
||
},
|
||
handleGo() {
|
||
if (this.newsData && this.newsData.front_info) {
|
||
this.utils.goto(this.newsData.front_info.full_url)
|
||
}
|
||
},
|
||
previewImage(index) {
|
||
// 预览功能需要数组格式，具体查看uniapp文档：previewImage
|
||
const seeImgList = this.newsData.images
|
||
uni.previewImage({
|
||
current: index, //预览图片的下标
|
||
urls: seeImgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
||
})
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
button::after {
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
|
||
uni-button {
|
||
background: transparent;
|
||
}
|
||
|
||
.container {
|
||
background-color: #f2f2f2;
|
||
width: 750rpx;
|
||
|
||
}
|
||
|
||
.solid {
|
||
border-radius: 50rpx;
|
||
text-indent: 12rpx;
|
||
}
|
||
|
||
image {
|
||
width: 750rpx;
|
||
}
|
||
|
||
.bottomBox {
|
||
width: 750rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0rpx;
|
||
}
|
||
</style> |