nc.963.cn/pages/result/result.vue

<template>
	<view class="main-page">
		<view class="header">
			<view class="header-main" :style="view_height">
				<view class="header-img" >
					<view class="img"><image src="../../static/img/reult.png"></image></view>
					<p>您的得分为{{ scoreList.total_score }}分！</p>
					<p v-html="scoreList.content"></p>
				</view>
			</view>
		</view>
		<view v-if="likeList.length > 0 && isTrue" class="list-li" :style="view_class">
			<list :List="likeList"></list>
		</view>
	</view>
</template>

<script>
import { getquestionresult,gettextList,getorderResult } from '../../api/test.js';
import list from '@/components/list/list';
import { mapGetters } from 'vuex';
export default {
	components: {
		list
	},
	data() {
		return {
			isTrue: false,
			score: 0,
			view_height:{
				height: '240upx'
			},
			view_class:{
				top: '280px',
				width: '100%',
				position: 'absolute'
			},
			id: '',
			scoreList: {},
			likeList: []
		};
	},
	computed: {
		...mapGetters(['allScorce','nameId','oid']),
	},
	onLoad(option) {
		// 获取分值
		let oid = uni.getStorageSync('oid');
		getorderResult({oid:oid}).then(res => {
			if (res.code == 1) {
				this.scoreList = res.data;
			}
		})
		this.getLikelist();
	},
	mounted() {
		// 动态计算高度,注意这个获取高度由于不准确,所以添加计时器,等dom元素展示后再获取高度
		setTimeout(() => {	
			const query = uni.createSelectorQuery().in(this);
			let height;
			let top;
			query.select('.header-img').boundingClientRect(data => {
					top = data.height
			}).exec();
			query.select('.header').boundingClientRect(datas => {
				height = datas.height
			}).exec();
			this.view_height.height = top+'px'
			this.view_class.top = height+top+10+'px';
			this.isTrue = true;
		},1000)
		
	},
	methods: {
		// 获取喜欢数据的列表
		getLikelist(){
			gettextList().then(res => {
				if (res.code == 1) {
					this.likeList = res.data.list
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
		position: relative;
		.header{
			width: 100%;
			height: 291upx;
			background-color: #FFFFFF;
			background-position: 0 0;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			background-image: url('~@/static/img/result_banner.png');
			.header-main{
				width: 100%;
				background-color: #FFFFFF;
				min-height: 240upx;
				top: 291upx;
				position: absolute;
			}
			.header-img{
				width: 90%;
				left: 5%;
				box-shadow: 0upx 0upx 8upx rgba(128, 106, 0, 0.2);
				opacity: 1;
				overflow: hidden;
				clear: both;
				border-radius: 12upx;
				background-color: #FFFFFF;
				top: -30upx;
				padding-bottom: 20upx;
				position: absolute;
				// height: 462upx;
				.img{
					text-align: center;
					margin-top: 36upx;
					image{
						width: 350upx;
						height: 60upx;
					}
				}
				p{
					padding: 0upx 24upx;
					color: #434343;
					&:nth-child(1){
						text-align: center;
					}
					&:nth-child(2){
						text-align: center;
						font-size: 34upx;
						font-weight: 600;
						margin: 32upx 0upx;
						color: #3A3A3A;
						opacity: 1;
					}
					&:nth-child(3){
						margin-bottom: 20upx;
					}
				}
			}
		}
		.list-li{
			padding: 32upx 32upx 0upx 32upx;
			// margin-top: 480upx;
			background-color: #FFFFFF;
		}
	}
</style>