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

<template>
  <view class="container">
    <view class="content">
      <view class="userInfoTopFixe">
        <!-- 时间选择 -->
        <view class='selsecttime displayFlexRow'>
          <view class='beforeday' @click="optionClick('before')">前一天</view>
          <view class="picker displayFlexRow">
            <picker mode="date" :value="queryBean.Date" :start="startdata" :end="enddata" @change="bindTimeChange">
              <view>{{ queryBean.Date }}</view>
            </picker>
            <image :src="iconUrl.bottom" class='iconcalendar'></image>
          </view>
          <view class='laterday' @click="optionClick('after')">后一天</view>
        </view>
      </view>
      <block v-if="!showNoData">
        <!-- 费用-->
        <view class='money'>今日费用： ¥{{ totalFee }}</view>
        <!-- 费用列表 -->
        <view class="content_inner">
          <view class='inner_list border_top' @click="click(item)" v-for="(item, index) in list" :key="index">
            <view class="list_info">
              <view class="info_name">{{ item.ExpenseTypeName }}</view>
              <view class="info_time">{{ item.Date }}</view>
            </view>
            <view class="list_key">
              <text class="">¥{{ item.Fee / 100 }}</text>
              <image class="public_right_img" :src="iconUrl.icon_right"></image>
            </view>
          </view>
        </view>
      </block>
      <view v-else class="noData">
        <noData :value="noDataValue"></noData>
      </view>
    </view>
  </view>
</template>

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

const iconUrl = icon;
const queryBean = ref<any>({});
const noDataValue = ref('暂无清单数据');
const list = ref<any[]>([]);
const showNoData = ref(true);
const startdata = ref(''); // Although not used in original JS logic explicitly, it's in WXML. Keeping empty/default.
const enddata = ref('');

const currentUser = ref<any>({});

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

useOnLoad((options: any) => {
  let qBean = options.queryBean ? JSON.parse(options.queryBean) : {};
  if (qBean.Date) {
    qBean.Date = qBean.Date.substring(0, 10);
  }
  queryBean.value = qBean;
  
  currentUser.value = getApp().globalData.currentUser;
  
  main();
});

const main = async () => {
  await getInHospitalCostType();
};

const getInHospitalCostType = async (pIndex = 0) => {
  let queryData = {
    MemberId: currentUser.value.memberId,
    CardNo: currentUser.value.cardNo,
    CardType: currentUser.value.cardType,
    BeginDate: queryBean.value.Date,
    EndDate: queryBean.value.Date,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
    },
    Page: {
      PIndex: pIndex,
      PSize: 10
    }
  };
  
  // 遵循规范：必须解构返回值
  let { resp } = await queryInHospitalCostType(queryData);
  
  if (!common.isEmpty(resp)) {
    list.value = resp;
    showNoData.value = false;
  } else {
    list.value = [];
    showNoData.value = true;
  }
};

const bindTimeChange = (e: any) => {
  queryBean.value.Date = e.detail.value;
  main();
};

const optionClick = (type: string) => {
  let times;
  if (type == "before") {
    // 点击前一天
    times = -24 * 60 * 60 * 1000;
  } else {
    /**后一天 */
    times = 24 * 60 * 60 * 1000;
  }
  
  // Use replace for cross-platform date parsing compatibility
  let dateStr = queryBean.value.Date.replace(/\-/g, "/");
  let date = new Date(new Date(dateStr).getTime() + times);
  let formatDate = common.dateFormat(date).formatYear;
  
  queryBean.value.Date = formatDate;
  main();
};

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

<style lang="scss" scoped>
/* 时间选择 */
.selsecttime {
  height: 120upx;
  line-height: 120upx;
  text-align: center;
  background-color: #fff;
}

.selsecttime .picker {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selsecttime .picker .iconcalendar {
  width: 20upx;
  height: 16upx;
  margin-left: 10upx;
}

.selsecttime .beforeday,
.selsecttime .laterday {
  color: #000;
  padding: 0 30upx;
  font-weight: 400;
  width: 25%;
}

.selsecttime .beforeday:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #ccc;
  border-width: 2px 2px 0 0;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin: 0 3upx 0 1upx;
}

.selsecttime .laterday:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #ccc;
  border-width: 2px 2px 0 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 0 3upx 0 1upx;
}

/* 今日费用 */
.money {
  padding: 40upx 0 40upx 31upx;
  background-color: #f5f5f5;
  font-size: 30upx;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 36upx;
  margin-top: 120upx;
}

/* 数据列表 */
.content_inner {
  padding: 0 30upx;
  background-color: #fff;
  overflow: hidden;
}

.content_inner .inner_list {
  line-height: 50upx;
  position: relative;
  display: flex;
  padding: 40upx 30upx;
  color: #333;
  margin-top: -1px;
}

.content_inner .inner_list .list_info {
  flex: 1;
  font-size: 30upx;
}

.list_info .info_name {
  font-size: 32upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 23upx;
}

.list_info .info_time {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
}

.content_inner .inner_list .list_key {
  flex: 0 0 auto;
  font-size: 34upx;
  font-weight: 500;
  color: rgba(250, 72, 68, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>