cashier_app/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>
			<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="u-flex item u-row-between" v-for="(item,index) in tables.list" :key="index"
							@tap="chooseTable(index,item)">
							<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>
					</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 { reactive, ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { $status } from '@/commons/table-status.js'

	import { getShopTable } from '@/http/api/table.js'
	import { getShopArea} from '@/http/api/area.js'
	
	let nouser = ref(false)
	
	
	//分类
	const area = reactive({
		list: [{
			name: '全部'
		}],
		defaultCateIndex: 0,
		sel: ''
	})
	const query = {
		page: 1,
		size: 10,
		areaId: 0,
		totalElements:0
	}
	const tables = reactive({
		hasAjax: false,
		selIndex: -1,
		list: []
	})
	let searchValue = ref('')
	let option = {}
	watch(() => area.sel, (newval) => {
		getTable()
	})
	onLoad(opt => {
		Object.assign(option, opt)
		getTable()
		getArea()
	})
	
	/**
	 * 获取桌台列表
	 */
	async function getTable() {
		const areaId=area.list[area.defaultCateIndex].id||''
		let res = await getShopTable({...query,areaId,name:searchValue.value,status:'idle'})
		tables.list = res.records
		tables.selIndex = res.records.findIndex(v => v.id == option.id)
		query.totalElements= res.totalRow;
		tables.hasAjax = true;
		
	}
	
	/**
	 * 获取区域列表
	 */
	async function getArea() {
		const res = await getShopArea({
			page: 1,
			size: 300
		})
		res.records.unshift({
			name: '全部'
		})
		area.list = res.records.map(v => {
			return {
				...v,
			}
		})
	}
	
	/**
	 * 搜索
	 */
	function search() {
		query.page=1
		getTable()
	}
	
	
	/**
	 * 桌台状态显示处理
	 * @param {Object} key
	 */
	function returnStutasText(key) {
		const item = $status[key]
		return item ? item.label : ''
	}
	
	/**
	 * 桌台颜色显示处理
	 * @param {Object} key
	 */
	function returnStutasColor(key) {
		const item = $status[key]
		return item ? item.type : ''
	}


	/**
	 * 桌台选择
	 * @param {Object} index
	 * @param {Object} item
	 */
	function chooseTable(index, item) {
		if (item.status == 'done') {
			return uni.showToast({
				title: '该桌台已关闭！',
				icon: 'none'
			})
		}
		if (index === undefined || item === undefined) {
			nouser.value = true
			return emitChooeTable()
		} else {
			tables.selIndex = index
			emitChooeTable(item)
		}
	}
	
	function emitChooeTable(data) {
		uni.$emit('choose-table', data)
		setTimeout(() => {
			uni.navigateBack()
		}, 100)
	}

	/**
	 * 区域修改
	 * @param {Object} e
	 */
	function areaChange(e) {
		area.defaultCateIndex = e.detail.value
		area.sel = area.list[e.detail.value]
		query.page = 1
		getTable()
	}
	
	// 页数改变事件
	function pageChange(page) {
		query.page = page
		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: 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>