menber-center/pages/reportDetail/reportDetail.vue

<template>
	<view class="container">
		<view class="content" :class="{'disable-scroll': showMask}">
			<zero-markdown-view :markdown="compileMarkDown"></zero-markdown-view>
		</view>
		<view class="mask" v-show="showMask">
			<view class="mask-box login-box" v-if="!isLogin">
				<view class="button">
					<u-button type="error">登录阅读原文</u-button>
				</view>
			</view>
			<view class="mask-box member-box" v-if="isLogin && !free">
				<view class="remark">
					正文需付费才可阅读
				</view>
				<view class="button">
					<u-button type="error">￥{{report.price}}&nbsp;阅读全部</u-button>
				</view>
				<view class="link">
					<view class="text">
						个人会员或单位会员免费，点击现在入会&gt;
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-block" v-show="!showMask"></view>
		<view class="bottom-box" v-show="!showMask">
			<view class="menu-box">
				<view class="menu-item iconfont icon-dianzan"></view>
				<view class="menu-item iconfont icon-shoucang1 active"></view>
				<view class="menu-item iconfont icon-zhuanfa"></view>
				<view class="menu-item iconfont icon-pengyouquan"></view>
				<view class="menu-item iconfont icon-xiaoxi"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getToken } from '@/utils/auth.js'
	
	const id = ref()
	const title = ref()
	
	const report = ref({
		id: '01',
		title: '',
		price: '9.9',
		memberFree: 1,
		free: 0,
		status: 0,
		markdown: `# 《二手住宅市场交易简报》
**一、市场现状**

在2025年，二手住宅市场呈现出较为复杂的态势。整体交易量与以往相比，出现了一定程度的波动。在部分地区，由于新的住房政策的影响，原本计划购买新房的人群有一部分开始转向二手住宅市场，这使得一些热门地区的二手住宅询问量有较为明显的增加。
从价格方面看，价格区间分化较为明显。靠近城市中心、配套设施齐全且房屋状况较好的二手住宅，其价格依然保持坚挺，甚至在某些地段还有小幅度的上涨。而那些位于城市边缘、房龄较长或者社区设施老化的二手住宅，则面临着价格下探的压力。

**二、影响因素**
1. **政策因素**
   - 政府近期出台的一些鼓励居住性购房的政策，对二手住宅市场产生了影响。例如，贷款政策的放宽使得购房者的资金压力得到了一定程度的缓解，这吸引了许多刚需购房者进入二手住宅市场。
   - 税收政策调整方面，部分地区降低了二手房交易中的一些税费，这也刺激了二手住宅的交易活跃度。
2. **市场供需关系**
   - 从供给端来看，随着房地产市场多年的发展，市场上存在着大量的存量二手住宅。尤其是一些早期房产投资者，由于持有成本以及自身需求的改变，开始释放手中的房源。
   - 在需求端，除了刚需购房者外，一些改善型购房者也在二手住宅市场寻找合适的房源。他们更倾向于购买地段较好、周边配套成熟的二手房，而不是等待新房建成。
	 
**三、未来展望**

二手住宅市场在未来一段时间内预计将继续受到多种因素的综合影响。随着城市规划的不断发展，如果城市周边区域的配套设施能够逐步完善起来，那么城市边缘的二手住宅价格可能会出现稳定或者回升的迹象。
政策调控仍然会是影响市场走向的重要因素，如果贷款政策和税收政策能够继续保持稳定或者进一步优化，二手住宅市场的优化发展便更有保障。同时，随着环保意识的提高，那些绿色环保、节能的二手住宅可能会受到更多购房者的青睐。`
	})
	
	const compileMarkDown = computed(() => {
		if (!report.value.markdown) {
			return;
		}
		let htmlString = "";
		// 判断markdown中代码块标识符的数量是否为偶数
		if (report.value.markdown.split("```").length % 2) {
			let content = report.value.markdown;
			if (content[content.length - 1] != "\n") {
				content += "\n";
			}
			htmlString = content;
		} else {
			htmlString = report.value.markdown;
		}
		return htmlString;
	})
	
	// 是否登录
	const isLogin = computed(() => {
		return false
		// return getToken() ? true : false
	})
	
	// 是否购买/免费
	const free = computed(() => {
		return false
	})
	
	const showMask = computed(() => {
		// 是否已购买或者免费
		if (report.value.status || report.value.free) {
			return false
		}
		// 判断用户是否为会员免费
		if (report.value.memberFree) {
			// 
		}
		
		return true
	})
	
	onLoad((load) => {
		id.value = load.id
		title.value = load.title
		uni.setNavigationBarTitle({
			title: title.value
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		.content {
			padding: 0 20rpx;
		}
		
		.mask {
			height: 75vh;
			padding: 0 20rpx;
			background-color: $uni-bg-color-grey;
			
			-webkit-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
			-moz-box-shadow:    0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
			box-shadow:         0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
			
			border-radius: 20rpx 20rpx 0 0;
			
			@include bottomMagnet();
			
			.mask-box {
				height: 100%;
				width: 100%;
				position: relative;
				.button {
					margin: 0 auto;
					width: 45%;
				}
			}
			.member-box {
				padding-top: 210rpx;
				
				.remark {
					height: 90rpx;
					text-align: center;
					letter-spacing: 3rpx;
					font-size: 32rpx;
					color: $uni-text-color-grey;
				}
				.link {
					position: absolute;
					top: 70%;
					width: 100%;
					font-size: 32rpx;
					color: $uni-color-error;
					font-size: $uni-title-font-size-2;
					font-weight: bold;
					.text {
						text-align: center;
						letter-spacing: 5rpx;
						&:active {
							text-decoration: underline;
						}
					}
				}
			}
			.login-box {
				padding-top: 300rpx;
			}
		}
		
		.disable-scroll {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}
		
		.bottom-block {
			height: 110rpx;
		}
		.bottom-box {
			padding: 5rpx 25rpx;
			background-color: $uni-bg-color-grey;
			
			@include bottomMagnet();
			
			-webkit-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
			-moz-box-shadow:    0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
			box-shadow:         0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);

			
			.menu-box {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 50rpx;
				.iconfont {
					font-size: 42rpx;
					color: $uni-text-color-grey;
				}
				.active {
					color: yellow;
				}
			}
		}
	}
</style>