270 lines
7.7 KiB
Vue
270 lines
7.7 KiB
Vue
<template>
|
|
<Mask v-if="!socialPayInfo?.setlinfo.psn_cash_pay" :is-show="show" :width="348" :height="377" title="结算信息"
|
|
@close="close" :show-footer="true">
|
|
<div class="container" style="padding: 24px;height: 100%">
|
|
<div
|
|
style="background: #F9FAFC;height: 100%;padding: 24px;display: flex;flex-direction: column;justify-content: space-between">
|
|
<div>总金额：{{ socialPayInfo.setlinfo.medfee_sumamt }}</div>
|
|
<div>基金支付金额：{{ socialPayInfo.setlinfo.fund_pay_sumamt }}</div>
|
|
<div> 个人医保支付金额：{{ socialPayInfo.setlinfo.acct_pay }}</div>
|
|
<div style="color: #ff0000"> 个人现金支付金额：{{ socialPayInfo.setlinfo.psn_cash_pay }}</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="bottom">
|
|
<div class="btn">
|
|
<span @click="cecalOrder">取消支付</span>
|
|
<span @click="completeSettlement">完成订单</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Mask>
|
|
<Mask v-else :is-show="show" :width="633" :height="401" title="结算信息" @close="show=false" :show-footer="true">
|
|
<div class="container" style="width:100%;height: 100%;display: flex;padding: 24px">
|
|
<div
|
|
style="width:300px;background: #F9FAFC;height: 100%;padding: 24px;margin-right:24px;display: flex;flex-direction: column;justify-content: space-between">
|
|
<div>总金额：{{ socialPayInfo.setlinfo.medfee_sumamt }}</div>
|
|
<div>基金支付金额：{{ socialPayInfo.setlinfo.fund_pay_sumamt }}</div>
|
|
<div> 个人医保支付金额：{{ socialPayInfo.setlinfo.acct_pay }}</div>
|
|
<div style="color: #ff0000"> 个人现金支付金额：{{ socialPayInfo.setlinfo.psn_cash_pay }}</div>
|
|
</div>
|
|
<div style="flex:1;height: 100%">
|
|
<div class="price-type" v-if="socialPayInfo.setlinfo.psn_cash_pay>0">
|
|
<div
|
|
class="btn"
|
|
:style="{
|
|
backgroundColor:
|
|
selectedIndex == index
|
|
? item.activeBackgroundColor
|
|
: hoverIndex == index
|
|
? item.activeBackgroundColor
|
|
: item.backgrountColor,
|
|
}"
|
|
v-for="(item, index) in btnsList"
|
|
:key="index"
|
|
@click="changePriceType(item.type,index)"
|
|
@mouseover="hoverIndex = index"
|
|
@mouseleave="hoverIndex = null"
|
|
>
|
|
<img
|
|
class="image"
|
|
:src="selectedIndex == index || hoverIndex == index ? item.imgActive : item.img"
|
|
alt=""
|
|
srcset=""
|
|
style="margin-right: 4px"
|
|
/>
|
|
<span class="pay-left-text" :style="{color: selectedIndex==index?'#fff':''}">{{ item.name }}</span>
|
|
</div>
|
|
<el-input v-model="cash" placeholder="请输入收到现金的数量" style="height: 100%"></el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="bottom">
|
|
<div class="btn">
|
|
<span class="default-btn" @click="openDetail">查看详情</span>
|
|
<span class="default-btn" @click="cecalOrder">取消支付</span>
|
|
<span class="default-btn" @click="completeSettlement">完成订单</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Mask>
|
|
<PaymentDetail ref="detailRef"></PaymentDetail>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Mask from "@/components/common/Mask.vue";
|
|
import {nextTick, ref} from "vue";
|
|
import {priceBtnListNoSocial} from "@/assets/config/constants.ts";
|
|
import CloseBtn from "@/components/CloseBtn.vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
import PaymentDetail from "@/components/charge/RecordsLog/PaymentDetail.vue";
|
|
|
|
const socialPayInfo = ref<any>(null)
|
|
|
|
const payType = ref(null)
|
|
const selectedIndex = ref(null)
|
|
const changePriceType = (type: any, index: any) => {
|
|
selectedIndex.value = index
|
|
payType.value = type;
|
|
}
|
|
const orderInfo = ref<any>(null)
|
|
const show = ref(false)
|
|
const open = (payInfo: any, order: any) => {
|
|
show.value = true
|
|
socialPayInfo.value = payInfo;
|
|
orderInfo.value = order;
|
|
}
|
|
|
|
const cash = ref<number>(0)
|
|
const emit = defineEmits(["orderCompleted", "orderCancel"])
|
|
const completeSettlement = () => {
|
|
if (cash.value != socialPayInfo.value.setlinfo.psn_cash_pay) {
|
|
ElMessage({
|
|
message: '现金支付金额与实际收款金额不一致',
|
|
type: 'warning',
|
|
})
|
|
return
|
|
}
|
|
const params = {
|
|
mdtrtCertType: orderInfo.value.mdtrtCertType,
|
|
mdtrtCertNo: orderInfo.value.mdtrtCertNo,
|
|
insutype: orderInfo.value.insutype,
|
|
changeOrderCode: orderInfo.value.changeOrderCode,
|
|
}
|
|
post("charge/socialRealPay", {...params}).then((res: any) => {
|
|
orderCompleted()
|
|
})
|
|
}
|
|
|
|
|
|
const cecalOrder = () => {
|
|
// ElMessageBox.confirm(
|
|
// `取消后不能恢复，是否确定取消当前订单？`,
|
|
// 'Warning',
|
|
// {
|
|
// confirmButtonText: '确认取消',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning',
|
|
// }
|
|
// ).then(() => {
|
|
// post("retail/cancelOrder", {orderId: orderInfo.value.orderId}).then((res: any) => {
|
|
// show.value = false;
|
|
// emit('orderCancel')
|
|
// })
|
|
// })
|
|
close()
|
|
}
|
|
const close = () => {
|
|
show.value = false
|
|
cash.value = 0
|
|
}
|
|
defineExpose({open})
|
|
|
|
const psnPaymentRef = ref();
|
|
const openPsnPayment = (payInfo: any, orderInfo: any) => {
|
|
nextTick(() => {
|
|
psnPaymentRef.value.open(payInfo, orderInfo);
|
|
})
|
|
|
|
}
|
|
const orderCompleted = () => {
|
|
show.value = false;
|
|
emit('orderCompleted')
|
|
}
|
|
const orderCanceled = () => {
|
|
show.value = false;
|
|
}
|
|
const hoverIndex = ref<any>(null)
|
|
const btnsList = [
|
|
{
|
|
type: 1,
|
|
name: '微信支付',
|
|
backgrountColor: '#ecf8fe',
|
|
activeBackgroundColor: '#80cfdb',
|
|
img: '/static/images/slices/2.png',
|
|
imgActive: '/static/images/slices/2-active.png',
|
|
},
|
|
{
|
|
type: 2,
|
|
name: '支付宝',
|
|
backgrountColor: '#fff5ec',
|
|
activeBackgroundColor: '#fdb376',
|
|
img: '/static/images/slices/3.png',
|
|
imgActive: '/static/images/slices/3-active.png',
|
|
},
|
|
{
|
|
type: 3,
|
|
name: '现金支付',
|
|
backgrountColor: '#ffeeee',
|
|
activeBackgroundColor: '#ff8686',
|
|
img: '/static/images/slices/4.png',
|
|
imgActive: '/static/images/slices/4-active.png',
|
|
},
|
|
{
|
|
type: 4,
|
|
name: '其他支付',
|
|
backgrountColor: '#e5f9ff',
|
|
activeBackgroundColor: '#30e3ca',
|
|
img: '/static/images/slices/5.png',
|
|
imgActive: '/static/images/slices/5-active.png',
|
|
},
|
|
]
|
|
const detailRef = ref()
|
|
const openDetail = () => {
|
|
nextTick(() => {
|
|
detailRef.value?.init(socialPayInfo.value.setlinfo)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.price-type {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
width: 124px;
|
|
height: 46px;
|
|
background: #ECF8FE;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
&:nth-child(3) {
|
|
margin: 17px 0;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
margin: 17px 0;
|
|
}
|
|
|
|
.image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #fff;
|
|
background-color: #409EFF;
|
|
}
|
|
|
|
}
|
|
|
|
.bottom {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
|
|
.btn {
|
|
span {
|
|
display: inline-block;
|
|
width: 120px;
|
|
height: 48px;
|
|
text-align: center;
|
|
line-height: 48px;
|
|
border-radius: 8px;
|
|
border: 1px solid #D8D8D8;
|
|
margin-left: 21px;
|
|
cursor: pointer;
|
|
|
|
&:nth-child(2) {
|
|
background: #4D6DE4;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
height: 68px;
|
|
font-size: 22px;
|
|
}
|
|
</style> |