xybpkmweb/src/components/PatClockIn.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">注射打卡</div>
      <div class="loginForm">
        <mt-field label="产品选择" v-model="form.mpro" @focus.native.capture="mproFlag=true" placeholder="请选择使用的产品">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="注射频次" v-model="form.mfreq" @focus.native.capture="mfreqFlag=true" placeholder="请选择使用的剂量">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">确定并提交</div>
      </div>
    </div>
    <mt-picker @change="onValuesChange" v-if="mproFlag" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mproFlag=false">确认</div>
    </mt-picker>
    <mt-picker @change="onValuesChange1" v-if="mfreqFlag" :slots="slots1" ref="sexPicker1" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mfreqFlag=false">确认</div>
    </mt-picker>
  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      Picker
    },
    data() {
      return {
        form: {},
        mproFlag: false,
        mfreqFlag: false,
        slots: [{
          flex: 1,
          values: ['人血FVIII', '百因止', '科跃奇', '诺易', '任捷', '重凝贝', '安佳因', '其他'],
          className: 'slot1',
          textAlign: 'center'
        }],
        slots1: [{
          flex: 1,
          values: ['每周2次', '每周3次', '每天1次', '每2天1次', '每3天1次', '不固定/按需治疗'],
          className: 'slot1',
          textAlign: 'center'
        }]
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mpro = picker.getSlotValue(0)
        } else {
          this.form.mpro = "人血FVIII"
        }
      },
      onValuesChange1(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mfreq = picker.getSlotValue(0)
        } else {
          this.form.mfreq = "每周2次"
        }
      },
      submit() {
        if (!this.form.mpro) {
          MessageBox({
            title: '提示',
            message: '请选择产品?'
          })
          return
        }
        if (!this.form.mfreq) {
          MessageBox({
            title: '提示',
            message: '请选择注射频次?'
          })
          return
        }
        let params = this.form
        this.$api.regPatientRecords(params).then(res => {
          if (!res.data.code) {
            this.goPage("/patclockinsuc")
          }
        })
      }
    }
  }

</script>

<style scoped lang="scss">
  .loginForm {
    width: 84%;
    margin: auto;
    margin-top: 4rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    height: 12rem;

    .mint-field {
      border: 1px solid #ccc;
      border-radius: 50px;
      margin-top: 1rem;
    }

    .mint-cell {
      min-height: 2.12rem;
    }
  }

</style>