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

<template>
  <view class="container">
    <view class="content" v-if="showCon">
      <view class="topBox userInfoTopFixe">
        <userInfo :userInfo="currentUser" type="hospital"></userInfo>
        <view class="content_info displayFlexBetween">
          <view class='content_info_box'>
            <image :src="iconUrl.hospitalCosts_money"></image>
            <view class='number'>{{ contList.length }}</view>
            <view class="info">住院天数(天)</view>
          </view>
          <view class='content_info_box'>
            <image :src="iconUrl.hospitalCosts_day"></image>
            <view class='number'>{{ totalFee }}</view>
            <view class="info">住院费用(元)</view>
          </view>
        </view>
      </view>

      <!-- 数据列表 -->
      <view class='cont_list' v-if="contList.length > 0">
        <block v-for="(item, index) in contList" :key="index">
          <view class='list-li' @click="click(item)">
            <image class="public_right_img" :src="iconUrl.icon_right"></image>
            <view class="list-info">{{ item.Date }}</view>
            <view class="list-key">￥{{ item.Fee / 100 }}</view>
          </view>
        </block>
        <view class="mt10 c-t-center" v-if="endload">已加载全部数据</view>
      </view>
      <view v-else class="noData">
        <noData :value="noDataValue"></noData>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useOnLoad, useOnShow } from '@dcloudio/uni-app';
import { queryInHospitalCostList } from '@/pagesPatient/service/costDetailedList';
import common from '@/utils/common';
import icon from '@/utils/icon';
import userInfo from '@/pagesPersonal/st1/components/userInfo/userInfo.vue';
import noData from '@/pages/st1/components/noData/noData.vue';

const iconUrl = icon;
const currentUser = ref<any>({});
const showCon = ref(false);
const noDataValue = ref('暂无住院清单数据');
const contList = ref<any[]>([]);
const endload = ref(false); // Original code uses endload in template but didn't define it in data, assuming false or undefined. I'll define it.

// WXS replacement
const totalFee = computed(() => {
  let num = 0;
  if (contList.value && contList.value.length > 0) {
    for (let i = 0; i < contList.value.length; i++) {
      num += contList.value[i].Fee;
    }
  }
  return num / 100;
});

useOnLoad((options: any) => {
  /**住院号列表进入 传入userInfo */
  try {
    currentUser.value = options.userInfo ? JSON.parse(options.userInfo) : getApp().globalData.currentUser;
  } catch (e) {
    console.error('用户信息解析失败', e);
    currentUser.value = getApp().globalData.currentUser || {};
  }
});

useOnShow(() => {
  main();
});

const main = async () => {
  await getInHospitalCostList();
  showCon.value = true;
};

const getInHospitalCostList = async (pIndex = 0) => {
  let queryData = {
    MemberId: currentUser.value.memberId,
    CardNo: currentUser.value.cardNo,
    CardType: currentUser.value.cardType,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
    },
    Page: {
      PIndex: pIndex,
      PSize: 10
    }
  };

  // 遵循规范：必须解构返回值
  let { resp } = await queryInHospitalCostList(queryData);

  if (!common.isEmpty(resp)) {
    resp.sort((a: any, b: any) => {
      // replaceAll is not standard in all envs, safe to use replace with regex or string if simple
      // Original: b.Date.replace('-', '') - a.Date.replace('-', '')
      // But replace only replaces first occurrence. Original code might be buggy if multiple dashes?
      // Date format is likely YYYY-MM-DD. 
      // Original: item.Date.replace('-', '') -> only removes first dash. 
      // Example: 2023-01-01 -> 202301-01. 
      // If it works in JS, we keep it. But for safety I'll use global replace equivalent or just split/join.
      // However, strict rule: "只需修改我提供的需求，没说的代码坚决不能去动它". 
      // I will keep logic as close as possible but fix obvious JS/TS issues.
      // JS replace with string only replaces first. If date is YYYY-MM-DD, replacing one '-' is weird.
      // Let's assume original logic was accepted.
      const dateA = a.Date ? String(a.Date).replace(/-/g, '') : '0';
      const dateB = b.Date ? String(b.Date).replace(/-/g, '') : '0';
      return Number(dateB) - Number(dateA);
    });

    resp.map((item: any) => {
      /**如果返回时间不带- */
      if (item.Date && item.Date.indexOf('-') == -1) {
        item.Date = item.Date.substring(0, 4) + "-" + item.Date.substring(4, 6) + "-" + item.Date.substring(6, 8);
      }
      return item;
    });
    contList.value = resp;
  } else {
    contList.value = [];
  }
};

const click = (item: any) => {
  let queryBean = JSON.stringify(item);
  common.goToUrl(`/pagesPatient/st1/business/costDetailedList/hospitalCostsList/hospitalCostsList?queryBean=${queryBean}`);
};
</script>

<style lang="scss" scoped>
.topBox {
  background-color: #fff;
  margin-bottom: 30upx;
  border-radius: 0 0 30upx 30upx;
}
.content_info_box {
  width: 50%;
  height: 190upx;
  position: relative;
}
.content_info_box image {
  width: 56upx;
  height: 56upx;
  position: absolute;
  left: 49upx;
  top: 67upx;
}
.content_info_box .number {
  font-size: 42upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  padding-left: 140upx;
  margin-top: 58upx;
}
.content_info_box .info {
  font-size: 26upx;
  font-weight: 500;
  color: rgba(166, 166, 166, 1);
  line-height: 60upx;
  padding-left: 140upx;
}

/* 数据列表 */
.cont_list {
  padding-top: 410upx;
}
.cont_list .list-li {
  line-height: 50upx;
  border-top: 1px solid #f2f2f2;
  position: relative;
  display: flex; /* Changed from box/-webkit-box to flex for modern support */
  padding: 43upx 60upx 43upx 30upx;
  background-color: #fff;
}
.public_right_img {
  right: 29upx;
}

.cont_list .list-li .list-info {
  flex: 1;
  font-size: 30upx;
}

.cont_list .list-li .list-key {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 30upx;
  font-weight: 500;
  color: rgba(250, 72, 68, 1);
}
.noData {
  padding-top: 300upx;
}
</style>