cashier_app/pagesCreateOrder/confirm-order/rotatingTables.vue

<template>
	<view style="padding: 20rpx;">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="datas.current" :values=" ['转桌', '并桌']" style-type="button"
				active-color="#007aff" @clickItem="onClickItem" />
		</view>
		<view class="u-m-t-48">
			请选择其他桌：
		</view>
		<view class="uni-list">
			<radio-group @change="radioChange" v-if="datas.tableList.length">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in datas.tableList" :key="index">
					<view class="u-m-t-48 u-m-b-48">
						<radio :value="item.tableId" /> {{item.name}}
					</view>
				</label>
			</radio-group>
			<view v-else>
				暂无数据
			</view>
		</view>
		<view class="uni-list" v-if="datas.current==0">
			<view class="u-m-t-48">
				请选择需要转桌的菜品：
			</view>
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in datas.item" :key="index">
					<template v-if="item.status=='unpaid'">
						<view class="u-flex u-m-t-48 u-m-b-48"
							style="justify-content: space-between;align-items: center;">
							<view class="u-flex">
								<checkbox :value="item.cartId" />
								<image class="img" v-if="item.coverImg" :src="item.coverImg" mode=""></image>
								&nbsp;&nbsp;
								{{item.name}}
							</view>
							<view class="">
								<view class=" u-relative">
									<template v-if="item.isGift">
										<text
											class="line-th color-999">￥{{formatPrice(item.salePrice*item.number) }}</text>
										<view class="u-absolute" style="right: 0;bottom: 100%;">
											<text class="font-bold">￥0</text>
										</view>
									</template>
									<template v-else>
										<template v-if="isVip&&item.memberPrice&&item.memberPrice*1!=item.salePrice*1">
											<text
												class="line-th color-999">￥{{formatPrice(item.salePrice*item.number) }}</text>
											<view class="u-absolute" style="right: 0;bottom: 100%;">
												<text
													class="font-bold">￥{{formatPrice(item.memberPrice*item.number) }}</text>
											</view>
										</template>
										<template v-else>
											<view class="font-bold">
												<text>￥</text>
												<text class="">{{formatPrice(item.salePrice*item.number) }}</text>
											</view>
										</template>

									</template>
								</view>
								<view class="color-999 u-text-right u-font-24 u-m-t-12">×{{item.number}}</view>
							</view>
							<!-- <text class="  color-999">￥{{formatPrice(item.salePrice*item.number) }}</text> -->
						</view>
					</template>
				</label>
			</checkbox-group>
		</view>

		<my-button shape="circle" @tap="confirm">确定</my-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		defineProps
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js';
	import {
		$table,
		tableswitch
	} from '@/http/yskApi/table.js'
	import { getShopTable } from '@/http/api/table.js'
	let datas = reactive({
		current: 0,
		item: "",
		// 桌台列表
		tableList: [],
		// 并桌选中
		selecttableList: '',
		// 转桌数据
		changeTable: []
	})
	const props = defineProps({
		item: {
			type: Array
		},
		tableId: {
			type: String
		}
	})
	onLoad((opt) => {
		datas.item = JSON.parse(opt.item)
		console.log(datas.item)
	})
	onShow(() => {
		gettableList()
	})
	
	/**
	 * 获取桌台
	 */
	async function gettableList() {
		const res = await getShopTable({
			status: 'idle',
		})
		let arr = []
		res.records.forEach((ele) => {
			if (ele.status == 'using' && props.tableId != ele.tableId) {
				arr.push(ele)
			}
		});
		datas.tableList = arr
	}
	
	async function confirm() {
		// 是否选择其他桌
		if (datas.selecttableList) {
			if (datas.current == 0) {
				// 转桌是否选择菜品
				if (datas.changeTable.length) {
					let res = await tableswitch({
						masterId: datas.item[0].masterId,
						useType: datas.item[0].useType,
						cartIds: datas.changeTable,
						currentTableId: datas.item[0].tableId,
						targetTableId: datas.selecttableList
					})
					if (res) {
						uni.navigateBack({
							delta: 2
						})
					}
				} else {
					uni.showToast({
						title: '请选择菜品或桌号！',
						icon: 'none'
					});
				}
			} else {
				let res = await tableswitch({
					masterId: datas.item[0].masterId,
					useType: datas.item[0].useType,
					isFull: true,
					currentTableId: datas.item[0].tableId,
					targetTableId: datas.selecttableList
				})
				if (res) {
					uni.navigateBack({
						delta: 2
					})
				}
			}
		} else {
			uni.showToast({
				title: '请选择菜品或桌号！',
				icon: 'none'
			});
		}
	}

	function radioChange(d) {
		datas.selecttableList = d.detail.value
	}
	// 切换转/并桌
	function onClickItem(e) {
		if (datas.current !== e.currentIndex) {
			datas.current = e.currentIndex
		}
	}


	function formatPrice(n) {
		return Number(n).toFixed(2)
	}

	function checkboxChange(e) {
		datas.changeTable = e.detail.value
	}
</script>

<style scoped lang="scss">
	.goods {
		// padding-bottom: 30rpx;
		border-bottom: 1px dashed #E5E5E5;

		.item {}
	}

	.img {
		width: 84rpx;
		height: 84rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>