131 lines
2.1 KiB
Vue
131 lines
2.1 KiB
Vue
<template>
|
|
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
|
<template #desc>
|
|
<view class="u-text-left u-p-l-30 u-p-r-30 u-p-t-30 ">
|
|
<view class="u-m-t-32 u-flex ">
|
|
<uni-easyinput type="number" v-model="form.pack_number" placeholder="打包数量"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template #btn>
|
|
<view class="u-p-l-30 u-p-r-30 u-m-t-28 u-p-b-30">
|
|
<view class="">
|
|
<my-button @tap="confirm" shape="circle" fontWeight="700">确认</my-button>
|
|
<view class="u-m-t-10">
|
|
<my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</my-model>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, nextTick, ref } from 'vue';
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const $form = {
|
|
pack_number: 1
|
|
}
|
|
const form = reactive({
|
|
number: null,
|
|
...$form
|
|
})
|
|
|
|
function resetForm() {
|
|
Object.assign(form, {
|
|
...$form
|
|
})
|
|
}
|
|
|
|
const model = ref(null)
|
|
|
|
function open(data) {
|
|
console.log(data)
|
|
form.number = data.number
|
|
model.value.open()
|
|
}
|
|
|
|
function close() {
|
|
model.value.close()
|
|
}
|
|
const emits = defineEmits(['confirm'])
|
|
|
|
function confirm() {
|
|
const { pack_number } = form
|
|
if( pack_number > form.number){
|
|
uni.showToast({
|
|
title: '打包数量不能大于菜品数量',
|
|
icon: 'none'
|
|
})
|
|
return false;
|
|
}
|
|
emits('confirm', pack_number)
|
|
close()
|
|
|
|
}
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.lh34{
|
|
line-height: 34rpx;
|
|
}
|
|
.tag {
|
|
background-color: #fff;
|
|
border: 1px solid #E5E5E5;
|
|
line-height: inherit;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&.active {
|
|
border-color: #E6F0FF;
|
|
color: $my-main-color;
|
|
}
|
|
}
|
|
|
|
.hover-class {
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.discount {
|
|
.u-absolute {
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.bg1 {
|
|
background: #F7F7FA;
|
|
}
|
|
|
|
.tab {
|
|
padding: 0 80rpx;
|
|
}
|
|
|
|
.border {
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.input-box {
|
|
padding: 22rpx 32rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.placeholder-class {
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |