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步,建立情绪模型。完成初始化建模后,将为您计算${this.$replaceAll('抑郁', '抑郁', '焦虑')}、压力、疲劳分值。`
        : `由于您长时间未佩戴手表，需重新建模，请连续佩戴不低于2小时，佩戴完成后，将为您计算${this.$replaceAll('抑郁', '抑郁', '焦虑')}、压力、疲劳的分值。`;
    },
  },
  mounted() {
    //页面标题
    window.document.title = "情绪初始化建模";

    //页面传参
    let params = { ...this.$route.query };
    if (params.uid) {
      this.uid = params.uid;
      // 缓存从随手精灵传过来的token
      this.$store.commit("ssjlToken", params.accessToken || "");
      if (params.appType) {
        this.$store.commit("appType", params.appType);
      }
      // 缓存从随手精灵传过来的标识
      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}/#/${this.$route.query.fromMenu || "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;
        setTimeout(() => {
          this.isSHowPage = true;
        }, 800);
        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 || ""
            }&fromMenu=${this.showLeftArrow ? "device" : ""}`
          );
        }
      } else {
        this.$toast(re.msg);
      }
    },
    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>