非油商品
+
+ >
+
+ {{ item.name }}
+
+
+
+
商品
库存
@@ -171,29 +182,31 @@
数量
操作
-
+
+
-
+
+ {{ item.name }}
-
60
-
6.8
-
1
+
{{ item.stock }}
+
{{ item.retailPrice }}
+
{{ item.num }}
- 删除
+ 删除
-
订单笔数 0件
-
订单金额 ¥27.00
+
商品总数 {{ getGoodsListNum }}件
+
商品总金额 ¥{{ getGoodsNum }}
@@ -258,11 +271,10 @@
center
>
-
- 元
+
@@ -273,7 +285,7 @@
-
+
+
-
+
@@ -362,12 +378,26 @@ import pickUp from './newHomeComponents/pickUpTheOrder.vue'
import accountPending from './newHomeComponents/accountPending.vue'
import memberRecharge from './newHomeComponents/memberRecharge.vue'
import refuelingAmount from './newHomeComponents/refuelingAmount.vue'
+import { cashRegisterList, cashRegisterGoodsList } from '@/api/newHome/newHome.js'
+
export default {
data() {
return {
+ //
+ value: '',
+ //商品子组件选中时 容器
+ sonGoodsList: [],
+ //油枪 父传子
+ oilGun: '',
+ //油枪结算 容器
+ oilGunClearing: '',
+ //商品列表
+ goodsList: [],
restaurants: [],
state: '',
- timeout: null,
+ //挂单数据容器
+ pendingOrdersList: [],
+ timeout: null,
boxShow: true,
boxShow1: true,
boxShow2: true,
@@ -411,75 +441,220 @@ export default {
num: '0'
}
],
- tabList: [
- {
- name: '全部',
- id: ''
- },
- {
- name: '92#',
- id: '1'
- },
- {
- name: '95#',
- id: '2'
- },
- {
- name: '98#',
- id: '3'
- },
- {
- name: '0#',
- id: '4'
- },
- ],
- userInfo:true,//判断登录状态
- ruleIndex:0,
+ //油枪数据 初始化容器
+ tabList: {
+ '01': [],
+ '02': [],
+ '03': [],
+ '04': []
+ },
+ //油枪列表数据
+ dataList: {},
+ userInfo: true,//判断登录状态
+ ruleIndex: 0,
tabIndex: 0,
newMember: false,
ScanCodePayment: false,
cashPayment: false,
ruleForm: {
- name: '',
+ name: ''
},
ruleForms: {
- name: '',
+ name: ''
},
rules: {
name: [
- {required: true, message: '请输入活动名称', trigger: 'blur'},
- {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
- ],
+ { required: true, message: '请输入挂单名称', trigger: 'blur' }
+ ]
},
refuelingAmount: false,
hangingAnOrder: false,
paymentResults: false,
pickUpTheOrder: false,
accountPending: false,
- memberRecharge: false,
+ memberRecharge: false
}
},
- components:{
+ watch: {
+ //监听子弹窗成功 提交了 然后再隐藏子元素标签
+ oilGunClearing: {
+ immediate: true,
+ deep: true,
+ handler(newValue, oldValue) {
+ this.refuelingAmount = false
+ }
+ }
+ },
+ components: {
pickUp,
accountPending,
memberRecharge,
refuelingAmount
},
+ created() {
+ //初始化 油枪 商品
+ this.getOilList()
+ this.getGoodsList()
+ },
mounted() {
- this.restaurants = this.loadAll();
+
+ },
+ computed: {
+
+ getGoodsItem() {
+ if (this.oilGunClearing.amount && this.oilGunClearing.amount !== undefined) {
+ // 保留两位小数
+ let l = this.oilGunClearing.amount / this.oilGunClearing.oilPrice
+ // 8号枪(21.03L/191.7936元)
+ return `${this.oilGunClearing.gunName}(${l.toFixed(2)}L/${this.oilGunClearing.amount}元)`
+
+ } else {
+ return ''
+ }
+
+ },
+ //总金额
+ getGoodsNum() {
+ let total = 0
+ this.goodsList.forEach(item => {
+ total += item.retailPrice * item.num
+ })
+ return total
+ },
+
+ //总数量
+ getGoodsListNum() {
+ let total = 0
+ this.goodsList.forEach(item => {
+ total += item.num
+ })
+ return total
+ }
+
},
methods: {
- invokePickUpTheOrder(){
+
+ //油枪初始化
+ getOilList() {
+ cashRegisterList().then(res => {
+
+ this.tabList = res.data
+ //加上全部选项
+ this.tabList = {
+ '全部': 'all',
+ ...this.tabList
+ }
+
+ for (const key in this.tabList) {
+ // 循环为 不同油号 赋值不同图片样式
+ if (key == '0#') {
+ this.tabList[key].forEach(item => {
+ item.img = './imgs/0oil.png'
+ item.classStyle = 'card0'
+ })
+
+ }
+ if (key == '98#') {
+ this.tabList[key].forEach(item => {
+ item.img = './imgs/98oil.png'
+ item.classStyle = 'card98'
+ })
+
+ }
+ if (key == '95#') {
+ this.tabList[key].forEach(item => {
+ item.img = './imgs/95oil.png'
+ item.classStyle = 'card95'
+ })
+ }
+ if (key == '92#') {
+ this.tabList[key].forEach(item => {
+ item.img = './imgs/92oil.png'
+ item.classStyle = 'card92'
+ })
+ }
+
+ }
+
+ // 调用一下油枪数据列表 初始化
+ this.setTabindex('全部', 0)
+
+ })
+ },
+
+ //商品初始化
+ async getGoodsList() {
+ const res = await cashRegisterGoodsList()
+ this.restaurants = res.data
+
+ },
+
+ invokePickUpTheOrder() {
+ //获取存储数据
+ this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
+
this.pickUpTheOrder = true
},
- invokeHangingAnOrder(){
- this.hangingAnOrder = true
+ //确定挂单
+ pendingOrders() {
+ this.$refs['ruleForm'].validate((valid) => {
+ if (valid) {
+ // 1.先取出之前的转 json 然后追加 将 JSON 字符串解析回对象
+ this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
+ // 2.商品列表没有数据不允许添加
+ if (!this.goodsList.length) {
+ this.$message.error('商品列表为空,请添加商品')
+ return
+ }
+ // 3.如果名称重复则不允许添加
+ let bo1 = true
+
+ this.pendingOrdersList.forEach(item => {
+ if (item.name == this.ruleForms.name) {
+ this.$message.error('名称重复,请重新输入')
+ bo1 = false
+ return
+ }
+ })
+ // 4.追加数据
+ if (bo1) {
+ this.pendingOrdersList.push(
+ {
+ name: this.ruleForms.name,
+ list: this.goodsList
+ }
+ )
+
+ // 将当前 商品订单表 放入 sessionStorage
+ window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
+
+ // 清空当前商品
+ this.goodsList = []
+
+ //重置表单 关闭弹窗
+ this.ruleForms = {
+ name: ''
+ }
+ this.hangingAnOrder = false
+ }
+
+ } else {
+ console.log('error submit!!')
+ return false
+ }
+ })
+
},
- addVip(){
+ //挂单
+ invokeHangingAnOrder() {
+ this.hangingAnOrder = true
+ //必须 输入 挂单名称 将数据临时存储在 sessionStorage 刷新自动取消
+ },
+ addVip() {
this.newMember = true
},
- addMemberRecharge(){
+ addMemberRecharge() {
this.memberRecharge = true
},
changeBox() {
@@ -491,83 +666,203 @@ export default {
changeBox2() {
this.boxShow2 = !this.boxShow2
},
- setTabindex(index) {
+ setTabindex(key, index) {
+ //列表选中样式
this.tabIndex = index
+
+ if (key == '全部') {
+ this.dataList = []
+ for (const tabKey in this.tabList) {
+ this.dataList = this.dataList.concat(this.tabList[tabKey])
+ }
+ //因为 页面展示多加了一个 全部 要删掉第一个元素
+ this.dataList.shift()
+
+ } else {
+ for (const tabKey in this.tabList) {
+ if (key == tabKey) {
+ this.dataList = this.tabList[tabKey]
+ }
+ }
+ }
+
},
- setindex(index){
+ setindex(index) {
this.ruleIndex = index
},
- setRefuelingAmount(){
+ setRefuelingAmount(item) {
this.refuelingAmount = true
+ //赋值 传给子组件的油枪对象
+ this.oilGun = item
+
},
loadAll() {
return [
- { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
- { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
- { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
- { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
- { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
- { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
- { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
- { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
- { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
- { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
- { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
- { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
- { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
- { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
- { "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
- { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
- { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
- { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
- { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
- { "value": "枪会山", "address": "上海市普陀区棕榈路" },
- { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
- { "value": "钱记", "address": "上海市长宁区天山西路" },
- { "value": "壹杯加", "address": "上海市长宁区通协路" },
- { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
- { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
- { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
- { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
- { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
- { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
- { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
- { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
- { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
- { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
- { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
- { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
- { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
- { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
- { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
- { "value": "浏阳蒸菜", "address": "天山西路430号" },
- { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
- { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
- { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
- { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
- { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
- { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
- { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
- { "value": "阳阳麻辣烫", "address": "天山西路389号" },
- { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
- ];
+ { 'value': '三全鲜食(北新泾店)', 'address': '长宁区新渔路144号' },
+ { 'value': 'Hot honey 首尔炸鸡(仙霞路)', 'address': '上海市长宁区淞虹路661号' },
+ { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
+ { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
+ { 'value': '胖仙女纸杯蛋糕(上海凌空店)', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
+ { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
+ { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
+ { 'value': '茶芝兰(奶茶,手抓饼)', 'address': '上海市普陀区同普路1435号' },
+ { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
+ { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
+ { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
+ { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
+ { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F,2383弄62号1F' },
+ { 'value': '浮生若茶(凌空soho店)', 'address': '上海长宁区金钟路968号9号楼地下一层' },
+ { 'value': 'NONO JUICE 鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
+ { 'value': 'CoCo都可(北新泾店)', 'address': '上海市长宁区仙霞西路' },
+ { 'value': '快乐柠檬(神州智慧店)', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
+ { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
+ { 'value': '猫山王(西郊百联店)', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
+ { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
+ { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
+ { 'value': '钱记', 'address': '上海市长宁区天山西路' },
+ { 'value': '壹杯加', 'address': '上海市长宁区通协路' },
+ { 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元' },
+ { 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
+ { 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
+ { 'value': '鲜果榨汁(金沙江路和美广店)', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
+ { 'value': '开心丽果(缤谷店)', 'address': '上海市长宁区威宁路天山路341号' },
+ { 'value': '超级鸡车(丰庄路店)', 'address': '上海市嘉定区丰庄路240号' },
+ { 'value': '妙生活果园(北新泾店)', 'address': '长宁区新渔路144号' },
+ { 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
+ { 'value': '凡仔汉堡(老真北路店)', 'address': '上海市普陀区老真北路160号' },
+ { 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
+ { 'value': '蜀香源麻辣香锅(剑河路店)', 'address': '剑河路443-1' },
+ { 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
+ { 'value': '饭典*新简餐(凌空SOHO店)', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
+ { 'value': '焦耳·川式快餐(金钟路店)', 'address': '上海市金钟路633号地下一层甲部' },
+ { 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
+ { 'value': '浏阳蒸菜', 'address': '天山西路430号' },
+ { 'value': '四海游龙(天山西路店)', 'address': '上海市长宁区天山西路' },
+ { 'value': '樱花食堂(凌空店)', 'address': '上海市长宁区金钟路968号15楼15-105室' },
+ { 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
+ { 'value': '福荣祥烧腊(平溪路店)', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
+ { 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
+ { 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
+ { 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
+ { 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
+ { 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
+ ]
},
+ //必须是异步方法
querySearchAsync(queryString, cb) {
- var restaurants = this.restaurants;
- var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+ const restaurants = this.restaurants
+ let results
- clearTimeout(this.timeout);
- this.timeout = setTimeout(() => {
- cb(results);
- }, 1000 * Math.random());
+ if (queryString) {
+ results = restaurants.filter(this.createFilter(queryString))
+ } else {
+ results = restaurants
+ }
+ cb(results)
},
- createStateFilter(queryString) {
- return (state) => {
- return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
- };
+ createFilter(queryString) {
+ return (restaurant) => {
+ return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+ }
},
- handleSelect(item) {
- console.log(item);
+
+ //取单 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
+ getPendingOrdersList() {
+ //并且删除 父传子数据容器 以及 重新存储sessionStorage
+ this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
+ if (this.pendingOrdersList.length) {
+
+ let found = false
+ this.pendingOrdersList = this.pendingOrdersList.filter(item => {
+ if (item.name === this.value) {
+ if (!found) {
+ this.goodsList = item.list
+ found = true
+ }
+ return false // 不保留匹配的项
+ }
+ return true // 保留不匹配的项
+ })
+ window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
+ } else {
+ this.$message.error('当前无存单 请存单后再作废')
+ }
+ },
+ //作废 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
+ deletePendingOrdersList() {
+ //并且删除 父传子数据容器 以及 重新存储sessionStorage
+ this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
+ if (this.pendingOrdersList.length) {
+
+ this.pendingOrdersList = this.pendingOrdersList.filter(item => {
+ return item.name !== this.value
+ })
+
+ window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
+
+ } else {
+ this.$message.error('当前无存单 请存单后再作废')
+ }
+
+ },
+ // 接受子组件列表数据变化
+ fatherPendingOrdersList(list) {
+ this.sonGoodsList = list
+ },
+ // 接受子组件下拉选中名字变化
+ fatherPendingOrdersName(value) {
+ this.value = value
+ },
+ //删除商品
+ deleteGoods(id) {
+ //根据id删除数组元素
+ this.goodsList = this.goodsList.filter(item => item.id != id)
+
+ },
+ // 子组件提交调用父组件方法
+ fatherMethod(list) {
+ //将当前选中油枪 放入 油枪订单容器 (需要被数据监听)
+ this.oilGunClearing = { amount: list, ...this.oilGun }
+
+ },
+ //获取子组件数据
+ sonButton() {
+ //调用子组件方法
+ this.$refs.refuelingAmount.submitForm('ruleForm')
+
+ },
+ handleSelect(row) {
+ let bo1 = true
+ // 如果 item 存在 goodsList 则 属性+1 不存在直接添加到数组
+ // 使用 map 生成新数组 防止vue监听不到数组内数据变化
+ this.goodsList = this.goodsList.map(
+ item => {
+ if (item.id == row.id) {
+ bo1 = false
+ return { ...item, num: item.num + 1 }
+
+ } else {
+ return item
+ }
+
+ }
+ )
+
+ if (bo1) {
+ //如果没有先添加数量属性 默认1
+ row.num = 1
+ this.goodsList.push(row)
+ }
+
+ },
+
+ // 油枪重置
+ oilGunReset() {
+ this.oilGunClearing = {}
+ },
+ // 收银重置
+ goodsReset() {
+ this.goodsList = []
}
}
}
@@ -1125,7 +1420,8 @@ input {
justify-content: space-between;
margin: 15px auto;
}
-.left_input{
+
+.left_input {
width: 70%;
border: 1px solid #fff;
box-sizing: border-box;
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue b/fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue
index 89788aaf8..78e0f7926 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/newHomeComponents/pickUpTheOrder.vue
@@ -1,8 +1,24 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+