450 lines
12 KiB
Vue
450 lines
12 KiB
Vue
<template>
|
|
<view>
|
|
<view class="uni-header">
|
|
<view class="uni-group hide-on-phone">
|
|
<view class="uni-title">{{$t('table.index.title')}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-container">
|
|
<view class="table">
|
|
<view class="hm-p-b-10">
|
|
<hm-tabs :list="tabs" :current="current" @clickItem="tabsChange"></hm-tabs>
|
|
</view>
|
|
<scroll-view class="scroll" scroll-y scroll-with-animation>
|
|
<view class="box" v-if="list.length > 0">
|
|
<uni-row gutter="20">
|
|
<uni-col v-for="(item ,index) in list" :key="index" :xs="12" :sm="8" :md="6" :lg="4"
|
|
:xl="3">
|
|
<view class="item" :class="'status-' + item.status.value" @click="tableAction(index)">
|
|
<view class="hm-col-0 hm-font-b hm-p-b-10 hm-border-b">
|
|
{{item.table_name}}
|
|
</view>
|
|
<view class="status hm-p-t-10">
|
|
{{item.status.text}}
|
|
</view>
|
|
<block v-if="item.status.value==10">
|
|
<view class="hm-p-t-10" style="height: 53px;"></view>
|
|
</block>
|
|
<block v-if="item.status.value==20">
|
|
<view class="hm-p-t-10">
|
|
{{$t('table.index.time') + item.status.time + $t('table.index.minute')}}
|
|
</view>
|
|
<view class="hm-p-t-10">
|
|
{{item.status.order_id.length + $t('table.index.single') + ',' + $t('table.index.to_received') + item.status.pay_price + $t('table.index.element')}}
|
|
</view>
|
|
</block>
|
|
<block v-if="item.status.value==30">
|
|
<view class="hm-p-t-10">
|
|
{{item.status.pact.phone}}
|
|
</view>
|
|
<view class="hm-p-t-10">
|
|
{{item.status.pact.pact_time.text}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
<view v-else class="hm-empty">
|
|
<img :src="domain + '/addons/food/img/empty/data.png'" />
|
|
<view class="text">{{$t('common.empty')}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<uni-popup ref="status20" :is-mask-click="false">
|
|
<view class="popup-500 hm-bg-f">
|
|
<view class="title">
|
|
{{$t('table.index.popup.title')}}
|
|
<view @click="$refs.status20.close()" class="close">
|
|
<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="hm-p-10">
|
|
<uni-row gutter="50">
|
|
<uni-col :span="8">
|
|
<view class="item" @click="addOrder()">
|
|
<uni-icons type="plus-filled" size="50" color="#19be6b"></uni-icons>
|
|
<view>{{$t('table.index.popup.add_order')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="item" @click="tablePay()">
|
|
<uni-icons type="wallet-filled" size="50" color="#fa3534"></uni-icons>
|
|
<view>{{$t('table.index.popup.settlement')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="item" @click="tableClear()">
|
|
<uni-icons type="minus-filled" size="50" color="#ff9900"></uni-icons>
|
|
<view>{{$t('table.index.popup.clearing')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="status30" :is-mask-click="false">
|
|
<view class="popup-500 hm-bg-f">
|
|
<view class="title">
|
|
{{$t('table.index.popup.title')}}
|
|
<view @click="$refs.status30.close()" class="close">
|
|
<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="hm-p-10">
|
|
<uni-row gutter="50">
|
|
<uni-col :span="8">
|
|
<view class="item" @click="tablePactDetail()">
|
|
<uni-icons type="plus-filled" size="50" color="#ff9900"></uni-icons>
|
|
<view>{{$t('table.index.popup.detail')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="item" @click="tablePactAddOrder()">
|
|
<uni-icons type="wallet-filled" size="50" color="#19be6b"></uni-icons>
|
|
<view>{{$t('table.index.popup.promise')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="item" @click="tablePactCancel()">
|
|
<uni-icons type="minus-filled" size="50" color="#fa3534"></uni-icons>
|
|
<view>{{$t('table.index.popup.cancel')}}</view>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!--
|
|
<uni-popup ref="pact" :is-mask-click="false">
|
|
<view class="popup-500 hm-bg-f">
|
|
<view class="title">
|
|
{{$t('table.index.pact.title')}} - {{table_name}}
|
|
<view @click="$refs.pact.close()" class="close">
|
|
<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="hm-p-10">
|
|
<uni-forms ref="pactform" v-model="pactData" :rules="pactRules">
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.pact_time')" name="pact_time"
|
|
labelWidth="35">
|
|
<uni-datetime-picker type="datetime" v-model="pactData.pact_time"
|
|
@change="changeLog" />
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.linkman')" name="linkman"
|
|
labelWidth="35">
|
|
<uni-easyinput type="text" v-model="pactData.linkman"
|
|
:placeholder="$t('table.index.pact.form.placeholder.linkman')">
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.phone')" name="phone"
|
|
labelWidth="35">
|
|
<uni-easyinput type="number" v-model="pactData.phone"
|
|
:placeholder="$t('table.index.pact.form.placeholder.phone')">
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.people')" name="people"
|
|
labelWidth="35">
|
|
<uni-easyinput type="number" v-model="pactData.people"
|
|
:placeholder="$t('table.index.pact.form.placeholder.people')">
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.message')" name="message"
|
|
labelWidth="35">
|
|
<uni-easyinput type="text" v-model="pactData.message"
|
|
:placeholder="$t('table.index.pact.form.placeholder.message')">
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<view class="uni-button-group">
|
|
<view class="hm-p-lr-25">
|
|
<button class="uni-button uni-button-full" type="primary" :loading="pactLoading"
|
|
:disabled="pactLoading"
|
|
@click="pactAdd">{{$t('common.button.submit')}}</button>
|
|
</view>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="pactdetail" :is-mask-click="false">
|
|
<view class="popup-500 hm-bg-f">
|
|
<view class="title">
|
|
{{$t('table.index.pact.detail')}} - {{table_name}}
|
|
<view @click="$refs.pactdetail.close()" class="close">
|
|
<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="hm-p-10">
|
|
<uni-forms ref="pactform" v-model="pactData" :rules="pactRules">
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.pact_time')" name="pact_time"
|
|
labelWidth="35">
|
|
<uni-easyinput type="text" v-model="pact_detail.pact_time.date" disabled>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.linkman')" name="linkman"
|
|
labelWidth="35">
|
|
<uni-easyinput type="text" v-model="pact_detail.linkman" disabled>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.phone')" name="phone"
|
|
labelWidth="35">
|
|
<uni-easyinput type="number" v-model="pact_detail.phone" disabled>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.people')" name="people"
|
|
labelWidth="35">
|
|
<uni-easyinput type="number" v-model="pact_detail.people" disabled>
|
|
</uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item :label="$t('table.index.pact.form.field.message')" name="message"
|
|
labelWidth="35">
|
|
<uni-easyinput type="text" v-model="pact_detail.message" disabled></uni-easyinput>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
-->
|
|
</view>
|
|
</view>
|
|
<!-- #ifndef H5 -->
|
|
<fix-window />
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/config.js';
|
|
let App = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
domain: '',
|
|
current: 0,
|
|
tabs: [{
|
|
name: '全部',
|
|
type: 0,
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '空台',
|
|
type: 10,
|
|
count: 0,
|
|
},
|
|
{
|
|
name: '忙台',
|
|
type: 20,
|
|
count: 0,
|
|
},
|
|
],
|
|
list: {
|
|
data: []
|
|
},
|
|
table_id: '',
|
|
table_name: '',
|
|
index: '',
|
|
/*
|
|
pactLoading: false,
|
|
pactData: {
|
|
linkman: '',
|
|
phone: '',
|
|
people: '',
|
|
message: '',
|
|
pact_time: ''
|
|
},
|
|
pactRules: {
|
|
pact_time: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请设置约定时间',
|
|
}]
|
|
},
|
|
linkman: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入顾客姓名',
|
|
}]
|
|
},
|
|
phone: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入手机号码',
|
|
}]
|
|
},
|
|
people: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '请输入就餐人数',
|
|
}]
|
|
}
|
|
},
|
|
pactDetail: [], //预约详情
|
|
*/
|
|
}
|
|
},
|
|
onLoad() {
|
|
let _this = this;
|
|
_this.domain = config.domain;
|
|
_this.getList();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 餐桌清台
|
|
*/
|
|
tableClear: function() {
|
|
let _this = this;
|
|
if (_this.list[_this.index].status.pay_price > 0) {
|
|
App.showError('请买单后在清台');
|
|
return false;
|
|
}
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "您确定要对该桌清台？",
|
|
success: function(o) {
|
|
if (o.confirm) {
|
|
App._get('table/clear', {
|
|
table_id: _this.table_id
|
|
}, function(result) {
|
|
App.showSuccess(result.msg, function() {
|
|
_this.getList();
|
|
_this.$refs.status20.close();
|
|
});
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 餐桌结账
|
|
*/
|
|
tablePay: function() {
|
|
let _this = this;
|
|
if (_this.list[_this.index].status.pay_price == 0) {
|
|
App.showError('该桌已买过单了');
|
|
return false;
|
|
}
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "您确定要对该桌买单？",
|
|
success: function(o) {
|
|
if (o.confirm) {
|
|
App._get('table/pay', {
|
|
table_id: _this.table_id
|
|
}, function(result) {
|
|
App.showSuccess(result.msg, function() {
|
|
_this.getList();
|
|
_this.$refs.status20.close();
|
|
});
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 餐桌下单
|
|
*/
|
|
addOrder: function() {
|
|
let _this = this;
|
|
App.goTo('order/food?table_id=' + _this.table_id);
|
|
},
|
|
/**
|
|
* 餐桌操作
|
|
*/
|
|
tableAction: function(index) {
|
|
let _this = this,
|
|
table = _this.list[index];
|
|
_this.table_id = table.table_id;
|
|
_this.table_name = table.table_name;
|
|
_this.index = index;
|
|
if (table.status.value == 10) {
|
|
_this.addOrder();
|
|
}
|
|
if (table.status.value == 20) {
|
|
_this.$refs.status20.open();
|
|
}
|
|
if (table.status.value == 30) {
|
|
_this.$refs.status30.open();
|
|
}
|
|
},
|
|
|
|
// 点击选项卡
|
|
tabsChange(e) {
|
|
let _this = this;
|
|
_this.current = e.currentIndex;
|
|
_this.getList();
|
|
},
|
|
/**
|
|
* 获取餐桌列表
|
|
*/
|
|
getList: function() {
|
|
let _this = this;
|
|
App._get('table/lists', {
|
|
status: _this.tabs[_this.current].type
|
|
}, function(result) {
|
|
_this.list = result.data.list;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.table {
|
|
.scroll {
|
|
width: 100%;
|
|
height: calc(100vh - 162px - (var(--top-window-height)));
|
|
|
|
.box {
|
|
margin-bottom: 10px;
|
|
width: 96%;
|
|
padding: 0 10px 10px 10px;
|
|
|
|
.item {
|
|
margin-top: 10px;
|
|
background-color: #ff0000;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-10 {
|
|
border: 1px solid #71d5a1;
|
|
background-color: #dbf1e1;
|
|
|
|
.status {
|
|
color: #19be6b;
|
|
}
|
|
}
|
|
|
|
.status-20 {
|
|
border: 1px solid #fab6b6;
|
|
background-color: #fef0f0;
|
|
|
|
.status {
|
|
color: #fa3534;
|
|
}
|
|
}
|
|
|
|
.status-30 {
|
|
border: 1px solid #fcbd71;
|
|
background-color: #fdf6ec;
|
|
|
|
.status {
|
|
color: #ff9900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup-500 {
|
|
.item {
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|