kaoshi/addons/exam/uniapp/pages/index/news-detail.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.title}}</view>
				
				<view class="flex justify-between text-df text-gray margin-top-sm margin-bottom-sm">
					<text>{{newsData.createdAt | formatDate}}</text>
					<text>{{newsData.type | typeF}}</text>
				</view>
				<image mode="widthFix" :src="newsData.img"></image>

				<!-- 中间文章区域 -->
				<view class="contentBox text-lg text-black margin-top-sm margin-tb-lg">
					<view class="margin-top-sm" v-for="(item, index) in newsData.content.split('&')" v-html="item">
					</view>
				</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.imgList.split(',')" :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">
			<button class="action" open-type="share">
				<view class="cuIcon-share text-green">
					<view class="cu-tag badge">{{newsData.commentNum}}</view>
				</view>
				分享
			</button>
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				联系我们
			</button>
			<view class="btn-group">
				<button style="width: 80%;height: 70rpx;" @click="praiseClick(newsData.id)"
					class="cu-btn bg-gradual-blue round shadow-blur">
					<view class="cuIcon-appreciatefill text-white margin-right-xs"></view>
					赞一下吧
				</button>
			</view>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	// import request from '@/common/request.js';
	export default {
		data() {
			return {
				newsData: [],
				requestStatus: false // 事件防抖
			}
		},
		onLoad(option) {
			console.log(option)
			this.getData(option.id);
		},
		methods: {
			// 点赞
			getData(id) {
				console.log(id);
				
				var data = {"data":{"id":1,"type":2,"title":"「前端铺子」开源了，前端者必备项目","img":"https://cdn.zhoukaiwen.com/Ftk7V5qMnpSAYNTXR2YaK2JFdlkt","content":"项目基于vue-uniapp，使用colorUi与uView框架，完美支持微信小程序，包含功能：自定义TabBar与顶部、地图轨迹回放、电子签名、自定义相机/键盘、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封装等～ 方便同行小伙伴参考；\n&项目链接：https://gitee.com/kevin_chou/qdpz","author":"Kevin","createdAt":1664386507006,"state":1,"seeNum":4439,"likesNum":348,"commentNum":386,"imgList":"https://cdn.zhoukaiwen.com/FuXEx9dURbfa_4TIzM1gtWYtkIYy,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/FtqKFoFs0RkOwmQ25iCAqkeOdoUo,https://cdn.zhoukaiwen.com/Fi1OviL0gjCKP2EidMOC9Q93wz2w,https://cdn.zhoukaiwen.com/FsQAHnCVzEgqp62bC-dXSfNgD9Fc"},"code":200};
				this.newsData = data.data;
				
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// let opts = {
				// 	url: 'api/blog/detail?id=' + id,
				// 	method: 'get'
				// };
				// request.httpRequest(opts).then(res => {
				// 	console.log(res);
				// 	uni.hideLoading();
				// 	if (res.data.data.id) {
				// 		this.newsData = res.data.data;
				// 	} else {
				// 		console.log('数据请求错误～');
				// 	}
				// });
			},
			// 点赞
			praiseClick(id) {
				console.log(id);
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				uni.showLoading({
					title: '加载中'
				});
				let opts = {
					url: 'api/blog/like?id=' + id,
					method: 'get'
				};
				request.httpRequest(opts).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.data.code == 200) {
						this.newsData.likesNum++;
						uni.showToast({
							title: '点赞成功！感谢参与',
							duration: 2000
						});
						setTimeout(() => {
							// 模拟执行完毕，改变 requestStatus
							this.requestStatus = false;
						}, 2500);
					} else {
						console.log('数据请求错误～');
					}
				});
			},
			previewImage(index) {
				// 预览功能需要数组格式，具体查看uniapp文档：previewImage
				const seeImgList = this.newsData.imgList.split(',')
				uni.previewImage({
					current: index, //预览图片的下标
					urls: seeImgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			},
			typeF(value) {
				if (!value) {
					return;
				}
				if (value == 2) {
					return 'web前端'
				}
				if (value == 3) {
					return 'ui设计'
				}
				if (value == 4) {
					return 'Node后端'
				}
				if (value == 5) {
					return '面试精选'
				}
				if (value == 6) {
					return '技术前沿'
				}
				if (value == 7) {
					return '更多资讯'
				}
			}
		}
	}
</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>