117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<!-- 取餐号组件 -->
|
|
<template>
|
|
<el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
|
|
<el-input :type="props.inputType" v-model="number" :placeholder="props.placeholder" readonly></el-input>
|
|
<div class="keybord_wrap">
|
|
<div v-for="item in 9" :key="item">
|
|
<el-button plain type="info" style="width: 100%" @click="inputHandle(item)">{{ item }}</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" disabled style="width: 100%">.</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" style="width: 100%" @click="inputHandle(0)">0</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button plain type="info" icon="CloseBold" style="width: 100%" @click="delHandle"></el-button>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<el-button type="primary" style="width: 100%" :loading="loading" @click="confirmHandle">确认</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: [String, Number],
|
|
default: 1, // 1取餐号 2密码
|
|
},
|
|
inputType: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "标题",
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "提示",
|
|
},
|
|
});
|
|
|
|
const dialogVisible = ref(false);
|
|
const number = ref("");
|
|
|
|
const emit = defineEmits(["success"]);
|
|
|
|
function show() {
|
|
dialogVisible.value = true;
|
|
}
|
|
|
|
function opne() {
|
|
number.value = "";
|
|
}
|
|
|
|
// 输入
|
|
function inputHandle(n) {
|
|
number.value += n;
|
|
}
|
|
|
|
// 删除
|
|
function delHandle() {
|
|
if (!number.value) return;
|
|
number.value = number.value.substring(0, number.value.length - 1);
|
|
}
|
|
|
|
const loading = ref(false)
|
|
// 确认
|
|
function confirmHandle() {
|
|
if (!number.value) return
|
|
if (props.type == 2) {
|
|
if (number.value.length < 6) {
|
|
ElMessage.error('请输入正确的密码')
|
|
return
|
|
} else {
|
|
loading.value = true
|
|
emit("success", number.value);
|
|
dialogVisible.value = false;
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
} else {
|
|
emit("success", number.value);
|
|
dialogVisible.value = false;
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
show,
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-input__inner) {
|
|
height: 60px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.keybord_wrap {
|
|
padding: var(--el-font-size-base) 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
gap: var(--el-font-size-base);
|
|
|
|
:deep(.el-button--large) {
|
|
height: 60px;
|
|
}
|
|
}
|
|
</style>
|