100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<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> |