psy_web_share/newScale/Mbti/testResult.vue

<template>
	<view v-if="role" :class="['bg', `bg${roleList[role].type}`]">
		<view class="role_wrap">
			<image class="carton" v-if="role" :src="roleList[role].img" mode="widthFix">
			</image>
			<view class="role_char">
				<view class="char_item" v-for="item in getCharacteristic(resultObj.characteristic)">
					<view style="position: relative;">
						<text style="position: relative;z-index: 1;">
							{{item}}
						</text>
						<image class="shadow_img"
							:src="`https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/font_shadow${roleList[role].type}.png`"
							mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/rgtd_text.png"
					mode="widthFix"></image>
				<image class="emo_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/emo_img.png" mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content">
				<text>
					{{resultObj.evaluate.replace(/^\n/, '')}}
				</text>
			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/mrmj_text.png"
					mode="widthFix"></image>
				<image class="emo_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/emo_img.png" mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content mrmj_content" style="padding: 24rpx;">
				<!-- <text class="mr_name"
					:style="{background: roleList[role].mrBg, 'border-color': roleList[role].mrBorder, color: roleList[role].mrColor}"
					v-for="item in getCharacteristic(resultObj.representative)">
					{{item}}
				</text> -->
				<view class="mr_pic_box">
					<image class="mr_pic" v-for="item in getCharacteristic(resultObj.representative)"
						:src="`https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/people/${item}@3x.png`"
						mode="widthFix"></image>
				</view>

			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/zjzq_text.png"
					mode="widthFix"></image>
				<image class="emo_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/emo_img.png" mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content">
				<text>
					{{resultObj.pursuit.replace('\n', '')}}
				</text>
			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/zcjy_text.png"
					mode="widthFix"></image>
				<image class="star_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/star_img.png"
					mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content mrmj_content">
				<view class="advantage_title">工作中的优势</view>
				<view class="advantage_content">
					<template v-for="item in getAdvantage(resultObj.advantage)">
						<view class="ad_item_title"><text
								style="font-size: 20rpx;margin-right: 5rpx;">●</text><text>{{item.title}}</text>
						</view>
						<view class="ad_item_content">{{item.content}}</view>
					</template>
				</view>
				<view class="advantage_title">工作中的劣势</view>
				<view class="advantage_content" style="background: #FFFAEB;border: 1px solid #FFD031;">
					<template v-for="item in getAdvantage(resultObj.disadvantages)">
						<view class="ad_item_title" style="color: #FFC500;"><text
								style="font-size: 20rpx;margin-right: 5rpx;">●</text><text>{{item.title}}</text></view>
						<view class="ad_item_content">{{item.content}}</view>
					</template>
				</view>
				<view class="advantage_title">职业推荐</view>
				<view> <text>
						{{resultObj.recommendation.replace('\n', '')}}
					</text></view>
			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/czjy_text.png"
					mode="widthFix"></image>
				<image class="star_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/star_img.png"
					mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content mrmj_content">
				<template v-for="item in getAdvantage(resultObj.suggest)">
					<view class="ad_item_title">
						<image class="single_star"
							src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/single_star.png"
							mode="widthFix"></image> <text style="color: #333333;">{{item.title}}</text>
					</view>
					<view class="ad_item_content">{{item.content}}</view>
				</template>
			</view>
		</view>
		<view class="rgtd_box">
			<view :class="['rgtd_title', `rgtd_title${roleList[role].type}`]">
				<image class="rgtd_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/labd_text.png"
					mode="widthFix"></image>
				<image class="heart_img"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/heart_img.png"
					mode="widthFix">
				</image>
			</view>
			<view class="rgtg_content mrmj_content">
				<view class="lover_type_title">恋爱类型</view>
				<view class="lover_type">
					{{getLoveSuggestion(5, 8, resultObj.revered)}}
				</view>
				<view class="love_decode">
					{{getLoveSuggestion(9, resultObj.revered.length, resultObj.revered)}}
				</view>
			</view>
		</view>
		<view class="report_desc">
			<view class="desc_title">报告阅读说明</view>
			<view class="stext">谢谢您的参与，阅读本报告时，请注意以下内容:</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`
	console.log(photoUrl);
	export default {
		data() {
			return {
				photoUrl: photoUrl,
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				roleList: {
					'ENFJ': {
						type: 1,
						img: `${photoUrls}/Mbti/role/role_enfj.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'ENFP': {
						type: 1,
						img: `${photoUrls}/Mbti/role/role_enfp.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'ENTJ': {
						type: 3,
						img: `${photoUrls}/Mbti/role/role_entj.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					},
					'ENTP': {
						type: 3,
						img: `${photoUrls}/Mbti/role/role_entp.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					},
					'ESFJ': {
						type: 4,
						img: `${photoUrls}/Mbti/role/role_esfj.png`,
						mrBg: '#E2F9FF',
						mrBorder: '#50DCFF',
						mrColor: '#00CCFF'
					},
					'ESFP': {
						type: 2,
						img: `${photoUrls}/Mbti/role/role_esfp.png`,
						mrBg: '#FFF6D8',
						mrBorder: '#FFA200',
						mrColor: '#FFA200'
					},
					'ESTJ': {
						type: 4,
						img: `${photoUrls}/Mbti/role/role_estj.png`,
						mrBg: '#E2F9FF',
						mrBorder: '#50DCFF',
						mrColor: '#00CCFF'
					},
					'ESTP': {
						type: 2,
						img: `${photoUrls}/Mbti/role/role_estp.png`,
						mrBg: '#FFF6D8',
						mrBorder: '#FFA200',
						mrColor: '#FFA200'
					},
					'INFJ': {
						type: 1,
						img: `${photoUrls}/Mbti/role/role_infj.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'INFP': {
						type: 1,
						img: `${photoUrls}/Mbti/role/role_infp.png`,
						mrBg: '#E4FFD3',
						mrBorder: '#66C666',
						mrColor: '#0B7000'
					},
					'INTJ': {
						type: 3,
						img: `${photoUrls}/Mbti/role/role_intj.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					},
					'INTP': {
						type: 3,
						img: `${photoUrls}/Mbti/role/role_intp.png`,
						mrBg: '#F7E9FF',
						mrBorder: '#B262E1',
						mrColor: '#962ED4'
					},
					'ISFJ': {
						type: 4,
						img: `${photoUrls}/Mbti/role/role_isfj.png`,
						mrBg: '#E2F9FF',
						mrBorder: '#50DCFF',
						mrColor: '#00CCFF'
					},
					'ISFP': {
						type: 2,
						img: `${photoUrls}/Mbti/role/role_isfp.png`,
						mrBg: '#FFF6D8',
						mrBorder: '#FFA200',
						mrColor: '#FFA200'
					},
					'ISTJ': {
						type: 4,
						img: `${photoUrls}/Mbti/role/role_istj.png`,
						mrBg: '#E2F9FF',
						mrBorder: '#50DCFF',
						mrColor: '#00CCFF'
					},
					'ISTP': {
						type: 2,
						img: `${photoUrls}/Mbti/role/role_istp.png`,
						mrBg: '#FFF6D8',
						mrBorder: '#FFA200',
						mrColor: '#FFA200'
					}
				},
				resultObj: {},
				resultId: '',
				role: '',
				scoreNum: 0,
				maxScore: 0,
				minScore: 0,
				keywords: '',
				characteristic: '', // 特点
			}
		},
		onLoad(options) {
			if (options && options.resultId) {
				this.resultId = options.resultId
				this.getScaleTestResults(this.resultId);
			}
		},
		computed: {
			percentage() {
				return (((this.scoreNum / this.maxScore) * 318) - 318) + '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[0].value[0];
								_this.resultObj = _this.testResult.tableContext[1].value[0];
							} else if (res.code == 401) {} else {
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			trimStart(str) {
				return str.replace(/^\s+/, '');
			},
			getCharacteristic(str) {
				return str.split("、")
			},
			getAdvantage(str) {
				let tempArr = str.split("\n");
				let advantageList = [];
				tempArr.forEach(item => {
					if (item && item != '\r') {
						let arr = item.split('：')
						advantageList.push({
							title: arr[0].slice(2, arr[0].length),
							content: arr[1]
						})
					}
				})
				return advantageList;
			},
			getLoveSuggestion(s, e, str) {
				let temp = str.replace(/\r/, '')
				temp = temp.replace(/\n/, '')
				return temp.slice(s, e);
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		min-height: 6186rpx;
		background: linear-gradient(0deg, #FB4643 0%, #FF8B59 100%);
		overflow: hidden;
		position: relative;
	}

	.bg1 {
		background: url('https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/bg1.png') no-repeat top;
		background-size: 100% 100%;
	}

	.bg2 {
		background: url('https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/bg2.png')no-repeat top;
		background-size: 100% 100%;
	}


	.bg3 {
		background: url('https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/bg3.png')no-repeat top;
		background-size: 100% 100%;
	}

	.bg4 {
		background: url('https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/bg4.png')no-repeat top;
		background-size: 100% 100%;
	}

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

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

	.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: 714rpx;
		margin: 54rpx 18rpx 0 18rpx;
	}

	.rgtd_box {
		margin: 24rpx auto;
	}

	.rgtd_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 725rpx;
		height: 128rpx;
		margin: 0 auto;
	}

	.rgtd_title1 {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/title_bg1.png) no-repeat;
		background-size: cover
	}

	.rgtd_title2 {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/title_bg2.png) no-repeat;
		background-size: cover
	}


	.rgtd_title3 {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/title_bg3.png) no-repeat;
		background-size: cover
	}


	.rgtd_title4 {
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Mbti/role/title_bg4.png) no-repeat;
		background-size: cover
	}

	.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;
		text-align: justify;
	}

	.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/Mbti/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 {
		width: 302rpx;
		position: relative;
		z-index: 3;
		margin: 31rpx 0 0 28rpx;
	}

	.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/Mbti/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: 30rpx 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: #999999;
		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;
	}
</style>