com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundRecord/outpatientRefundRecord.vue

<template>
  <view class="container">
    <view class="content">
      <userInfo :userInfo="currentUser" bgClass="bgLinGra"></userInfo>
      <block v-if="list.length > 0">
        <view class="record_box" v-for="(item, ind) in list" :key="ind" @click="itemClick(item)">
          <view class="header_time border_bottom">
            <text>门诊预交金退款</text>
            <text class="mr10 colorCustom" :class="{
              'colorCustom': item.State == '2' || item.State == '3',
              'colorRed': item.State == '4'
            }">{{ item.State == '1' ? '退款中' : item.State == '2' ? '全额到账' : item.State == '3' ? '部分到账' : item.State == '4' ? '退款失败' : '' }}</text>
          </view>
          <view class="main_centent">
            <view class="record_info">
              <text>退款申请</text>
              <text>￥{{ item.RefundableBalance / 100 }} 共{{ item.RefundableCount }}笔</text>
            </view>
            <view class="record_info">
              <text>实际到账</text>
              <text class="colorRed">￥{{ item.RefundAmount / 100 }} 共{{ item.RefundCount }}笔</text>
            </view>
            <view class="record_info">
              <text>到账时间</text>
              <text>{{ item.UpdateTime }}</text>
            </view>
          </view>
        </view>
      </block>
      <view v-else class="noData">
        <noData :value="noDataValue"></noData>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { querySelfRefundRecordList } from '@/pagesPatient/service/outpatient/index';
import common from '@/utils/common';
import userInfo from '@/pagesPersonal/st1/components/userInfo/userInfo.vue';
import noData from '@/pages/st1/components/noData/noData.vue';

const app = getApp();
const currentUser = ref<any>({});
const list = ref<any[]>([]);
const noDataValue = ref("暂无门诊退款记录");
const startkey = ref("");

onLoad((options: any) => {
  startkey.value = options.startkey || "";
  currentUser.value = app.globalData.currentUser || {};
});

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

const main = async () => {
  const user = app.globalData.currentUser || {};
  currentUser.value = user;

  const queryData = {
    CardNo: user.cardNo,
    CardType: user.cardType,
    HisMemberId: user.hisMemberId,
    MemberId: user.memberId,
    Store: {
      cardEncryptionStore: user.encryptionStore || '',
      baseMemberEncryptionStore: user.baseMemberEncryptionStore
    }
  };

  try {
    const resp = await querySelfRefundRecordList(queryData);
    // 处理可能的返回结构，原逻辑是直接使用 resp
    // 假设 service 返回的是数据本身或包含数据的对象
    // 如果 resp 是 [err, res] 形式（取决于 handle 的具体实现），这里可能需要调整
    // 但根据 service 代码：return handle.catchPromiseNew(resp, () => resp);
    // 以及原 JS 代码：list: resp || []
    // 我们暂时保持一致
    // 观察 handle.catchPromiseNew 的常见行为，如果 resp 是 [null, data]，回调返回 [null, data]，那么最终返回 [null, data]
    // 但如果 service 层已经解构了，或者 handle 做了特殊处理。
    // 为了保险，我们可以打印一下，或者做一个简单的判断
    // 如果 resp 是数组，直接用；如果是对象且有 list 字段，用 list；否则用 resp
    if (Array.isArray(resp)) {
      list.value = resp;
    } else if (resp && Array.isArray(resp.list)) {
      list.value = resp.list;
    } else if (resp && Array.isArray(resp.List)) {
      list.value = resp.List;
    } else {
      list.value = resp || [];
    }
  } catch (e) {
    console.error(e);
    list.value = [];
  }
};

const itemClick = (item: any) => {
  const queryBean = JSON.stringify(item);
  common.goToUrl(`/pagesPatient/st1/business/outpatient/outpatientRefundDetail/outpatientRefundDetail?queryBean=${queryBean}`);
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  background-color: #f5f5f5;
  overflow-y: auto;
}

.record_box {
  background: white;
  margin: 30upx;
  border-radius: 24upx;
}

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

.header_time text {
  font-size: 32upx;
}

.header_time text:nth-child(1) {
  color: #333;
  font-weight: bold;
}

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

.record_info {
  margin-bottom: 30upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

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

.record_info text:nth-child(1) {
  width: 26%;
  display: inline-block;
  font-size: 30upx;
  color: #666;
}

.record_info text:nth-child(2) {
  width: 74%;
  display: inline-block;
  font-size: 30upx;
  color: #666;
}

.colorCustom {
  color: #007aff; // 假设 colorCustom 是蓝色，原代码没有定义 css 类，可能是全局样式。这里用蓝色代替，或者保留类名等待全局样式生效。
  // 原 wxss 中使用了 .colorCustom 但没有定义它？
  // 检查 wxss 文件：
  // .mr10 colorCustom ...
  // WXSS 文件中没有 .colorCustom 的定义！
  // 说明它是全局样式。
  // 在 scoped style 中，如果依赖全局样式，可能不生效，除非是 global.
  // 但 UniApp 的 App.vue 里的样式是全局的。
  // 这里保留类名即可。
}

.colorRed {
  color: red;
}

.mr10 {
  margin-right: 10upx;
}

.border_bottom {
  border-bottom: 1upx solid #eee;
}
</style>