psy_web_share/newScale/MarriageQuality/testResult.vue

<template>
	<view v-if="role" class="bg">
		<view style="overflow: hidden;">
			<!-- <unTable :scoresList="scoresList" :testResult="testResult" /> -->
		</view>
		<view class="scale_name">你的婚姻质量有多高？</view>
		<view class="test_time">测试时间：{{time}}</view>
		<view class="role_medal">测试结果</view>
		<view class="chart_wrap">
			<leiDa :reference="reference" :scoreList="scoreList" :indicator="indicator" />
			<view class="my_table">
				<view class="t-head">
					<view width="50%">维度</view>
					<view>得分</view>
					<view>满分</view>
				</view>
				<view class="t-body" v-for="(item, index) in scoreList">
					<view>{{indicator[index].text}}</view>
					<view>{{item}}</view>
					<view style="border-right: 0;">45</view>
				</view>
			</view>
		</view>
		<view class="rgtd_box">
			<view class="rgtd_box_title"><text>测评解读</text></view>
			<view class="rgtd_box_wrap">
				<view style="overflow: hidden;"></view>
				<view class="score_title">你的测评总分：(满分450)</view>
				<view class="score_num">{{scoreNum}}</view>
				<view class="score_percentage">
					<view class="process_bar" v-if="scoreNum > 0" :style="{'width': percentage}">
					</view>
				</view>
				<view class="score_explain">注: 评分越高表示婚姻质量越好</view>
				<view class="dimension_content">
					婚姻被视为两颗心融合的神圣仪式，是承诺共度风雨、共享欢乐的约定。然而，现实往往比童话复杂，有人感叹婚姻是爱情的终点站，甜蜜的誓言在锅碗瓢盆的交响曲中渐渐消散，曾经的闪光点在日复一日的磨合中变得模糊不清。但也有那么一群人，他们携手走过风风雨雨，将平凡的日子编织成最动人的诗篇，证明了真正的幸福并非遥不可及。
				</view>
			</view>
		</view>
		<view class="rgtd_box">
			<view class="rgtd_box_title"><text>维度分析</text></view>
			<view class="rgtd_box_wrap">
				<view style="overflow: hidden;"></view>
				<view v-for="(item, index) in resultObj">
					<template v-if="index > 0">
						<view class="dimension_name"><text>{{item.name}}</text></view>
						<view class="dimension_title">
							得分
						</view>
						<view class="dimension_content dc1">
							<text>{{item.score}}</text>
						</view>
						<view class="dimension_title">
							维度结论
						</view>
						<view class="dimension_content dc1">
							<text>{{item.symptom}}</text>
						</view>
						<view class="dimension_title">
							维度说明
						</view>
						<view class="dimension_content">
							{{item.improvementSuggestions}}
						</view>
						<view class="dimension_explain">*维度解释：{{getTips(tips[index])}}</view>
					</template>
				</view>
			</view>
		</view>
		<view class="report_desc">
			<view class="desc_title">报告阅读说明</view>
			<view class="desc_txt">谢谢您的参与，阅读本报告时，请注意以下内容:</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">本结果仅供参考，不可作为临床诊断的依据；</view>
			</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">如对报告有不理解的地方，建议咨询专业人员；</view>
			</view>
			<view style="display: flex;">
				<view class="list_mark">·</view>
				<view class="desc_txt">如结果与你自己或他人的感受有出入，可回忆在测试时是否有事情影响到你，或自己回答时是否有所顾虑。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRecordById
	} from "@/api/index.js";
	import {
		photoUrl
	} from "@/common/config.js"
	const photoUrls = `${photoUrl}api/show?filePath=./webo`
	import {
		getTestTime
	} from "@/utils/util.js"
	import leiDa from "@/components/mpvueEcharts/leiDa.vue"
	// import unTable from "@/components/unTable.vue"
	export default {
		components: {
			leiDa
		},
		data() {
			return {
				photoUrl: photoUrl,
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				roleList: {
					'无职业倦怠': {
						type: 1,
						img: `${photoUrls}/MarriageQuality/role/role1.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'轻度职业倦怠': {
						type: 2,
						img: `${photoUrls}/MarriageQuality/role/role2.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'中度职业倦怠': {
						type: 3,
						img: `${photoUrls}/MarriageQuality/role/role3.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					},
					'重度职业倦怠': {
						type: 4,
						img: `${photoUrls}/MarriageQuality/role/role4.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					}
				},
				resultObj: [],
				resultId: '',
				role: '',
				scoreNum: 0,
				maxScore: 450,
				minScore: 0,
				keywords: '',
				characteristic: '', // 特点
				time: '',
				indicator: [],
				scoreList: [],
				tips: [
					'',
					'性格相容:对伴侣行为方式的满意程度。',
					'夫妻交流:夫妻之间的沟通质量和彼此的理解程度。',
					'化解冲突:夫妻应对争吵或分歧的方法和态度。',
					'经济安排:夫妻在处理家庭财务上的态度和方法。',
					'业余活动:夫妻在闲暇时间的活动安排和对此的满意度。',
					'情感与性生活:对夫妻感情与性关系的关注度与感受。',
					'子女与婚姻:夫妻对生育以及子女养育的方法与态度。',
					'亲友关系:夫妻如何看待和处理与双方家庭和朋友的关系。',
					'家庭角色:夫妻对彼此在家庭中所扮演角色的看法。',
					'生活观念:夫妻对婚姻的看法以及对彼此观点的认可程度。'
				]
			}
		},
		onLoad(options) {
			if (options && options.resultId) {
				this.resultId = options.resultId
				this.getScaleTestResults(this.resultId);
			}
		},
		computed: {
			percentage() {
				return ((this.scoreNum / this.maxScore) * 627) + 'rpx'
			}
		},
		methods: {
			getScaleTestResults(id) {
				let _this = this;
				_this.$request
					.get({
						url: `${getRecordById}?id=${id}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then(
						(res) => {
							if (res.code == 200) {
								_this.testResult = JSON.parse(res.data?.userRecordEntity?.testResult)[0];
								_this.role = _this.testResult.tableContext[1].value[0];
								this.role = '无职业倦怠';
								_this.resultObj = _this.testResult.newTableContext.result;
								this.scoreNum = this.testResult.newTableContext.result[0].score;
								this.time = getTestTime(res.data.userRecordEntity.testDate);
								this.indicator = this.testResult.newTableContext.iconInfo.indicator;
								this.scoreList = this.testResult.newTableContext.iconInfo.scoreList;
							} else if (res.code == 401) {} else {
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			getAdvantage(str) {
				let tempArr = str.split("——");
				let title = tempArr[0].split(".")
				let advant = {
					title: title[1],
					content: tempArr[1]
				}
				return advant
			},
			getTips(str) {
				let temp = str.split(':');
				return `${temp[0]}是指${temp[1]}`
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		background: #E53700;
		position: relative;
		padding-bottom: 100rpx;
	}

	.scale_name {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 42rpx;
		color: #FFFFFF;
		margin: 20rpx 0 0 32rpx;
	}

	.test_time {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 32rpx;
	}

	.role_medal {
		width: 205rpx;
		line-height: 53rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		position: absolute;
		top: 36rpx;
		right: 25rpx;
	}


	.role_wrap {
		position: relative;
	}

	.role_char {
		width: 714rpx;
		height: 156rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		left: 18rpx;
		bottom: 0;
	}

	.char_item {
		width: 30%;
		font-family: 'ZhankuKuaiLeTi';
		font-weight: 800;
		font-size: 36rpx;
		color: #333333;
		line-height: 52rpx;
		text-align: center;
	}


	.shadow_img {
		display: block;
		width: 170rpx;
		position: absolute;
		left: 50%;
		bottom: -6rpx;
		transform: translateX(-50%);
	}

	.role_name {
		text-align: center;
		margin: 202rpx 0 0 0;
	}

	.role_name image {
		width: 550rpx;
	}

	.temp_type {
		width: 714rpx;
		margin: 0 auto;
	}

	.carton {
		width: 718rpx;
		margin: 0 16rpx;
	}

	.score_percentage {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 627rpx;
		height: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border-radius: 14rpx;
		margin: 14rpx 0 8rpx 20rpx;
		position: relative;
		z-index: 3;
		overflow-x: hidden;
	}

	.process_bar {
		width: 0rpx;
		height: 16rpx;
		background: #FF1E00;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 4rpx 2rpx #FFC600;
		position: absolute;
		top: 3rpx;
		left: 4rpx;
	}

	.rgtd_box {
		box-sizing: border-box;
		width: 702rpx;
		min-height: 700rpx;
		margin: 0 auto 124rpx;
		position: relative;
		z-index: 0;
	}

	.rgtd_box_title {
		width: 701rpx;
		height: 97rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/title_bg.png) no-repeat;
		background-size: cover;
		position: absolute;
		left: 0;
		top: -80rpx;
		z-index: 0;
		text-align: center;
	}

	.rgtd_box_title text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 44rpx;
		color: #FFFEFE;
		margin-top: 20rpx;
	}

	.dimension_name {
		width: 465rpx;
		height: 79rpx;
		padding-top: 2rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/dimension_name.png) no-repeat;
		background-size: cover;
		margin: 60rpx auto 0;
		text-align: center;
	}

	.dimension_name text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 44rpx;
		color: #FFFEFE;
	}

	.dimension_title {
		box-sizing: border-box;
		width: 100%;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/list_style_bg.png) no-repeat 16rpx center;
		background-size: 19rpx auto;
		padding: 26rpx 0 0 0;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 32rpx;
		color: #FF1E00;
		line-height: 27rpx;
	}

	.dt1 {
		margin-top: 78rpx;
	}

	.dimension_content {
		box-sizing: border-box;
		width: 655rpx;
		min-height: 91rpx;
		padding: 30rpx 24rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin: 20rpx auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: justify;
	}

	.dimension_explain {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #D3987E;
		line-height: 24rpx;
		margin-top: 10rpx;
	}

	.dc1 {
		text-align: center;
	}

	.rgtd_box_wrap {
		box-sizing: border-box;
		width: 702rpx;
		min-height: 700rpx;
		background: #FFE9DC;
		border-radius: 27rpx;
		padding: 30rpx 23rpx;
		position: relative;
		z-index: 1;
	}

	.rgtd_box_content {
		box-sizing: border-box;
		width: 674rpx;
		min-height: 390rpx;
		padding: 28rpx 47rpx;
		background: #FFF9FA;
		border-radius: 18rpx;
		margin: 0 auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		line-height: 50rpx;
		letter-spacing: 2rpx;
	}

	.rgtd_text {
		width: 181rpx;
		margin: 6rpx 0 0 39rpx;
	}

	.emo_img {
		width: 112rpx;
		margin-right: 7rpx;
	}

	.rgtg_content {
		box-sizing: border-box;
		width: 714rpx;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 35rpx;
		margin: 0 auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #333333;
		line-height: 1.8;
		letter-spacing: 2rpx;
	}

	.mrmj_content {
		display: flex;
		flex-wrap: wrap;
		min-height: 255rpx;
	}

	.star_img {
		width: 92rpx;
		margin-right: 43rpx;
	}

	.mrmj_content .mr_name {
		height: 44rpx;
		padding: 0 34rpx;
		margin: 4rpx 10rpx;
		background: #E4FFD3;
		border-radius: 22rpx;
		border: 1px solid #66C666;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #0B7000;
		line-height: 44rpx;
		text-align: center;
	}

	.mr_pic_box {
		width: 100%;
	}

	.mr_pic {
		width: 316rpx;
		margin: 5rpx 8rpx;
	}

	.advantage_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin: 25rpx 5rpx 8rpx;
	}

	.advantage_content {
		box-sizing: border-box;
		width: 632rpx;
		background: #E4FFD3;
		border-radius: 22rpx;
		border: 1px solid #66C666;
		padding: 28rpx;
		margin: 0 auto;
	}

	.ad_item_title {
		display: flex;
		align-items: center;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 32rpx;
		color: #156300;
	}

	.love_role {
		width: 571rpx;
		margin: 0 auto;
	}

	.single_star {
		width: 32rpx;
		margin: 0 8rpx 4rpx 0;
	}

	.heart_img {
		width: 93rpx;
		margin-right: 16rpx;
	}

	.lover_type_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 43rpx;
	}

	.lover_type {
		width: 571rpx;
		font-family: 'ZhankuKuaiLeTi';
		font-weight: 400;
		font-size: 133rpx;
		color: #333333;
		line-height: 149rpx;
		text-align: center;
		margin: 50rpx auto 30rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/role/lover_type_bg.png) no-repeat center bottom;
		background-size: 100% auto;
	}

	.love_decode {
		box-sizing: border-box;
		width: 632rpx;
		padding: 39rpx 30rpx;
		background: #FFE8FD;
		border-radius: 22rpx;
		border: 1px solid #FF59F1;
		margin: 0 auto;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #333333;
	}


	.result_box {
		width: 702rpx;
		min-height: 807rpx;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(126, 77, 0, 0.13);
		border-radius: 26rpx;
		margin: 168rpx auto 0;
		position: relative;
	}

	.pad_box {
		width: 100%;
		height: 200rpx;
		border-radius: 26rpx;
		overflow: hidden;
	}

	.title_img {
		height: 60rpx;
		margin: 37rpx 0 0 96rpx;
	}

	.result_box_r {
		box-sizing: border-box;
		width: 702rpx;
		min-height: 453rpx;
		margin: -188rpx auto 0;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/result_bg_r.png) no-repeat top;
		background-size: 100% auto;
		border-radius: 33rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #555555;
		line-height: 50rpx;
		position: relative;
		z-index: 2;
	}


	.r_content {
		width: 600rpx;
		min-height: 307rpx;
		background: #FFE1E1;
		border-radius: 20rpx;
		border: 1px solid #FF6666;
		margin: 20rpx auto 0;
		padding: 30rpx;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		line-height: 50rpx;
		display: flex;
		align-items: flex-start;
	}


	.report_desc {
		padding: 0 38rpx;
		letter-spacing: 1px;
	}

	.desc_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 28rpx;
		color: #333333;
		line-height: 46rpx;
	}

	.stext {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.desc_txt {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #333333;
		line-height: 30rpx;
	}

	.list_mark {
		line-height: 0.7;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
		margin-right: 5rpx;
	}

	.analysis_title {
		width: 362rpx;
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.paperclip {
		width: 55rpx;
		position: absolute;
		top: -40rpx;
		left: 38rpx;
	}

	.score_title {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		line-height: 24rpx;
		margin: 0 0 0 5rpx;
	}

	.score_num {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 93rpx;
		color: #FF1E00;
		text-align: center;
		margin-top: 20rpx;
		line-height: 1.2;
	}

	.score_explain {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
		text-align: center;
	}

	.chart_wrap {
		width: 702rpx;
		min-height: 1053rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 30rpx auto 100rpx;
		padding-bottom: 30rpx;
	}

	.my_table {
		width: 634rpx;
		line-height: 52rpx;
		margin: 0 auto;
		text-align: center;
		border: 0;
	}

	.my_table {}

	.my_table .t-head {
		width: 634rpx;
		height: 52rpx;
		background: #E6EFF5;
	}

	.my_table .t-head,
	.my_table .t-body {
		display: flex;
	}

	.my_table .t-head view,
	.my_table .t-body view {
		flex: 1;
	}

	.my_table .t-body view {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #333333;
		line-height: 50rpx;
		border-right: 1px solid #E6EFF5;
		border-bottom: 1px solid #E6EFF5;
	}
</style>