zy-wechat/pages/newDrug/detail.vue

<template>
  <view class="Scanning_Result">
    <view class="Scanning_top">
      <view class="Scanning_top_icon">{{drugsBag.packid}}</view>
    </view>
    <view class="Scanning_top_tips">
      <view class="info">申请：{{drugsBag.target ? drugsBag.target.dept : ''}}</view>
      <view class="info">发药：{{drugsBag.launch ? drugsBag.launch.dept : ''}}</view>
    </view>

    <view class="Scanning_cont">
      <view class="column head">
				<!-- <view class="value2" v-if="queryObj.showPatientInfo==1">患者信息</view> -->
        <view class="value1">药品名称+规格<text class="red">（{{drugsList.length}}）</text></view>
        <view class="value2">数量</view>
      </view>
      <scroll-view scroll-y class="scrollContent">
        <view class="column" v-for="item in drugsList" :key="item.id">
					<!-- <view class="value2" v-if="queryObj.showPatientInfo==1">
					  <view>
							{{item.patientName }}<text v-if="item.bedNum">({{item.bedNum}})</text>
							<view>{{item.residenceNo ? item.residenceNo : ''}}</view>
						</view>
					</view> -->
          <view class="value1" @click="viewName(item)">{{item.drugsInfo}} {{item.model}}</view>
          <view class="value2">{{item.drugsNum}}</view>
        </view>
      </scroll-view>
    </view>

    <view class="foot_btn_spe">
      <view class="column">
        <view class="btn" @click="goBack()">返回</view>
      </view>
    </view>
		
		<!-- 查看患者 -->
		<view class="showModel" v-if="infoModel">
			<view class="showModel__wrap">
				<view class="showModel__header">
				  患者信息
				</view>
				<view class="content">
					<view>{{itemData.patientNames}}</view>
				</view>
				<view class="bottom">
					<button class="bottom-btn confirm-btn" @click="infoModel = false">知道了</button>
				</view>
			</view>
		</view>
		
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "@/http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync('userData').user.currentHospital.id,
        drugsList: [], //药品列表
        queryObj: {}, //路由传递过来的数据
        drugsBag: {}, //药包信息
        config: {}, //配置
				infoModel:false,
				itemData:{}
      };
    },
    methods: {
			// 查看患者
			viewName(item){
				console.log(222,this.queryObj)
				if(this.queryObj.showPatientInfo==1){
					this.itemData = item
					this.infoModel = true
				}
			},
      // 返回
      goBack(){
        uni.navigateBack()
      },
      // 根据药包id查询药品
      getDrugsByDrugsBugId(drugsBagId){
        post(`/transflow/extra`, {type: this.queryObj.drugsBagType, extraType: 'drugsInfo', drugsBagId}).then(res => {
          uni.hideLoading();
          if(res.state == 200){
            if(res.data){
              this.drugsList = res.data.drugsList || [];
              this.drugsBag = res.data.drugsBag || {};
            }
          }else{
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        })
      },
      //获取页面信息
      getInfo(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });

        if(this.queryObj.drugsBagId){
          // 根据药包id查询药品
          this.getDrugsByDrugsBugId(this.queryObj.drugsBagId);
        }else if(this.queryObj.orderId){
          // 根据工单id查询药包,此时必是一单一码，即只有一个药包码
          post(`/transflow/extra`, {type: this.queryObj.drugsBagType, extraType: 'orderInfo', orderId: +this.queryObj.orderId}).then(res => {
            if(res.state == 200){
              if(res.data){
                let drugsBagList = res.data.drugsBagList || [];
                let drugsBag = drugsBagList[0] || {};
                if(drugsBag.id){
                  this.getDrugsByDrugsBugId(drugsBag.id);
                }else{
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: "未查询到药品!",
                  });
                }
              }else{
                uni.hideLoading();
              }
            }else{
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: res.msg || "接口获取数据失败！",
              });
            }
          })
        }
      },
    },
    onLoad(options) {
      console.log(options, "options");
      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 {
    background: #FAFBFD;
    padding: 0 24rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;

    .Scanning_top {
      margin: 32rpx auto;
      .Scanning_top_icon {
        font-size: 30rpx;
        font-weight: bold;
        .newicon{
          margin: 0 32rpx;
        }
      }
    }
    .Scanning_top_tips{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      margin-bottom: 32rpx;
      gap: 64rpx;
    }

    .Scanning_cont {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      .scrollContent{
        flex: 1;
        min-height: 0;
      }
      .column{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        padding: 32rpx 24rpx;
        color: #565656;
        border-bottom: 1rpx solid #D9D9D9;
        gap: 8rpx;
        &.head{
          font-size: 30rpx;
          color: #000000;
          border: 1rpx solid #D9D9D9;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16);
          background: #FBFCFE;
        }
        .value1{
          flex: 2;
          text-align: left;
          word-break: break-all;
          flex-shrink: 0;
					text-align: center;
        }
        .value2,.value3{
          flex: 1;
          text-align: center;
          word-break: break-all;
          flex-shrink: 0;
        }
      }
    }

    .foot_btn_spe {
      margin: 24rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24rpx;
      font-weight: bold;

      .column{
        width: 100%;
        height: 78rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24rpx;

        .btn {
          height: 100%;
          flex: 1;
          background: linear-gradient( 90deg, #6FC073 0%, #3DB197 100%);
          color: #fff;
          border-radius: 4rpx;
          font-size: 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
	
	.showModel {
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.2);
	  z-index: 99;
	
	  .showModel__wrap {
	    width: 90%;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    background-color: #fff;
	    border-radius: 12rpx;
	
	    .showModel__header {
	      font-size: 36rpx;
	      color: #000;
				font-weight: bold;
	      height: 84rpx;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	    }
			.content{
				background: #fff;
				text-align: center;
				padding: 20rpx 0;
			}
			.bottom{
				border-top: 1px solid #ccc;
				display: flex;
				uni-button{
					background: #fff !important;
				}
				uni-button:after{
					border: none !important;
				}
				.bottom-btn{
					color: #A8A8A8;
					font-size: 30rpx;
					padding: 10rpx 0;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.confirm-btn{
					color: #5DAC6B;
				}
			}
	  }
	}
</style>