web/src/components/retail/Settlement.vue

<template>
  <Mask :width="585" :height="438" :is-show="show">
    <el-card>
      <template #header>
        <div class="header">
          <span>收费</span>
          <CloseBtn @click="show = false" style="margin-top: 12px"></CloseBtn>
        </div>
      </template>
      <div class="panel">
        <div class="price">￥{{ prop.money }}</div>
        <div class="social" >
          <CardPay v-model="socialCard"/>
        </div>
        <div class="price-type">
          <div
              class="price-type-item"
              :class="['btn',payType==item.type?'active':'']"
              v-for="(item,index) in priceBtnList"
              @click="changePriceType(item.type)"
          >
           <div class="image" :style="{'background-color':item.color}">
             <img style="width: 16px;height: 16px;" :src="item.img" alt=""/>
           </div>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="footer">
          <el-checkbox v-model="printReceipt">同时打印凭证</el-checkbox>
          <el-button @click="completeSettlement()" type="primary">完成收费</el-button>
        </div>
        </template>
    </el-card>
  </Mask>
  <PersonalPayment ref="psnPaymentRef" @orderCompleted="orderCompleted" @orderCancel="orderCanceled"></PersonalPayment>
</template>

<script setup lang="ts">

import Mask from "@/components/Mask.vue";
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import CloseBtn from "@/components/CloseBtn.vue";
import {post} from "@/utils/request.ts";
import CardPay from "@/components/retail/CardPay.vue";
import {medTypeJson, priceBtnList} from "@/assets/config/constants.ts"
import PersonalPayment from "@/components/retail/PersonalPayment.vue";
import {useWsStore} from "@/stores/wsStore.ts";
const wsStore = useWsStore();
const socialCard =defineModel<any>();
const prop=defineProps({
  money: {
    type: String,
    default: ''
  }
})

const show = ref(false)
const printReceipt = ref(false);
const payType = ref(null);
const retailOrder = ref<any>(null);
const init = (order: any) => {
  retailOrder.value = order;
  show.value = true;
}
defineExpose({init})
const changePriceType = (type: any) => {
  payType.value = type;
}
const emit = defineEmits(['orderComplete','orderCanceled'])
const completeSettlement = ()=>{
  if (!retailOrder.value){
  return;
  }
  if (payType.value == null){
    return
  }
  if(payType.value == 1){
    //医保结算
    socialSettlement();
  }else {
    //其他结算
    post('retail/completeOrder',{retailId:retailOrder.value.id,payType:payType.value}).then((res:any)=>{
      orderCompleted()
    })
  }

}
const orderCompleted = ()=>{
  show.value = false;
  emit('orderComplete',printReceipt.value)
}
const orderCanceled = ()=>{
  show.value = false;
  emit('orderCanceled')
}

const getBalcByInsutype = (type:any) =>{
  let balc =0;
  for (const item of socialCard.value.data.insuinfo) {
    if (item.insutype == type) {
      balc = item.balc;
      break;
    }
  }
  return balc
}

const socialSettlement = ()=>{
  const params = {
    mdtrtCertType: socialCard.value.mdtrtCertType,
    mdtrtCertNo: socialCard.value.mdtrtCertNo,
    psnNo: socialCard.value.data.baseinfo.psn_no,
    orderId:retailOrder.value.id,
    insutype: socialCard.value.payInfo.selfpay_prop_type,
    payType: payType.value,
    curBalc:getBalcByInsutype(socialCard.value.payInfo.selfpay_prop_type)
  }
    //预结算
  post("retail/socialPrePay",{orderInfo:params}).then((res:any)=>{
    openPsnPayment(res,params)
  })

}
const psnPaymentRef = ref();
const openPsnPayment = (payInfo:any,orderInfo:any)=>{
  nextTick(()=>{
    psnPaymentRef.value.open(payInfo,orderInfo);
  })

}

</script>



<style scoped lang="scss">
.panel {
  .price{
    height: 50px;
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: rgba(237, 120, 23, 0.8);
  }
  .price-type {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .btn {
      height: 45px;
      width: 95px;
      font-size: 14px;
      border-radius: 10px;
      display: flex;
      background: #efecec;
      margin-bottom: 10px;
      justify-content: center;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      .image{
        width: 16px;
        height: 16px;
        margin-right: 3px;
        border-radius: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &:hover {
        //color: #fff;
        //background-color: #409EFF;
        border: 1px solid #409EFF;
      }
    }

    .active {
      color: #fff;
      background-color: #409EFF;
    }

  }
}
.footer{
  display: flex;
  justify-content: space-between;
}
</style>