zy-wechat/pages/medicalWaste/medicalWasteDetail/medicalWasteDetail.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_text">
        医废详情
      </view>
    </view>

    <scroll-view scroll-y class="Scanning_cont">
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_head">
          <view class="circle"></view>
          <view class="title">详情内容</view>
        </view>
        <view class="Scanning_cont_list_body">
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">医废类型：</view>
            <view class="Scanning_cont_list_body_desc">{{info.clinicalWasteType ? info.clinicalWasteType.typeName : ''}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">医废序号：</view>
            <view class="Scanning_cont_list_body_desc">{{info.clinicalWasteSn}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">医废重量：</view>
            <view class="Scanning_cont_list_body_desc">{{info.weight}}kg</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">申请科室：</view>
            <view class="Scanning_cont_list_body_desc">{{info.dept ? info.dept.dept : ''}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">收取人：</view>
            <view class="Scanning_cont_list_body_desc">{{info.receivor ? info.receivor.name : ''}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">收取时间：</view>
            <view class="Scanning_cont_list_body_desc">{{info.receiveTime | formatDate('yyyy-MM-dd hh:mm')}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">交接人：</view>
            <view class="Scanning_cont_list_body_desc">{{info.handover ? info.handover.name : ''}}</view>
          </view>
          <view class="Scanning_cont_list_body_item">
            <view class="Scanning_cont_list_body_title">备注：</view>
            <view class="Scanning_cont_list_body_desc">{{info.remark}}</view>
          </view>
        </view>
      </view>
      <view class="Scanning_cont_list">
        <view class="Scanning_cont_list_head">
          <view class="circle"></view>
          <view class="title">操作日志</view>
        </view>
        <view class="Scanning_cont_list_log">
          <view class="Scanning_cont_list_log_item" v-for="(item, index) in info.wasteLogList" :key="index">
            <view class="Scanning_cont_list_log_title">
              <view class="statusText">{{item.operationType ? item.operationType.name : ''}}</view>
              <view class="statusIcon newicon newicon-icon_zhengzaijinx"></view>
              <view class="statusDate">{{item.operationTime | formatDate('MM-dd hh:mm')}}</view>
              <view class="statusUser">{{item.operatorName}}</view>
            </view>
            <view class="Scanning_cont_list_log_desc" :class="{noBorder: index == info.wasteLogList.length - 1}" v-if="item.operationType.value == 5 && item.correctWeight && item.correctWeight">矫正前为{{item.correctWeight}}kg，矫正后为{{item.lastWeight}}kg</view>
            <view class="Scanning_cont_list_log_desc" :class="{noBorder: index == info.wasteLogList.length - 1}" v-else-if="item.handoverName">交接人：{{item.handoverName}}</view>
            <view class="Scanning_cont_list_log_desc" :class="{noBorder: index == info.wasteLogList.length - 1}" v-else></view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="foot_btn">
      <view class="btn" @click="goToList()"> 知道了 </view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../../http/http.js";
  export default {
    data() {
      return {
        info: {},
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      goToList(){
        uni.navigateTo({
          url: `/pages/receiptpage/receiptpage`,
        });
      },
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/medicalWaste/details", {
          code: this.queryObj.qrcode,
          hosId: this.hosId,
        }).then((result) => {
          uni.hideLoading();
          if (result.status == 200) {
            let info = result.wasteDetails || {};
            info.wasteLogList = info.wasteLogList || [];
            this.info = info;
          } else {
            uni.showToast({
              icon: "none",
              title: result.msg || "接口获取数据失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      this.getInfo();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .Scanning_Result {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #F9FAFC;
    .yf /deep/ .uni-input-input[disabled]{
      text-overflow: ellipsis;
    }
    .Scanning_top {
      flex-shrink: 0;
      .Scanning_top_icon {
        padding-top: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .cubeic-ok {
          font-size: 100rpx;
          color: #35b34a;
        }

        .text1 {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .Scanning_top_text{
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        padding: 26rpx 0 38rpx 0;
      }
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      margin: 0 20rpx;
      padding: 14rpx;
      background-color: #fff;
      border: 1rpx solid #CBCBCB;
      border-radius: 8rpx;
      font-size: 28rpx;
      width: calc(100% - 20rpx);
      .Scanning_cont_list{
        font-weight: bold;
        padding: 0 6rpx;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        .Scanning_cont_list_head{
          height: 65rpx;
          display: flex;
          align-items: center;
          border-bottom: 1rpx dashed #CCCCCC;
         .circle{
           width: 22rpx;
           height: 22rpx;
           border-radius: 50%;
           background-color: #49B856;
           margin-right: 7rpx;
         }
         .title{
           font-size: 28rpx;
           font-weight: bold;
         }
        }
        .Scanning_cont_list_body{
          padding: 0 46rpx;
          font-size: 28rpx;
          .Scanning_cont_list_body_item{
            margin-top: 20rpx;
            overflow: hidden;
            display: flex;
            .Scanning_cont_list_body_title{
              float: left;
            }
            .Scanning_cont_list_body_desc{
              float: left;
              flex: 1;
            }
          }
        }
        .Scanning_cont_list_log{
          padding: 25rpx 86rpx;
          font-size: 28rpx;
          .Scanning_cont_list_log_item{
            .Scanning_cont_list_log_title{
              display: flex;
              line-height: 1;
              .statusText{
                width: 2em;
                position: absolute;
              }
              .statusIcon{
                margin-left: 78rpx;
                margin-right: 7rpx;
                color: #35B24A;
              }
              .statusDate{
                margin-right: 20rpx;
                color: #A5A5A5;
              }
              .statusUser{
                color: #A5A5A5;
              }
            }
            .Scanning_cont_list_log_desc{
              padding: 10rpx 20rpx;
              height: 85rpx;
              border-left: 2rpx solid #35B24A;
              margin-left: 92rpx;
              &.noBorder{
                border-left: none;
              }
            }
          }
        }
      }
    }

    .foot_btn {
      margin: 57rpx 20rpx 10rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;

      .btn {
        height: 88rpx;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 32rpx;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 34rpx;
        font-weight: bold;
        &:last-of-type{
          margin-right: 0;
        }
      }
    }
  }
</style>