zy-wechat/pages/bloodSelect/bloodSelect.vue

<template>
  <view class="patientInformationList">
    <view class="page_tab">
      <view class="page_tab_bar active">
        <view class="tab_dept">血制品选择页面</view>
      </view>
    </view>
    <view v-if="zxzData.length == 0" class="zwsj">
      <image class="zwsj-img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
      <view class="zwsj-txt">暂无数据</view>
    </view>
    <view v-if="zxzData.length" class="page_items">
      <scroll-view class="page_items_scroll" scroll-y :refresher-enabled="scroll_refresher_enabled"
        :refresher-triggered="triggered" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
        @scrolltolower="scrolltolower" :scroll-top="scroll_top" @refresherabort="refresherabort" @scroll="scroll"
        refresher-background="transport">
        <view class="page_item_wrap" v-for="(item, index) of zxzData" :key="index" @click="itemInfo(item)">
          <view class="page_item">
            <view class="L"></view>
            <view class="R"></view>
            <view class="page_item_top">
              <view class="page_item_top_L">
                <text>{{ item.bloodCode }}<text v-if="item.productCode">({{ item.productCode }})</text></text>
              </view>
              <view class="send_wrap"></view>
            </view>
            <view class="page_item_cont">
              <view class="page_item_conts">
                <view>{{ item.patientName }}({{ item.patientNo }})</view>
              </view>
            </view>
          </view>
          <view class="L-l"></view>
          <view class="R-l"></view>
        </view>
      </scroll-view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content"
      :operate="models1.operate" @ok="ok1" @cancel="cancel1"></showModel>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    deleteIt,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        SMFlag:true,
        hosId: uni.getStorageSync("userData").user.currentHospital.id,
        // 选中的患者项
        currentItem: {},
        // 弹窗model
        models1: {
          disjunctor: false,
        },
        scrollYY: 0, //滚动条滚动的距离
        options: {},
        //列表数据
        zxzData: [],
        //分页页码
        idx: 0,
        // 列表项总数
        totalNum: -1,
        triggered: false, //下拉刷新状态
        freshing: false, //上拉加载开关
        scroll_top: 0, //距离顶部的距离
        scroll_refresher_enabled: true, //是否开启自定义下拉刷新
      };
    },
    methods: {
      ok1() {
        this.models1.disjunctor = false;
        if(this.options.navigateTo === 'scanning_blood_process'){
          uni.showLoading({
            title: "加载中",
            mask: true,
          });
          post("/transflow/scanBind", {type: 'blood',orderId: this.options.orderId, id: this.currentItem.id}).then((ress) => {
            uni.hideLoading();
            if (ress.state == 200 && ress.data.state != 400) {
              //todo
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.options.orderId}&bloodDTO=${encodeURIComponent(JSON.stringify(ress.data.dto))}&scanCount=${ress.data.scanCount}&status=200&scanOrHand=${this.options.scanOrHand}&isSelect=1`,
              });
            } else {
              uni.redirectTo({
                url: `../scanning_blood_process/scanning_blood_process?orderId=${this.options.orderId}&status=500&scanOrHand=${this.options.scanOrHand}&qrcode=${this.options.qrcode}`,
              });
            }
          });
        }else{
          uni.navigateTo({
            url: `../${this.options.navigateTo}/${this.options.navigateTo}?id=${this.currentItem.id}`,
          });
        }
      },
      cancel1() {
        this.models1.disjunctor = false;
      },
      // 进入详情页
      itemInfo(item) {
        // #ifdef H5
        document.body.removeEventListener("touchmove", this.stop, {
          passive: false,
        });
        // #endif
        console.log(item)
        this.currentItem = item;
        this.models1 = {
          disjunctor: true,
          title: "提示",
          content: `您确认是此血袋号【${item.bloodCode}】；产品码【${item.productCode}】；患者【${item.patientName}】吗？`,
          icon: "warn",
          operate: {
            ok: "确认",
            cancel: "取消",
          },
        };
      },
      //血制品列表数据获取
      waitingOrders(idx) {
        if (this.zxzData.length == this.totalNum) {
          uni.showToast({
            icon: "none",
            title: "没有更多数据了！",
          });
          this.freshing = true;
          return;
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        // 请求列表数据
        post("/transflow/scanCheckList", {
          type: 'blood',
          code: this.options.qrcode,
        }).then((res) => {
          uni.hideLoading();
          if (res.state == 200) {
            this.triggered = false;
            this.freshing = true;
            this.totalNum = res.data ? res.data.length : 0;
            if (idx === 0) {
              this.zxzData = res.data;
            } else {
              this.zxzData.push(...res.data);
            }
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      //刷新
      refresherrefresh() {
        if (this.triggered) {
          return;
        }
        console.log("下拉刷新");
        this.triggered = true;
        this.idx = 0;
        this.totalNum = -1;
        this.waitingOrders(0);
      },
      // 下拉刷新复位
      refresherrestore() {
        this.triggered = false;
        console.log("下拉刷新复位");
      },
      //下拉刷新中止
      refresherabort() {
        this.triggered = false;
        console.log("下拉刷新中止");
      },
      //分页,上拉加载
      scrolltolower() {
        if (this.freshing) {
          console.log("上拉加载");
          this.freshing = false;
          // this.waitingOrders(++this.idx);
        }
      },
      // 滚动
      scroll(e) {
        this.scrollYY = e.detail.scrollTop;
        if (e.detail.scrollTop < 20) {
          this.scroll_refresher_enabled = true;
        } else {
          this.scroll_refresher_enabled = false;
        }
      },
      // 阻止浏览器滑动
      stop(e) {
        e.preventDefault();
      },
    },
    onLoad(options) {
      console.log(options);
      this.options = options;
      //滚动条位置设置
      if (options.scrollYY !== undefined) {
        this.scroll_top = options.scrollYY;
      }
      this.waitingOrders(0);
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      this.SMFlag = true;
      // #ifdef H5
      document.body.addEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
    onHide() {
      // #ifdef H5
      document.body.removeEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
  };
</script>
<style lang="less">
  .patientInformationList {
    width: 100%;
    height: 100%;
    position: relative;

    .icon_transport {
      color: #49b856;
      font-size: 50rpx;

      &.colorRed {
        color: red;
        font-size: 40rpx;
      }
    }

    .page_tab {
      width: 100%;
      height: 96rpx;
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;

      .page_tab_bar {
        flex: 1;
        font-size: 36rpx;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2rpx;
          width: 100%;
          background-color: transparent;
        }

        .tab_dept {
          position: relative;

          .changeDept {
            white-space: nowrap;
            margin: 0;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(105%, -50%);
            padding: 0 0.5em;
            line-height: 2;
          }
        }

        &.active {
          color: #49b856;

          &:after {
            background-color: #49b856;
          }
        }
      }
    }

    .zwsj {
      position: absolute;
      left: 50%;
      top: 180rpx;
      transform: translateX(-50%);

      .zwsj-img {
        width: 560rpx;
      }

      .zwsj-txt {
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .page_items {
      // height: calc(100vh - 184rpx);
      height: calc(100vh - 96rpx);
      padding: 0 20rpx;
      padding-top: 96rpx;

      .page_items_scroll {
        height: 100%;

        .page_item_wrap {
          position: relative;
          margin-bottom: 32rpx;

          .page_item {
            margin-bottom: 16rpx;
            // height: 276rpx;
            height: 200rpx;
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;
            border: 2rpx solid #e5e9ed;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .L {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              left: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .R {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              float: right;
              right: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .page_item_top {
              height: 86rpx;
              border-bottom: 2rpx dashed #e5e9ed;
              padding: 0 16rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .send_wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
              }

              .sendBack {
                button {
                  font-size: 28rpx;
                  height: 52rpx;
                  line-height: 52rpx;
                  margin: 0;
                  color: rgb(7, 134, 60);
                }
              }

              .page_item_top_L {
                height: 100%;
                float: left;
                display: flex;
                align-items: center;
                line-height: 88rpx;

                .L_time {
                  color: #6cc076;
                  font-size: 32rpx;
                }
              }

              .page_item_top_R {
                height: 40rpx;
                float: right;
                line-height: 40rpx;
                font-size: 24rpx;
                padding: 0 8rpx;
                background-color: red;
                color: #fff;
              }
            }

            .page_item_cont {
              min-height: 100rpx;
              max-height: 344rpx;
              padding: 0 16rpx;
              text-align: left;
              position: relative;

              .page_item_conts {
                color: rgb(102, 102, 102);
                font-size: 28rpx;
                display: flex;
                align-items: center;
                min-height: 100rpx;
                max-height: 344rpx;

                view {
                  margin-bottom: 10rpx;
                  margin-left: 40rpx;

                  &:first-of-type {
                    margin-left: 0;
                  }
                }

                text {
                  color: #49b856;
                }

                .num {
                  float: right;
                }
              }
            }

            .page_item_btn {
              height: 88rpx;
              background-image: linear-gradient(to right, #72c172, #3bb197);
              border-radius: 8rpx;
              line-height: 88rpx;
              color: #fff;
              font-size: 36rpx;
              font-weight: 700;
              text-align: center;
            }
          }

          .L-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            left: 20rpx;
            top: 72rpx;
            display: none;
          }

          .R-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            right: 20rpx;
            top: 72rpx;
            display: none;
          }
        }
      }
    }
  }
</style>