psy_web_share/newScale/Senile/testResult.vue

<template>
	<view v-if="role" :class="['bg', `bg${roleList[role].index}`]">
		<view class="scale_name">你是否正在逐渐老化？</view>
		<view class="test_time">测试时间：{{time}}</view>
		<view class="result_box" style="margin-top: 15rpx;">
			<view class="pad_box" :style="{'background': roleList[role].boxBg}"></view>
			<view class="result_box_r">
				<view style="overflow: hidden;"></view>
				<view class="score_num" style="margin-top: 34rpx;">得分：{{scoreNum}}</view>
				<view class="score_percentage">
					<view class="process_bar" v-if="scoreNum > 0" :style="{'width': percentage}">
						<view class="score_text">{{parseInt(scoreNum)}}/{{parseInt(maxScore)}}</view>
					</view>
				</view>
				<view class="score_explain">注: 得分越高，老化程度越高</view>
				<view class="score_num" style="margin-top: 22rpx;">结论：</view>
				<image class="temp_type" v-if="role" :src="roleList[role].name" mode="widthFix"></image>
				<image class="carton" v-if="role" :src="roleList[role].img" mode="widthFix">
				</image>
				<image class="result_text"
					src="https://test.jue-ming.com:8849/api/show?filePath=./webo/Senile/result_text_bg.png"
					mode="widthFix">
				</image>
			</view>
		</view>
		<view class="result_box">
			<view class="pad_box" :style="{'background': roleList[role].boxBg}"></view>
			<view class="result_box_r">
				<image class="title_img" v-if="role" :src="roleList[role].titleImg" mode="widthFix"></image>
				<view style="overflow: hidden;"></view>
				<view class="r_content"
					:style="{'background': roleList[role].conentBg, 'border-color': roleList[role].contentBorder}">
					<view class="c_item" v-for="item in (segmentation(improvementSuggestions))">
						<text :style="{'color': roleList[role].boxBg, 'font-size': '100rpx'}">·</text>
						<text>{{item}}</text>
					</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>
	</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: {
					'尚未老化': {
						name: `${photoUrls}/Senile/role/result_name1.png`,
						img: `${photoUrls}/Senile/role/people_img1.png`,
						bg: `${photoUrls}/Senile/role/bg1.png`,
						index: 1,
						boxBg: '#54D49E',
						titleImg: `${photoUrls}/Senile/role/title_bg1.png`,
						conentBg: '#DDFFF1',
						contentBorder: '#54D49E'

					},
					'轻微老化': {
						name: `${photoUrls}/Senile/role/result_name2.png`,
						img: `${photoUrls}/Senile/role/people_img2.png`,
						bg: `${photoUrls}/Senile/role/bg2.png`,
						index: 2,
						boxBg: '#368FFF',
						titleImg: `${photoUrls}/Senile/role/title_bg2.png`,
						conentBg: '#ECFFFF',
						contentBorder: '#94EFFF'
					},
					'中度老化': {
						name: `${photoUrls}/Senile/role/result_name3.png`,
						img: `${photoUrls}/Senile/role/people_img3.png`,
						bg: `${photoUrls}/Senile/role/bg3.png`,
						index: 3,
						boxBg: '#9B6AFF',
						titleImg: `${photoUrls}/Senile/role/title_bg3.png`,
						conentBg: '#F3EDFF',
						contentBorder: '#9B6AFF'
					},
					'高度老化': {
						name: `${photoUrls}/Senile/role/result_name4.png`,
						img: `${photoUrls}/Senile/role/people_img4.png`,
						bg: `${photoUrls}/Senile/role/bg4.png`,
						index: 4,
						boxBg: '#FF7800',
						titleImg: `${photoUrls}/Senile/role/title_bg4.png`,
						conentBg: '#FFF3E1',
						contentBorder: '#F8C983'
					},
					'严重老化': {
						name: `${photoUrls}/Senile/role/result_name5.png`,
						img: `${photoUrls}/Senile/role/people_img5.png`,
						bg: `${photoUrls}/Senile/role/bg5.png`,
						index: 5,
						boxBg: '#CE0000',
						titleImg: `${photoUrls}/Senile/role/title_bg5.png`,
						conentBg: '#FFE1E1',
						contentBorder: '#FF6666'
					}
				},
				resultId: '',
				role: '',
				improvementSuggestions: '',
				scoreNum: 0,
				maxScore: 0,
				minScore: 0,
				keywords: '',
				time: ''
			}
		},
		onLoad(options) {
			if (options && options.resultId) {
				this.resultId = options.resultId
				this.getScaleTestResults(this.resultId);
			}
		},
		computed: {
			percentage() {
				return ((this.scoreNum / this.maxScore) * 259) + '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;
								let testDateTime = res.data.userRecordEntity.testDate;
								let yearMonthDay = testDateTime
									.replace("年", "/")
									.replace("月", "/")
									.replace("日", " ")
									.replace("时", ":")
									.replace("分", ":")
									.replace("秒", "");
								this.time = yearMonthDay;
							} else if (res.code == 401) {} else {
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			trimStart(str) {
				return str.replace(/^\s+/, '');
			},
			segmentation(str) {
				return str.split('\n');
			}
		}
	}
</script>

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

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

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


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

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

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

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

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

	.score_num {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: bold;
		font-size: 32rpx;
		color: #CC4100;
		line-height: 31rpx;
		margin: 14rpx 0 0 22rpx;
		position: relative;
		z-index: 3;
	}

	.score_percentage {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 271rpx;
		height: 28rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Senile/score_percentage_bg.png) no-repeat center center;
		background-size: 100% 100%;
		border-radius: 14rpx;
		margin: 14rpx 0 8rpx 20rpx;
		position: relative;
		z-index: 3;
		overflow-x: hidden;
	}

	.process_bar {
		width: 0rpx;
		height: 18rpx;
		background: linear-gradient(89deg, #FFCC01 0%, #FE704C 100%);
		box-shadow: 0rpx 0rpx 4rpx 2rpx #FFC600;
		border-radius: 10rpx;
		border: 1px solid #D84500;
		border: 1rpx solid #D84500;
		position: absolute;
		top: 3rpx;
		left: 4rpx;
	}

	.score_text {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #FEFEFE;
		position: absolute;
		top: 0rpx;
		right: 5rpx;
		z-index: 99;
		line-height: 16rpx;
	}

	.min_max {
		width: 300rpx;
		display: flex;
		justify-content: space-between;
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 20rpx;
		color: #999999;
		margin-left: 30rpx;
	}

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

	.role_name image {
		width: 550rpx;
	}

	.temp_type {
		width: 504rpx;
		position: absolute;
		top: 186rpx;
		left: 16rpx;
	}

	.carton {
		width: 258rpx;
		position: absolute;
		top: 134rpx;
		right: 38rpx;
		z-index: 1;
	}

	.result_text {
		width: 260rpx;
		position: absolute;
		top: -57rpx;
		right: 10rpx;
		z-index: 3;
	}

	.result_box {
		width: 702rpx;
		min-height: 361rpx;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(126, 77, 0, 0.13);
		border-radius: 26rpx;
		margin: 20rpx 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: 352rpx;
		margin: -188rpx auto 0;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Senile/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;
	}


	.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;
	}

	.c_item {
		display: flex;
		align-items: flex-start;
		text-align: justify;
		letter-spacing: 2px;
		margin-bottom: 16rpx;
	}


	.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_explain {
		font-family: 'Alibaba PuHuiTi 2.0';
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		line-height: 31rpx;
		margin-left: 32rpx;
	}
</style>