datang-meeting/acupuncture-前台/src/views/screening/h5Result.vue

<template>
  <div class="app-container" v-loading="loading">
    <div class="hospital">{{ tenantName || "-" }}</div>
    <div class="card">
      <div class="card-title">筛查结论</div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
        "
      >
        <span>您的体重指数（BMI）为：</span>
        <span>{{ form["SCWJ-BMI"] || "-" }}</span>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 6px;
        "
      >
        <span>您的睡眠效率为：</span>
        <span>{{ form["SCWJ-SMXL"] || "-" }}%</span>
      </div>
    </div>
    <div class="card" v-if="weightShow || sleepShow">
      <span v-if="weightShow">
        属于<span :class="`BIMTips${BMIVerdict[form['SCWJ-JL']]}`">{{
          form["SCWJ-JL"] || "-"
        }}</span
        >型肥胖，</span
      ><span v-if="sleepShow"
        >睡眠效率低于<span class="BIMTips5">80%</span>，</span
      >建议扫码关注医院公众号，预约体重管理中心医师进一步评估。
      <div>
        <img src="./gzh.jpg" style="max-width: 100%" />
      </div>
    </div>
    <div class="hospital1">{{ tenantName || "-" }}</div>
  </div>
</template>

<script>
export default {
  name: "Notice",
  data() {
    return {
      tenantName: "",
      BMIVerdict: {
        体重过轻: "1",
        正常: "2",
        超重: "3",
        肥胖: "4",
        中度肥胖: "5",
        重度肥胖: "5",
      },
      // 表单参数
      form: {
        "SCWJ-DW": "",
        "SCWJ-NAME": "",
        "SCWJ-SEX": "男",
        "SCWJ-BIRTH": "",
        "SCWJ-AGE": "",
        "SCWJ-PHONE": "",
        "SCWJ-HEIGHT": "",
        "SCWJ-WEIGHT": "",
        "SCWJ-BMI": "",
        "SCWJ-JL": "",
        "SCWJ-ZLFS": [],
        "SCWJ-SCSJ": "22:00", // 上床睡觉
        "SCWJ-RSSJ": "22:30", // 入睡时间
        "SCWJ-SXSJ": "06:30", // 睡醒时间
        "SCWJ-QCSJ": "07:00", // 起床时间
        "SCWJ-SMXL": "", // 睡眠效率
      },
      loading: false,
      weightShow: false, // 体重是否属于肥胖
      sleepShow: false, // 睡眠效率否低于80%
    };
  },
  created() {
    this.tenantName = this.$route.query.tenantName;
    this.form = JSON.parse(this.$route.query.data);

    let weight = this.BMIVerdict[this.form["SCWJ-JL"]]; // 体重结论
    let sleep = this.form["SCWJ-SMXL"]; // 睡眠效率
    // 体重是否属于肥胖
    if (weight >= 3) {
      this.weightShow = true;
    }
    // 睡眠效率否低于80%
    if (sleep < 80) {
      this.sleepShow = true;
    }
  },
  methods: {},
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.hospital1 {
  text-align: center;
  font-size: 14px;
  color: #999;
}
.hospital {
  background: #fff;
  font-size: 20px;
  color: #70483e;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 10px;
  border-radius: 6px;
  text-align: center;
}
.BIMTips1 {
  color: #cccccc;
}
.BIMTips2 {
  color: #66cc00;
}
.BIMTips3 {
  color: #c3c300;
}
.BIMTips4 {
  color: #ff9900;
}
.BIMTips5 {
  color: red;
}
.item-radio {
  display: block;
  margin-bottom: 10px;
}
.item-title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 26px;
}
.item-radio-box {
  margin: 16px 0px;
}

.card {
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 14px;
}

.card-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.card-tips {
  font-size: 14px;
  color: #999999;
}
/*  */
.app-container {
  /* background: linear-gradient(to bottom, #70483e, #f7f8fa); */
  background: #70483e;
  min-height: 100vh;
}
</style>
<!-- >>> .el-input__inner {
  padding: 0 15px !important;
} -->