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

<template>
  <view class="container">
    <view class="content">
      <userInfo :currentUser="memberInfo" />

      <view class="white-panel no-padding">
        <view class="amount text-center">
          <view class="text-color__danger amount-info__value font-bold">￥{{ amountFormatter(refundDetail.CanRefundSum) / 100 || 0 }}</view>
          <view class="amount-info__text">可退金额</view>
        </view>

        <!-- 分割线 -->
        <cardDiv colorLine="#eee" colorGap="#f0f1f6"></cardDiv>

        <view class="panel-main">
          <!-- 卡列表 -->
          <view class="card-list">
            <view
              class="card-list__item display-flex__ac displayFlexBetween"
              v-for="(cardItem, index) in refundDetail.CardInfoList"
              :key="index"
            >
              <view>就诊卡：{{ cardFormatter(cardItem.CardNo) }}</view>
              <view>余额：{{ amountFormatter(cardItem.RefundMoney) / 100 || 0 }}元</view>
            </view>
          </view>
        </view>

      </view>

      <!-- 原路退 -->
      <view class="white-panel" @click="toOrigRefund">
        <view class="header display-flex__ac">
          <text class="refund-type__mainTit font-bold text-color__dominant">原路退（自助退）</text>
          <text class="refund-type__subTit text-color__secondary">可退金额：</text>
          <text class="refund-type__amount text-color__danger">￥{{ amountFormatter(refundDetail.OnlineReturnMoneySum) / 100 || 0 }}</text>
        </view>
        <view class="desc text-color__info">
          支持12个月内您使用微信支付和3个月内您使用的支付宝支付或充值的订单原路退回，即退回原充值渠道。
        </view>
        <view class="btn_arrow"></view>
      </view>

      <!-- 转账退 -->
      <view class="white-panel" @click="toRefundForm">
        <view class="header display-flex__ac">
          <text class="refund-type__mainTit font-bold text-color__dominant">转账退</text>
          <text class="refund-type__subTit text-color__secondary">可退金额：</text>
          <text class="refund-type__amount text-color__danger">￥{{ amountFormatter(refundDetail.YhkReturnMoneySum) / 100 || 0 }}</text>
        </view>
        <view class="desc text-color__info text-justify">
          无法原路退回的门诊预缴金，支持银行卡转账退费。
        </view>
        <view class="btn_arrow"></view>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import common from "@/utils/common";
import { queryCanOriginalReturnedMoney } from "@/pagesPatient/service/refund/index";

// Components
import userInfo from "../components/userInfo/userInfo.vue";
import cardDiv from "../components/cardDiv/cardDiv.vue";

const app = getApp();

// Data
const memberInfo = ref<any>({});
const refundDetail = ref<any>({});

// Helper functions (formerly WXS)
const amountFormatter = (val: any) => {
  if (!val) return 0;
  return Number(val);
};

const cardFormatter = (val: string) => {
  if (!val || val.length !== 36) { // 非现金卡
    return val;
  }
  // 现金卡
  return val.substring(5, 13);
};

// Lifecycle
onLoad((options) => {
  initPageParam(options);
});

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

// Methods
const initPageParam = (options: any) => {
  const { queryBean } = app.globalData;
  if (queryBean) {
    memberInfo.value = queryBean;
    app.globalData.queryBean = null;
  }
};

const QueryCanOriginalReturnedMoney = async () => {
  const reqData = {
    BaseMemberEncryptionStore: memberInfo.value.baseMemberEncryptionStore,
    IsQueryHis: 1,  // 就诊卡列表是否实时查HIS（0——本地（旧版），1——查HIS（新版））
  };
  
  const { resData, resp: listResp } = await queryCanOriginalReturnedMoney(reqData);
  
  if (resData.RespCode != "10000") {
    return;
  }

  const cardInfoList = (listResp && listResp[0]?.CardInfoList) || [];
  
  let canRefundSum = 0; // 可退总金额（单位：分）
  let onlineReturnMoneySum = 0;
  if (cardInfoList) {
    cardInfoList.forEach((card: any) => {
      canRefundSum += Number(card.Balance || 0);
      onlineReturnMoneySum += Number(card.RefundableBalance || 0);
    });
  }

  refundDetail.value = {
    CanRefundSum: canRefundSum,
    OnlineReturnMoneySum: onlineReturnMoneySum,
    YhkReturnMoneySum: canRefundSum - onlineReturnMoneySum,
    PatientId: (cardInfoList && cardInfoList[0]?.HisMemberId) || null,
    CardInfoList: cardInfoList.map((cardInfo: any) => {
      return {
        CardNo: cardInfo.CardNo,
        CardType: cardInfo.CardType,
        Mobile: cardInfo.Mobile,
        RefundMoney: cardInfo.Balance - cardInfo.RefundableBalance,
        PatientId: cardInfo.HisMemberId
      };
    }).filter((cardInfo: any) => cardInfo.RefundMoney > 0)
  };
};

const toOrigRefund = () => {
  common.goToUrl(`/pagesPatient/st1/business/outpatient/outpatientRefund/outpatientRefund`);
};

const toRefundForm = () => {
  app.globalData.queryBean = {
    memberInfo: memberInfo.value,
    refundDetail: refundDetail.value,
  };
  common.goToUrl(`/pagesPatient/st1/business/outpatient/outpatientRefundNew/refundForm/refundForm`);
};
</script>

<style scoped>
@import "../static/css/refund.wxss";

.content {
  padding: 30upx 30upx 200upx;
}

.amount {
  padding: 50upx 50upx 20upx;
}

.amount .amount-info__value {
  font-size: 48upx;
}

.amount .amount-info__text {
  font-size: 32upx;
  margin-top: 40upx;
}

.panel-main {
  padding: 0 30upx 30upx;
}

/* 卡列表 */
.card-list{}

.card-list .card-list__item {
  width: 100%;
  height: 90upx;
  border-radius: 14upx;
  background-color: #F7F7F9;
  padding: 20upx;
}

.card-list .card-list__item + .card-list__item {
  margin-top: 30upx;
}

/* 退款渠道选择 */
.header {
  height: 60upx;
  padding-right: 40upx;
}

.header .refund-type__mainTit {
  font-size: 34upx;
  line-height: 40upx;
}

.header .refund-type__subTit {
  font-size: 28upx;
  margin-left: 20upx;
}

.header .refund-type__amount {
  font-size: 28upx;
}

.desc {
  font-size: 24upx;
  line-height: 40upx;
  padding-right: 40upx;
}
</style>