psy_web_share/newScale/Charm/testResult.vue

<template>
	<view class="bg">
		<view class="role_img">
			<image class="temp_type" v-if="keywords" :src="roleList[role][keywords]" mode="widthFix">
			</image>
			<image class="carton" v-if="roleList[role]" :src="roleList[role].img" mode="widthFix"></image>
		</view>
		<view class="result_box">
			<view style="overflow: hidden;"></view>
			<image class="paperclip" src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/paperclip.png"
				mode="widthFix"></image>
			<image class="analysis_title"
				src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/analysis_title.png" mode="widthFix">
			</image>
			<view class="role_medal">
				<image v-if="roleList[role]" :src="roleList[role].name" mode="widthFix"></image>
			</view>
			<!-- <view class="score_bar">
				<view class="score_title">得分：</view>
				<view class="score_num">{{scoreNum}}</view>
				<view class="score_percentage">
					<view class="score_wrap">
						<image class="process_bar" :style="{'left': percentage}"
							src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/process_bar.png"
							mode="widthFix"></image>
					</view>
					<view class="score_text">{{parseInt(scoreNum)}}/{{parseInt(maxScore)}}</view>
				</view>
			</view> -->
			<view class="result_box_r">
				<view class="cardiac">
					<view style="text-align: left;">
						<image class="cardiac_title"
							src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/cardiac_title_img.png"
							mode="widthFix"></image>
					</view>
					<image v-if="role" class="cardiac_index" :src="roleList[role].score" mode="widthFix"></image>
				</view>
				<view class="sm_title">
					<image src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/sm_title.png"
						mode="widthFix"></image>
				</view>
				{{improvementSuggestions}}
			</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>
	</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 {
				isChecked: true,
				isShake: false,
				scaleDetail: {},
				questionList: [],
				currentQuestion: {},
				currentAnswerList: [],
				currentIndex: 0,
				userAnswerList: [],
				resultId: '',
				isLoading: false,
				isDisbale: false,
				roleList: {
					'88%': {
						name: `${photoUrls}/Charm/result_type/comment88.png`,
						img: `${photoUrls}/Charm/result_type/people_img88.png`,
						score: `${photoUrls}/Charm/result_type/score88.png`,
						'魅不可挡': `${photoUrls}/Charm/result_type/mbkd88.png`,
						'魅力撩人': `${photoUrls}/Charm/result_type/mllr88.png`,
						'魅力迷人': `${photoUrls}/Charm/result_type/mlmr88.png`,
						'魅力无穷': `${photoUrls}/Charm/result_type/mlwq88.png`,
						'气质成谜': `${photoUrls}/Charm/result_type/qzcm88.png`,
					},
					'99%': {
						name: `${photoUrls}/Charm/result_type/comment99.png`,
						img: `${photoUrls}/Charm/result_type/people_img99.png`,
						score: `${photoUrls}/Charm/result_type/score99.png`,
						'热情奔放': `${photoUrls}/Charm/result_type/rqbf99.png`,
						'热情豪爽': `${photoUrls}/Charm/result_type/rqhs99.png`,
						'热情澎湃': `${photoUrls}/Charm/result_type/rqpp99.png`,
						'热情如火': `${photoUrls}/Charm/result_type/rqrh99.png`,
						'热情洋溢': `${photoUrls}/Charm/result_type/rqyy99.png`,
					},
					'160%': {
						name: `${photoUrls}/Charm/result_type/comment160.png`,
						img: `${photoUrls}/Charm/result_type/people_img160.png`,
						score: `${photoUrls}/Charm/result_type/score160.png`,
						'怦然心动': `${photoUrls}/Charm/result_type/prxd160.png`,
						'神魂颠倒': `${photoUrls}/Charm/result_type/shdd160.png`,
						'神韵动人': `${photoUrls}/Charm/result_type/sydr160.png`,
						'心动不已': `${photoUrls}/Charm/result_type/xdby160.png`,
						'心花怒放': `${photoUrls}/Charm/result_type/xhnf160.png`,
					},
					'300%': {
						name: `${photoUrls}/Charm/result_type/comment300.png`,
						img: `${photoUrls}/Charm/result_type/people_img300.png`,
						score: `${photoUrls}/Charm/result_type/score300.png`,
						'瞬间倾心': `${photoUrls}/Charm/result_type/sjqx300.png`,
						'一见倾心': `${photoUrls}/Charm/result_type/yjqx300.png`,
						'爱情闪现': `${photoUrls}/Charm/result_type/aqsx300.png`,
						'一见心动': `${photoUrls}/Charm/result_type/yjxd300.png`,
						'一见钟情': `${photoUrls}/Charm/result_type/yjzq300.png`,
					}
				},
				resultId: '',
				role: '',
				improvementSuggestions: '',
				scoreNum: 0,
				maxScore: 0,
				minScore: 0,
				keywords: ''
			}
		},
		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) => {
							console.log('222:', new Date().getTime());
							console.log("----测试结果--->", res);
							if (res.code == 200) {
								_this.testResult = JSON.parse(res.data?.userRecordEntity?.testResult)[0];
								_this.role = _this.testResult.newTableContext.result[0].symptom;
								_this.improvementSuggestions = _this.testResult.newTableContext.result[0]
									.improvementSuggestions;
								_this.keywords = _this.trimStart(_this.improvementSuggestions.slice(0, 5));
								_this.scoreNum = _this.testResult.newTableContext.result[0].score;
								_this.maxScore = _this.testResult.newTableContext.result[0].maxScore;
							} else if (res.code == 401) {} else {
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			getNameUrl() {
				console.log(`${photoUrls}/Charm/result_type/role_name1.png`)
				return `${photoUrls}/Charm/result_type/role_name1.png`
			},
			trimStart(str) {
				return str.replace(/^\s+/, '');
			}
		}
	}
</script>

<style scoped>
	.bg {
		width: 100%;
		min-height: 1900rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/test_result_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
	}

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

	.role_name image {
		width: 550rpx;
	}

	.role_img {
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 223rpx;
	}

	.role_img .temp_type {
		width: 224rpx;
		margin-left: 88rpx;
	}

	.role_img .carton {
		width: 459rpx;
		margin-left: -60rpx;
	}

	.result_box {
		width: 702rpx;
		height: 1275rpx;
		background: linear-gradient(0deg, #EA1750 0%, #FF8189 100%);
		border-radius: 26rpx;
		margin: 10rpx auto 0;
		position: relative;
	}

	.role_medal {
		margin-top: 55rpx;
		text-align: center;
	}

	.role_medal image {
		width: 550rpx;
	}

	.result_box_r {
		box-sizing: border-box;
		width: 674rpx;
		min-height: 553rpx;
		padding: 26rpx;
		margin: 0 auto 0;
		background: #FFFFFF url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/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;
	}

	.sm_title image {
		width: 67rpx;
	}

	.cardiac {
		text-align: center;
	}

	.cardiac_title {
		width: 213rpx;
	}

	.cardiac_index {
		width: 436rpx;
		text-align: center;
	}



	.report_desc {
		margin: 30rpx 38rpx;
		letter-spacing: 1px;
	}

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

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

	.list_mark {
		line-height: 0.7;
		font-size: 36rpx;
		color: #ffffff;
		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>