com.kasite.client.uniapp.patient/pagesPatient/st1/business/refund/refundApplicationRecord/refundApplicationRecord.vue

<template>
  <view class="container">
    <view class="content">
      <screening :screen="screen" @setScreenData="setScreenData" @queryRecords="queryRecords" @resetScreen="resetScreen" @changeStartDate="changeStartDate" @changeEndDate="changeEndDate"></screening>
      <block v-if="!showNoData">
        <view class="record_box" v-for="(item, ind) in list" :key="ind">
          <view class="header_time border_bottom">
            <text>门诊退款申请</text>
            <text class="mr10" :class="item.Status=='1'?'colorCustom_F08':item.Status=='3'?'colorRed':'colorCustom'">{{item.Status=='1'?'审核中':item.Status=='2'?'审核通过':'审核驳回'}}</text>
          </view>
          <view class="main_centent">
            <view class="record_info">
              <text>申请人</text>
              <text>{{item.HandlerReName}}</text>
            </view>
            <view class="record_info">
              <text>退款金额</text>
              <text class="colorRed">{{item.RefundMoney/100}}元</text>
            </view>
            <view class="record_info">
              <text>就诊卡号</text>
              <text>{{item.CardNo}}</text>
            </view>
            <view class="record_info">
              <text>申请时间</text>
              <text>{{item.CreateTime}}</text>
            </view>
            <view class="record_info border_bottom"></view>
            <view class="record_info">
              <text>办理类型</text>
              <text v-if="item.FilingType == '1'">本人</text>
              <text v-if="item.FilingType == '2'">代办</text>
            </view>
            <view class="record_info">
              <text>收款户名</text>
              <text>{{item.HandlerReName}}</text>
            </view>
            <view class="record_info">
              <text>收款银行</text>
              <text>{{item.HandlerReBankName}}</text>
            </view>
            <view class="record_info">
              <text>开户银行</text>
              <text>{{item.HandlerBankName}}</text>
            </view>
            <view class="record_info">
              <text>银行卡号</text>
              <text>{{item.HandlerBankCardNo}}</text>
            </view>
           
            <block v-if="item.Status=='3'">
              <view class="record_info border_bottom"></view>
              <view class="record_info">
                <text>驳回原因</text>
                <text>{{item.AuditOpinion}}</text>
              </view>
            </block>
          </view>
          <view class="footerBtn displayFlexRow" v-if="item.Status=='3'">
            <text class="backgroundCustom" @click="editRefunInfo(item)">编辑申请信息</text>
          </view>
        </view>
      </block>
      <view v-else class="noData">
        <noData :value="noDataValue"></noData>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { refundSelect } from '@/pagesPatient/service/refund/index';
import noData from '@/pages/st1/components/noData/noData.vue';
import screening from '@/pagesPatient/st1/components/screening/screening.vue';

const iconUrl = ref(icon);
const list = ref<any[]>([]); // 记录列表
const showNoData = ref(false);
const noDataValue = ref("暂无门诊退款申请记录");
const PIndex = ref(0);

// 筛选组件参数
const screen = reactive({
  screenKey: 'screen',
  btnName: '',
  startDate: common.dateFormat(new Date(Date.now() - (21 * 24 * 60 * 60 * 1000))).formatYear, //开始时间 yyyy-mm-dd
  endDate: common.dateFormat(new Date(Date.now() )).formatYear, //结束时间 yyyy-mm-dd
  state: [],
  sourceType: [],
  memberId: [],
  columns: [],
  screenTime: [
    {label: "三周内",value: "21",check: true},
    {label: "两周内",value: "14",check: false},
    {label: "一周内",value: "7",check: false},
  ]
});

onLoad((options) => {
  querDiyRefundSelect();
});

const querDiyRefundSelect = async () => {
  let queryData = {
    OpenId: uni.getStorageSync('openid'),
    StartTime: screen.startDate,
    EndTime: screen.endDate,
    Page:{PIndex:0,PSize:2000}
  };
  
  let resp = await refundSelect(queryData);
  
  if (!common.isEmpty(resp)) {
    list.value = resp;
    showNoData.value = false;
  } else {
    list.value = [];
    showNoData.value = true;
  }
};

// 设置筛选数据
const setScreenData = (e: any) => {
  Object.assign(screen, e);
};

// 选择结束时间
const changeEndDate = (e: any) => {
  Object.assign(screen, e);
  list.value = [];
  PIndex.value = 0;
  // 查询申请记录
  querDiyRefundSelect();
};

// 选择开始时间
const changeStartDate = (e: any) => {
  Object.assign(screen, e);
  list.value = [];
  PIndex.value = 0;
  // 查询申请记录
  querDiyRefundSelect();
};

// 查询
const queryRecords = (e: any) => {
  PIndex.value = 0;
  list.value = [];
  // 查询申请记录
  querDiyRefundSelect();
};

// 重置
const resetScreen = (e: any) => {
  let newScreen = common.deepCopy(e);
  Object.assign(screen, newScreen);
  list.value = [];
  PIndex.value = 0;
  // 查询申请记录
  querDiyRefundSelect();
};

const editRefunInfo = (item: any) => {
  common.goToUrl(`/pagesPatient/st1/business/refund/refundApplicationForm/refundApplicationForm?refunInfo=${encodeURIComponent(JSON.stringify(item))}`);
};
</script>

<style>
.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;
}
.footerBtn {
  justify-content: flex-end;
  padding-bottom: 30upx;
}

.footerBtn text {
  line-height: 66upx;
  display: inline-block;
  text-align: center;
  font-size: 28upx;
  border-radius: 60upx;
  position: relative;
  margin-right: 20upx;
  padding: 0 32upx;
}
</style>