psy_web_share/scaleTestResults/testResults/index.vue

<template>
	<view class="test-result-warp">
		<view class="test-result-inner" v-show="showContent">
			<view class="test-result-content">
				<view class="target-content" ref="targetDom" id="targetDom">
					<view class="total-score-progress-content">
						<view class="test-result-first-floor">
							<view>
								<view class="scale-name" v-if="name">量表名称：{{ name }}</view>
								<view class="test-time" v-if="time">测试时间：{{ time }}</view>
							</view>
							<u-avatar size="100" :src="avatarUrl"></u-avatar>
						</view>
					</view>
					<!-- <view class="table-title" v-if="scoresList">分值</view>
					<unTable :scoresList="scoresList" :testResult="testResult" /> -->
					<view class="radar-title" v-if="scoreList && scoreList.length > 0">你的分数</view>
					<leiDa :reference="reference" :scoreList="scoreList" :indicator="indicator" />
					<view class="over-style" v-if="showResultText">结果分析</view>
					<view v-if="showResultText">
						<view class="dimension-warp" v-for="(list, j) in symptomDescription" :key="j">
							<view class="dimension-name">名称：{{ list.name }}</view>
							<view class="dimension-content">
								<view class="dimension-item" v-if="list.score && list.score != '无'">
									<text class="dimension-item-title">得分</text>
									<text class="dimension-item-mh">：</text>
									<text class="dimension-item-desc">{{ list.percent }}</text>
								</view>
								<view class="dimension-item" v-if="list.symptom && list.symptom != '无'">
									<text class="dimension-item-title">解释</text>
									<text class="dimension-item-mh">：</text>
									<text class="dimension-item-desc">{{ list.symptom }}</text>
								</view>
								<view class="dimension-item"
									v-if="list.improvementSuggestions && list.improvementSuggestions != '无'">
									<text class="dimension-item-title">说明</text>
									<text class="dimension-item-mh">：</text>
									<text class="dimension-item-desc">{{ list.improvementSuggestions }}</text>
								</view>
								<view class="dimension-item" v-if="list.suggestion && list.suggestion != '无'">
									<text class="dimension-item-title">建议</text>
									<text class="dimension-item-mh">：</text>
									<text class="dimension-item-desc">{{ list.suggestion }}</text>
								</view>
							</view>
						</view>
					</view>
					<u-row>
						<u-col span="12">
							<div class="report-tip">
								<div class="tip-title">报告阅读说明</div>
								<p class="tip-desc">谢谢您的参与，阅读本报告时，请注意以下内容：</p>
								<p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
								<p class="tip-content">如对报告有不理解的地方，建议咨询专业人员；</p>
								<p class="tip-content">如结果与你自己或他人感知的有出入，可回忆在测试<br>时是否有事情影响到你，或自己答辩时是否有所顾虑。</p>
							</div>
						</u-col>
					</u-row>
				</view>
				<u-line></u-line>
			</view>
		</view>
	</view>
</template>

<script>
	import leiDa from "@/components/mpvueEcharts/leiDa.vue"
	import unTable from "../components/unTable.vue"
	import {
		baseUrl,
		photoUrl
	} from '@/common/config.js'
	var loginRes;
	import {
		getRecordById
	} from "@/api/index.js";
	var _this;
	export default {
		name: "testResults",
		components: {
			leiDa,
			unTable
		},
		data() {
			return {
				getBenDatas: null,
				avatarUrl: "",
				petName: "",
				showTestedPerson: false,
				baseUrl: baseUrl,
				name: "",
				time: "",
				totalScores: 0,
				symptomScore: [],
				symptomDescription: [],
				symptom: "",
				reference: [],
				scoreList: [],
				indicator: [],
				improvementSuggestions: "无",
				scoresList: [],
				resultId: "",
				subjectOrCognitiveId: "",
				testResult: 2,
				imgUrl: '',
				messageShare: 0,
				productList: [{
						name: '谢谢您的参与，阅读本报告时，请注意以下内容：'
					},
					{
						name: '. 本结果仅供参考，不可作为临床诊断的依据'
					},
					{
						name: '. 如结果与你自己或他人感知的有出入，可回忆在测试'
					},
					{
						name: '时是否有事情影响了你，或自己答题时是否有所顾虑'
					},
					{
						name: '. 如对报告有不理解的地方，建议向专业人员进行咨询'
					}
				],
				showResultText: false,
				relevantList: [],
				scaleInfo: {},
				flag: '',
				treadStatu: false, //踩赞状态
				praiseStatu: false, //点赞状态
				treadId: '',
				praiseId: '',
				downloadBtn: {
					height: '80px !important',
					width: '250px !important',
					fontSize: '32px',
					color: '#FFFFFF',
					background: '#FF9710',
					border: 'none',
				},
				returnBtn: {
					height: '80px !important',
					width: '250px !important',
					fontSize: '32px',
					color: '#FF9710',
					background: '#FFE6C7',
					border: 'none',
				},
				shareBtn: {
					height: '80px !important',
					width: '80px !important',
					fontSize: '32px',
					color: '#FF9710',
					background: '#FFE6C7',
					border: 'none',
				},
				// arrow_left_bold: this.$imageUrl.urls.arrow_left_bold, //左侧箭头图标
				likeNum: 0, //点赞数量
				notLikeNum: 0, //不喜欢数量
				commentNum: 0, //评论数量
				showContent: false, //等接口返回数据初始化完成再
			};
		},
		onBackPress(event) {
			uni.redirectTo({
				url: "/pages/tab/scaleTest/index"
			});
			return true;
		},
		onLoad(options) {
			_this = this;
			let bings = uni.getStorageSync('beginTextData')
			if (bings) {
				let bing = JSON.parse(bings);
				_this.getBenDatas = bing;
			}
			if (options.resultId || options.scene) {
				if (options.messageShare == 1) {
					this.messageShare = options.messageShare
				}
				_this.resultId = options.resultId || options.scene;
				_this.getScaleTestResults(_this.resultId);
			}
		},
		onShow() {
			this.showTestedPerson = this.petName && this.avatarUrl;
		},
		onReachBottom() {},
		methods: {
			navBackTest() {
				uni.$emit('updateData', encodeURIComponent(JSON.stringify(this.getBenDatas)))
				uni.navigateBack({
					delta: 2
				})
			},

			leftClick() {
				console.log("-this.messageShare------>", this.messageShare)
				if (this.messageShare == 1) {
					uni.switchTab({
						url: "/pages/tab/scaleTest/index"
					})
				} else {
					uni.navigateBack();
				}
			},
			navBack() {
				this.leftClick()
			},
			getScaleTestResults(id) {
				console.log('111:', new Date().getTime());
				_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 = parseInt(JSON.parse(res.data?.userRecordEntity?.testResult)[0].version);
								_this.name = res.data.userRecordEntity.name;
								_this.flag = res.data.userRecordEntity.flag;
								_this.scaleInfo = res.data.userRecordEntity;
								let testDateTime = res.data.userRecordEntity.testDate;
								let yearMonthDay = testDateTime
									.replace("年", "/")
									.replace("月", "/")
									.replace("日", " ")
									.replace("时", ":")
									.replace("分", ":")
									.replace("秒", "");
								_this.time = yearMonthDay;
								if (_this.testResult == 2) {
									_this.getDataList(res.data);
								} else {
									_this.scoresList = JSON.parse(res.data.userRecordEntity.testResult);
									_this.init(_this.scoresList[0].tableContext[0].value[0])
								}
								this.showContent = true;
							} else if (res.code == 401) {} else {
								// uni.showToast({
								// 	title: "加载有误",
								// 	icon: "none",
								// })
								(res) => {
									console.log("世界上绝对绝对绝对绝对绝对的", res);
								}
							}
						})
			},
			init(v) {
				_this.totalScores = Number(v);
			},
			getDataList(data) {
				let v = JSON.parse(data.userRecordEntity.testResult);
				_this.scoresList = v;
				console.log("-----传入的参数----->", v);
				v.forEach((items) => {
					if (items.newTableContext.iconInfo != "") {
						let indicatorList = items?.newTableContext?.iconInfo?.indicator;
						if (indicatorList.length > 0) {
							indicatorList.forEach((data) => {
								_this.indicator.push({
									text: data.text,
									max: Number(data.max)
								});
							});
						}
						let referenceList = items?.newTableContext?.iconInfo?.reference || [];
						if (referenceList.length > 0) {
							referenceList.forEach((data) => {
								_this.reference.push(Number(data));
							});
						}
						let scoreLists = items?.newTableContext?.iconInfo?.scoreList;
						if (scoreLists.length > 0) {
							scoreLists.forEach((data) => {
								_this.scoreList.push(Number(data));
							});
						}
						console.log("==1111=====>", _this.indicator)
						console.log("==2222=====>", _this.reference)
						console.log("==3333=====>", _this.scoreList)
					}
					// _this.symptomDescription=[]
					items.newTableContext.result.forEach((item) => {
						if (!item) return;
						if (item.name === "总分" || item.name === "压力综合指数") {
							_this.init(item.score);
							_this.symptom = item.symptom;
						}
						if (item.isTotalScoreExplain === "是") {
							_this.improvementSuggestions = item.symptom;
						}

						_this.symptomScore.push({
							name: item.name,
							score: item.score
						});
						// 获取维度数据
						this.symptomDescription.push(item);

					});
					if (this.symptomDescription && this.symptomDescription.length > 0) {
						//判断维度显示
						this.showResultText = true;
					}
					console.log("0000-----000", _this.symptomDescription);
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.test-result-warp {
		// width: 100%;
		max-width: 750rpx;
		height: 100%;
		box-sizing: border-box;
		background-image: linear-gradient(#A9EBFF, #FFFFFF);
	}

	.test-result-inner {
		width: 100%;
		// height: calc(100vh - var(--status-bar-height) - 80px);
		overflow: hidden;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 0 20px;

		.test-result-content {
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 18px 18px 0;
			border-radius: 18px 18px 0 0;
			margin-top: 15px;

			.target-content {
				margin-bottom: 18px;
			}
		}
	}

	.report-tip {
		width: 100%;
		margin-top: 20px;
		// padding-left: 40px;
	}

	.tip-title {
		width: 100px;
		height: 35px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 500;
		// color: #308594;
		color: #000;
		line-height: 35px;
		text-align: left;
		// background-image: linear-gradient(to right, #6fc1cf, #deeff4);
		// border-top-right-radius: 18px;
		// border-bottom-left-radius: 18px;
	}

	.tip-desc {
		box-sizing: border-box;
		font-size: 12px;
		font-family: PingFang SC;
		// color: #666666;
		color: #A3A3A3;
		line-height: 25px;
		padding-left: 0px;
	}

	.tip-content {
		box-sizing: border-box;
		font-size: 12px;
		font-family: PingFang SC;
		// color: #000;
		color: #575757;
		line-height: 25px;
		display: list-item;
		list-style-type: disc;
		margin-left: 5px;
	}

	/* .container {
		width: 750px;
		height: 320px;
		background-color: aquamarine;
	} */
	.total-score-progress-content {
		// padding: 20px 0;
		// margin-top: 120px;
		margin-bottom: 20px;

		.test-result-first-floor {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.scale-name {
				font-size: 18px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 600;
				color: #FFAC41;
				line-height: 40px;
			}

			.test-time {
				font-size: 16px;
				font-family: PingFang SC-Regular, PingFang SC;
				color: rgba(65, 65, 65, 0.49);
				line-height: 20px;
			}
		}

	}

	.table-title {
		width: 76px;
		height: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24px;
		text-indent: 12px;
		color: #fff;
		text-align: left;
		background: #FF6A97;
		border-radius: 0 36px 36px 0;
		margin: 25px 0;
	}

	.radar-title {
		width: 106px;
		height: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24px;
		text-indent: 12px;
		color: #fff;
		text-align: left;
		background: #2CC5F2;
		border-radius: 0 36px 36px 0;
		margin: 25px 0;
	}

	.total-score-progress-width {
		width: 80%;
	}

	.total-score-progress {
		font-size: 40px;
		font-weight: bold;
		width: 120px
	}

	.total-score-progress-test {
		font-size: 32px;
	}

	.demo-layout-bg-purple-light {
		display: flex;
		padding: 0 40px;
	}

	.demo-layout-bg-purple {
		width: 200px;
		height: 200px
	}

	.demo-layout-bg-purple image {
		width: 100%;
		height: 100%
	}

	.custom-style-list {
		// width: 94%;
		width: 100%;
		margin: 0 auto;

	}

	.b-b {
		border: 1px solid #f5f5f5;
	}

	.b-d {

		border-right: 1px solid #f5f5f5;
	}

	.custom-style-list-left {
		text-align: left
	}

	.custom-style-list-right {
		text-align: center
	}

	.padding20 {
		margin-top: 20px
	}

	.textIndent {

		text-indent: 33px;
	}

	.content_app11 {
		width: 210px !important;
		height: 91px !important;
	}

	::v-deep .u-button--mini {
		height: 90px !important;
		width: 210px !important;

	}

	.over-style {
		// color: #666666;
		// font-size: 16px;
		// font-weight: 400;
		// border-left: 4px solid #666;
		// padding-left: 10px;
		// margin-left: 20px;

		width: 106px;
		height: 24px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 24px;
		text-indent: 12px;
		color: #fff;
		text-align: left;
		// background: #B1DF56;
		background: #FF9B6E;
		border-radius: 0 36px 36px 0;
		margin: 25px 0;
	}

	.dimension-warp {
		width: 100%;
		margin-top: 20px;
	}

	.dimension-name {
		height: 20px;
		line-height: 20px;
		font-size: 16px;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #E8B643;
		border-left: 6px solid #E8B643;
		padding-left: 13px;
	}

	.dimension-content {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 6px;
		background: #F6F5F5;
		border-radius: 8px;
		margin-top: 20px;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #505050;

		.dimension-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			line-height: 24px;

			.dimension-item-title {
				width: 25%;
				height: 20px;
				font-weight: bold;
				text-align: justify;
				// text-align-last: justify;
				text-justify: distribute-all-lines;
			}

			.dimension-item-title::after {
				width: 100%;
				display: inline-block;
				content: ''; //这三个都不可以少
			}

			.dimension-item-mh {
				width: 20px;
				font-weight: bold;
			}

			.dimension-item-desc {
				width: calc(75% - 20px);
			}
		}
	}



	.analysis-title {
		font-size: 26px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #575757;
		line-height: 50px;
	}

	.analysis-desc {
		font-size: 24px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #575757;
		line-height: 45px;
	}

	.operate_wrap {
		display: flex;
		width: 710px;
		padding: 60px 0;
		margin: 0 auto;
		justify-content: space-around;
		align-items: flex-start;

		image {
			width: 80px;
		}
	}

	.operate_item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;

		.like-num,
		.not-like-num,
		.comment-num {
			font-size: 22px;
			font-family: PingFang SC-Bold, PingFang SC;
			color: #04919B;
			margin-left: 10px;
		}

		&_img {
			width: 80px;
			height: 80px;
		}
	}

	.operate_item:active {
		opacity: 0.8;
	}

	.comment {
		// width: 709px;
		width: 100%;
		background: #FFFFFF;
		opacity: 1;
		margin: 34px auto;
	}

	.comment_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// margin: 35px 0 10px;
		margin-bottom: 20px;
	}

	.comment_title {
		// display: flex;
		// justify-content: space-between;
		font-size: 30px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #04919B;
	}

	.comment_more {
		font-size: 22px;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #04919B;
	}


	.swiper {
		height: 410px;
		border-radius: 20px;
		// overflow: hidden;
	}

	// .comment .swiper {
	// 	height: 180px;
	// }

	.swiper-item {
		box-sizing: border-box;
		// display: flex;
		min-height: 180px;
		// text-align: center;
		margin-right: 16px;
		justify-content: center;
		align-items: center;
		// padding: 0 50px;
		border-radius: 36px 36px 36px 36px;
		background: #EEFDFE;
		opacity: 1;
		overflow: hidden;

		&_image {
			width: 54px;
			height: 54px;
			border-radius: 50%;
		}

		&_right {
			min-width: 60%;
			font-size: 26px;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #575757;
			margin-left: 20px;
			text-align: left;

			text {
				font-size: 22px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(65, 65, 65, 0.49);
				line-height: 48px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}

		&_end {
			font-size: 22px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(65, 65, 65, 0.49);
			line-height: 48px;
		}
	}

	.comment>>>.uni-list {
		width: 98%;

		.uni-list-item:nth-child(1) {
			margin-bottom: 10px;
		}
	}

	.comment>>>.uni-list-item {
		// background-color: #EEFDFE;
		background: #EEFDFE;
		border-radius: 36px;
	}

	.comment>>>.uni-list-chat {
		background-color: #EEFDFE;
		margin-top: 20px;
	}

	.slot-title {
		width: 90%;
		// font-size: 28px;
		// font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		// color: #575757;
		margin-left: 15px;
		font-size: 28px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1B90B2;
		// line-height: 48px;
	}

	.slot-text {
		margin-left: 15px;
		// font-size: 22px;
		// font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		// color: #575757;
		// line-height: 1.8;
		font-size: 22px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #575757;
		line-height: 48px;
	}

	.slot-desc {
		margin-top: 6px;
		margin-left: 15px;
		font-size: 22px;
		font-family: PingFang SC-Regular, PingFang SC;
		// font-weight: 400;
		color: #FFAC41;

		// line-height: 48px;
		.slot-desc-tag {
			margin-right: 14px;
		}

		.slot-desc-num {
			opacity: 0.49;
			// margin-left: 14px;
			color: #414141;
		}
	}

	.btn-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 30px 0 60px;
	}
</style>