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

Merge branch 'wwz' of gitee.com:shaanxi-super-shopkeeper_1/cashierdesktop into gyq

This commit is contained in:
gyq 2024-02-29 17:34:58 +08:00
parent 5deec59c38 6faf1474bd
commit 7d30a42cb8
4 changed files with 559 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.vue
View File

@ -94,6 +94,16 @@ html {
top: 10px !important;
}
.el-drawer__header {
// padding: 0 !important;
margin-bottom: 5px !important;
}
.el-drawer__body {
padding: 0 var(--el-drawer-padding-primary) !important;
}
.el-textarea {
font-size: var(--el-font-size-base) !important;
}

492
src/views/home/components/member.vue Normal file
View File

@ -0,0 +1,492 @@
<template>
<div class="orderbox">
<div class="orderbox_left">
<el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
<el-table-column prop="date" label="昵称" width="" />
<el-table-column prop="name" label="手机" width="" />
<el-table-column prop="address" label="编号" />
<el-table-column prop="address" label="等级" />
<el-table-column prop="address" label="积分" />
<el-table-column prop="address" label="余额" />
</el-table>
</div>
<div class="orderbox_right">
<div class="orderbox_right_top">
<div class="orderbox_right_topdiv">
<span>会员昵称：</span>
<span>admin</span>
</div>
<div class="orderbox_right_topdiv">
<span>手机号码：</span>
<span>1999999999999</span>
</div>
<div class="orderbox_right_topdiv">
<span>会员编号：</span>
<span>1245</span>
</div>
<div class="orderbox_right_topdiv">
<span>会员等级：</span>
<span>未设置</span>
</div>
<div class="orderbox_right_top_item">
<div class="orderbox_right_top_item_one">
<el-icon :size="24" style="color:#ffbc42 ;">
<Money />
</el-icon>
<span class="orderbox_right_top_item_onespan">会员积分</span>
</div>
<div class="orderbox_right_top_item_tow">0</div>
</div>
<div class="orderbox_right_top_item" @click="stored = true">
<div class="orderbox_right_top_item_one">
<el-icon :size="24" style="color:#00b58d ;">
<Box />
</el-icon>
<span class="orderbox_right_top_item_onespan">储值余额</span>
</div>
<div class="orderbox_right_top_item_tow">
<span>0</span>
<el-icon size="10">
<ArrowRight />
</el-icon>
</div>
</div>
</div>
<div class="orderbox_right_input">
<el-input placeholder="请输入会员手机号或者编号" v-model="moneys.money" clearable @input="inputChange"></el-input>
</div>
<div class="orderbox_right_inputkeyboard">
<div class='keyboard'>
<div class='key-row'>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='1'>1</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='2'>2</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='3'>3</el-button>
</div>
<div class='key-row'>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='4'>4</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='5'>5</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='6'>6</el-button>
</div>
<div class='key-row'>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='7'>7</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='8'>8</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='9'>9</el-button>
</div>
<div class='key-row'>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='.'>.</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='0'>0</el-button>
<el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
data-num='D'>c</el-button>
</div>
</div>
</div>
<div class="orderbox_right_button">
<el-button style="width: 35%;" @click="recharge = true">添加会员</el-button>
<el-button style="width: 60%;" type="primary"
@click="onSubmit">确认</el-button>
</div>
</div>
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
<div class="dialog_footer_left">
<span>微信用户</span>
<span>2021-02-22 18:05:53</span>
</div>
<div class="dialog_footer_right">
<span>19000</span>
<span>26300</span>
</div>
</div>
</el-dialog>
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
<div class="recharge_footer">
<div class="recharge_footer_item">
qq
</div>
<div class="recharge_footer_itemright">
<div class="recharge_footer_itemright_input">
<div>充值金额：</div>
<div v-if="moneys.money">{{ moneys.money ? moneys.money : '请输入充值金额' }}</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import lodash_ from 'lodash'
const route = useRoute()
const stored = ref(false)//储值余额
// const inputChange = lodash_.debounce(function (e) {
// productqueryCommodityInfoAjax()
// }, 500)
const handleClose = () => {
stored.value = !stored.value
}
const recharge = ref(false)//充值
const onSubmit = () => {
ElMessage({
message: '请输入订单号查询',
type: 'warning',
})
}
const handlerecharge = () => {
recharge.value = !recharge.value
}
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: '1',
},
{
date: '2016-05-02',
name: 'Tom',
address: '1',
},
{
date: '2016-05-04',
name: 'Tom',
address: '1',
},
{
date: '2016-05-01',
name: 'Tom',
address: '1',
},
]
const moneys = reactive({
money: ''
})
const _handleKeyPress = (e) => {
console.log('点击传e', e.target.dataset.num);
let num = e.target.dataset.num;
console.log(num)
//不同按键处理逻辑
// -1 代表无效按键，直接返回
if (num == -1) return false;
switch (String(num)) {
//小数点
case '.':
_handleDecimalPoint();
break;
//删除键
case 'D':
_handleDeleteKey();
break;
default:
_handleNumberKey(num);
break;
}
}
watch(() => moneys.money, (newVal, oldVal) => {
console.log(`New: ${newVal}, Old: ${oldVal}`)
})
//处理数字
const _handleNumberKey = (num) => {
if (moneys.money.length == 10) {
return
}
console.log(num, 247)
let S = moneys.money;
//如果有小数点且小数点位数不小于2
if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
moneys.money = S + num;
//没有小数点
if (!(S.indexOf('.') > -1)) {
//如果第一位是0，只能输入小数点
if (num == 0 && S.length == 0)
moneys.money = '0.';
else {
if (S.length && Number(S.charAt(0)) === 0) return;
moneys.money = S + num;
}
}
}
//处理小数点函数
const _handleDecimalPoint = () => {
//如果包含小数点，直接返回
if (moneys.money.indexOf('.') > -1) return false;
//如果小数点是第一位，补0
if (!moneys.money.length) {
moneys.money = '0.';
} else {
//如果不是，添加一个小数点
moneys.money = moneys.money + '.';
}
}
//处理删除键
const _handleDeleteKey = () => {
let S = moneys.money;
//如果没有输入，直接返回
if (!S.length) return false;
//否则删除最后一个
moneys.money = S.substring(0, S.length - 1);
}
</script>
<style scoped lang="scss">
.orderbox {
display: flex;
height: 100%;
.orderbox_left {
width: 70%;
height: 100%;
background: #fff;
border-radius: 10px;
padding: 16px 0;
}
.orderbox_right {
position: relative;
width: 30%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_right_top {
color: #fff;
width: 100%;
background: #8b008b;
padding: 10px;
border-radius: 10px;
.orderbox_right_topdiv:nth-child(1) {
margin-top: 0px;
}
.orderbox_right_topdiv {
display: flex;
margin-top: 10px;
justify-content: space-between;
}
.orderbox_right_top_item {
position: relative;
background: #fff;
padding: 6px 10px;
display: flex;
margin-top: 10px;
border-radius: 10px;
justify-content: space-between;
align-items: center;
.orderbox_right_top_item_one {
display: flex;
align-items: center;
.orderbox_right_top_item_onespan {
color: black;
margin-left: 10px;
font-size: 16px;
}
}
.orderbox_right_top_item_tow {
color: black;
margin-left: 10px;
font-size: 14px;
font-weight: bold;
}
}
}
.orderbox_right_input {
margin-top: 10px;
}
.orderbox_right_inputkeyboard {
margin-top: 20px;
.keyboard {
width: 100%;
background: #FFFFFF;
.key-row {
display: flex;
display: -webkit-flex;
position: relative;
height: 8vh;
line-height: 8vh;
}
}
.keyboard .key-cell {
flex: 1;
-webkit-box-flex: 1;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
}
.orderbox_right_button {
position: absolute;
width: 90%;
left: 50%;
bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
transform: translateX(-50%) !important;
}
}
.dialog_footer:nth-child(1) {
margin-top: 0;
}
.dialog_footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 6px;
.dialog_footer_left {
display: flex;
flex-direction: column;
align-items: flex-start;
span:nth-child(1) {
font-size: 18px;
font-weight: 500;
}
span:nth-child(2) {
margin-top: 10px;
color: #333;
}
}
.dialog_footer_right {
display: flex;
flex-direction: column;
align-items: flex-end;
span:nth-child(1) {
color: #fc3d3d;
font-size: 16px;
}
span:nth-child(2) {
margin-top: 10px;
font-size: 14px;
}
}
}
.recharge_footer {
display: flex;
justify-content: space-between;
.recharge_footer_item {
width: 50%;
}
.recharge_footer_itemright {
width: 50%;
position: relative;
bottom: 0;
left: 0;
.recharge_footer_itemright_input {
width: 100%;
background: #333333;
border-radius: 10px;
padding: 0 6px;
display: flex;
height: 60px;
justify-content: space-between;
align-items: center;
div:nth-child(1) {
color: #56792e;
font-size: 16px;
}
div:nth-child(2) {
color: #88937c;
font-size: 20px;
}
}
.key-zero-and-point {
display: flex;
height: 10vh;
justify-content: center;
align-items: center;
width: 75%;
font-size: 30px;
.zero {
display: flex;
justify-content: center;
align-items: center;
width: 66.66%;
font-size: 30px;
text-align: center;
height: 100%;
}
.point {
display: flex;
justify-content: center;
align-items: center;
width: 33.33%;
font-size: 30px;
text-align: center;
height: 100%;
}
}
.key-cell:active {
color: white;
background: black; //黑色
opacity: 0.1; //这里重要，就是通过这个透明度来设置
}
.a:active,
.key-confirm2:active {
color: white;
background: black; //黑色
opacity: 0.1; //这里重要，就是通过这个透明度来设置
}
}
}
}
</style>

9
src/views/home/index.vue
View File

@ -11,7 +11,7 @@
<div class="number" @click="takeFoodCodeRef.show()">
<el-text class="t">{{ foodCode }}</el-text>
</div>
<div class="select_user">
<div class="select_user" @click="membershow = true">
<el-icon class="icon">
<UserFilled />
</el-icon>
@ -78,6 +78,10 @@
<!-- 备注 -->
<remarkModal ref="remarkRef" />
<!-- 修改取餐号 -->
<takeFoodCode />
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
<member></member>
</el-drawer>
<takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
<!-- 结算订单 -->
<settleAccount />
@ -95,7 +99,8 @@ import { createCart, queryCart, createCode } from '@/api/product'
// 商品列表
import goods from '@/views/home/components/goods.vue'
import member from '@/views/home/components/member.vue'
const membershow = ref(false)
const store = useUser()
const remarkRef = ref(null)
const takeFoodCodeRef = ref(null)

59
src/views/member/index.vue
View File

@ -81,6 +81,18 @@
</div>
</div>
<!-- <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
<div class="dialog_footer_left">
<span>微信用户</span>
<span>2021-02-22 18:05:53</span>
</div>
<div class="dialog_footer_right">
<span>19000</span>
<span>26300</span>
</div>
</div>
</el-dialog> -->
<el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
<div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
<div class="dialog_footer_left">
@ -92,12 +104,14 @@
<span>26300</span>
</div>
</div>
</el-dialog>
<el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
<div class="recharge_footer">
<div class="recharge_footer_item">
qq
<div class="recharge_footer_items" v-for="(item, index) in 6" :key="index">
<div>充1000送300</div>
<div>充1000.00到13000.00</div>
</div>
</div>
<div class="recharge_footer_itemright">
<div class="recharge_footer_itemright_input">
@ -158,7 +172,7 @@ const stored = ref(false)//储值余额
const handleClose = () => {
stored.value = !stored.value
}
const recharge = ref(true)//充值
const recharge = ref(false)//充值
const onSubmit = () => {
if (firstinput.value) {
@ -177,22 +191,22 @@ const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
address: '1s',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
address: '1s',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
address: '1s',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
address: '1s',
},
]
const moneys = reactive({
@ -477,11 +491,38 @@ const _handleConfirmKey = () => {
justify-content: space-between;
.recharge_footer_item {
width: 50%;
width: 60%;
background: #f2f2f2;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
flex-flow: wrap;
.recharge_footer_items {
background: #187ead;
padding: 16px 22px;
width: 45%;
height: fit-content;
text-align: center;
border-radius: 10px;
div:nth-child(1) {
color: #fff;
font-size: 20px;
}
div:nth-child(2) {
color: #bad9e7;
font-size: 14px;
}
}
}
.recharge_footer_itemright {
width: 50%;
padding-left: 20px;
width: 40%;
position: relative;
bottom: 0;
left: 0;