Pad_New/src/pages/doctorAdvice/newAddDoctoc.vue

<template>
  <div class="page_newAddDoctor">
    <div class="newAddDoctorTitle">
      <i class="iconfont icon-zuojiantou jiantou"></i>
      <span class="titleName">新增医嘱</span>
      <p>保存</p>
    </div>
    <div class="chooseBox">
      <van-cell title="医嘱类型" @click="show = true" is-link :value="type" />
      <van-cell title="开始时间" @click="show1 = true" is-link :value="time" />
    </div>
    <div class="chooseBox">
      <van-cell is-link @click="chooseDoctor">选择医嘱模板</van-cell>
      <van-swipe-cell>
        <van-cell
          :border="false"
          title="那曲肝素钙注射液 单次用量 3075iu 静脉注射▲ 左卡尼汀注射液 单次用量 1g"
        />
        <template slot="right">
          <van-button square type="info" text="添加子药" />
          <van-button square type="danger" text="删除" @click="deteleOne" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="chooseBox">
      <van-cell is-link @click="chooseDoctor">新增医嘱内容</van-cell>
      <van-swipe-cell>
        <van-cell
          :border="false"
          title="那曲肝素钙注射液 单次用量 3075iu 静脉注射▲ 左卡尼汀注射液 单次用量 1g"
        />
        <template slot="right">
          <van-button square type="info" text="添加子药" />
          <van-button square type="danger" text="删除" @click="deteleOne" />
        </template>
      </van-swipe-cell>
    </div>
    <div>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="show1 = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "",
      show: false,
      show1: false,
      columns: [
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州",
        "杭州",
        "宁波",
        "温州",
        "嘉兴",
        "湖州"
      ],
      time: "",
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    };
  },
  methods: {
    onCancel() {
      this.show = false;
    },
    onConfirm(value) {
      this.type = value;
      this.show = false;
    },
    getstartTime(value) {
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }

      this.time = `${year}-${month}-${day}`;
      this.show1 = false;
    },
    deteleOne() {
      this.$dialog
        .confirm({
          message: "是否删除该条医嘱"
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    chooseDoctor() {}
  }
};
</script>

<style lang="scss" scoped>
.page_newAddDoctor {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  .newAddDoctorTitle {
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.125rem;
    background: #fff;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 1.25rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .chooseBox {
    margin-top: 1rem;
  }
  .van-button {
    height: 100%;
  }
  .van-swipe-cell__wrapper {
    transform: translate3d(-152.45px, 0px, 0px);
  }
}
</style>