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>