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

<template>
  <view class="container">
    <view class="userInfoTopFixe">
      <userInfo :userInfo="currentUser"></userInfo>
      <screening 
        :screen="screen" 
        @setScreenData="setScreenData" 
        @queryRecords="queryRecords" 
        @resetScreen="resetScreen" 
        @changeStartDate="changeStartDate" 
        @changeEndDate="changeEndDate"
      ></screening>
    </view>
    
    <view class="recordList" :class="{ 'hideBox': recordList.length == 0 }">
      <view class="noData" v-if="recordList.length == 0">
        <noData :value="noDataValue"></noData>
      </view>
      <view 
        class="recordItem border_bottom" 
        v-if="recordList.length > 0" 
        v-for="(item, index) in recordList" 
        :key="index" 
        @click="itemClick(item)"
      >
        <view class="recordTitle">
          <text>{{ item.Date }}</text>
          <!-- <text>{{item.name}}</text> -->
        </view>
        <view>
          <text class="pricerColor">￥{{ item.Fee / 100 }}</text>
          <image class="public_right_img public_right_img30" :src="iconUrl.icon_right"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useOnLoad } from '@dcloudio/uni-app';
import { queryOutpatientCostType } 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';
import screening from '@/pagesPatient/st1/components/screening/screening.vue';

const iconUrl = icon;
const currentUser = ref<any>({});
const queryData = ref({
  Page: {
    PIndex: 0,
    PSize: 10
  }
});

// 筛选组件参数
const screen = ref({
  screenKey: 'screen',
  btnName: '',
  startDate: common.dateFormat(new Date(Date.now() - (30 * 24 * 60 * 60 * 1000))).formatYear, // 开始时间
  endDate: common.newDay(), // 结束时间 
  state: [],
  sourceType: [],
  memberId: [],
  screenTime: [
    { label: "近一个月", value: "30", check: true },
    { label: "近三个月", value: "90", check: false },
    { label: "近半年", value: "180", check: false },
  ],
  columns: []
});

const recordList = ref<any[]>([]);
const showNoData = ref(false);
const noDataValue = ref('暂无门诊清单');

useOnLoad((options) => {
  currentUser.value = getApp().globalData.currentUser;
  getOutpatientCostType();
});

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

/**
 * 获取门诊清单分类
 */
const getOutpatientCostType = async (pIndex = 0) => {
  let obj = {
    BeginDate: screen.value.startDate,
    EndDate: screen.value.endDate,
    MemberId: currentUser.value.memberId,
    CardType: currentUser.value.cardType,
    Store: {
      cardEncryptionStore: currentUser.value.encryptionStore || '',
      baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
    },
  };
  
  // Merge obj into a new object with queryData.Page
  let reqData = {
    ...obj,
    Page: {
      ...queryData.value.Page,
      PIndex: pIndex
    }
  };

  let list: any[] = [];
  let isNoData = true;
  
  // 遵循规范：必须解构返回值
  let { resp } = await queryOutpatientCostType(reqData);
  
  if (!common.isEmpty(resp)) {
    list = resp;
    isNoData = false;
  }
  
  recordList.value = list;
  showNoData.value = isNoData;
};

/**
 * 监听筛选组件时间变化
 */
const dateChange = (e: any) => {
  let detail = e.detail || e; // Handle both event types if necessary
  // In Vue, custom events usually pass the value directly or in an object.
  // Assuming the child component emits { type: '...', value: '...' }
  if (detail.type) {
    (screen.value as any)[detail.type] = detail.value;
  }
  getOutpatientCostType();
};

/**
 * 清单列表点击
 */
const itemClick = (item: any) => {
  let qBean = JSON.stringify(item);
  common.goToUrl(`/pagesPatient/st1/business/costDetailedList/costListingDetails/costListingDetails?queryBean=${qBean}&pageType=outpatient`);
};

// 设置筛选数据
const setScreenData = (e: any) => {
  // e is likely the payload from $emit
  // Original: this.setData(e.detail)
  // We need to merge e into screen.value
  Object.assign(screen.value, e);
};

// 选择结束时间
const changeEndDate = (e: any) => {
  Object.assign(screen.value, e);
  recordList.value = [];
  queryData.value.Page.PIndex = 0;
  getOutpatientCostType();
};

// 选择开始时间
const changeStartDate = (e: any) => {
  Object.assign(screen.value, e);
  recordList.value = [];
  queryData.value.Page.PIndex = 0;
  getOutpatientCostType();
};

// 查询
const queryRecords = (e: any) => {
  queryData.value.Page.PIndex = 0;
  recordList.value = [];
  getOutpatientCostType();
};

// 重置
const resetScreen = (e: any) => {
  // Assuming e is the new screen state
  // Original: let screen = common.deepCopy(e.detail)
  // this.setData({ screen: screen ... })
  screen.value = common.deepCopy(e);
  recordList.value = [];
  queryData.value.Page.PIndex = 0;
  getOutpatientCostType();
};
</script>

<style lang="scss" scoped>
.noData {
  width: 100%;
  padding-top: 0 !important;
  position: absolute;
  top: 50%;
  margin-top: -250upx;
  margin-left: -30upx;
}

.topMenu {
  background: white;
  border-radius: 0 0 24upx 24upx;
  overflow: hidden;
}
.screenBox {
  width: 100%;
  padding: 0 30upx 30upx 30upx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dataBox {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.picker {
  font-size: 30upx;
  color: #666;
}
.textTag {
  padding: 0 30upx;
  font-size: 28upx;
  color: #666;
}
.screenBtn {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.screenBtn text {
  font-size: 30upx;
  color: #666;
  padding-right: 16upx;
}

.recordList {
  width: 100%;
  position: fixed;
  top: 320upx;
  bottom: 0;
  margin-top: 20upx;
  background: white;
  padding-left: 30upx;
  box-sizing: border-box;
  overflow: auto;
}
.hideBox {
  top: 335upx;
  background: #f1f1f6;
}
.recordItem {
  padding: 35upx 30upx 35upx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.border-bottom:last-child::after {
  border-top: 0px;
}
.recordTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.recordTitle text:nth-child(1) {
  font-size: 32upx;
  color: #333;
  margin-bottom: 8upx;
}
.recordTitle text:nth-child(2) {
  font-size: 26upx;
  color: #999;
}
.pricerColor {
  color: #ff3434 !important;
  margin-right: 23upx;
}
</style>