micro_vue/src/scrm_pages/doctorIntroduction/doctorIntroduction.vue

<template>
  <div class="page_doctorIntroduction">
    <div>
      <div class="contentOne">
        <div class="img">
          <img :src="doctors.dochead" style="width:100%;height:100%" alt />
        </div>
        <div class="detail">
          <p class="detailTitle">{{doctors.doc_name}}</p>
          <p class="detailMessage">{{doctors.doc_postion}}</p>
        </div>
      </div>
      <!-- <div class="good">
        <div class="common_title">
          <div class="one"></div>
          <div class="dynamicTxt">医生擅长</div>
        </div>
        <div class="goodtxt">擅长甲状腺、胆结石</div>
      </div>-->
      <div class="good">
        <div class="common_title">
          <div class="one"></div>
          <div class="dynamicTxt">医生简介</div>
        </div>
        <div class="goodtxt" v-html="doctors.docintroduction"></div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { singleDoctorInfo } from "@/api/micro/micro";
export default {
  data() {
    return {
      doctors: []
    };
  },
  methods: {
    singleDoctorInfo(id, orgid) {
      singleDoctorInfo(id, orgid).then(response => {
        if (response.data.state == 1) {
          var editdoctor = response.data.data.editdoctor;
          if (editdoctor.doc_postion == 1) {
            editdoctor.doc_postion = "医士";
          }
          if (editdoctor.doc_postion == 2) {
            editdoctor.doc_postion = "医师";
          }
          if (editdoctor.doc_postion == 3) {
            editdoctor.doc_postion = "住院医师";
          }
          if (editdoctor.doc_postion == 4) {
            editdoctor.doc_postion = "主治医师";
          }
          if (editdoctor.doc_postion == 5) {
            editdoctor.doc_postion = "副主任医师";
          }
          if (editdoctor.doc_postion == 6) {
            editdoctor.doc_postion = "主任医师";
          }
          if (editdoctor.doc_postion == 7) {
            editdoctor.doc_postion = "护士";
          }
          if (editdoctor.doc_postion == 8) {
            editdoctor.doc_postion = "护师";
          }
          if (editdoctor.doc_postion == 9) {
            editdoctor.doc_postion = "主管护师";
          }
          if (editdoctor.doc_postion == 10) {
            editdoctor.doc_postion = "副主任护师";
          }
          if (editdoctor.doc_postion == 11) {
            editdoctor.doc_postion = "主任护师";
          }

          console.log("editdoctor", editdoctor);
          this.doctors = editdoctor;
        }
      });

      //      { index: 1, name: '医士' },
      // { index: 2, name: '医师' },
      // { index: 3, name: '住院医师' },
      // { index: 4, name: '主治医师' },
      // { index: 5, name: '副主任医师' },
      // { index: 6, name: '主任医师' },
      // { index: 7, name: '护士' },
      // { index: 8, name: '护师' },
      // { index: 9, name: '主管护师' },
      // { index: 10, name: '副主任护师' },
      // { index: 11, name: '主任护师' },
    }
  },
  created() {
    const id = this.$route.query.id;
    const orgid = this.$route.query.orgid;
    console.log("id是多少", id);
    console.log("orgid是多少", orgid);
    this.singleDoctorInfo(id, orgid);
  }
};
</script>
<style lang="scss" scoped>
.page_doctorIntroduction {
  overflow: hidden;
  height: 100%;
}
.contentOne {
  margin: auto;
  margin-top: 1.125rem;
  width: 20.875rem;
  height: 7.4375rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-top: 1.125rem;
  box-sizing: border-box;
  .img {
    float: left;
    width: 5rem;
    height: 5rem;
    border-radius: 0.3125rem;
    img {
      border-radius: 0.3125rem;
    }
  }
  .detail {
    float: left;
    margin-left: 0.8125rem;
    width: 13.125rem;
    .detailTitle {
      margin-top: 0.5rem;
      width: 12.6875rem;
      height: 1.0625rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: rgba(7, 18, 40, 1);
      span {
        font-size: 0.875rem;
        color: rgba(155, 155, 155, 1);
        line-height: 1.125rem;
        margin-left: 1.25rem;
        font-weight: 400;
      }
    }
    .detailMessage {
      font-size: 0.875rem;
      color: rgba(155, 155, 155, 1);
      line-height: 1.5rem;
      font-weight: 400;
      margin-top: 0.875rem;
      height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      // border: solid 1px red;
    }
  }
}
.good {
  margin-left: 1.25rem;
  margin-top: 2.1875rem;
}
.common_title {
  width: 20.9375rem;
  height: 1.125rem;
  line-height: 1.125rem;
}
.dynamicTxt {
  float: left;
  width: 4.5rem;
  height: 1.125rem;
  line-height: 1.125rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
}
.one {
  margin-top: 0.125rem;
  margin-right: 0.375rem;
  float: left;
  width: 0.125rem;
  height: 0.875rem;
  background: linear-gradient(
    0deg,
    rgba(114, 182, 253, 1),
    rgba(52, 119, 254, 1)
  );
  box-shadow: 0px 3px 12px 0px rgba(60, 127, 254, 0.2);
  border-radius: 3px;
}
.goodtxt {
  margin: 1rem 0 2.25rem 0.875rem;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(68, 75, 92, 1);
  line-height: 1.5rem;
}
</style>