Skip to content

J
jwhx
Commit ead0f2ac authored by xieyishang's avatar xieyishang
Browse files
Options

~新增收银台~

parent a5372d7f
Show whitespace changes
Inline Side-by-side
Showing with 313 additions and 0 deletions
resources/admin/src/pages/cashierhome/cashierhome.scss 0 → 100644
View file @ ead0f2ac
.input {
position: fixed;
left: 0;
transform: translateX(-200%);
}
.pos_order {
background-color: #f9fafc;
border-right: 1px solid #c0ccda;
}
.pos_btn {
margin-top: 20px;
}
.often_title {
border-bottom: 1px solid #d3dce6;
background-color: #f9fafc;
padding: 10px;
text-align: left;
cursor: pointer;
}
.often_goodsList ul li {
list-style: none;
float: left;
border: 1px solid #d3dce6;
padding: 10px;
margin: 10px;
background-color: #ffffff;
cursor: pointer;
}
.often_price {
color: #63b8ff;
}
.goodsType {
clear: both;
height: auto;
overflow: hidden;
border-top: 1px solid #d3dce6;
}
.cookList li {
list-style: none;
width: 23%;
border: 1px solid #e5e9f2;
height: auot;
overflow: hidden;
background-color: #fff;
padding: 2px;
float: left;
margin: 2px;
cursor: pointer;
}
.cookList_div{
width: 60%;
display: inline-block;
float: left;
}
.cookList li span {
display: block;
float: left;
}
.foodImg {
width: 40%;
height: 120px;
}
.foodImg img{
/* width: 100%; */
width: 100%;
height: auto;
}
.foodName {
font-size: 16px;
padding-left: 10px;
color: brown;
}
.foodPrice {
font-size: 16px;
padding-left: 10px;
padding-top: 10px;
color: #F64F15;
}
.total {
background: #ffffff;
padding: 10px;
border-bottom: 1px solid #d3dce6;
color: red;
font-size: 18px;
}
.total small {
padding: 0 10px;
text-align: center;
}
\ No newline at end of file
resources/admin/src/pages/cashierhome/cashierhome.vue 0 → 100644
View file @ ead0f2ac
<template>
<el-container>
<el-main class="nopadding">
<input class="input" id="inputsmq" ref="inputRef" type="password" />
<div class="pos">
<el-row>
<el-col :span='7' class="pos_order" id="order_list">
<el-tabs style="padding-left:10px;">
<el-tab-pane label="购物单">
<el-table :data="tableData" border style="width:100%;">
<el-table-column prop="title" label="商品名称"> </el-table-column>
<el-table-column prop="count" label="数量">
<template slot-scope='scope' #default="scope">
<el-input-number :min="1" @change="(e)=>changenums(e, scope.$index)" size="small" v-model="scope.row.count"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="price" width="80" label="金额"> </el-table-column>
<el-table-column label="操作" width="80" fixed='right'>
<template slot-scope='scope' #default="scope">
<!-- <el-button size="small" @click="addOrderList(scope.row)">增加</el-button> -->
<!-- <el-button size="small" @click="addOrderList(scope.row)">减少</el-button> -->
<el-button type="danger" size="small" @click="delGoods(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="total">
<small>数量:</small>{{ totalCount }}<small>金额:</small>{{ totalMoney }}
</div>
<div class="pos_btn">
<el-button type="success" @click.native="handleScanCode" >扫码识别</el-button>
<el-button type="danger" @click="delAllGoods()">删除</el-button>
<el-button type="success" @click="checkOut()">结账</el-button>
</div>
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="17">
<el-header>
<div class="left-panel">
<el-input v-model="search.keyword" placeholder="关键词" style="width:150px; margin-right: 10px;" clearable />
<sc-select-tree v-model="search.category_id" :apiObj="$API.goods.category.list" :props="{label: 'title', value: 'id'}" style="width: 240px; margin-right: 10px;" />
<el-select v-model="search.status" placeholder="状态" clearable style="width: 100px;">
<el-option v-for="item in [{value: 0, title: '下架'}, {value: 1, title: '上架'}]" :key="item.value" :label="item.title" :value="item.value" />
</el-select>
<el-button-group style="margin-left: 10px;">
<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
</el-button-group>
</div>
</el-header>
<scTable tableName="member" ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" border stripe>
<el-table-column type="selection" width="50"></el-table-column>
<template #cover="scope">
<img :src="scope.row.cover" width="40" height="40" v-if="scope.row.cover" />
</template>
<template #status="scope">
<el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{scope.row.status == 1 ? '上架' : '下架'}}</el-tag>
</template>
<el-table-column label="操作" fixed="right" align="center" width="140">
<template #default="scope">
<el-button-group>
<el-button type="primary" @click="addOrderList(scope.row, scope.$index)">添加</el-button>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-col>
</el-row>
</div>
</el-main>
</el-container>
</template>
<script >
export default {
name: "ucenter.cashierhome",
components: {},
data() {
return {
dialog: {search: false, import: false, print: false},
list: {
apiObj: this.$API.goods.lists.list,
column: [
{prop: 'id', label: 'ID', width: 80},
{prop: 'goods_sn', label: '商品编号'},
{prop: 'title', label: '商品名称'},
{prop: 'cover', label: '封面图', width: 120},
{prop: 'price', label: '售价', width: 120},
{prop: 'original_price', label: '原价', width: 120},
// {prop: 'status', label: '状态', width: 80},
],
},
selection: [],
search: {},
formData:{
content: "",
},
tableData: [],
totalMoney: 0,
totalCount: 0
};
},
mounted(){
this.handleScanCode();
var orderHeight = document.body.clientHeight;
document.getElementById("order_list").style.height = orderHeight + "px";
},
created: function() {
},
methods: {
changenums(e,index){
this.$nextTick(()=>{
this.getAllMoney();
})
},
//监听
handleScanCode() {
const input= document.getElementById('inputsmq');
input.addEventListener('keydown',e=>{
if(e.keyCode==13){//回车结束
let qrcodeData=input.value;
this.formData.content = qrcodeData;
input.value = "";
console.log(`二维码数据为${qrcodeData}`)
}
})
input.focus()//聚焦
},
// 添加和计算商品价格
addOrderList(goods,index) {
// 商品是否已经存在于订单列表中
let isHave = false;
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == goods.id) {
isHave = true;
}
}
if (isHave) {
// 改变列表中商品数量
let arr = this.tableData.filter(o => o.id == goods.id);
arr[0].count++;
} else {
let newGoods = {
id: goods.id,
title: goods.title,
price: goods.price,
count: 1
};
this.tableData.push(newGoods);
}
this.getAllMoney();
},
// 删除单个商品
delGoods(goods) {
console.log(goods.id, "删除了" + goods.id);
this.tableData = this.tableData.filter(o => o.id != goods.id);
this.getAllMoney();
},
// 全部删除商品
delAllGoods() {
this.tableData = [];
this.totalMoney = 0;
this.totalCount = 0;
},
// 数量和价格的汇总计算
getAllMoney() {
this.totalMoney = 0;
this.totalCount = 0;
if (this.tableData) {
let totalMoney = 0;
console.info('tableData',this.tableData);
this.tableData.forEach(element => {
this.totalCount += element.count;
console.info('element.price',element.price,element.count);
totalMoney += element.price * element.count;
});
console.info(totalMoney,'totalMoney');
this.totalMoney = parseFloat(totalMoney).toFixed(2);
}
},
// 模拟结账
checkOut() {
if (this.totalCount != 0) {
this.tableData = [];
this.totalMoney = 0;
this.totalCount = 0;
this.$message({
message: "结账成功,辛苦啦~",
type: "success"
});
} else {
this.$message.error("店员，没有东西，怎么结账呀~");
}
},
upsearch(){
this.$refs.table.reload(this.search);
},
moreUpsearch(search){
this.search = search;
this.upsearch();
},
moreSearch(){
this.dialog.search = true
this.$nextTick(() => {
this.$refs.searchBox.open().setData(this.search)
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
},
};
</script>
<style scoped>
@import url('./cashierhome.scss');
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment