收银台
This commit is contained in:
parent
76d4ace2eb
commit
5040d2d9e1
@ -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/'
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
Binary file not shown.
BIN
fuintCashierWeb/src/assets/images/jya.png
Normal file
BIN
fuintCashierWeb/src/assets/images/jya.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
27
fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue
Normal file
27
fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue
Normal 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
552
fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue
Normal 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>
|
||||
@ -176,8 +176,8 @@
|
||||
<!-- <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>-->
|
||||
<!-- <!– 无商品收款组件 end–>-->
|
||||
<!-- </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 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>
|
||||
<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>
|
||||
</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,240 +830,55 @@ 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;
|
||||
color: #5393ff !important;
|
||||
}
|
||||
.vip-bottom{
|
||||
border: 1px solid #ffffff;
|
||||
.app-left{
|
||||
width: 180px;
|
||||
height: 100vh;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 4px 4px rgba(0,21,41,.08);
|
||||
box-sizing: border-box;
|
||||
padding: 5px 15px;
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
.app-left-title{
|
||||
color: #53a0ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-left-top{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app-left{
|
||||
width: 180px;
|
||||
height: 100vh;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 4px 4px rgba(0,21,41,.08);
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
.app-left-title{
|
||||
color: #53a0ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.app-left-top{
|
||||
height: 60px;
|
||||
.app-left-img{
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
img{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.app-left-img{
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.app-left-box{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909399;
|
||||
}
|
||||
.container-top{
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #5393ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.app-left-box{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909399;
|
||||
}
|
||||
.container-top{
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: #5393ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user