new-cashier/jeepay-ui-uapp-merchant/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"
						:focus="true" 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="u-m-t-32 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>
	</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)
	}

	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]
	}
	const query = {
		page: 0,
		size: 100,
		areaId: 0
	}
	const tables = reactive({
		hasAjax: false,
		selIndex: -1,
		originList: [],
		list: []
	})
	async function getTable() {
		let {
			content
		} = await $table.get(query)
		tables.hasAjax = true
		content = content.filter(v => v.status != 'closed')
		tables.list = content
		tables.selIndex = content.findIndex(v => v.tableId == option.tableId)
		console.log(tables.selIndex );
		tables.originList = content
	}
	async function getArea() {
		const {
			content
		} = await $tableArea.get({
			page: 0,
			size: 300
		})
		content.unshift({
			name: '全部'
		})
		area.list = content.map(v => {
			return {
				...v,
			}
		})
	}

	watch(() => area.sel, (newval) => {
		tables.list = tables.originList.filter(v => v.areaId == newval.id)
	})
	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;

			&.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 10px;
	}

	.scale7 {
		transform: scale(0.7);
	}

	.search {
		padding-right: 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>