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 :style="{ color: weightShow ? 'red' : 'green' }">
        {{ weightShow ? "" : "您的筛查结论是正常的" }}
      </div>
      <div class="card-tips-item">
        <span class="lable">您的睡眠效率为：</span>
        <span>{{ form["SCWJ-SMXL"] }}%</span>
      </div>
      <div :style="{ color: sleepShow ? 'red' : 'green' }">
        {{
          sleepShow ? "您的睡眠筛查结论是欠佳的" : "您的睡眠筛查结论是正常的"
        }}
      </div>
    </div>
    <div class="card card1" v-if="weightShow">
      您已成功报名此次减重活动！您属于<span
        :class="`BIMTips${BMIVerdict[form['SCWJ-JL']]}`"
        >{{ form["SCWJ-JL"] || "-" }}</span
      >型肥胖，下一步请扫码关注南宁市第七人民医院微信公众号，预约体重管理中心医师进一步评估。流程为：
      <br />
      公众号→体重管理→减重预约挂号→体重管理中心→选择医师。咨询电话0771-2312932。
      <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;
} -->