com.kasite.client.uniapp.patient/pagesPatient/st1/business/prescriptionManagement/drugCredentialsDetails/drugCredentialsDetails.vue

<template>
  <view class="container">
    <view class="content">
      <view class="code_box">
        <image class="drugCredentia_code" :src="iconUrl.drugCredentia_code"></image>
        <view class="codeBox_main displayFlexCol">
          <view class="title_text">取药凭证二维码</view>
          <view class="code_con">
            <image class="qr_code" :src="qrCodeImage"></image>
          </view>
          <view class="tips_text">等待呼叫后，到相应窗口出示二维码</view>
        </view>
      </view>
      <view class="time_box">
        <view class="time_box_list">
          <text>处方类型</text>
          <text>{{takeMedicineInfo.PrescriptionType}}</text>
        </view>
        <view class="time_box_list">
          <text>所属药房</text>
          <text>{{takeMedicineInfo.Pharmacy}}</text>
        </view>
        <view class="time_box_list" v-if="takeMedicineInfo.Position">
          <text>取药窗口</text>
          <text class="colorCustom_F08">{{takeMedicineInfo.Position ? "窗口:" + takeMedicineInfo.Position : ""}}</text>
        </view>
        <view class="time_box_list" v-if="takeMedicineInfo.Position">
          <text>流水号</text>
          <text>{{takeMedicineInfo.QueueNo}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { useOnLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { REQUEST_CONFIG } from '@/config';

const { proxy } = getCurrentInstance() as any;
const app = getApp();

const iconUrl = ref(icon);
const takeMedicineInfo = ref<any>({});
const qrCodeImage = ref('');

useOnLoad((options: any) => {
  let currentUser = app.globalData.currentUser;
  let queryBean = options.queryBean ? JSON.parse(options.queryBean) : {};
  takeMedicineInfo.value = queryBean;
  setCode(currentUser.cardNo);
});

const setCode = (data: any) => {
  qrCodeImage.value = `${REQUEST_CONFIG.BASE_URL}api/390/390/createQrCode.do?content=${data}`;
};
</script>

<style lang="scss">
.code_box {
  width: 690upx;
  height: 695upx;
  position: relative;
  margin: 30upx auto;
}
.drugCredentia_code {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.codeBox_main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  justify-content: flex-start;
}
.title_text {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  margin-top: 15upx;
}
.code_con {
  margin: 90upx 0 65upx;
  width: 390upx;
  height: 390upx;
}
.qr_code {
  box-sizing: content-box;
  width: 390upx;
  height: 390upx;
}
.tips_text {
  font-size: 28upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #8A8A99;
  line-height: 48upx;
}
.time_box {
  background: white;
  padding: 0 30upx;
  margin: 30upx;
  border-radius: 24upx;
}
.time_box_list {
  height: 100upx;
  line-height: 110upx;
}
.time_box_list text:nth-child(1) {
  width: 30%;
  display: inline-block;
  font-size: 32upx;
  color: #999;
}
.time_box_list text:nth-child(2) {
  width: 70%;
  font-size: 32upx;
  color: #333;
}
</style>