zy-pda/pages/patientBuild/patientBuild.vue

<template>
  <view class="patientBuild">
    <view class="qco_msg" v-html="patientMsg"></view>
    <view class="select_block_wrap">
      <view class="uni-list">
        <checkbox-group @change="checkboxChange">
          <label class="select_block" v-for="good in goods" :key="good.value">
            <checkbox color="#09BB07" :value="good.value" :checked="good.checked" />
            <view>{{good.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
    <!-- 加急 -->
    <view class="remarks" v-if="patientTaskType.allowUrgent == 1">
      <view class="remarks_nav">
        是否加急
      </view>
      <view class="remarks_btn">
        <text class="remarks_btn_name">加急</text>
        <switch class="remarks_btn_value" color="#09BB07" @change="switchChange" />
      </view>
      <textarea v-if="isUrgent" class="remarks_textarea" auto-height :maxlength="100" placeholder-style="color:#999;"
        placeholder="请填写加急原因" v-model.trim="urgentRemark" />
      <view class="remarks_tips"
        v-if="(patientTaskType.associationType.value === ASSOCIATION_TYPES['患者其他服务业务'] && patientTaskType.appointmentOtherSwitch == 1) ||(patientTaskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务'] && patientTaskType.appointmentSwitch == 1)">
        <view class="tips">系统支持提前预约送检服务，您是否需要！</view>
        <view class="tips">我不需要预约，希望送检人员立即上门，点击立即建单；</view>
        <view class="tips">我需要提前预约送检服务，点击预约建单；</view>
      </view>
    </view>
    <!-- 底部 -->
    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import cloneDeep from 'lodash/cloneDeep';
  import {
    mapState,
  } from "vuex";
  import {
    ASSOCIATION_TYPES
  } from "../../utils/enum.association_types.js";
  export default {
    data() {
      return {
        ASSOCIATION_TYPES,
        // 是否加急
        isUrgent: false,
        // 设备
        goods: [],
        //患者建单信息展示
        patientMsg: '',
        // 传递过来的参数
        queryParams: {},
        // 加急原因
        urgentRemark: "",
        //底部按钮
        btns: [],
      };
    },
    computed: {
      ...mapState('other', [
        'patientBuildTrip',
        'patientTaskType',
        'selectedPatient'
      ]),
    },
    methods: {
      // 切换是否加急
      switchChange(e) {
        this.isUrgent = e.detail.value;
        this.urgentRemark = '';
      },
      // 选择设备
      checkboxChange: function(e) {
        console.log(e, this.goods);
        var goods = this.goods,
          values = e.detail.value;
        for (var i = 0, lenI = goods.length; i < lenI; ++i) {
          const item = goods[i]
          if (values.includes(item.value)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
      },
      // 立即建单
      buildOrder() {
        console.log(this.urgentRemark)
        console.log(this.isUrgent)
        console.log(this.goods)
        // 加急原因非空
        if (this.isUrgent && !this.urgentRemark) {
          this.$refs.seiminModel.show({
            skin: 'toast',
            icon: 'warn',
            content: '请填写加急原因',
          })
          return;
        }
      }
    },
    onLoad(queryParams) {
      this.patientMsg = `患者<b class="green">${this.selectedPatient.patientName}</b>即将出科，请您选择送检人员需携带哪些设备！`;
      let goods = this.patientBuildTrip.goods || [];
      this.goods = goods;
      this.queryParams = queryParams;
      if (
        (this.patientTaskType.associationType.value === ASSOCIATION_TYPES['患者其他服务业务'] && this.patientTaskType
          .appointmentOtherSwitch == 1) ||
        (this.patientTaskType.associationType.value === ASSOCIATION_TYPES['患者陪检业务'] && this.patientTaskType
          .appointmentSwitch == 1)
      ) {
        //患者陪检业务或患者其他服务业务，并且预约建单开关打开的情况下
        this.btns = [{
          name: "上一步",
          type: "primary",
          click: () => {
            uni.navigateBack();
          },
        }, {
          name: "预约建单",
          type: "primary",
          click: () => {
            alert('预约建单');
          },
        }, {
          name: "立即建单",
          type: "primary",
          click: () => {
            this.buildOrder();
          },
        }, ];
      } else {
        this.btns = [{
          name: "上一步",
          type: "primary",
          click: () => {
            uni.navigateBack();
          },
        }, {
          name: "立即建单",
          type: "primary",
          click: () => {
            this.buildOrder();
          },
        }, ];
      }
    },
  };
</script>

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

    ::v-deep .uni-checkbox-input {
      border-radius: 50%;
    }

    ::v-deep .uni-checkbox-input-checked {
      background-color: #09BB07;

      &:before {
        color: #fff;
      }
    }

    ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
      border-color: #09BB07;
    }

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

    .select_block_wrap {
      @include border(top);

      // 设备
      .select_block {
        padding: 0 30rpx;
        height: 88rpx;
        font-size: 34rpx;
        background-color: #fff;
        position: relative;
        @include flex(flex-start, center);

        &:last-of-type {
          &::after {
            opacity: 0;
          }
        }

        &::after {
          content: '';
          height: 1px;
          width: calc(100vw - 30rpx);
          background-color: #E5E5E5;
          position: absolute;
          right: 0;
          bottom: 0;
        }

        .select_label {
          color: #000;
        }
      }
    }

    // 备注
    .remarks {
      min-height: 150rpx;
      background-color: #f9fafb;
      @include border(top);

      .remarks_nav {
        padding: 0 25rpx;
        height: 66rpx;
        font-size: 28rpx;
        color: #666;
        @include flex(flex-start, center);
        @include border(bottom);
      }

      .remarks_btn {
        padding: 0 25rpx;
        font-size: 34rpx;
        height: 88rpx;
        background-color: #fff;
        @include border(bottom);
        @include flex(space-between, center);
      }

      .remarks_textarea {
        padding: 22rpx 25rpx;
        width: 100%;
        min-height: 150rpx;
        background-color: #fff;
        @include border(bottom);
      }

      .remarks_tips {
        padding: 32rpx 25rpx;
        color: #999;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
</style>