cashier_app/pagesOrder/detail/components/tuicai.vue

<template>
	<my-model title="退菜" ref="model" @close="onModelClose" @open="onModelOpen">
		<template #desc>
			<view class="u-p-30 u-text-left">
				<view>
					{{data.productName}}
				</view>
				<view class="u-flex  u-m-t-32" :class="{'gray':data.productId=='-999'}">
					<up-number-box :min="0" :max="maxNum" :buttonSize="44" v-model="number" integer
						:disabled="data.productId=='-999'">
						<template #minus>
							<view class="minus number-box-btn"></view>
						</template>
						<template #input>
							<view class="u-flex-1 u-row-center u-text-center input">
								<up-input :disabled="data.productId=='-999'" @change="parseIntNumber($event,false)"
									@blur="parseIntNumber($event,true)" v-model="number" border="none"
									type="digit"></up-input>
							</view>
						</template>
						<template #plus>
							<view class="plus number-box-btn">
								<up-icon v-if="data.productId=='-999'" name="plus" color="#ccc" size="16"
									bold></up-icon>
								<up-icon v-else name="plus" color="#999" size="16" bold></up-icon>
							</view>
						</template>
					</up-number-box>
				</view>
				<view class="u-m-t-32">
					<view class="u-font-24">
						<text class="color-999">退菜理由</text>
						<text class="color-red">*</text>
					</view>
					<view class="u-flex u-flex-wrap u-m-t-24">
						<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
							<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF"
								color="#318AFE" v-if="item.checked"> </up-tag>
							<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666" :text="item.label"
								plain v-else> </up-tag>
						</view>
					</view>
					<view class="u-m-t-24">
						<up-textarea v-model="form.note" placeholder="备注"></up-textarea>
					</view>
				</view>
			</view>
		</template>
		<template #btn>
			<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-10">
				<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
				<view class="u-m-t-10">
					<my-button @tap="onModelClose" shape="circle" bgColor="#fff" type="cancel" box-shadow>取消</my-button>
				</view>
			</view>

		</template>
	</my-model>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	import infoBox from '@/commons/utils/infoBox.js'
	const emits = defineEmits(['update:show', 'confirm'])
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {
					productId: '-999'
				}
			}
		},
		show: {
			type: Boolean,
			default: false
		}
	})
	const form = reactive({
		note: ''
	})
	let model = ref(null)
	let modelShow = ref(props.show)
	let number = ref(0)
	let maxNum = ref(0)
	
	const tags = ref([{
		label: "点错",
		checked: false
	}, {
		label: "不想要了",
		checked: false
	}, {
		label: "食材不足",
		checked: false
	}, {
		label: "等待时间过长",
		checked: false
	}])
	let timer = null
	watch(() => props.show, (newval) => {
		modelShow.value = newval
	})
	watch(() => modelShow.value, (newval) => {
		emits('update:show', newval)
		if (newval) {
			open()
		} else {
			close()
		}
	})
	
	function parseIntNumber(val, isNow) {
		console.log(val)
		let newval = val * 1
		if (newval > props.data.num - props.data.returnNum) {
			newval = props.data.num - props.data.returnNum
		}
		
		if (isNow) {
			number.value = newval * 1
			return
		}
		timer = setTimeout(() => {
			number.value = newval
		}, 100)
	}

	function changeTagSel(item) {
		item.checked = !item.checked
	}
	
	function toggleModelShow(show) {
		modelShow.value = show ? true : false
	}


	function onModelClose() {
		number.value = 1
		modelShow.value = false
	}

	function onModelOpen() {
		modelShow.value = true
	}

	function open() {
		model.value.open()
		number.value = props.data.num - props.data.returnNum
		maxNum.value = props.data.num - props.data.returnNum
	}

	function close() {
		model.value.close()
		tags.value.map(v => {
			v.checked = false
		})
		form.note = ''
	}
	
	/**
	 * 确认退菜
	 */
	function confirm() {
		const selTag = tags.value.filter(item => item.checked).map(item => item.label).join(",")
		const note = selTag + (form.note.length > 0 ? "," + form.note : "");
		console.log({
			note,
			num: number.value
		});
		if (!note) {
			return infoBox.showToast("请输入退菜原因");
		}
		let par = {
			orderId: props.data.orderId,
			refundAmount: number.value * props.data.unitPrice,
			refundReason: note,
			refundDetails: [{
				id: props.data.id,
				returnAmount: number.value * props.data.unitPrice,
				num: number.value,
			}],
		}
		emits('confirm', par)
	}
</script>

<style lang="scss" scoped>
	.number-box-btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 122rpx;
		height: 84rpx;
		background: #F7F7FA;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		border: 2rpx solid #F9F9F9;
		box-sizing: border-box;
	}

	.input {
		border: 2rpx solid #F9F9F9;
	}

	::v-deep .u-input__content__field-wrapper__field {
		height: 84rpx;
	}

	::v-deep .uni-input-input {
		text-align: center;
	}

	.gray {
		.minus::after {
			border-color: #ccc;
		}

	}

	.minus {
		&::after {
			content: '';
			display: block;
			width: 28rpx;
			height: 0rpx;
			border: 1px solid #999999;
		}
	}

	::v-deep .u-border {
		border-width: 1px !important;
	}

	::v-deep .u-number-box {
		width: 100%;
	}
</style>