acupuncture/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 class="card-tips-item">
        <span class="lable">您的体重指数（BMI）为：</span>
        <span>{{ form["SCWJ-BMI"] }}</span>
      </div>

      <div class="card-tips-item">
        <span class="lable">您的睡眠效率为：</span>
        <span>{{ form["SCWJ-SMXL"] }}%</span>
      </div>
      <div>
        <span :style="{ color: sleepShow ? 'red' : 'green' }">
          {{
            sleepShow
              ? "您的睡眠筛查结论是欠佳的，"
              : "您的睡眠筛查结论是正常的，"
          }}</span
        ><span :style="{ color: weightShow ? 'red' : 'green' }">{{
          weightShow
            ? `您属于${form["SCWJ-JL"]}型肥胖。`
            : "您的体重筛查结论是正常的。"
        }}</span>
      </div>
      <div v-if="!weightShow">
        您的BMI指数不符合本项目的入组条件，感谢您的关注，请您继续保持健康体重。
      </div>
    </div>
    <div class="card card1" v-if="weightShow">
      请您扫码关注南宁市第七人民医院微信公众号，进行身高、体重等健康指标综合测量。流程为公众号➙体重管理➙减重预约挂号➙体重管理中心➙选择医师和时间➙按时到现场测量。本项目已减免了挂号费，请按预约时间前往南宁市第七人民医院金桥院区2楼体重管理中心（地址：兴宁区金桥路120号）进行全面测量评估（医生有余号的均可点击预约，如当周预约已满，可在下周预约）。咨询电话：0771-2312932、0771-2312933。谢谢您的支持参与！
      <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: {
    getBmiTips(bmi) {
      let weight = this.BMIVerdict[this.form["SCWJ-JL"]]; // 体重结论
      if (weight >= 3) {
        return bmi;
      } else {
        return "您的筛查结论是正常的";
      }
    },
    getSmxlTips(smxl) {
      let sleep = this.form["SCWJ-SMXL"]; // 睡眠效率
      if (sleep < 80) {
        return `${smxl}%`;
      } else {
        return "您的筛查结论是正常的";
      }
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.card-tips-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.div-value {
  color: red;
}
.div-value1 {
  width: 100%;
  text-align: right;
  color: green;
}
.lable {
  text-align: left;
  flex-shrink: 0;
}
.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 {
  font-size: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 26px;
}
.card1 {
}
.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;
} -->