TelpoH5FrontendWeb/src/views/psychological-modeling/index.vue

<template>
	<div class="page" v-if="isSHowPage">
         <van-nav-bar title="" :border="true" :left-arrow="true"  @click-left="onNavBack" v-if="showLeftArrow">
             <template #left>
                <van-icon name="arrow-left" size="23" style="padding: 0"/>返回
            </template>
         </van-nav-bar>
		<div class="tip">
			<div class="icon">
				<i class="iconfont icon-tishi"></i>
			</div>
			<div class="info">
				<div class="titie">温馨提醒：</div>
				<div class="content">
                    {{ tips }}
				</div>
			</div>
		</div>
		<div v-if="info">
            <!-- 第一步 -->
			<div class="step" v-show="info.initScaleState !== 1">
				<div class="name">第一步</div>
				<div class="title">
					<div class="text">情绪初始化评估</div>
					<div class="status success" v-if="info.initScaleState === 1">
						<span class="icon"
							><i class="iconfont icon-caozuochenggong"></i
						></span>
						<span>已完成</span>
					</div>
					<div class="status" v-else>待完成</div>
				</div>
				<div class="sub_title">
					完成一次“情绪初始化评估”，有助于建立您的个人情绪模型。
				</div>
                <div class="step_button">
                    <van-button
                        round
                        type="info"
                        style="width: 100%; height: 100%"
                        v-if="info.initScaleState !== 1"
                        @click="toQuestion"
                    >去完成</van-button>
                </div>
			</div>

            <!-- 第二步 -->
            <div class="step" v-show="info.progress !== 1">
				<div class="name">第二步</div>
				<div class="title">
					<div class="text">连续佩戴两小时</div>
					<div class="status success" v-if="info.progress === 1">
						<span class="icon"
							><i class="iconfont icon-caozuochenggong"></i
						></span>
						<span>已完成</span>
					</div>
					<div class="status" v-else>{{ stateText}}</div>
				</div>
				<div class="schedule">
					<van-progress
						:percentage="(info.progress) * 100"
						stroke-width="10px"
						color="#638ee4"
						:show-pivot="true"
					></van-progress>
				</div>
				<div class="sub_title">
					请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。
				</div>
			</div>
            <div class="completed" v-show="info.progress === 1 && info.initScaleState === 1">
                <van-button
                    round
                    type="info"
                    >建模已完成</van-button
                >
            </div>
		</div>

	</div>
</template>

<script>
import axios from 'axios'
import APICore from "@/api/core";
export default {
	name: 'PsychologicalModeling',
	data() {
		return {
            info: null,
            showLeftArrow: null,
            isSHowPage: false,
            fromUrl: '',
		}
    },
    computed: {
        stateText() {
            return this.info.progress > 0 ? '进行中' : '待完成';
        },
        autoJump() {
            return this.$route.query.autoJump === '1';
        },
        tips() {
            return this.info.isFirstModeling === 1
            ? '首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。'
            : '由于您长时间未佩戴手表，需重新建模，请连续佩戴不低于2小时，佩戴完成后，将为您计算抑郁、压力、疲劳的分值。'
        }
    },
	mounted() {
		//页面标题
		window.document.title = '情绪初始化建模'

		//页面传参
        let params = { ...this.$route.query }
		if (params.uid) {
            this.uid = params.uid;
            // 缓存从随手精灵传过来的token
            this.$store.commit('ssjlToken', params.accessToken || '');
            // 缓存从随手精灵传过来的标识
            this.$store.commit('fromSsjl', params.fromSsjl);
            // 是否显示 返回标签
            this.showLeftArrow = this.$store.getters.fromSsjl === 'true';
            this.fromUrl = params.fromUrl;
            console.log("fromUrl", this.fromUrl);
			//初始化
			this.init()
		} else {
			this.$toast('参数错误')
		}
	},
	methods: {
        // 获取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('');
                    }
                })
            })
        },
        // 返回
        onNavBack() {
            let fromSsjl = this.$store.getters.fromSsjl === 'true';
            if(fromSsjl) {
                let baseUrl = this.fromUrl;
                window.location.href = `${baseUrl}/#/device`;
            } else {
                this.$router.go(-1);
            }
        },
		async init() {
            if(!this.$route.query.accessToken) {
                //  如果当前url没有 accessToken， 获取token,并且存储到本地缓存里面
                let authToken = await this.getAuth();
                this.$store.commit('ssjlToken', authToken);
            }
            let ssjlToken = this.$store.getters.ssjlToken;
			let re = await this.api('/api/Question/Progress', {
				method: 'GET',
				sslVerify: false,
				withCredentials: false,
				params: {
					uid: this.uid,
                },
			}, ssjlToken)
			if (re.success) {
                this.info = re.response
				if (re.response && re.response.state === -1) {
					this.$toast('用户不存在或未绑定手表')
				} else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1 && !this.autoJump) {
                    // 2023.6.1 需求变更，建模完成直接跳到心理健康汇总页面
                    this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl || ''}`);
                }
			} else {
				this.$toast(re.msg)
            }
            setTimeout(() => {
                this.isSHowPage = true;
            }, 800)
		},
		toQuestion() {
			this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`)
		},
		api(url, config, token) {
			let baseUrl = process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
			setTimeout(() => {
				this.$toast.loading({
					message: '',
					forbidClick: true,
					duration: 0,
				})
			}, 100)
			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" scoped>
@font-face {
	font-family: 'iconfont'; /* Project id 2652084 */
	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA=');
}

.iconfont {
	font-family: 'iconfont' !important;
	// font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-caozuochenggong:before {
	content: '\e60f';
}

.icon-tishi:before {
	content: '\e654';
}

.page {
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	font-size: 3.6vw;
	text-align: left;
	background: #f4f4f4;
	padding-bottom: 30vw;
	.tip {
		display: flex;
		font-size: 3.3vw;
		padding: 6vw 4vw;
		justify-content: space-between;
		align-items: center;
		background: white;

		.icon {
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;
			color: #ff865a;
			font-size: 6vw;
			border-radius: 50%;
			background: #fff5f1;
		}
		.info {
			width: calc(100% - 50px);
			line-height: 20px;
			text-align: left;
			.titie {
				color: #ff865a;
			}
			.content {
				color: gray;
			}
		}
	}
	.step {
		margin-top: 3vw;
		padding: 4vw 8vw;
		padding-right: 4vw;
		background: white;

		.name {
			display: flex;
			align-items: center;
			font-size: 3.8vw;
			padding-bottom: 2vw;

			&::before {
				content: '';
				display: block;
				width: 1vw;
				height: 1vw;
				border: 2px solid #638ee4;
				border-radius: 50%;
				margin-left: calc(-2vw - 4px);
				margin-right: 1vw;
			}
		}
		.title {
			display: flex;
			justify-content: space-between;
			padding: 3vw 0;

			.status {
				color: #ff865a;
			}
			.success {
				color: #638ee4;

				.icon {
					font-size: 4vw;
					margin-right: 1vw;
				}
			}
		}
		.sub_title {
			padding: 3vw 0;
			color: gray;
        }
        .step_button {
            height: 14vw;
            width: 60vw;
            margin: auto;
            .van-button--info {
                background-color: #638ee4;
                border: 1px solid #638ee4;
            }
        }
	}
    .completed {
        position: relative;
        margin-top: 3vw;
        height: 400px;
            @include center();
            .van-button--info {
                height: 8vh;
                width: 75vw;
                background-color: #638ee4;
                border: 1px solid #638ee4;
            }
        }
	.button {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 15vw;
		width: 75vw;
		height: 14vw;
		margin: auto;

		.van-button--info {
			background-color: #638ee4;
			border: 1px solid #638ee4;
		}
	}
}
</style>