dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收银台

Browse Source
This commit is contained in:
user 2023-10-26 09:32:37 +08:00
parent 76d4ace2eb
commit 5040d2d9e1
8 changed files with 667 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fuintAdmin/.env.development
View File

@ -11,4 +11,4 @@ VUE_APP_BASE_API = '/dev-api'
VUE_APP_PUBLIC_PATH = '/'
# 后端接口地址
VUE_APP_SERVER_URL = 'http://192.168.1.5:8080/'
VUE_APP_SERVER_URL = 'http://192.168.1.4:8080/'

2
fuintAdmin/src/layout/components/Sidebar/index.vue
View File

@ -8,7 +8,7 @@
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:collapse="false"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"

2
fuintBackend/fuint-application/src/main/resources/application.properties
View File

@ -1,7 +1,7 @@
# \u57FA\u672C\u914D\u7F6E
server.port=8008
env.profile=dev
env.properties.path=D:/code/oilSystem/fuintBackend/configure/
env.properties.path=D:/work/ServiceStation/oilSystem/fuintBackend/configure/
# \u6570\u636E\u5E93\u914D\u7F6E

BIN
fuintCashierWeb/.env.development
View File

Binary file not shown.

BIN
fuintCashierWeb/src/assets/images/jya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

27
fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="app-center">
<div class="">充值</div>
</div>
</template>
<script>
export default {
name: "Recharge",
data(){
return{
}
}
}
</script>
<style scoped lang="scss">
.app-center{
width: 100%;
display: flex;
box-sizing: border-box;
padding: 10px;
}
</style>

552
fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue Normal file
View File

@ -0,0 +1,552 @@
<template>
<div class="app-center">
<div class="center-left">
<div class="center-vh">
<div class="center-left-top">
<div class="vip-bottom" @click="dialogVisiblevip = true">
<div>会员登录</div>
</div>
</div>
<div class="center-left-hj">
<div class="hj-box" style="justify-content: left">油品:￥200.00</div>
<div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
<div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
</div>
<div class="center-left-hj">
<div>满减活动</div>
<div>-￥2.87</div>
</div>
<div class="center-left-th">
<div class="th-box">
<div>扫码支付</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>找零</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>加油员</div>
<div style="cursor: pointer;color: crimson" @click="dialogVisible = true" >加油员名称</div>
</div>
</div>
</div>
<div class="bottom-posi">
<div class="center-left-wrap">
<div class="wrap-box" v-for="(item,index) in 6" :key="index">
<span>支付方式</span>
</div>
</div>
<div class="center-left-bottom">
<div>
<div class="bottom-price">￥349.78</div>
<div class="price-red">优惠合计：5.74元</div>
</div>
<div class="center-left-lv" @click="dialogVisiblej = true ">立即结算</div>
</div>
</div>
</div>
<div class="center-right">
<div class="center-top">
<div class="center-top-tab">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部" name="first"></el-tab-pane>
<el-tab-pane label="92#" name="second"></el-tab-pane>
<el-tab-pane label="95#" name="third"></el-tab-pane>
<el-tab-pane label="98#" name="fourth"></el-tab-pane>
<el-tab-pane label="0#" name="one"></el-tab-pane>
<el-tab-pane label="京0#" name="two"></el-tab-pane>
<el-tab-pane label="京10#" name="three"></el-tab-pane>
<el-tab-pane label="CNG" name="frou"></el-tab-pane>
<el-tab-pane label="LNG" name="frous"></el-tab-pane>
</el-tabs>
</div>
<div class="center-top-data">
<div class="center-top-of" >
<div class="wrap-wrap">
<div class="of-box" v-for="(item,index) in 17" :key="index" :style="{'background-color': colorList[index%5].color}">
<div>92#</div>
<div class="of-title" >{{index+1}}号枪</div>
<div>
<img src="../../../assets/images/jya.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
</div>
<!-- -->
<div class="content-top-bottom">
<div>订单笔数 <span class="bule">3件</span> </div>
<div>订单金额 <span class="bule">￥2.03</span> </div>
</div>
</div>
</div>
<div class="center-left-bottom">
<div class="bottom-gd">新增订单</div>
<div class="bottom-qk">解锁</div>
</div>
</div>
<div class="center-app">
<div class="center-top">
<div class="center-top-title">非油商品</div>
<div class="center-top-input">
<input type="text" placeholder="请输入商品名称，条码，商品关键词">
</div>
<div class="center-top-data">
<div class="data-top">
<div class="data-top-title">商品</div>
<div class="data-top-three">
<div>单价</div>
<div>数量</div>
<div>操作</div>
</div>
</div>
<div class="data-top-box">
<div class="data-top-title">商品名称</div>
<div class="data-top-three">
<div>0.01</div>
<div> <el-input-number v-model="num" size="small" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> </div>
<div><i class="el-icon-circle-close" style="font-size: 22px"></i></div>
</div>
</div>
<!-- -->
<div class="content-top-bottom">
<div>商品数量 <span class="bule">3件</span> </div>
<div>商品总额 <span class="bule">￥2.03</span> </div>
</div>
</div>
</div>
<div class="center-left-bottom">
<div class="bottom-qk">清空</div>
<div style="display: flex">
<div class="bottom-qd">取单</div>
<div class="bottom-gd">挂单</div>
</div>
</div>
</div>
<!-- 加油员姓名-->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<div class="wrap-wrap">
<div class="of-box" v-for="(item,index) in 7" :key="index" :style="{'background-color': item.color}">
<div>92#</div>
<div class="of-title" >加油员姓名</div>
<div>
<img src="../../../assets/images/jya.png" style="width: 18px;height: 18px;">
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<!-- 立即结算-->
<el-dialog
title="提示"
:visible.sync="dialogVisiblej"
width="30%"
:before-close="handleClose">
<div >
立即结算
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisiblej = false">取 消</el-button>
<el-button type="primary" @click="dialogVisiblej = false">确 定</el-button>
</span>
</el-dialog>
<!-- 会员登录-->
<el-dialog
title="提示"
:visible.sync="dialogVisiblevip"
width="30%"
:before-close="handleClose">
<div >
会员登录
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisiblevip = false">取 消</el-button>
<el-button type="primary" @click="dialogVisiblevip = false">确 定</el-button>
</span>
</el-dialog>
<!-- 油号选择-->
</div>
</template>
<script>
export default {
name: "homeindex",
data(){
return{
dialogVisible: false,
dialogVisiblej: false,
dialogVisiblevip:false,
activeName: 'second',
tabarr:[
{name:'收银台',icon:'el-icon-s-platform'},
{name:'充值',icon: 'el-icon-s-finance'},
{name:'订单',icon: 'el-icon-s-order'},
{name:'会员',icon: 'el-icon-s-custom'},
{name:'核销',icon: 'el-icon-s-check'},
{name:'挂账',icon:'el-icon-s-claim'},
{name:'积分',icon:'el-icon-s-data'},
{name:'交班',icon: 'el-icon-s-flag'},
],
leftindex:0,
oilList:[
],
colorList:[
{color:'#e5f0ff'},
{color:'#fff2e5'},
{color:'#e5edf1'},
{color:'#ecfae5'},
{color:'#fafafa'}
],
num: 1,
}
},
methods:{
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
handleChange(value) {
console.log(value);
},
handleClick(tab, event) {
console.log(tab, event);
},
gocomponents(index){
this.leftindex = index
},
}
}
</script>
<style scoped lang="scss">
.app-center{
width: 100%;
display: flex;
box-sizing: border-box;
padding: 10px;
}
.center-left{
width: 33%;
border-radius: 8px;
overflow: hidden;
height: 98vh;
position: relative;
/*height: 70vh;*/
/*box-sizing: border-box;*/
/*padding: 10px;*/
}
.bottom-posi{
width: 100%;
position: absolute;
bottom: 0px;
}
.center-app{
width: 33%;
border-radius: 8px;
overflow: hidden;
/*background: white;*/
}
.center-right{
width: 33%;
border-radius: 8px;
overflow: hidden;
margin: 0px 10px;
}
.center-top{
width: 100%;
height: 86vh;
background: white;
margin-bottom: 10px;
box-sizing: border-box;
padding: 10px;
position: relative;
}
.center-top-title{
box-sizing: border-box;
padding: 10px 0px;
padding-bottom: 15px;
border-bottom: 1px solid #ececec;
font-size: 18px;
margin-bottom: 10px;
}
.center-top-tab{
box-sizing: border-box;
padding: 15px 0px;
}
.center-top-input{
width: 100%;
height: 60px;
background: #f8f8f8;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
input{
width: 90%;
font-size: 18px;
border: none;
outline: none;
background-color:transparent;
}
}
.center-top-data{
width: 100%;
border-radius: 8px;
overflow: hidden;
margin-top: 10px;
/*background-color: #f8f8f8;*/
}
.center-top-of{
width: 100%;
/*background-color: #99a9bf;*/
height: 70vh;
overflow: auto;
}
.wrap-wrap{
display: flex;
flex-wrap: wrap;
}
.of-box{
width: 31%;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
box-sizing: border-box;
background-color: #b4d5ff;
height: 110px;
padding: 10px;
color: #3e4f60;
}
.of-title{
font-weight: bold;
font-size: 22px;
text-align: center;
margin: 13px;
}
.data-top{
width: 100%;
background-color: #ededed;
box-sizing: border-box;
padding: 15px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.data-top-box{
width: 100%;
/*background-color: #ededed;*/
box-sizing: border-box;
padding: 15px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.data-top-three{
width: 55%;
display: flex;
align-items: center;
justify-content: space-between;
}
.data-top-title{
width: 45%;
overflow: hidden;
}
.content-top-bottom{
position: absolute;
bottom:-16px;
width: 98%;
border-top: 1px solid #ececec;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translate(-50%,-50%);
left: 50%;
color: #2c3e50;
font-size: 18px;
box-sizing: border-box;
padding: 15px ;
background-color: white;
}
.center-left-top{
width: 100%;
background: #5393ff;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.center-vh{
/*height: 68vh;*/
}
.center-left-hj{
background: white;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 15px;
margin-bottom: 2px;
}
.center-left-th{
background: white;
box-sizing: border-box;
padding: 15px;
margin: 10px auto;
}
.center-left-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/*margin-top: 280px;*/
}
.wrap-box{
width: 31%;
background: #ffffff;
border-radius: 8px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.wrap-box :hover{
/*background: #00afff !important;*/
width: 100%;
height: 100%;
border-radius: 8px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #00afff;
cursor: pointer;
/*color: white;*/
}
.center-left-bottom{
width: 100%;
background-color: white;
border-radius: 8px;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-qk{
border: 1px solid #99a9bf;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #99a9bf;
margin: 15px 0px ;
}
.bottom-qd{
border: 1px solid #13ce66;
background: #13ce66;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-gd{
border: 1px solid #5393ff;
background: #5393ff;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-price{
font-size: 26px;
font-weight: bold;
}
.price-red{
color: red;
}
.center-left-lv{
width: 60%;
height: 80px;
background-color: #13ce66;
color: white;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.th-box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f6f8f9;
box-sizing: border-box;
padding: 10px 0px;
}
.hj-box{
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
.bule{
font-weight: 700;
color: #5393ff !important;
}
.vip-bottom{
border: 1px solid #ffffff;
box-sizing: border-box;
padding: 5px 15px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
</style>

314
fuintCashierWeb/src/views/cashier/index.vue
View File

@ -176,8 +176,8 @@
<!-- <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>-->
<!-- &lt;!&ndash; 无商品收款组件 end&ndash;&gt;-->
<!-- </div>-->
<!-- 👇 均为新建-->
<div class="app-containers">
<div class="app-left">
<div class="app-left-top">
<div class="app-left-img">
@ -185,81 +185,18 @@
</div>
<div class="app-left-title">蓝鲸油站收银 </div>
</div>
<div class="app-left-box" v-for="(item,index) in tabarr" :key="index"> <spen style="cursor: pointer">{{item.name}}</spen> </div>
</div>
<div class="app-center">
<div class="center-left">
<div class="center-vh">
<div class="center-left-top">
<div class="vip-bottom">
<div>会员登录</div>
</div>
</div>
<div class="center-left-hj">
<div class="hj-box" style="justify-content: left">油品:￥200.00</div>
<div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
<div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
</div>
<div class="center-left-hj">
<div>满减活动</div>
<div>-￥2.87</div>
</div>
<div class="center-left-th">
<div class="th-box">
<div>扫码支付</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>找零</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>加油员</div>
<div >加油员名称</div>
</div>
</div>
</div>
<div class="center-left-wrap">
<div class="wrap-box" v-for="(item,index) in 6" :key="index">
<div>支付方式</div>
</div>
</div>
<div class="center-left-bottom">
<div>
<div class="bottom-price">￥349.78</div>
<div class="price-red">优惠合计：5.74元</div>
</div>
<div class="center-left-lv">立即结算</div>
</div>
</div>
<div class="center-app">
<div class="center-top">
<div class="center-top-title">非油商品</div>
<div class="center-top-input">
<input type="text" placeholder="请输入商品名称，条码，商品关键词">
</div>
</div>
<div class="center-left-bottom">
<div class="bottom-qk">清空</div>
<div style="display: flex">
<div class="bottom-qd">取单</div>
<div class="bottom-gd">挂单</div>
</div>
</div>
</div>
<div class="center-right">
<div class="center-top">
<div>选择油号</div>
</div>
<div class="center-left-bottom">
<div class="bottom-gd">新增订单</div>
<div class="bottom-qk">解锁</div>
<div class="app-left-box" v-for="(item,index) in tabarr" :class="{'bule': leftindex == index }" :key="index" @click="gocomponents(index)">
<i :class="item.icon" style="font-size: 18px" ></i> <div style="cursor: pointer;margin-left: 10px">{{item.name}}</div>
</div>
</div>
<homeindex v-if="leftindex == 0"></homeindex>
<Recharge v-if="leftindex == 1"></Recharge>
<div style="width: 100%;padding:200px " v-if="leftindex != 0 && leftindex != 1">
<el-empty description="暂未开发"></el-empty>
</div>
<!-- <div class="app-right"></div>-->
</div>
</template>
@ -278,6 +215,8 @@ import orderList from "./components/orderList";
import memberList from "./components/memberList";
import couponConfirm from "./components/couponConfirm";
import noGoodsCashier from "./components/noGoodsCashier";
import homeindex from "./NewComponents/homeindex";
import Recharge from "./NewComponents/Recharge";
export default {
name: "Cashier",
components: {
@ -290,21 +229,36 @@ export default {
orderList,
memberList,
couponConfirm,
noGoodsCashier
noGoodsCashier,
homeindex,
Recharge,
},
data() {
return {
activeName: 'second',
tabarr:[
{name:'收银台'},
{name:'充值'},
{name:'订单'},
{name:'会员'},
{name:'核销'},
{name:'挂账'},
{name:'积分'},
{name:'交班'},
{name:'收银台',icon:'el-icon-s-platform'},
{name:'充值',icon: 'el-icon-s-finance'},
{name:'订单',icon: 'el-icon-s-order'},
{name:'会员',icon: 'el-icon-s-custom'},
{name:'核销',icon: 'el-icon-s-check'},
{name:'挂账',icon:'el-icon-s-claim'},
{name:'积分',icon:'el-icon-s-data'},
{name:'交班',icon: 'el-icon-s-flag'},
],
leftindex:0,
oilList:[
{color:'#e5f0ff'},
{color:'#fff2e5'},
{color:'#e5edf1'},
{color:'#ecfae5'},
{color:'#fafafa'}
],
num: 1,
// 系统名称
systemName: process.env.VUE_APP_TITLE,
// 导航tab
@ -431,6 +385,15 @@ export default {
// this.getCartList();
},
methods: {
handleChange(value) {
console.log(value);
},
handleClick(tab, event) {
console.log(tab, event);
},
gocomponents(index){
this.leftindex = index
},
// 初始化数据
initCashier() {
const app = this;
@ -867,194 +830,9 @@ export default {
background: #f6f8f9;
display: flex;
}
.app-center{
width: 100%;
display: flex;
box-sizing: border-box;
padding: 10px;
}
.center-left{
width: 33%;
border-radius: 8px;
overflow: hidden;
/*height: 70vh;*/
/*box-sizing: border-box;*/
/*padding: 10px;*/
}
.center-app{
width: 33%;
border-radius: 8px;
overflow: hidden;
/*background: white;*/
margin: 0px 10px;
}
.center-right{
width: 33%;
border-radius: 8px;
overflow: hidden;
}
.center-top{
width: 100%;
height: 86vh;
background: white;
margin-bottom: 10px;
box-sizing: border-box;
padding: 10px;
}
.center-top-title{
box-sizing: border-box;
padding: 10px 0px;
padding-bottom: 15px;
border-bottom: 1px solid #ececec;
font-size: 22px;
}
.center-top-input{
width: 100%;
height: 60px;
background: #f8f8f8;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
input{
border: none;
outline: none;
background-color:transparent;
}
}
.center-left-top{
width: 100%;
background: #5393ff;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.center-vh{
height: 68vh;
}
.center-left-hj{
background: white;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 15px;
margin-bottom: 2px;
}
.center-left-th{
background: white;
box-sizing: border-box;
padding: 15px;
margin: 10px auto;
}
.center-left-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/*margin-top: 280px;*/
}
.wrap-box{
width: 31%;
background-color: white;
border-radius: 8px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.center-left-bottom{
width: 100%;
background-color: white;
border-radius: 8px;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-qk{
border: 1px solid #99a9bf;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #99a9bf;
margin: 15px 0px ;
}
.bottom-qd{
border: 1px solid #13ce66;
background: #13ce66;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-gd{
border: 1px solid #5393ff;
background: #5393ff;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-price{
font-size: 26px;
font-weight: bold;
}
.price-red{
color: red;
}
.center-left-lv{
width: 60%;
height: 80px;
background-color: #13ce66;
color: white;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.th-box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f6f8f9;
box-sizing: border-box;
padding: 10px 0px;
}
.hj-box{
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
.bule{
font-weight: 700;
color: #5393ff;
}
.vip-bottom{
border: 1px solid #ffffff;
box-sizing: border-box;
padding: 5px 15px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
color: #5393ff !important;
}
.app-left{
width: 180px;