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-01 20:30:41 +08:00
parent 2e783aa36c
commit 120c478b86
7 changed files with 520 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,199 @@
<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>

20
src/components/settleAccount.vue
View File

@@ -1,20 +0,0 @@
<!-- 结算订单 -->
<template>
<el-drawer size="100%" :with-header="false" direction="ttb" v-model="dialogVisible">
<div class="drawer_wrap">
</div>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>
<style scoped lang="scss">
.drawer_wrap {
width: 100%;
height: 100%;
}
</style>