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

<template>
  <view class="container">
    <view class="content">
      <view class="userInfoTopFixe">
        <UserInfo :user-info="currentUser" bgClass="bgLinGra"></UserInfo>
      </view>
      <view class="content_inner" v-if="!showNoData">
        <view class="prescription_list" v-if="list.length > 0" v-for="(item, index) in list" :key="index" @click="jumpQueryPatient(item)">
          <view class="title_box border_bottom">
            <text class="title_text">{{item.ClassName}}</text>
            <view class="voucher_box">
              <text class="colorCustom">取药凭证</text>
              <image class="arrow" :src="iconUrl.icon_rightGreen"></image>
            </view>
          </view>
          <view class="take_medicine_box">
            <view class="take_medicine_item border_bottom" v-for="(subItem, subIndex) in item.Data_1" :key="subIndex">
              <view class="take_medicine_info">
                <view class="drug_name_box displayFlexBetween">
                  <view class="drug_name_child displayFlexBetween">
                    <view>{{subItem.Project}}</view>
                    <view>x{{subItem.Number}}</view>
                  </view>
                  <text class="take_medicine_num">￥{{subItem.SumOfMoney/100}}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="money_box_bottom border_top">
            <text>小计：</text>
            <text>￥{{getSum(item.Data_1)}}</text>
          </view>
        </view>
      </view>
      <view v-else class="noData">
        <NoData :value="noDataValue"></NoData>
      </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 { queryDrugQueueList } from '@/pagesPatient/service/prescriptionManagement';
import UserInfo from '@/pagesPersonal/st1/components/userInfo/userInfo.vue';
import NoData from '@/pages/st1/components/noData/noData.vue';

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

const iconUrl = ref(icon);
const currentUser = ref<any>({});
const list = ref<any[]>([]);
const showNoData = ref(false);
const noDataValue = ref('暂无取药信息');

useOnLoad((options) => {
  currentUser.value = app.globalData.currentUser;
  main();
});

const refresh = () => {
  main();
};

const main = async () => {
  let queryData = {
    HosId: app.globalData.hosId,
    MemberId: currentUser.value.memberId,
    CardType: currentUser.value.cardType,
    CardNo: currentUser.value.cardNo,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
    }
  };
  
  let { resp } = await queryDrugQueueList(queryData);
  let dataList: any[] = [];
  let isNoData = true;
  
  if (!common.isEmpty(resp)) {
    dataList = resp;
    isNoData = false;
  }
  
  list.value = dataList;
  showNoData.value = isNoData;
};

const jumpQueryPatient = (item: any) => {
  common.goToUrl(`/pagesPatient/st1/business/prescriptionManagement/drugCredentialsDetails/drugCredentialsDetails?queryBean=${JSON.stringify(item)}`);
};

const getSum = (list: any[]) => {
  let num = 0;
  if (list && list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      num += Number(list[i].SumOfMoney || 0);
    }
  }
  return num / 100;
};
</script>

<style lang="scss">
.content_inner {
  padding: 220upx 30upx 0;
}
.prescription_list {
  background: white;
  margin-bottom: 30upx;
  border-radius: 24upx;
}

.prescription_list:last-child {
  margin-bottom: 0 !important;
}

.title_box {
  padding: 0 30upx;
  height: 112upx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.title_text {
  font-size: 32upx;
  font-weight: bold;
  color: #333;
}

.voucher_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.voucher_box text {
  font-size: 30upx;
  margin-right: 16upx;
}

.take_medicine_box {
  padding-left: 30upx;
  box-sizing: border-box;
}

.take_medicine_item {
  padding: 22upx 30upx 26upx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.take_medicine_info {
  width: 100%;
}

.take_medicine_info view:nth-child(1) {
  font-size: 30upx;
  color: #333;
  line-height: 50upx;
}

.take_medicine_info view:nth-child(2) {
  font-size: 24upx;
  color: #999;
  margin-top: 2upx;
}

.take_medicine_info view:nth-child(3) {
  font-size: 30upx;
  color: #ff3434;
}

.drug_name_box view:nth-child(1) {
  width: 80%;
}

.drug_name_box view:nth-child(2) {
  font-size: 30upx;
  color: #999;
  margin: 0;
}


.take_medicine_num {
  font-size: 30upx;
  color: #333;
}

.money_box_bottom {
  width: 100%;
  height: 100upx;
  padding: 0 30upx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.money_box_bottom text:nth-child(1) {
  font-size: 32upx;
  color: #333;
  font-weight: 0 !important;
}

.money_box_bottom text:nth-child(2) {
  font-size: 32upx;
  color: #ff3434;
  font-weight: 0 !important;
}
.arrow{
  margin-right: 0;
}
</style>