新增快捷收银
This commit is contained in:
355
src/components/fastPayCard.vue
Normal file
355
src/components/fastPayCard.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<div class="return" @click="returnHandle">
|
||||
<el-icon class="icon">
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="t1">
|
||||
<span class="title">应收:￥</span>
|
||||
<span class="num">{{ money }}</span>
|
||||
</div>
|
||||
<div class="t2">
|
||||
<span>已付:￥0.00</span>
|
||||
<span>优惠:￥0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="number_wrap">
|
||||
<div class="menus">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: payActive == index }"
|
||||
v-for="(item, index) in payList"
|
||||
:key="item.id"
|
||||
@click="payTypeChange(index, item)"
|
||||
>
|
||||
<div class="icon">
|
||||
<el-image :src="item.icon" class="img"></el-image>
|
||||
</div>
|
||||
<span class="title">{{ item.payName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input_wrap">
|
||||
<div class="input" style="flex: 1">储值:￥{{ money }}</div>
|
||||
</div>
|
||||
<div class="blance">
|
||||
<!-- 可用余额：0.00 -->
|
||||
</div>
|
||||
<div class="keybord_wrap">
|
||||
<div class="left">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in 9"
|
||||
:key="item"
|
||||
@click="amountInput(`${item}`)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="item" @click="amountInput('.')">.</div>
|
||||
<div class="item" @click="amountInput('0')">0</div>
|
||||
<div class="item" @click="delHandle">
|
||||
<el-icon>
|
||||
<CloseBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay_btn" v-loading="payLoading" @click="confirmOrder">
|
||||
<span>支</span>
|
||||
<span>付</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scanModal
|
||||
ref="scanModalRef"
|
||||
fast
|
||||
:amount="money"
|
||||
@success="scanCodeSuccess"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import { queryPayType, quickPay } from "@/api/pay";
|
||||
import { useUser } from "@/store/user.js";
|
||||
import { clearNoNum } from "@/utils";
|
||||
|
||||
import scanModal from "@/components/payCard/scanModal.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const store = useUser();
|
||||
|
||||
const emit = defineEmits(["paySuccess", "close"]);
|
||||
|
||||
const money = ref("0");
|
||||
const scanModalRef = ref(null);
|
||||
|
||||
const payActive = ref(0);
|
||||
const payList = ref([]);
|
||||
const payLoading = ref(false);
|
||||
|
||||
function returnHandle() {
|
||||
emit("close");
|
||||
}
|
||||
|
||||
// 获得扫码值
|
||||
function scanCodeSuccess() {
|
||||
emit("paySuccess");
|
||||
}
|
||||
|
||||
// 切换支付类型
|
||||
function payTypeChange(index, item) {
|
||||
if (item.payType == "scanCode") {
|
||||
if (money.value > 0) {
|
||||
scanModalRef.value.show();
|
||||
} else {
|
||||
ElMessage.error("请输入大于0的金额");
|
||||
return;
|
||||
}
|
||||
}
|
||||
payActive.value = index;
|
||||
}
|
||||
|
||||
// 结算支付
|
||||
async function confirmOrder() {
|
||||
try {
|
||||
if (payList.value[payActive.value].payType == "scanCode") {
|
||||
scanModalRef.value.show();
|
||||
} else {
|
||||
if (money.value <= 0) {
|
||||
ElMessage.error("请输入大于0的金额");
|
||||
return;
|
||||
}
|
||||
payLoading.value = true;
|
||||
switch (payList.value[payActive.value].payType) {
|
||||
case "cash": //现金
|
||||
await quickPay({
|
||||
amount: money.value,
|
||||
authCode: "",
|
||||
payType: payList.value[payActive.value].payType,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
payLoading.value = false;
|
||||
ElMessage.success("支付成功");
|
||||
emit("paySuccess");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
payLoading.value = false;
|
||||
scanModalRef.value.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入
|
||||
function amountInput(num) {
|
||||
money.value = clearNoNum({ value: (money.value += num) });
|
||||
}
|
||||
|
||||
// 删除
|
||||
function delHandle() {
|
||||
if (!money.value) return;
|
||||
money.value = money.value.substring(0, money.value.length - 1);
|
||||
if (!money.value) {
|
||||
money.value = "0";
|
||||
}
|
||||
}
|
||||
|
||||
// 获取支付方式
|
||||
async function queryPayTypeAjax() {
|
||||
try {
|
||||
const res = await queryPayType({
|
||||
shopId: store.userInfo.shopId,
|
||||
});
|
||||
|
||||
const arr = [];
|
||||
res.map((item) => {
|
||||
if (item.payType == "cash" || item.payType == "scanCode") {
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
payList.value = arr;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
money.value = 0;
|
||||
payActive.value = 0;
|
||||
}
|
||||
|
||||
defineExpose({ reset });
|
||||
|
||||
onMounted(() => {
|
||||
queryPayTypeAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: var(--el-font-size-base);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: var(--el-font-size-base);
|
||||
border-bottom: 1px solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.return {
|
||||
$size: 50px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
|
||||
.icon {
|
||||
color: #333;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.t1 {
|
||||
display: flex;
|
||||
color: var(--el-color-danger);
|
||||
font-weight: bold;
|
||||
|
||||
.title {
|
||||
font-size: var(--el-font-size-base);
|
||||
position: relative;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.t2 {
|
||||
display: flex;
|
||||
gap: var(--el-font-size-base);
|
||||
color: #999;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.number_wrap {
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.item {
|
||||
height: 130px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
$lineHeight: 4px;
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 50%;
|
||||
height: $lineHeight;
|
||||
background-color: var(--primary-color);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 25%;
|
||||
border-radius: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
$size: 40px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input_wrap {
|
||||
display: flex;
|
||||
gap: var(--el-font-size-base);
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--primary-color);
|
||||
font-size: calc(var(--el-font-size-base) + 6px);
|
||||
padding: 0 var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
.blance {
|
||||
color: var(--el-color-danger);
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.keybord_wrap {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
--item-height: calc((100vh - 440px) / 4);
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(
|
||||
--item-height
|
||||
);
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.item {
|
||||
background-color: #efefef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
|
||||
&:active {
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
flex: 0.3;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background-color: var(--el-color-warning);
|
||||
margin-left: var(--el-font-size-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user