cashier-ipad-new/pages/choose-table/choose-table.vue

<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>