first
This commit is contained in:
232
pagesOrder/detail/components/tuicai.vue
Normal file
232
pagesOrder/detail/components/tuicai.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<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="1" :max="data.num" :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="number"></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 props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
productId:'-999'
|
||||
}
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const form = reactive({
|
||||
note: ''
|
||||
})
|
||||
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
|
||||
}])
|
||||
let timer = null
|
||||
|
||||
function parseIntNumber(val, isNow) {
|
||||
console.log(val);
|
||||
let newval = parseInt(val)
|
||||
if (newval > props.data.num) {
|
||||
newval = props.data.num
|
||||
}
|
||||
if (newval < 1) {
|
||||
newval = 1
|
||||
}
|
||||
if (isNow) {
|
||||
number.value = parseInt(newval)
|
||||
return
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
number.value = newval
|
||||
}, 100)
|
||||
}
|
||||
|
||||
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() {
|
||||
number.value=1
|
||||
modelShow.value = false
|
||||
}
|
||||
|
||||
function onModelOpen() {
|
||||
modelShow.value = true
|
||||
}
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
if(props.data.productId=='-999'){
|
||||
number.value=props.data.num
|
||||
}
|
||||
}
|
||||
|
||||
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("请输入退菜原因");
|
||||
}
|
||||
emits('confirm', {
|
||||
note,
|
||||
num: number.value
|
||||
})
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user