MinNan/index_fenbao/minsu/ms_wenZhang.vue

<template>
	<view>
		<u-navbar :autoBack="true" title="民俗宗教" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="text-group_17">
			<text lines="1" class="text_2">{{ list.title }}</text>
			<text lines="1" decode="true" class="text_13">{{ formattedCurrentTime }}</text>
		</view>
		<view class="block_3">
			<view class="text_3">
				<text class="text_10">
					<!-- <u-parse :content="list.content"></u-parse> -->
					{{ (list.content || '').replace(/<\/?[^>]*>/g, '') | removeHTMLTag }}
				</text>
			</view>
			<view class="box_3">
				<image style="width: 100%; height: 100%" :src="list.image"></image>
			</view>
			<!-- 			<view class="text-wrapper_1">
				<text class="paragraph_1">一、水神、海神</text>

				<p class="paragraph_2">闽南近海，大多以海为田，以海为生，在与海交往的几千年里，闽南人最乐于将海神作为自己营生的保护神。</p>

				<p class="paragraph_6">
					闽南的水神、海神大概有四种：一为全国各地普遍存在的海龙王；二为闽南土生土长的海神妈祖；三为主管水的玄天上帝；四为较罕见的水仙尊王。水仙尊王并非独一角色。
					有不同，常见者如西楚霸王项羽(乌江自刎)、屈原(汨罗江投江)、伍子胥(沉尸河底)、李白(醉酒溺亡)、王勃(渡江溺亡)、大禹(治水)等。
				</p>
			</view> -->

			<view class="box_35">
				<view class="ms_dianzan">
					<view class="box_r" @click="collect">
						<uni-icons type="star-filled" color="#4e7198" size="22"></uni-icons>
						<text>{{ list.collects }}</text>
					</view>

					<view class="box_r" @click="likeBtn">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>{{ list.likes }}</text>
					</view>
					<view class="box_r">
						<uni-icons type="redo" size="20"></uni-icons>

						<text lines="1" class="text-group_1">分享</text>
					</view>
				</view>
			</view>
			<text lines="1" class="text_5">相关推荐</text>
			<view class="sh_xs">
				<view class="sh_xs_item" v-for="item in shXiShuList" :key="item">
					<view @click="detailsBtn" class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
						<image style="width: 100%; height: 100%" :src="item.img"></image>
					</view>
					<view class="">{{ item.title }}</view>
					<view class="ms_dianzan">
						<view class="">
							<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
							<text>1.5w</text>
						</view>

						<view class="">
							<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
							<text>1.5w</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			formattedCurrentTime: '',
			main_body_id: '',
			list: {},
			shXiShuList: [
				{
					img: 'https://www.chinanews.com/tp/hd2011/2013/03-11/U508P4T426D182733F16470DT20130311112416.jpg',
					title: '闽南民俗浔浦天香日'
				},
				{
					img: 'https://inews.gtimg.com/newsapp_bt/0/11032609926/1000',
					title: '闽南冬至丸'
				},
				{
					img: 'https://img1.baidu.com/it/u=1711973128,1321603179&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
					title: '闽南习俗拜天公'
				},
				{
					img: 'https://i2.hdslb.com/bfs/archive/24ab948019ae5cc13055113cfcd5321f7c16dc41.jpg',
					title: '抬神'
				}
			]
		};
	},
	filters: {
		removeHTMLTag(str) {
			str = str.replace(/<\/?[^>]*>/g, ''); // 去除HTML tag
			str = str.replace(/[ | ]*\n/g, '\n'); // 去除行尾空白
			str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
			// str = str.replace(/ /gi, ''); // 去掉
			const arrEntities = {
				lt: '<',
				gt: '>',
				nbsp: ' ',
				amp: '&',
				quot: '"'
			}; // 转义符换成普通字符
			str = str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
				return arrEntities[t];
			});
			return str;
		}
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		this.getContentDetails(o.id);
	},
	mounted() {
		this.updateCurrentTime();
	},
	methods: {
		// 详情
		getContentDetails(id) {
			this.$api.getContentDetails(
				{
					main_body_id: this.main_body_id,
					id: id
				},
				function (res) {
					that.list = res.data;
					console.log(that.list, '99999999');
				}
			);
		},
		// 收藏
		collect() {
			if (this.list.is_collect == 0) {
				this.$api.collect(
					{
						main_body_id: this.main_body_id,
						content_id: this.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_collect = 1;
							that.list.collects++;
						});
						that.$common.successToShow('成功收藏');
					}
				);
			} else {
				this.$api.uncollect(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_collect = 0;
							that.list.collects--;
						});

						that.$common.successToShow('取消收藏');
					}
				);
			}
		},
		// 点赞
		likeBtn() {
			if (this.list.is_like == 0) {
				this.$api.like(
					{
						main_body_id: this.main_body_id,
						content_id: this.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_like = 1;
							that.list.likes++;
						});
						that.$common.successToShow('成功点赞');
					}
				);
			} else {
				this.$api.unLike(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list.id
					},
					function (res) {
						that.$nextTick(() => {
							that.list.is_like = 0;
							that.list.likes--;
						});

						that.$common.successToShow('取消点赞');
					}
				);
			}
		},
		leftClick() {
			uni.navigateBack({
				delta: 1
			});
		},
		updateCurrentTime() {
			const now = new Date();
			const year = now.getFullYear();
			const month = ('0' + (now.getMonth() + 1)).slice(-2);
			const date = ('0' + now.getDate()).slice(-2);
			const hours = ('0' + now.getHours()).slice(-2);
			const minutes = ('0' + now.getMinutes()).slice(-2);

			this.formattedCurrentTime = `${year}.${month}.${date} ${hours}:${minutes}`;

			// 如果需要实时更新时间，可以使用setInterval
			setInterval(this.updateCurrentTime, 1000);
		}
	}
};
</script>

<style>
.ms_dianzan {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.box_r {
	display: flex;
	align-items: center;
	margin-right: 15rpx;
}
.sh_xs {
	margin: 32rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
.text-group_17 {
	width: 668rpx;
	/* height: 163rpx; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 0 0 35rpx;
}
.text_2 {
	width: 668rpx;
	/* height: 121rpx; */
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 48rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;

	line-height: 72rpx;
}
.text_13 {
	width: 214rpx;
	height: 18rpx;
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;
	white-space: nowrap;
	line-height: 72rpx;
	/* margin-top: 80rpx; */
}
.block_3 {
	background-color: rgba(255, 255, 255, 1);
	width: 749rpx;
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
}
.text_3 {
	width: 685rpx;
	height: 400rpx;
	text-indent: 2rem;
	font-size: 0rpx;
	overflow: scroll;
	line-height: 48rpx;
	margin: 38rpx 0 0 42rpx;
}
.text_10 {
	width: 685rpx;
	height: 300rpx;
	/* overflow-wrap: break-word; */
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	line-height: 48rpx;
}

.box_3 {
	background-color: rgba(232, 242, 217, 1);
	height: 422rpx;
	margin-top: 46rpx;
	display: flex;
	flex-direction: column;
	width: 750rpx;
}
.box_4 {
	background-color: rgba(0, 0, 0, 0.15);
	width: 750rpx;
	height: 422rpx;
	display: flex;
	flex-direction: column;
}
.text-wrapper_1 {
	width: 684rpx;
	height: 378rpx;
	overflow-wrap: break-word;
	font-size: 0rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: justifyLeft;
	line-height: 48rpx;
	margin: 42rpx 0 32rpx 42rpx;
}
.paragraph_1 {
	width: 684rpx;

	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	line-height: 48rpx;
}
.paragraph_2 {
	width: 684rpx;
	margin-bottom: 10rpx;
	text-indent: 2rem;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 48rpx;
}
.paragraph_5 {
	width: 684rpx;
	height: 378rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 14rpx;
}
.paragraph_6 {
	width: 684rpx;
	text-indent: 2rem;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 48rpx;
}
.text_5 {
	width: 111rpx;
	height: 28rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
	white-space: nowrap;
	line-height: 28rpx;
	margin: 50rpx 0 0 48rpx;
}
.box_35 {
	height: 32rpx;
	flex-direction: row;
	display: flex;
	margin: 50rpx 0 32rpx 380rpx;
}
</style>