yuxingu-Miniprogram-dev/pages/test-result/test-result.vue

<template>
	<view class="content">
		<myNav :title="showData.testName" bgColor="nonoe" titleColor="#614D49" :backIcon="backIcon" :backHome="false"
			:flex="false">
		</myNav>
		<image class="show-header-bg" src="/static/n-test/test-result-bg.jpg" mode="aspectFill"></image>

		<view class="flex-justify-center">
			<view class="show-content">
				<view class="content-top">
				</view>
				<view style="display: flex;justify-content: center;margin-top: 45rpx;">
					<image src="/static/n-test/result-icon.png" style="width: 160rpx;height:188rpx"></image>
				</view>

				<view style="margin-top: 60rpx;padding-left: 40rpx;margin-right: 38rpx;">
					<view class="section-content" v-if="showData.resultDesc">
						<text style="font-size: 38rpx;font-family: 'SourceHanSansBold';">结果描述</text>
						<rich-text style="margin-top: 20rpx;" :nodes="showData.resultDesc"></rich-text>
					</view>
					<view class="section-content" style="margin-top: 40rpx;" v-if="showData.resultAnalysis">
						<text style="font-size: 38rpx;font-family: 'SourceHanSansBold';">结果分析</text>
						<rich-text style="margin-top: 20rpx;" :nodes="showData.resultAnalysis"></rich-text>
					</view>
					<view class="section-content" style="margin-top: 40rpx;" v-if="showData.treatPlan">
						<text style="font-size: 38rpx;font-family: 'SourceHanSansBold';">治疗方案</text>
						<rich-text style="margin-top: 20rpx;" :nodes="showData.treatPlan"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="button-container" style="margin-top: 60rpx;">
			<button class="start-btn" @click="goMainPage"><text class="btn-text">返回主页</text></button>
		</view>
	</view>
</template>

<script setup>
	import myNav from '@/components/my-nav.vue'
	import {
		urls
	} from '@/util/apiUrl.js'
	import dohttp from '@/util/requestConfig.js'

	const showData = ref({})
	const backIcon = ref(false)
	onLoad((option) => {

		dohttp.post(urls.getResult + "?resultId=" + option.resultId).then((result) => {
			showData.value = result
		})
		let pages = getCurrentPages()

		let prePage = pages[pages.length - 2]
		if (prePage && prePage.route) {
			if (prePage.route == "pages/my-test/my-test") {
				backIcon.value = true
			}
		}
	})
	
	const onShareAppMessage = () => {
	  return {
        title: '快来体验一下吧~',
	    path: '/pages/index/index', // 分享的路径
	  };
	};
	 
	const onShareTimeline = () => {
	  return {
        title: '快来体验一下吧~',
	    query: 'id=33', // 分享路径的参数
	  };
	};

	const goMainPage = () => {

		uni.switchTab({
			url: "/pages/index/index",
			animationType: "pop-in"
		})
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f9f8f8;
		display: flex;
		flex-direction: column;
		font-family: 'pingfang';
		box-sizing: border-box;
	}

	/* 顶部图片 */
	.show-header-bg {
		width: 750rpx;
		height: 420rpx;
	}

	.show-content {

		width: 670rpx;
		border-radius: 10rpx;
		opacity: 1;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin-top: -20rpx;
		height: 844rpx;
		overflow-y: auto;
	}

	.content-top {
		width: 670rpx;
		height: 60rpx;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		opacity: 1;
		background: linear-gradient(180deg, #FFE7D9 0%, rgba(255, 255, 255, 0) 98%);


	}

	.blue-bar {
		width: 12rpx;
		height: 42rpx;
		background-color: #7f75ff;
		margin-right: 5rpx;
	}

	.section-title {
		font-size: 45rpx;
		font-family: SourceHanSansBold;
		color: #333;
	}

	.description {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-top: 10rpx;
	}

	.section {
		background: white;
		margin: 20rpx 30rpx;
		padding: 20rpx 40rpx;
		margin-top: 5rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.05);
		flex-grow: 1;
		overflow-y: auto;
	}

	.section-content {
		display: flex;
		flex-direction: column;

	}

	.button-container {
		text-align: center;
		margin-top: auto;
		margin-bottom: 60rpx;
	}

	.start-btn {
		width: 550rpx;
		height: 96rpx;
		border-radius: 2002rpx;
		opacity: 1;

		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 8rpx 40rpx;

		background: linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);
	}

	.flex-justify-center {
		display: flex;
		justify-content: center;
	}
	.btn-text{
		
		/* 按钮/按钮文本大号 */
		/* 样式描述：常规大按钮 */
		font-family: SourceHanSansBold;
		font-size: 36rpx;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0px;
		
		/* 正文色/正文色 */
		color: #FFFFFF;
		
	}
</style>