czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接完毕下单

Browse Source
This commit is contained in:
gyq
2024-03-04 15:48:40 +08:00
parent 6e796c1855
commit 27721ca096
21 changed files with 1010 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/payCard.vue
View File

@@ -1,199 +0,0 @@
<template>
<div class="card">
<div class="header">
<div class="t1">
<span class="title">应收:￥</span>
<span class="num">5.03</span>
</div>
<div class="t2">
<span>已付:￥0.00</span>
<span>优惠:￥0.00</span>
</div>
</div>
<div class="number_wrap">
<div class="menus">
<div class="item" :class="{ active: active == 1 }">
<div class="icon_wrap cz">
<el-icon class="icon">
<WalletFilled />
</el-icon>
</div>
<span class="title">储值</span>
</div>
<div class="item" :class="{ active: active == 2 }">
<div class="icon_wrap smzf">
<el-icon class="icon">
<FullScreen />
</el-icon>
</div>
<span class="title">扫码支付</span>
</div>
<div class="item">
<div class="icon_wrap yhk">
<el-icon class="icon">
<CreditCard />
</el-icon>
</div>
<span class="title">银行卡</span>
</div>
<div class="item">
<div class="icon_wrap xj">
<span class="icon_t">￥</span>
</div>
<span class="title">现金</span>
</div>
</div>
<div class="input_wrap">
<div class="input" style="flex: 1;">储值:￥{{ props.amount }}</div>
<div class="input">待支付:￥{{ waitPayMoney }}</div>
</div>
<div class="blance">
可用余额：0.00
</div>
<div class="keybord_wrap">
<div class="left">
<div class="item"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
amount: {
type: Number,
default: 0
}
})
const active = ref(1)
const waitPayMoney = ref(0)
function amountInput(e) {
console.log(e)
}
</script>
<style scoped lang="scss">
.card {
padding: 20px;
height: 100%;
}
.header {
padding-bottom: 30px;
border-bottom: 1px solid #ececec;
.t1 {
display: flex;
color: var(--el-color-danger);
font-weight: bold;
.title {
font-size: 24px;
position: relative;
top: 14px;
}
.num {
font-size: 40px;
}
}
.t2 {
display: flex;
gap: 20px;
color: #999;
padding-top: 10px;
}
}
.number_wrap {
padding: 20px 0;
.menus {
display: flex;
gap: 20px;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #efefef;
padding: 50px 0;
border-radius: 10px;
.icon_wrap {
$size: 60px;
width: $size;
height: $size;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
.icon,
.icon_t {
color: #fff;
}
.icon {
font-size: 30px;
}
.icon_t {
font-size: 24px;
}
&.cz {
background-color: var(--primary-color);
}
&.smzf {
background-color: var(--el-color-warning);
}
&.yhk {
background-color: var(--el-color-danger);
}
&.xj {
background-color: #e6d00f;
}
}
.title {
padding-top: 10px;
}
}
}
.input_wrap {
display: flex;
gap: 20px;
padding: 20px 0;
.input {
display: flex;
align-items: center;
height: 80px;
border-radius: 10px;
border: 1px solid var(--primary-color);
font-size: 26px;
font-weight: 400;
padding: 0 30px;
}
}
.blance {
color: var(--el-color-danger);
font-size: 26px;
}
}
</style>

311
src/components/payCard/payCard.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<div class="card">
<div class="header">
<div class="t1">
<span class="title">应收:￥</span>
<span class="num">{{ props.amount }}</span>
</div>
<div class="t2">
<span>已付:￥0.00</span>
<span>优惠:￥0.00</span>
</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" style="width: 50px;height: 50px;"></el-image>
</div>
<span class="title">{{ item.payName }}</span>
</div>
</div>
<div class="input_wrap">
<div class="input" style="flex: 1;">储值:￥{{ money }}</div>
<div class="input" v-if="waitPayMoney > 0">待支付:￥{{ waitPayMoney }}</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" :amount="props.amount" :orderId="props.orderId" @success="scanCodeSuccess" />
</template>
<script setup>
import { onMounted, ref, computed, watch } from 'vue'
import { queryPayType, accountPay, cashPay } 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 props = defineProps({
amount: {
type: Number,
default: 0
},
orderId: {
type: [String, Number],
default: ''
}
})
const emit = defineEmits(['paySuccess'])
const money = ref('0')
const scanModalRef = ref(null)
watch(props, (value) => {
money.value = `${props.amount}`
})
const waitPayMoney = computed(() => {
let num = JSON.stringify(props.amount - money.value)
num = Math.floor(num * 100) / 100
return num
})
const payActive = ref(0)
const payList = ref([])
const payLoading = ref(false)
// 获得扫码值
function scanCodeSuccess() {
emit('paySuccess')
}
// 切换支付类型
function payTypeChange(index, item) {
payActive.value = index
if (item.payType == 'scanCode') {
scanModalRef.value.show()
}
}
// 结算支付
async function confirmOrder() {
try {
if (money.value < props.amount) return
payLoading.value = true
switch (payList.value[payActive.value].payType) {
case 'deposit':
await accountPay({
orderId: props.orderId,
memberId: 1
})
break;
case 'cash':
await cashPay({
orderId: props.orderId
})
break;
default:
break;
}
ElMessage.success('支付成功')
emit('paySuccess')
payLoading.value = false
} catch (error) {
console.log(error)
payLoading.value = false
scanModalRef.value.loading = false
}
}
// 输入
function amountInput(num) {
if (money.value + num <= props.amount) {
money.value = clearNoNum({ value: (money.value += num) })
} else {
money.value = clearNoNum({ value: `${props.amount}` })
}
}
// 删除
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
})
payList.value = res
} catch (error) {
console.log(error)
}
}
onMounted(() => {
money.value = `${props.amount}`
queryPayTypeAjax()
})
</script>
<style scoped lang="scss">
.card {
padding: 20px;
height: 100%;
}
.header {
padding-bottom: 30px;
border-bottom: 1px solid #ececec;
.t1 {
display: flex;
color: var(--el-color-danger);
font-weight: bold;
.title {
font-size: 24px;
position: relative;
top: 14px;
}
.num {
font-size: 40px;
}
}
.t2 {
display: flex;
gap: 20px;
color: #999;
padding-top: 10px;
}
}
.number_wrap {
padding: 20px 0;
.menus {
display: flex;
gap: 20px;
.item {
height: 196px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #efefef;
padding: 50px 0;
border-radius: 10px;
position: relative;
$lineHeight: 4px;
&.active {
&::after {
content: "";
width: 60%;
height: $lineHeight;
background-color: var(--primary-color);
position: absolute;
bottom: 0;
left: 20%;
border-radius: $lineHeight;
}
}
.icon {
font-size: 30px;
}
.title {
padding-top: 10px;
}
}
}
.input_wrap {
display: flex;
gap: 20px;
padding: 20px 0;
.input {
display: flex;
align-items: center;
height: 80px;
border-radius: 10px;
border: 1px solid var(--primary-color);
font-size: 26px;
font-weight: 400;
padding: 0 30px;
}
}
.blance {
color: var(--el-color-danger);
font-size: 26px;
}
}
.keybord_wrap {
display: flex;
padding-top: 20px;
.left {
--item-height: calc((100vh - 650px) / 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: 20px;
.item {
background-color: #efefef;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 28px;
&:active {
background-color: #dbdbdb;
}
}
}
.pay_btn {
border-radius: 6px;
width: 200px;
color: #fff;
background-color: var(--el-color-warning);
margin-left: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26px;
}
}
</style>

272
src/components/payCard/scanModal.vue Normal file
View File

@@ -0,0 +1,272 @@
<!-- 扫码弹窗 -->
<template>
<el-dialog title="扫码支付" width="800" v-model="dialogVisible" @open="reset">
<div class="content">
<div class="left">
<el-image :src="icon"></el-image>
</div>
<div class="right" v-if="!userPayWait">
<div class="amount">
<span class="t">扫码支付</span>
<span class="n">{{ props.amount }}</span>
</div>
<div class="input">
<el-input ref="inputRef" v-model="scanCode" style="height: 80px;" placeholder="请扫描付款码"
@keydown.enter="enterHandle" clearable></el-input>
</div>
<div class="number_warp">
<div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
<div class="item disabled">.</div>
<div class="item" @click="inputHandle(0)">0</div>
<div class="item" @click="delHandle">
<el-icon>
<CloseBold />
</el-icon>
</div>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;height: 60px;" v-loading="loading"
@click="submitHandle">立即支付</el-button>
</div>
</div>
<div class="pay_wait" v-else>
<div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
<div class="btn">
<el-button type="primary" style="width: 100%;" v-loading="checkPayStatusLoading"
@click="checkPayStauts">
<span v-if="!checkPayStatusLoading">查询用户支付状态</span>
<span v-else>查询中...</span>
</el-button>
</div>
<div class="btn">
<el-button style="width: 100%;" @click="resetScanCode">重新扫码</el-button>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup>
import _ from 'lodash'
import { ref } from 'vue'
import icon from '@/assets/icon_scan.png'
import { scanpay, queryOrder } from '@/api/pay'
import { ElMessage } from "element-plus";
const emits = defineEmits(['success'])
const props = defineProps({
amount: {
type: [Number, String],
default: 0
},
orderId: {
type: [Number, String],
default: ''
}
})
const dialogVisible = ref(false)
const scanCode = ref('')
const inputRef = ref(null)
const loading = ref(false)
const userPayWait = ref(false)
const checkPayStatusLoading = ref(false)
// 提交扫码支付
async function submitHandle() {
try {
if (!scanCode.value) return
loading.value = true
await scanpay({
orderId: props.orderId,
authCode: scanCode.value
})
emits('success')
} catch (error) {
if (error.code === '100015') {
userPayWait.value = true
} else {
console.log(error)
}
}
}
// 查询用户支付状态
async function checkPayStauts() {
try {
const res = await queryOrder({ orderId: props.orderId })
loading.value = false
if (res.status == 'closed') {
emits('success')
scanModalRef.value.close()
} else {
checkPayStatusLoading.value = false
ElMessage.error(res.payRemark || '支付失败！')
scanModalRef.value.loading = false
}
} catch (error) {
console.log(error)
}
}
// 重新扫码
function resetScanCode() {
userPayWait.value = false
loading.value = false
scanCode.value = ''
inputRef.value.focus()
}
// 输入
function inputHandle(n) {
scanCode.value += n
inputRef.value.focus()
}
// 删除
function delHandle() {
if (!scanCode.value) return
scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1)
inputRef.value.focus()
}
// 监听扫码枪回车事件
function enterHandle() {
inputRef.value.focus()
}
// const inputChange = _.debounce(function (e) {
// console.log(e);
// }, 300)
function show() {
dialogVisible.value = true
setTimeout(() => {
inputRef.value.focus()
}, 500)
}
function close() {
dialogVisible.value = false
}
function reset() {
loading.value = false
scanCode.value = ''
}
defineExpose({
show,
close,
loading
})
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
padding: 0 !important;
}
.content {
display: flex;
.left {
width: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #efefef;
}
.right {
flex: 1;
padding: 0 20px;
.amount {
display: flex;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--primary-color);
background-color: #555;
border-radius: 6px;
padding: 0 20px;
font-size: 30px;
}
.input {
padding: 20px 0;
:deep(.el-input__inner) {
font-size: 30px;
}
}
.number_warp {
--h: 70px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
gap: 20px;
.item {
background-color: #dddddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 6px;
&.disabled {
color: #999;
background-color: #efefef;
&:active {
background-color: #efefef;
}
}
&:active {
background-color: #b9b9b9;
}
}
}
.btn {
padding-top: 20px;
}
}
.pay_wait {
flex: 1;
padding: 0 20px;
height: 600px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.loading {
width: 200px;
height: 200px;
--el-loading-spinner-size: 100px;
:deep(.el-loading-text) {
font-size: 20px;
}
}
.btn {
width: 200px;
padding-top: 20px;
}
}
}
</style>

9
src/components/remarkModal.vue
View File

@@ -10,7 +10,7 @@
</div>
<div class="footer_wrap">
<div class="btn">
<el-button type="primary" style="width: 100%;">确认</el-button>
<el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
</div>
</div>
</el-dialog>
@@ -18,6 +18,8 @@
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const remark = ref('')
@@ -31,6 +33,11 @@ const tagList = ref([
}
])
function confirmHandle() {
emit('success', remark.value)
dialogVisible.value = false
}
// 显示组件
const show = () => {
dialogVisible.value = true