TelpoH5FrontendWeb/src/views/psychological-scale/detail.vue

<template>
	<div
		class="psychologicalScale-detail"
		:style="`padding-top: ${showLeftArrow ? '10vw' : '0'};`"
	>
		<van-nav-bar
			title="测评结果"
			:border="true"
			:left-arrow="true"
			@click-left="onNavBack"
			v-if="showLeftArrow"
			style="position: fixed; left: 0; top: 0; width: 100vw"
		>
			<template #left>
				<van-icon name="arrow-left" size="23" style="padding: 0" />返回
			</template>
		</van-nav-bar>
		<div class="content">
			<div class="result-title">您的测评结果为:</div>
			<div class="result" :style="{ color: levels[`${resultLevel}`].color }">
				{{ levels[`${resultLevel}`].title }}
			</div>
			<div class="result-label">
				<span>您的焦虑得分:</span>
				<div
					class="result-color"
					:style="{ background: levels[`${resultLevel}`].color }"
				></div>
			</div>
			<div class="result-details">
				<div
					class="result-details-item"
					v-for="(item, index) in showLevels"
					:key="index"
					:style="{ width: `${100 / showLevels.length}%` }"
				>
					<div
						class="result-details-item-icon"
						:style="{ background: item.color }"
					></div>
					<div
						class="result-details-item-title"
						:style="{
							color: resultLevel == index + 1 ? 'black' : 'gray',
						}"
					>
						{{ item.title }}
					</div>
				</div>
			</div>
			<div class="result-label">总体评分:</div>
			<div class="result-content">{{ result.Explain }}</div>
			<div class="result-label">结果解释:</div>
			<div class="result-content">{{ result.Advice }}</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
import APICore from '@/api/core'

export default {
	name: 'PsychologicalScaleDetail',
	data() {
		return {
			id: '',
			uid: '',
			showLeftArrow: false,
			fromSsjl: this.$store.getters.fromSsjl,
			result: {
				Advice: '',
				Explain: '',
				ScaleName: '',
				Score: 15,
				Summary: '',
				SummaryLevel: '-1',
				Time: '',
			},
			levels: [
				{
					show: false,
					color: '#dfe4ea',
					title: '暂无测评结果',
				},
				{
					color: '#60B977',
					title: '没有抑郁症状',
				},
				{
					color: '#FFB600',
					title: '轻度抑郁',
				},
				{
					color: '#CC0003',
					title: '重度抑郁',
				},
			],
		}
	},
	computed: {
		resultLevel() {
			return parseInt(this.result.SummaryLevel) + 1
		},
		showLevels() {
			return this.levels.filter((item) => {
				if (!(item.show === false)) {
					return true
				}
			})
		},
	},
	watch: {},
	mounted() {
		//页面标题
		window.document.title = '测评结果'

		//页面传参
		let params = { ...this.$route.query }

		if (params.id && params.uid) {
			this.id = params.id
			this.uid = params.uid

			// 缓存从随手精灵传过来的token
			this.$store.commit('ssjlToken', params.accessToken || '')
			if (params.appType) {
				this.$store.commit('appType', params.appType)
			}
			// 缓存从随手精灵传过来的标识
			if (params.fromSsjl) {
				this.$store.commit('fromSsjl', params.fromSsjl)
			}
			// 是否显示 返回标签
			if (params.showLeftArrow) {
				this.showLeftArrow = true
			}
			this.fromUrl = params.fromUrl
			console.log('fromUrl', this.fromUrl)

			//初始化
			this.init()
		} else {
			this.$toast('参数错误')
		}
	},
	methods: {
		async init() {
			if (!this.$route.query.accessToken) {
				//  如果当前url没有 accessToken， 获取token,并且存储到本地缓存里面
				let authToken = await this.getAuth()
				this.$store.commit('ssjlToken', authToken)
			}

			this.$toast.loading({
				message: '',
				forbidClick: true,
				duration: 0,
			})

			let re = await this.api(
				'/api/Question/GetScaleFillingRecord',
				{
					method: 'GET',
					sslVerify: false,
					withCredentials: false,
					params: {
						uid: this.uid,
					},
				},
				this.$store.getters.ssjlToken
			)
			if (re.success) {
				if (re.response && re.response.length) {
					re.response.forEach((item) => {
						if (item.Id === this.id) {
							this.result = item
						}
					})
				} else {
					// this.$toast('暂无测评结果')
				}
			} else {
				this.$toast(re.msg)
			}
		},
		onNavBack() {
			let fromSsjl = this.$store.getters.fromSsjl === 'true'
			if (fromSsjl) {
				let baseUrl = this.fromUrl
				window.location.href = `${baseUrl}/#/${
					this.$route.query.fromMenu || 'device'
				}`
			} else {
				window.history.go(-1)
			}
		},
		// 获取b端token
		getAuth() {
			let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650'
			let that = this
			return new Promise((resolve, reject) => {
				APICore.getAuth({ manufactorId: manufactorId }).then((res) => {
					let data = res.data
					if (data.code === 0) {
						resolve(res.data.data)
					} else {
						that.$toast.fail(`${data.message}`)
						reject('')
					}
				})
			})
		},
		api(url, config, token) {
			setTimeout(() => {
				this.$toast.loading({
					message: '',
					forbidClick: true,
					duration: 1500,
				})
			}, 100)
			let baseUrl =
				process.env.NODE_ENV === 'production'
					? 'https://dbmq.rzliot.com/auth_heart'
					: 'https://dbmq.rzliot.com/heart'
			return new Promise((res) => {
				axios({
					url: `${baseUrl}${url}`,
					...config,
					// 增加请求头部 token
					headers: {
						AccessToken: token,
					},
				})
					.then((re) => {
						if (re) {
							if (re.data) {
								console.log(re.data)
								res(re.data)
								this.$toast.clear()
								return
							}
							this.$toast(`信息获取失败-${re.status}`)
							res(true)
							this.$toast.clear()
							return
						}
						this.$toast(`信息获取失败-${url}`)
						res(true)
						this.$toast.clear()
					})
					.catch((e) => {
						this.$toast(`信息获取失败-${url}`)
						res(true)
						this.$toast.clear()
						console.log(e)
					})
			})
		},
	},
}
</script>

<style lang="scss">
.psychologicalScale-detail {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;
	font-size: 3.6vw;
	text-align: left;
	background: #f4f4f4;
	padding-bottom: 8vw;

	.van-nav-bar__content {
		height: 10vw !important;

		.van-nav-bar__left,
		.van-nav-bar__title {
			font-size: 4vw !important;
			line-height: initial !important;

			.van-icon-arrow-left {
				font-size: 4vw !important;
			}
		}
	}

	.content {
		padding: 4vw;

		.result-title {
			font-size: 4vw;
			text-align: center;
		}
		.result {
			font-size: 6vw;
			text-align: center;
			font-weight: bold;
			margin-top: 4vw;
		}
		.result-label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 4.5vw;
			font-weight: bold;
			margin-top: 6vw;
		}
		.result-color {
			width: 5.5vw;
			height: 5.5vw;
			border-radius: 1vw;
		}
		.result-details {
			display: flex;
			margin-top: 4vw;

			.result-details-item {
				.result-details-item-icon {
					width: 100%;
					height: 5.5vw;
				}
				.result-details-item-title {
					font-weight: bold;
					text-align: center;
					margin-top: 2vw;
				}
			}
		}
		.result-content {
			font-size: 3.6vw;
			margin-top: 2vw;
		}
	}
}
</style>