zy-pda/pages/quickCreateOrder/quickCreateOrder.vue

<template>
  <view class="quickCreateOrder">
    <view class="qco_msg">
      支助人员将去<b>7东-泌尿外科I病区</b>执行<b>调药</b>，请选择起点科室；
    </view>
    <!-- 起点科室,终点科室 -->
    <block v-if="qucikCreateOrderType === 'other'">
      <view class="select_block">
        <text class="select_label">起点科室</text>
        <view class="select_placeholder">请选择起点科室<text class="pda pda-xiangyou"></text></view>
      </view>
      <view class="select_block">
        <text class="select_label">终点科室</text>
        <view class="select_placeholder">请选择终点科室<text class="pda pda-xiangyou"></text></view>
      </view>
    </block>
    <!-- 备注 -->
    <view class="remarks">
      <textarea class="remarks_textarea" auto-height :maxlength="100" placeholder-style="color:#999"
        placeholder="备注信息：请您填写微生物和数量" />
    </view>
    <!-- 快捷输入,历史输入 -->
    <view class="quickAndHistory">
      <view class="quickAndHistory_header">
        快捷输入
      </view>
      <view class="quickAndHistory_container">
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
      </view>
    </view>
    <view class="quickAndHistory">
      <view class="quickAndHistory_header">
        历史输入
      </view>
      <view class="quickAndHistory_container">
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
        <view class="quickAndHistory_item">
          我是一只小青蛙
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  export default {
    data() {
      return {
        btns: [{
            name: '回到首页',
            type: 'default',
            click: () => {
              uni.navigateTo({
                url: '/pages/index/index'
              })
            }
          },
          {
            name: '确认',
            type: 'primary',
            click: () => {
              console.log('确认');
            }
          }
        ]
      };
    },
    computed: {
      ...mapState(['qucikCreateOrderType']),
    },
    onLoad() {

    }
  }
</script>

<style lang="scss" scoped>
  .quickCreateOrder {
    margin-bottom: 100rpx;

    .qco_msg {
      min-height: 144rpx;
      padding: 32rpx 160rpx;
      color: #999;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;

      b {
        color: $defaultColor;
        font-weight: normal;
      }
    }

    // 起点科室,终点科室
    .select_block {
      padding: 0 30rpx;
      height: 88rpx;
      font-size: 34rpx;
      border-top: 1px solid #E5E5E5;
      background-color: #fff;
      @include flex(space-between, center);

      .select_label {
        color: #000;
      }

      .select_placeholder {
        color: #888;
        @include flex(flex-start, center);

        .pda-xiangyou {
          font-size: 24rpx;
          margin-left: 30rpx;
        }
      }
    }

    // 备注
    .remarks {
      min-height: 150rpx;
      background-color: #fff;
      border-top: 1px solid #E5E5E5;
      border-bottom: 1px solid #E5E5E5;
      padding: 22rpx 25rpx;

      .remarks_textarea {
        width: 100%;
      }
    }

    // 快捷输入,历史输入
    .quickAndHistory {
      padding: 43rpx 25rpx 0;

      .quickAndHistory_header {
        font-weight: bold;
        font-size: 34rpx;
        padding-bottom: 24rpx;
        color: #333;
      }

      .quickAndHistory_container {
        @include flex;
        flex-wrap: wrap;

        .quickAndHistory_item {
          height: 66rpx;
          font-size: 28rpx;
          border-radius: 33rpx;
          background-color: #fff;
          line-height: 66rpx;
          padding: 0 24rpx;
          color: #666;
          margin-bottom: 11rpx;
          margin-right: 24rpx;
          @include clamp;
        }
      }
    }
  }
</style>