xybpkmweb/src/components/PatInjectionList.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">注射记录</div>
      <div class="injectionListForm baseInfo">
        <div style="width:90%;font-size:1.2rem;text-align: center;margin:1rem auto;font-weight: bold;">姓名：{{patinfo.name}}</div>
        <div class="listItemContainer">
          <div class="listItem" style="width:70%;background:#6DA2FE;color:#fff;">打卡时间</div>
          <div class="listItem" style="background:#6DA2FE;color:#fff;">使用产品</div>
          <div class="listItem" style="background:#6DA2FE;color:#fff;">使用剂量</div>
        </div>
        <div class="listItemContainer" v-for="(item,index) in recordsList">
          <div class="listItem" style="width:70%;">{{item.zssjt0}}</div>
          <div class="listItem">{{item.mpro}}</div>
          <div class="listItem">{{item.mdose}}</div>
        </div>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage('/patindex')">确定</div>
        <div class="jbbtn" @click="goPage('/patclockin')">开始注射打卡</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Picker,
    Search,
    Button
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      Search,
      Button
    },
    data() {
      return {
        form: {},
        patinfo:{},
        recordsList: []
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      getData() {
        let id = this.$route.query.id
        this.$api.getPatientRecordsList(this.queryForm).then(res => {
          if (!res.data.code) {
            this.recordsList = res.data.data.list
          }
        })
        this.$api.getAccountInfo().then(res => {
          if (!res.data.code) {
            this.patinfo = res.data.data
          }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .injectionListForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    position: relative;
  }

  .footer {
    display: flex;

    .jbbtn {
      width: 42%;
    }
  }

  .listItemContainer {
    display: flex;

    .listItem {
      width: 33%;
      height: 2.8rem;
      line-height: 2.8rem;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      font-size:14px;
    }
  }

</style>