com.kasite.client.uniapp.patient/pagesPatient/st1/business/costDetailedList/costListingDetails/costListingDetails.vue

<template>
  <view class="container">
    <view class="content">
      <view class="content_info">
        <text>{{ queryBean.Date }} {{ queryBean.Doctor }}</text>
        <text> | </text>
        <text>{{ queryBean.Dept }}</text>
      </view>
      <view class="tabel">
        <view class="table_box">
          <view class="tr">
            <view class="th name">项目</view>
            <view class="th unit">规格</view>
            <view class="th">数量</view>
            <view class="th refevalue">单价(元)</view>
            <view class="th refevalue">金额(元)</view>
          </view>
          <view class="tr" v-for="(item, key) in costDetailList" :key="key">
            <view class="td name">{{ item.Project }}</view>
            <view class="td unit">{{ item.Unit }}</view>
            <view class="td">{{ item.Number }}</view>
            <view class="td refevalue">{{ item.UnitPrice / 100 }}</view>
            <view class="td refevalue">{{ item.SumOfMoney / 100 }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useOnLoad } from '@/hook';
import { common } from '@/utils';
import {
  queryOutpatientCostTypeItem,
  queryInHospitalCostTypeItem
} from '@/pagesPatient/service/costDetailedList';

const app = getApp();
const queryBean = ref<any>({});
const costDetailList = ref<any[]>([]);
const pageType = ref('');

useOnLoad(async (options) => {
  let qBean = {};
  if (options.queryBean) {
    try {
      qBean = JSON.parse(options.queryBean);
    } catch (e) {
      console.error('参数解析失败', e);
    }
  }
  
  queryBean.value = qBean;
  pageType.value = options.pageType || '';
  
  await main();
});

const main = async () => {
  await getQueryOutpatientCostTypeItem(queryBean.value.ExpenseTypeCode);
};

/**
 * 获取门诊清单明细
 */
const getQueryOutpatientCostTypeItem = async (code: string) => {
  let currentUser = app.globalData.currentUser || {};
  let queryData = {
    ExpenseTypeCode: code,
    Date: queryBean.value.Date,
    CardNo: currentUser.cardNo,
    CardType: currentUser.cardType,
    MemberId: currentUser.memberId,
    Store: {
      cardEncryptionStore: currentUser.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.baseMemberEncryptionStore
    },
  };

  let resp;
  // 根据规范，必须解构返回值
  if (pageType.value == 'outpatient') {
    ({ resp } = await queryOutpatientCostTypeItem(queryData));
  } else {
    ({ resp } = await queryInHospitalCostTypeItem(queryData));
  }

  if (common.isNotEmpty(resp)) {
    costDetailList.value = resp;
  }
};
</script>

<style lang="scss">
.content_info {
  line-height: 100upx;
  background: rgba(255, 255, 255, 1);
  font-size: 30upx;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  padding-left: 30upx;
}

.content_info text:nth-child(even) {
  color: #999;
}

/* 表格代码   */

.tabel {
  background-color: #fff;
}

.table_box {
  border: 1px solid #eee;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
}

.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.th, .td {
  padding: 10upx;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  text-align: center;
  width: 19%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 24upx;
}
.td{
  word-break: break-all;
}
.table_box .th {
  height: 80upx;
  font-size: 28upx;
  color: #000;
  background-color: #f2f5f6;
}

.table_box .td {
  min-height: 90upx;
  font-size: 28upx;
  color: #555;
} 
.th.name,.td.name{width: 24%}
</style>