xt_pad/src/pages/main/today/detailsInfo.vue

x<template>
  <div class="info ">
    <h2 class="plateTitle"><span class="line"></span><p>基本信息</p><span class="line"></span> </h2>

    <div class="ui-step clearfix">
      <ul class="ui-step-ul">
        <li v-for="(item, index) in step_data" :key="index" class="ui-step-done" >
          <div class="ui-step-number" :style="item.value==1?'':'background:#fff;border: 1px $main-color solid;'"><i :style="item.value==1?'':'border:0;'" /></div>
          <div class="ui-step-title">{{ item.title }}</div>
        </li>
      </ul>
    </div>

    <ul class="clearfix">
      <li>
        <label>姓名 : </label>
        <span>{{patient.name}}</span>
      </li>
      <li>
        <label>性别 : </label>
        <span>{{patient.gender == 1 ? "男" : "女"}}</span>
      </li>
      <li>
        <label>出生 : </label>
        <span>{{birthday}}</span>
      </li>
      <li>
        <label>透析号 : </label>
        <span>{{patient.dialysis_no}}</span>
      </li>
      <li>
        <label>床位号 : </label>
        <span>{{device_number}}</span>
      </li>
      <li>
        <label>来源 : </label>
        <span>{{source}}</span>
      </li>
      <li>
        <label>住院号 : </label>
        <span>{{patient.admission_number}}</span>
      </li>
      <li>
        <label>透析日期 : </label>
        <span>{{dialysis_date}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { parseTime } from "@/utils";

export default {
  name: "DetailsInfo",
  data() {
    return {
      // patient: {
      //   name: "",
      //   gender: 1,
      //   birthday: "",
      //   dialysis_no: "",
      //   device_number: "",
      //   source: "",
      //   admission_number: "",
      // },
      // device_number: {
      //   number: "",
      // },
      steps: [
        { title: "透析处方" },
        { title: "接诊评估" },
        { title: "透前评估" },
        { title: "临时医嘱" },
        { title: "透析上机" },
        { title: "双人查对" },
        { title: "透析监测" },
        { title: "透析下机" },
        { title: "透后评估" },
        { title: "治疗小结" }
      ]
    };
  },
  props: {
    step_data: {
      type: Array
    },
    patient: {
      type: Object,
      default: function() {
        return {
          name: "",
          gender: 1,
          birthday: "",
          dialysis_no: "",
          // device_number: "",
          source: "",
          admission_number: ""
        };
      }
    },
    device_number: {
      type: String
    }
  },
  computed: {
    dialysis_date:function(){
      return parseTime(this.$route.query.date, "{y}/{m}/{d}");

    },
    birthday: function() {
      return parseTime(this.patient.birthday, "{y}/{m}/{d}");
    },
    source: function() {
      return this.patient.source == 1 ? "门诊" : "住院";
    }
  },
  methods: {
    // setPatientInfo(patient, device_number_name) {
    //   if (patient == null) {
    //     this.patient.name = ""
    //     this.patient.gender = 1
    //     this.patient.birthday = ""
    //     this.patient.dialysis_no = ""
    //     // this.patient.device_number = ""
    //     this.patient.source = ""
    //     this.patient.admission_number = ""
    //   } else {
    //     this.patient.name = patient.name
    //     this.patient.gender = patient.gender
    //     this.patient.birthday = parseTime(patient.birthday, "{y}/{m}/{d}")
    //     this.patient.dialysis_no = patient.dialysis_no
    //     this.device_number.number = device_number_name
    //     this.patient.source = patient.source == 1 ? "门诊" : "住院"
    //     this.patient.admission_number = patient.admission_number
    //   }
    // }
  },
  created() {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.info {
  background: $text-color;
  ul {
    padding: 0.4rem 0.8rem;
    li {
      float: left;
      width: 25%;
      font-size:0.34rem;
      height: 0.53rem;
    }
  }
  .ui-step {
    margin: 0 6px 0.6rem 6px;
    padding: 0.1rem 0 0 0;
    zoom: 1;
    background: #fff;
    .ui-step-tit {
      font-size: 0.24rem;
      text-align: center;
      color: #34495e;
    }
    .ui-step-ul {
      list-style: none;
      .ui-step-done {
        float: left;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        width: 10%;
        &:before,
        &:after {
          position: absolute;
          left: 0;
          top: 0.26rem;
          display: block;
          content: " ";
          width: 50%;
          height: 1px;
          background: #409eff;
          z-index: 1;
        }
        &:after {
          left: 50%;
        }
        &:first-child:before,
        &:last-child::after {
          width: 0;
        }
        .ui-step-title {
          color: #34495e;
          font-size: 0.3rem;
          font-weight: normal;
        }
        .ui-step-number {
          position: relative;
          display: inline-block;
          width: 0.45rem;
          height: 0.45rem;
          margin: 0.05rem 0;
          line-height: 0.22rem;
          background: #409eff;
          color: #fff;
          border-radius: 100%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          z-index: 2;
          border: 1px #409eff solid;
          i {
            position: absolute;
            left: 0.09rem;
            top: 0.10rem;
            width: 0.26rem;
            height: 0.14rem;
            border: 2px #fff solid;
            color: #fff;
            z-index: 9;
            border-top: none;
            border-right: none;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
          }
        }
      }
    }
  }
}
</style>