代客下单修改，登录页面修改，部分页面调整，请求封装调整
This commit is contained in:
332
pages/choose-table/choose-table.vue
Normal file
332
pages/choose-table/choose-table.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<view class="page-gray u-font-28">
|
||||
<up-sticky offsetTop="0" customNavHeight="0">
|
||||
<view class="navbar">
|
||||
<image
|
||||
src="/static/iconImg/exit.svg"
|
||||
class="exit"
|
||||
mode=""
|
||||
@click="toDiancan"
|
||||
></image>
|
||||
<text class="font-700 u-font-40 color-333">台桌列表</text>
|
||||
<view class="u-flex navbar-right" style="gap: 134rpx">
|
||||
<up-icon name="scan" size="64rpx" color="#999"></up-icon>
|
||||
<text class="font-700 u-font-40 color-333">{{
|
||||
accountStore.shopStaff.name
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-fff status-list">
|
||||
<view v-for="(value, key) in tableStatus" :key="key">
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="circle" :style="{ background: value.type }"></view>
|
||||
<text class="u-m-l-8"
|
||||
>{{ value.label }} ({{ returnStatusTotal(key) }})</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-sticky>
|
||||
|
||||
<view class="list">
|
||||
<template v-if="tables.list.length">
|
||||
<view
|
||||
class="item"
|
||||
:style="returnItemStyle(item)"
|
||||
v-for="(item, index) in tables.list"
|
||||
:key="index"
|
||||
>
|
||||
<view class="u-flex">
|
||||
<view>{{ item.name }}</view>
|
||||
<view class="line"></view>
|
||||
<view>{{ returnAreaText(item) }}</view>
|
||||
</view>
|
||||
<view class="u-m-t-6 bottom">
|
||||
<view
|
||||
class="diancan"
|
||||
:style="returnItemStyle(item)"
|
||||
@tap="chooseTable(index, item)"
|
||||
>点餐</view
|
||||
>
|
||||
<view class="u-m-t-22">
|
||||
<up-line></up-line>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<image
|
||||
src="/static/iconImg/perpole.svg"
|
||||
class="icon-people"
|
||||
></image>
|
||||
<view class="color-999 u-m-l-20"
|
||||
>{{ item.useNum || 0 }}/{{ item.maxCapacity }}人</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<template v-if="tables.list.length <= 0">
|
||||
<my-img-empty tips="未找到相关的桌台"></my-img-empty>
|
||||
</template>
|
||||
</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, onShow } from "@dcloudio/uni-app";
|
||||
import { tableStatus } from "./data";
|
||||
import go from "@/commons/utils/go.js";
|
||||
|
||||
import { useAccountStore } from "@/stores/account";
|
||||
const accountStore = useAccountStore();
|
||||
|
||||
let nouser = ref(false);
|
||||
|
||||
function returnStutasText(key) {
|
||||
const item = $status[key];
|
||||
return item ? item.label : "";
|
||||
}
|
||||
function returnAreaText(item) {
|
||||
const areaItem = area.list.find((v) => v.id == item.areaId);
|
||||
return areaItem ? areaItem.name : "";
|
||||
}
|
||||
function returnItemStyle(item) {
|
||||
const stateItem = tableStatus[item.status];
|
||||
return {
|
||||
background: stateItem?.type || "",
|
||||
};
|
||||
}
|
||||
|
||||
function toDiancan() {
|
||||
go.to("PAGES_CREATE_ORDER");
|
||||
}
|
||||
|
||||
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 search() {
|
||||
query.page = 1;
|
||||
getTable();
|
||||
}
|
||||
|
||||
function chooseTable(index, item) {
|
||||
if (item.status == "closed") {
|
||||
return uni.showToast({
|
||||
title: "该桌台已关闭！",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
go.to("PAGES_CREATE_ORDER", {
|
||||
tableCode: item.tableCode,
|
||||
});
|
||||
}
|
||||
|
||||
//分类
|
||||
const area = reactive({
|
||||
list: [],
|
||||
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: 999,
|
||||
areaId: "",
|
||||
totalElements: 0,
|
||||
};
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
query.page = page;
|
||||
getTable();
|
||||
}
|
||||
const tables = reactive({
|
||||
hasAjax: false,
|
||||
selIndex: -1,
|
||||
originList: [],
|
||||
list: [],
|
||||
});
|
||||
|
||||
function returnStatusTotal(key) {
|
||||
return tables.list.reduce((pre, cur) => {
|
||||
return pre + (cur.status == key ? 1 : 0);
|
||||
}, 0);
|
||||
}
|
||||
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,
|
||||
name: searchValue.value,
|
||||
});
|
||||
query.totalElements = data.totalRow || 0;
|
||||
tables.hasAjax = true;
|
||||
tables.list = data.records.filter((v) => {
|
||||
return tableStatus[v.status] && v.tableCode;
|
||||
});
|
||||
|
||||
tables.originList = data.records;
|
||||
}
|
||||
async function getArea() {
|
||||
const data = await $tableArea.get({
|
||||
page: 0,
|
||||
size: 999,
|
||||
});
|
||||
area.list = data.records;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => area.sel,
|
||||
(newval) => {
|
||||
getTable();
|
||||
}
|
||||
);
|
||||
let option = {};
|
||||
onLoad(async (opt) => {
|
||||
Object.assign(option, opt);
|
||||
console.log(option);
|
||||
});
|
||||
onShow(async() => {
|
||||
await getArea();
|
||||
getTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 20rpx;
|
||||
background-color: #e5e5e5;
|
||||
margin-left: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.my-radio {
|
||||
.circle {
|
||||
background: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
&.active {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
|
||||
border: 1px solid #707070;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&.square {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.area {
|
||||
padding: 2px 28rpx 24rpx 28rpx;
|
||||
}
|
||||
|
||||
.scale7 {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-searchbar {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 20rpx 28rpx 20rpx 28rpx;
|
||||
|
||||
.icon-saoma {
|
||||
margin-left: 20rpx;
|
||||
width: 34rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 38rpx 28rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
column-gap: 50rpx;
|
||||
row-gap: 62rpx;
|
||||
.no-choose {
|
||||
padding: 36rpx 30rpx 36rpx 24rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
color: #fff;
|
||||
padding: 18rpx 14rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
.bottom {
|
||||
padding: 26rpx 14rpx 38rpx 14rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.diancan {
|
||||
padding: 18rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-people {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
.exit {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 100rpx;
|
||||
}
|
||||
.navbar {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0;
|
||||
padding-top: calc(var(--status-bar-height) + 32rpx);
|
||||
}
|
||||
.navbar-right {
|
||||
margin-right: 86rpx;
|
||||
}
|
||||
.status-list {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 32rpx 72rpx;
|
||||
}
|
||||
.status-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 68rpx;
|
||||
.circle {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user