订单结算更新
This commit is contained in:
@@ -1,305 +1,319 @@
|
||||
<template>
|
||||
<view class="page-gray">
|
||||
<view class="bg-fff">
|
||||
<view class="search bg-fff u-flex u-col-center ">
|
||||
<view class="u-flex-1">
|
||||
<uni-search-bar bgColor="#F9F9F9" cancelButton="none" placeholder="输入桌号" @confirm="search"
|
||||
v-model="searchValue">
|
||||
</uni-search-bar>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<view class="page-gray">
|
||||
<view class="bg-fff">
|
||||
<view class="search bg-fff u-flex u-col-center">
|
||||
<view class="u-flex-1">
|
||||
<uni-search-bar
|
||||
bgColor="#F9F9F9"
|
||||
cancelButton="none"
|
||||
placeholder="输入桌号"
|
||||
@confirm="search"
|
||||
v-model="searchValue"
|
||||
>
|
||||
</uni-search-bar>
|
||||
</view>
|
||||
<!-- <view class="u-flex">
|
||||
<image src="/pagesCreateOrder/static/images/icon-saoma.svg" class="icon-saoma" mode=""></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view>
|
||||
<picker @change="areaChange" range-key="name" :value="area.defaultCateIndex" :range="area.list">
|
||||
<view class="u-flex u-row-between area">
|
||||
<view class="color-333">桌台类型：<text v-if="area.sel">{{area.sel.name}}</text> <text
|
||||
v-else>全部</text> </view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<picker
|
||||
@change="areaChange"
|
||||
range-key="name"
|
||||
:value="area.defaultCateIndex"
|
||||
:range="area.list"
|
||||
>
|
||||
<view class="u-flex u-row-between area">
|
||||
<view class="color-333"
|
||||
>桌台类型：<text v-if="area.sel">{{ area.sel.name }}</text>
|
||||
<text v-else>全部</text>
|
||||
</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list ">
|
||||
<view class="">
|
||||
<template v-if="tables.list.length">
|
||||
<view class=" bg-fff box bg-fff">
|
||||
<view class="" v-for="(item,index) in tables.list" :key="index" @tap="chooseTable(index,item)">
|
||||
<template v-if="item.status=='idle'">
|
||||
<view class="u-flex item u-row-between" style="border-bottom: 1px solid #E5E5E5;">
|
||||
<view class="u-flex">
|
||||
<view class="">
|
||||
<view class="u-flex">
|
||||
<view>{{item.name}}</view>
|
||||
<view class="line"></view>
|
||||
<view>{{''}}</view>
|
||||
</view>
|
||||
<view class="color-999 u-font-24 u-m-t-12">
|
||||
<text
|
||||
:style="{color:returnStutasColor(item.status)}">{{returnStutasText(item.status)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-radio u-font-28 u-flex color-333">
|
||||
<view class="circle u-flex u-row-center"
|
||||
:class="{active:index==tables.selIndex}">
|
||||
<uni-icons type="checkmarkempty" :size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<my-pagination :page="query.page" :totalElements="query.totalElements" :size="query.size"
|
||||
@change="pageChange"></my-pagination>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="">
|
||||
<template v-if="tables.list.length">
|
||||
<view class="bg-fff box bg-fff">
|
||||
<view
|
||||
class=""
|
||||
v-for="(item, index) in tables.list"
|
||||
:key="index"
|
||||
@tap="chooseTable(index, item)"
|
||||
>
|
||||
<template v-if="item.status == 'idle'">
|
||||
<view
|
||||
class="u-flex item u-row-between"
|
||||
style="border-bottom: 1px solid #e5e5e5"
|
||||
>
|
||||
<view class="u-flex">
|
||||
<view class="">
|
||||
<view class="u-flex">
|
||||
<view>{{ item.name }}</view>
|
||||
<view class="line"></view>
|
||||
<view>{{ "" }}</view>
|
||||
</view>
|
||||
<view class="color-999 u-font-24 u-m-t-12">
|
||||
<text
|
||||
:style="{ color: returnStutasColor(item.status) }"
|
||||
>{{ returnStutasText(item.status) }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-radio u-font-28 u-flex color-333">
|
||||
<view
|
||||
class="circle u-flex u-row-center"
|
||||
:class="{ active: index == tables.selIndex }"
|
||||
>
|
||||
<uni-icons
|
||||
type="checkmarkempty"
|
||||
:size="16"
|
||||
color="#fff"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<my-pagination
|
||||
:page="query.page"
|
||||
:totalElements="query.totalElements"
|
||||
:size="query.size"
|
||||
@change="pageChange"
|
||||
></my-pagination>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="tables.list.length<=0">
|
||||
<my-img-empty tips="未找到相关的桌台"></my-img-empty>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="tables.list.length <= 0">
|
||||
<my-img-empty tips="未找到相关的桌台"></my-img-empty>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
$table,
|
||||
$tableArea
|
||||
} from '@/http/yskApi/table.js'
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
$status
|
||||
} from '@/commons/table-status.js'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
let nouser = ref(false)
|
||||
import { $table, $tableArea } from "@/http/yskApi/table.js";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { $status } from "@/commons/table-status.js";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
let nouser = ref(false);
|
||||
|
||||
function returnStutasText(key) {
|
||||
const item = $status[key]
|
||||
return item ? item.label : ''
|
||||
}
|
||||
function returnStutasText(key) {
|
||||
const item = $status[key];
|
||||
return item ? item.label : "";
|
||||
}
|
||||
|
||||
function returnStutasColor(key) {
|
||||
// if(key=='using'){
|
||||
// return 'rgb(250,85,85)'
|
||||
// }else{
|
||||
// return ''
|
||||
// }
|
||||
const item = $status[key]
|
||||
return item ? item.type : ''
|
||||
}
|
||||
function returnStutasColor(key) {
|
||||
// if(key=='using'){
|
||||
// return 'rgb(250,85,85)'
|
||||
// }else{
|
||||
// return ''
|
||||
// }
|
||||
const item = $status[key];
|
||||
return item ? item.type : "";
|
||||
}
|
||||
|
||||
function emitChooeTable(data) {
|
||||
uni.$emit('choose-table', data)
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 100)
|
||||
}
|
||||
let searchValue = ref('')
|
||||
function emitChooeTable(data) {
|
||||
uni.$emit("choose-table", data);
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 100);
|
||||
}
|
||||
let searchValue = ref("");
|
||||
|
||||
function search() {
|
||||
query.page = 1
|
||||
getTable()
|
||||
}
|
||||
function search() {
|
||||
query.page = 1;
|
||||
getTable();
|
||||
}
|
||||
|
||||
function chooseTable(index, item) {
|
||||
if (item.status == 'closed') {
|
||||
return uni.showToast({
|
||||
title: '该桌台已关闭！',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
if (index === undefined || item === undefined) {
|
||||
nouser.value = true
|
||||
return emitChooeTable()
|
||||
} else {
|
||||
tables.selIndex = index
|
||||
emitChooeTable(item)
|
||||
}
|
||||
}
|
||||
function chooseTable(index, item) {
|
||||
if (item.status == "closed") {
|
||||
return uni.showToast({
|
||||
title: "该桌台已关闭！",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
if (index === undefined || item === undefined) {
|
||||
nouser.value = true;
|
||||
return emitChooeTable();
|
||||
} else {
|
||||
tables.selIndex = index;
|
||||
emitChooeTable(item);
|
||||
}
|
||||
}
|
||||
|
||||
//分类
|
||||
const area = reactive({
|
||||
list: [
|
||||
{
|
||||
name: "全部",
|
||||
},
|
||||
],
|
||||
defaultCateIndex: 0,
|
||||
sel: "",
|
||||
});
|
||||
|
||||
function areaChange(e) {
|
||||
area.defaultCateIndex = e.detail.value;
|
||||
area.sel = area.list[e.detail.value];
|
||||
query.page = 1;
|
||||
getTable();
|
||||
}
|
||||
const query = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
areaId: 0,
|
||||
totalElements: 0,
|
||||
};
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
query.page = page;
|
||||
getTable();
|
||||
}
|
||||
const tables = reactive({
|
||||
hasAjax: false,
|
||||
selIndex: -1,
|
||||
originList: [],
|
||||
list: [],
|
||||
});
|
||||
async function getTable() {
|
||||
// let state=status.list[status.active].key
|
||||
// state=state?(state=='all'?'':state):''
|
||||
const areaId = area.list[area.defaultCateIndex].id || "";
|
||||
let { data } = await $table.get({
|
||||
...query,
|
||||
areaId,
|
||||
name: searchValue.value,
|
||||
state: "idle",
|
||||
});
|
||||
query.totalElements = data.totalRow || 0;
|
||||
tables.hasAjax = true;
|
||||
tables.list = data.records;
|
||||
tables.selIndex = data.records.findIndex(
|
||||
(v) => v.tableCode == option.tableCode
|
||||
);
|
||||
tables.originList = data.records;
|
||||
}
|
||||
async function getArea() {
|
||||
const { data } = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 300,
|
||||
});
|
||||
data.records.unshift({
|
||||
name: "全部",
|
||||
});
|
||||
area.list = data.records.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
//分类
|
||||
const area = reactive({
|
||||
list: [{
|
||||
name: '全部'
|
||||
}],
|
||||
defaultCateIndex: 0,
|
||||
sel: ''
|
||||
})
|
||||
|
||||
function areaChange(e) {
|
||||
area.defaultCateIndex = e.detail.value
|
||||
area.sel = area.list[e.detail.value]
|
||||
query.page = 1
|
||||
getTable()
|
||||
}
|
||||
const query = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
areaId: 0,
|
||||
totalElements: 0
|
||||
}
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
query.page = page
|
||||
getTable()
|
||||
}
|
||||
const tables = reactive({
|
||||
hasAjax: false,
|
||||
selIndex: -1,
|
||||
originList: [],
|
||||
list: []
|
||||
})
|
||||
async function getTable() {
|
||||
// let state=status.list[status.active].key
|
||||
// state=state?(state=='all'?'':state):''
|
||||
const areaId = area.list[area.defaultCateIndex].id || ''
|
||||
let {
|
||||
data
|
||||
} = await $table.get({
|
||||
...query,
|
||||
areaId,
|
||||
name: searchValue.value,
|
||||
state: 'idle'
|
||||
})
|
||||
query.totalElements = data.totalRow || 0;
|
||||
tables.hasAjax = true;
|
||||
tables.list = data.records
|
||||
tables.selIndex = data.records.findIndex(v => v.tableCode == option.tableCode)
|
||||
tables.originList = data.records
|
||||
}
|
||||
async function getArea() {
|
||||
const {
|
||||
data
|
||||
} = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 300
|
||||
})
|
||||
data.records.unshift({
|
||||
name: '全部'
|
||||
})
|
||||
area.list = data.records.map(v => {
|
||||
return {
|
||||
...v,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => area.sel, (newval) => {
|
||||
getTable()
|
||||
})
|
||||
let option = {}
|
||||
onLoad(opt => {
|
||||
Object.assign(option, opt)
|
||||
console.log(option);
|
||||
getTable()
|
||||
getArea()
|
||||
})
|
||||
watch(
|
||||
() => area.sel,
|
||||
(newval) => {
|
||||
getTable();
|
||||
}
|
||||
);
|
||||
let option = {};
|
||||
onLoad((opt) => {
|
||||
Object.assign(option, opt);
|
||||
console.log(option);
|
||||
getTable();
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 20rpx;
|
||||
background-color: #E5E5E5;
|
||||
margin-left: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 20rpx;
|
||||
background-color: #e5e5e5;
|
||||
margin-left: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.my-radio {
|
||||
.my-radio {
|
||||
.circle {
|
||||
background: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
.circle {
|
||||
background: #FFFFFF;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
&.active {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
border: 1px solid #707070;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
border: 1px solid #707070;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
&.square {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.square {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
.area {
|
||||
padding: 2px 28rpx 24rpx 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.scale7 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.area {
|
||||
padding: 2px 28rpx 24rpx 28rpx;
|
||||
}
|
||||
::v-deep .uni-searchbar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.scale7 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.search {
|
||||
padding: 20rpx 28rpx 20rpx 28rpx;
|
||||
|
||||
::v-deep .uni-searchbar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.icon-saoma {
|
||||
margin-left: 20rpx;
|
||||
width: 34rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 20rpx 28rpx 20rpx 28rpx;
|
||||
.list {
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.icon-saoma {
|
||||
margin-left: 20rpx;
|
||||
width: 34rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
.no-choose {
|
||||
padding: 36rpx 30rpx 36rpx 24rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 32rpx 24rpx;
|
||||
.box {
|
||||
padding: 32rpx 30rpx 32rpx 24rpx;
|
||||
|
||||
.no-choose {
|
||||
padding: 36rpx 30rpx 36rpx 24rpx;
|
||||
}
|
||||
.item {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.box {
|
||||
padding: 32rpx 30rpx 32rpx 24rpx;
|
||||
.headimg {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.item {
|
||||
padding: 24rpx 0;
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headimg {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.img {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user