wxservice-web/src/views/hospital-service/pay-mz-fee/UnPaidList.vue

<template>
  <van-empty :image="empty" description="您没有待缴费记录" v-if="showEmpty"></van-empty>
  <div v-for="item in unpaidFees" :key="item.hisOrdNum">
    <van-cell
        :title="makeTitle(item)"
        :label="item.priceTime"
        is-link
        center
        @click="handleClickHisItem(item)">
      <template #default>
        <span style="color: orangered">{{ makeMoney(item.totalAmt) }}</span>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
  </div>
  <van-popup v-model:show="showPayMethodPicker" position="bottom">
    <van-picker
        :columns="payMethodColumns"
        @cancel="showPayMethodPicker = false"
        @confirm="handleConfirmPayMethod"
    >
      <template #title>
        <van-button size="small" type="warning" plain @click="clickUnlockOrder">放弃支付</van-button>
      </template>
    </van-picker>
  </van-popup>
</template>

<script setup>
import {getFundPayAmt, getUnPaidFee} from '@/api/pay-mz-fee'
import empty from '@/assets/empty.png'
import {computed, onMounted, ref} from 'vue'
import {lockOrder,lockYbOrder,unlockOrder} from "@/api/medins-mobile-pay";
import store from "@/store";
import router from "@/router";
import {showToast} from "vant";
import Cookies from "js-cookie";

const props = defineProps({
  patientId: {
    type: String,
    required: true
  }
})

const unpaidFees = ref([])
const showEmpty = computed(() => {
  return unpaidFees.value.length === 0
})

const showPayMethodPicker = ref(false)

const currentHisItem = ref({})

function handleClickHisItem(item) {
  Cookies.set('hisOrdNum', item.hisOrdNum)
  currentHisItem.value = item
  showPayMethodPicker.value = true
}

const toWxPay = (item) => {
  getFundPayAmt(item.hisOrdNum).then(res => {
    const params = {
      patientId: props.patientId,
      hisOrdNum: item.hisOrdNum,
      patientName: item.patName,
      deptName: item.deptName,
      doctorCode: item.doctorCode,
      doctorName: item.doctorName,
      totalAmt: item.totalAmt,
      fundPay: res.fundPaySumamt,
      acctPay: res.acctPay,
      selfAmt: item.totalAmt - res.fundPaySumamt - res.acctPay
    }
    router.push({
      name: 'unPaidDetail',
      params,
    })
  })
}

function makeTitle(item) {
  return item.deptName + ' | ' + item.doctorName
}

function makeMoney(money) {
  const m = money / 100
  return '￥' + m.toFixed(2)
}

const payMethodColumns = [
  {text: '微信支付', value: 'WX'},
  {text: '医保支付（限本人）', value: 'YB'}
]

function handleConfirmPayMethod({selectedValues}) {
  const payMethod = selectedValues[0]
  const hisOrdNum = Cookies.get('hisOrdNum')

  if (payMethod === 'YB') {
    lockYbOrder({hisOrdNum}).then(openid => {
      store.commit('SET_LOADING', true);
      startMedInsMobilePay(openid)
    })
  } else {
    lockOrder({hisOrdNum}).then(() => {
      store.commit('SET_LOADING', true);
      toWxPay(currentHisItem.value)
    })
  }
}

function startMedInsMobilePay(openid) {
  location.href = 'https://pss.ybj.hunan.gov.cn' +
      '/pss-hunan-h5/mobilePayment/paymentRecordList?' +
      'channelCode=d32IFCxMsT&openId=' + openid
}

function clickUnlockOrder() {
  const hisOrdNum = Cookies.get('hisOrdNum')
    unlockOrder({hisOrdNum}).then(res => {
      showToast({
        position: 'top',
        message: '操作成功'
      })
      showPayMethodPicker.value = false
      router.push('/hospitalService')
    })
}

onMounted(() => {
  getUnPaidFee(props.patientId).then((res) => {
    unpaidFees.value = res
    let hisOrdNum = Cookies.get('hisOrdNum')
    if (hisOrdNum) {
      for (let i = 0; i < res.length; i++) {
        if (res[i].hisOrdNum === hisOrdNum) {
          currentHisItem.value = res[i]
        }
      }
    }
  })
})

</script>

<style lang="scss">
.med-ins-mobile-pay {
  .wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .block {
    border-radius: 8px;
    width: 90%;
    background-color: #fff;
    padding-bottom: 80px;

    .title {
      padding: 20px 8px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .fund-title {
      width: 100%;
      text-align: center;
      background-color: lightgrey;
      padding: 4px 0;
      font-size: 14px;
      margin-bottom: 24px;
    }

    .fund-detail {
      width: 100%;
      display: flex;

      > div {
        font-size: 12px;
        padding-left: 30px;
        width: 50%;
      }
    }

    .pay-button {
      width: 100%;
      text-align: center;
      margin-top: 24px;
    }
  }
}
</style>