订单管理页面

pagesOrder/detail/components/tuicai.vue

@@ -0,0 +1,100 @@
+<template>
+	<my-model title="退菜" ref="model" @close="onModelClose" @open="onModelOpen">
+		<template #desc>
+			<view class="u-p-30 u-text-left">
+				<view>
+					{{data.name}}
+				</view>
+				<view class="u-flex  u-m-t-32">
+					<up-number-box :buttonSize="44" :inputWidth="220" v-model="number"></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 v-if="item.checked"> </up-tag>
+							<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#999" :text="item.label" plain v-else> </up-tag>
+						</view>
+					</view>
+					<view class="u-m-t-24">
+						<up-input placeholder="备注"></up-input>
+					</view>
+				</view>
+			</view>
+		</template>
+		<template #btn>
+			<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-30">
+				<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
+				<view class="u-m-t-10">
+					<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel" box-shadow>取消</my-button>
+				</view>
+			</view>
+			
+		</template>
+	</my-model>
+</template>
+
+<script setup>
+	import {
+		ref,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		},
+		show: {
+			type: Boolean,
+			default: false
+		}
+	})
+	const emits = defineEmits(['update:show','confirm'])
+	let model = ref(null)
+	let modelShow = ref(props.show)
+	let number = ref(1)
+	const tags=ref([{label:"点错",checked:false},{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}])
+	function changeTagSel(item){
+		item.checked=!item.checked
+	}
+	watch(() => props.show, (newval) => {
+		modelShow.value = newval
+	})
+	watch(() => modelShow.value, (newval) => {
+		emits('update:show', newval)
+		if (newval) {
+			open()
+		} else {
+			close()
+		}
+	})
+	
+	function toggleModelShow(show){
+		modelShow.value=show?true:false
+	}
+
+	function onModelClose() {
+		modelShow.value = false
+	}
+
+	function onModelOpen() {
+		modelShow.value = true
+	}
+
+	function open() {
+		model.value.open()
+	}
+
+	function close() {
+		model.value.close()
+	}
+	function confirm(){
+		emits('confirm')
+	}
+</script>
+
+<style>
+</style>