cashier-ipad/pagesCreateOrder/choose-table/choose-table.vue

<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">
					<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 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 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);

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 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",
    });
  }
  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,
    };
  });
}

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

.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: 32rpx 24rpx;

  .no-choose {
    padding: 36rpx 30rpx 36rpx 24rpx;
  }

  .box {
    padding: 32rpx 30rpx 32rpx 24rpx;

    .item {
      padding: 24rpx 0;

      .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;
    }
  }
}
</style>